Tak za bardzo to nie wierzcie w te wyniki 😜

Walentynki, obchodzone 14 lutego, to coroczne święto zakochanych.

Nazwa pochodzi od św. Walentego, chrześcijańskiego biskupa i męczennika, który żył w III wieku w Cesarstwie Rzymskim za czasów panowania Klaudiusza II Gockiego.

Święto to jest obchodzone na całym świecie i ma swoje korzenie zarówno w chrześcijańskiej tradycji, jak i w starożytnych rzymskich zwyczajach.

Poniżej znajdziecie jak wstawić ten gadżet na własną stronę.

Poniżej możecie obliczyć statystycznie wasze uczucia do siebie. 💞

Miernik miłośći

Oto kilka ciekawostek na temat Walentynek:

Św. Walenty: Święto jest nazwane na cześć św. Walentego, którego wspomnienie liturgiczne w Kościele katolickim również przypada na ten dzień.
Zwyczaje: W Walentynki ludzie obdarowują swoich ukochanych prezentami, kartkami z wyznaniem miłości oraz czerwonymi różami.
Historia: Obchody Walentynek trafiły do Polski wraz z kultem św. Walentego z Bawarii i Tyrolu. W latach 80. XX wieku zaczęto nieformalnie obchodzić to święto, a w latach 90. XX wieku stało się bardziej popularne.
Symbole: Czerwone serca i kupidyn (Amor) są często kojarzone z Walentynkami.

Niech te Walentynki będą pełne miłości i radości dla Ciebie i Twojej ukochanej osoby! 🌹❤️

Wstawianie na własną stronę

Jak wstawić Love kalkulator na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Tworzymy odpowiednie pliki:

index.html
style.css
lovecalculator.js
Należy pobrać grafikę lovelogo.png.

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="msapplication-TileColor" content="#ffffff">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
<title>Love kaluulator</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<canvas id="canvas">Canvas not supported.</canvas>
<section class="container">
  <form class="container">
    <div class="pic"><img src="lovelogo.png" alt="" srcset=""></div>
    <p style="color: white; font-size: 18px; text-align: center;">Wpisz wasze imiona, aby zobaczyć, jak bardzo jesteście zakochani</p>
    <div class="text-input">
      <input type="text" name="Name1" id="Name1" id="input1" placeholder="Twoje imię">
      <label for="input1">Imię</label>
      <br>
      <br>
    </div>
    <div class="heart"></div>
    <div class="text-input">
      <input type="text" name="Name2" id="Name2" id="Name1" id="input1" placeholder="Imię Twojej sympatii">
      <label for="input1">Imię</label>
      <br>
      <br>
    </div>
    <button class="calc custom-btn btn-12"><span>Sprwdźmy</span><span>Oblicz</span></button>
    <h1></h1>
    <h2></h2>

  </form>
</section>
<script src="lovecalculator.js"></script>
</body>
</html>

style.css

body {
  background-color: blueviolet;
  color: whitesmoke;
  font-family: "Dancing Script", sans-serif;
  font-size: 1.2rem;
  margin: 0;
  padding: 0;
}
a:link active visited {
  color: white;
  text-decoration: none;
}
canvas#canvas {
  position: relative;
  clear: both;
  background-color: blueviolet;
  background: -webkit-linear-gradient(to top, #ffdde1, #ee9ca7);
  background: linear-gradient(to top, #9405f3, #ee9ca7);
}
.container {
  margin: 5px auto;
  position: absolute;
  top: 50%; /* position the top  edge of the element at the middle of the parent */
  left: 50%; /* position the left edge of the element at the middle of the parent */
  width: 400px;
  transform: translate(-50%, -50%);
  padding: 20px;
  height: auto;
  border: 1px solid transparent;
  box-shadow: 0 0 10px 0 gray;
  background-color: rgb(247, 171, 209);
}
h1 {
  font-size: 24px;
  text-align: center;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
  from {
    text-shadow: 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #e60073, 0 0 10px #e60073, 0 0 16px #e60073, 0 0 20px #e60073, 0 0 24px #e60073;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 12px #ff4da6, 0 0 16px #ff4da6, 0 0 18px #ff4da6, 0 0 21px #ff4da6, 0 0 24px #ff4da6, 0 0 28px #ff4da6;
  }
}
h2 {
  font-size: 24px;
  text-align: center;
  color: #fff;
  text-align: center;
}
label {
  margin-bottom: 1rem;
}
input {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-size: 1.5rem;
}
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: block;
  margin: 0 auto;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  outline: none;
}
.btn-12 {
  position: relative;
  right: 40px;
  bottom: 20px;
  border: none;
  box-shadow: none;
  width: 130px;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.btn-12 span {
  background-color: #1fd1f9;
  background-image: linear-gradient(315deg, #ec81d5 0%, #fe21ce 74%);
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  border-radius: 5px;
  margin: 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.btn-12 span:nth-child(1) {
  box-shadow:
    -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
input:focus {
  outline: none;
}
.pic {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic img {
  width: 200px;
  height: 100px;
}
.text-input {
  position: relative;
  margin-top: 50px;
}
input[type="text"] {
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 40px;
  font-family: "Dancing Script", sans-serif;
  box-sizing: border-box;
  outline: none;
  border: 1px solid lightgray;
  border-radius: 3px;
  padding: 10px 10px 10px 100px;
  transition: all 0.1s ease-out;
}
input[type="text"] + label {
  position: absolute;
  top: 0;
  left: 50px;
  bottom: 0;
  height: 40px;
  line-height: 40px;
  color: white;
  border-radius: 3px 0 0 3px;
  padding: 0 20px;
  background: #E03616;
  transform: translateZ(0) translateX(0);
  transition: all 0.3s ease-in;
  transition-delay: 0.2s;
}
input[type="text"]:focus + label {
  transform: translateY(-120%) translateX(0%);
  border-radius: 3px;
  transition: all 0.1s ease-out;
}
input[type="text"]:focus {
  padding: 10px;
  transition: all 0.3s ease-out;
  transition-delay: 0.2s;
}
.heart {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background-color: red;
  height: 20px;
  width: 20px;
  animation: beat 1s infinite;
  transform: rotate(-45deg);
}
.heart:before {
  content: "";
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: -10px;
  left: 0;
  height: 20px;
  width: 20px;
}
.heart:after {
  content: "";
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 0;
  left: 10px;
  height: 20px;
  width: 20px;
}
@keyframes beat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  50% {
    transform: scale(1.3) rotate(-45deg);
  }
  70% {
    transform: scale(1.5) rotate(-45deg);
  }
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: "Dancing Script", sans-serif;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: "Dancing Script", sans-serif;
}
::-ms-input-placeholder { /* Microsoft Edge */
  font-family: "Dancing Script", sans-serif;
}
@media only screen and (max-width: 600px) {
  .container {
    width: 250px;
    height: auto;
  }
  h1, h2 {
    font-size: 20px;
  }
  input {
    margin-bottom: 0;
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    font-size: 1rem;
  }
  .pic img {
    width: 130px;
    height: 75px;
  }
  input[type="text"] {
    width: 200px;
    height: 30px;
  }
  input[type="text"] + label {
    height: 30px;
    line-height: 30px;
    left: 20px;
  }
  .heart {
    height: 10px;
    width: 10px;
  }
  .heart:before {
    top: -5px;
    height: 10px;
    width: 10px;
  }
  .heart:after {
    left: 5px;
    height: 10px;
    width: 10px;
  }
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-family: "Dancing Script", sans-serif;
    opacity: 1; /* Firefox */
    font-size: 13px;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family: "Dancing Script", sans-serif;
  }
  ::-ms-input-placeholder { /* Microsoft Edge */
    font-family: "Dancing Script", sans-serif;
  }
}

lovecalculator.js

// JavaScript Document
// www.skrip.pl
let button = document.querySelector('button');


button.addEventListener('click', function (event) {


  event.preventDefault();

  const loveTable = [
    [85, 52, 15, 35, 43, 21, 98, 12, 11],
    [5, 100, 63, 17, 84, 25, 31, 82, 91],
    [51, 45, 33, 50, 20, 30, 40, 60, 18],
    [84, 81, 73, 29, 74, 12, 32, 96, 99],
    [47, 98, 65, 69, 79, 53, 57, 05, 03],
    [17, 13, 77, 33, 88, 55, 93, 82, 26],
    [15, 55, 05, 49, 87, 25, 95, 10, 75],
    [19, 54, 89, 67, 45, 78, 54, 43, 85],
    [56, 94, 49, 95, 07, 48, 37, 73, 58]
  ];

  let Score = 0;
  let name1 = document.getElementById('Name1').value;
  name1 = name1.toUpperCase();
  let name2 = document.getElementById('Name2').value;
  name2 = name2.toUpperCase();

  let ScoreFunction = function (name) {
    let NameArray = name.split('');
    for (i = 0; i < NameArray.length; i++) {
      if (NameArray[i].includes('A')) {
        Score += 1;
      } else if (NameArray[i].includes('E')) {
        Score += 5;
      } else if (NameArray[i].includes('I')) {
        Score += 9;
      } else if (NameArray[i].includes('O')) {
        Score += 6;
      } else if (NameArray[i].includes('U')) {
        Score += 3;
      }
     
    }
    return Score;
  }



  let Name1Score = ScoreFunction(name1);
  let Name2Score = ScoreFunction(name2);

  let SingleDigitSoulUrgeNumber = function (num) {
    let sum = 0;
    while (num > 0) {
      sum += parseInt(num % 10);
      num = parseInt(num / 10);
    }
    if (sum > 9) {
      sum = SingleDigitSoulUrgeNumber(sum);
    }
    return sum;
  }

  let Name1SoulUrgeNumber = SingleDigitSoulUrgeNumber(Name1Score);
  let Name2SoulUrgeNumber = SingleDigitSoulUrgeNumber(Name2Score);

  if (Name1SoulUrgeNumber > 0 & Name2SoulUrgeNumber > 0) {

    let index1 = Name1SoulUrgeNumber - 1;
    let index2 = Name2SoulUrgeNumber - 1;

    let lovePercent = loveTable[index1][index2];
    
    

    document.querySelector('h1').innerHTML = `Twoje uczucia ${lovePercent}%`;
    if (lovePercent >= 75) {
      document.querySelector('h2').innerHTML = `Ooo – to coś wyjątkowego, jesteście razem „bezbłędni”.!!`;
    } else if(lovePercent >= 60){
      document.querySelector('h2').innerHTML = `Twoje uczucia potrzebują trochę więcej miłości.`;
    } else if (lovePercent >= 50){
      document.querySelector('h2').innerHTML = `Dzięki temu wynikowi nie jesteście dla siebie idealni, ale możesz sprawić, że to zadziała!`;
    }
    else if (lovePercent < 50){
      document.querySelector('h2').innerHTML = `Cholera, twoja zgodność jest nie za bardzo. Nie zdecydowałbym się na to, gdybym był na Twoim miejscu.`;
    }

  } else {
    document.querySelector('h1').innerHTML = `Wpisz właściwe imię!!!`;
  }

})

class Tool {
  // random number.
  static randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  // random color rgb.
  static randomColorRGB() {
    return (
      "rgb(" +
      this.randomNumber(0, 255) +
      ", " +
      this.randomNumber(0, 255) +
      ", " +
      this.randomNumber(0, 255) +
      ")"
    );
  }
  // random color hsl.
  static randomColorHSL(saturation, lightness) {
    return (
      "hsl(" +
      this.randomNumber(0, 360) +
      ", " +
      saturation +
      "%, " +
      lightness +
      "%)"
    );
  }
}

/*
  When want to use Angle and radian.
*/

class Angle {
  constructor(a) {
    this.a = a;
    this.rad = this.a * Math.PI / 180;
  }
  
  incDec(num) {
    this.a += num;
    this.rad = this.a * Math.PI / 180;
  }
}

let canvas;

class Canvas {
  constructor() {
    this.canvas = document.getElementById("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.width = this.canvas.width = window.innerWidth;
    this.height = this.canvas.height = window.innerHeight;
    this.mouseX = null;
    this.mouseY = null;
    this.heartNum = 100;
    this.hearts = [];
    if (this.width < 768) {
      this.heartNum = 50;
    } else {
      this.heartNum = 100;
    }
  }

  init() {
    for (let i = 0; i < this.heartNum; i++) {
      const s = new Heart(
        this.ctx,
        Tool.randomNumber(0, this.width),
        Tool.randomNumber(this.height - this.height / 2, this.height),
        Tool.randomNumber(10, 80)
      );
      this.hearts.push(s);
    }
  }

  render() {
    this.ctx.clearRect(0, 0, this.width, this.height);
    for (let i = 0; i < this.hearts.length; i++) {
      this.hearts[i].render(i);
    }
  }

  resize() {
    this.width = this.canvas.width = window.innerWidth;
    this.height = this.canvas.height = window.innerHeight;
    if (this.width < 768) {
      this.heartNum = 50;
    } else {
      this.heartNum = 100;
    }
  }
}

class Heart {
  constructor(ctx, x, y, r) {
    this.ctx = ctx;
    this.init(x, y, r);
  }

  init(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r * 0.8;
    this.maxR = r;
    this.c = 'white';
    this.ga = Math.random();
    this.l = Tool.randomNumber(50, 500);
    this.sl = this.l;
    this.v = {
      r: 0,
      x: Tool.randomNumber(-1, 1) * Math.random(),
      y: -Math.random()
    };
  }

  draw() {
    const ctx = this.ctx;
    ctx.save();
    ctx.globalAlpha = this.ga;
    ctx.fillStyle = this.c;
    ctx.beginPath();
    ctx.moveTo(this.x, this.y + this.r);
    ctx.bezierCurveTo(
      this.x - this.r - this.r / 5,
      this.y + this.r / 1.5,
      this.x - this.r,
      this.y - this.r,
      this.x,
      this.y - this.r / 3
    );
    ctx.bezierCurveTo(
      this.x + this.r,
      this.y - this.r,
      this.x + this.r + this.r / 5,
      this.y + this.r / 1.5,
      this.x,
      this.y + this.r
    );
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }

  stretch() {
    this.v.r += (this.maxR - this.r) * 0.1;
    this.v.r *= 0.9;
    this.r += this.v.r;
    if (this.l < 0) {
      this.l = Tool.randomNumber(50, 200);
      this.init(
        Tool.randomNumber(0, canvas.width),
        Tool.randomNumber(canvas.height - canvas.height / 2, canvas.height),
        Tool.randomNumber(10, 80)
      );
    }
  }

  updatePosition() {
    this.v.y -= 0.001;
    this.y += this.v.y;
    this.x += this.v.x;
  }

  updateParams() {
    const ratio = this.l / this.sl / 2;
    this.ga = ratio;
    this.l -= 1;
  }

  render() {
    this.updatePosition();
    this.updateParams();
    this.stretch();
    this.draw();
  }
}

(function () {
  "use strict";
  window.addEventListener("load", function () {
    canvas = new Canvas();
    canvas.init();
    function render() {
      window.requestAnimationFrame(function () {
        canvas.render();
        render();
      });
    }

    render();

    // event
    window.addEventListener(
      "resize",
      function () {
        canvas.resize();
        canvas.hearts = [];
        canvas.particles = [];
        canvas.init();
      },
      false
    );
  });
})();

Top Stories

Jak nie zostać ofiarą oszustów. Sposób na rozpoznanie fałszywego maila

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Walentynki – Love kalkulator – oblicz Wasze uczucia :)

Walentynki, obchodzone 14 lutego, to coroczne święto zakochanych.

Tak za bardzo to nie wierzcie w te wyniki 😜

Poniżej możecie obliczyć statystycznie wasze uczucia do siebie. 💞

Miernik miłośći

Wstawianie na własną stronę

Jak wstawić Love kalkulator na własną stronę?

index.html

style.css

lovecalculator.js

Lub pobrać gotowca

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy