-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (121 loc) · 4.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Calculator</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 0;
padding: 0;
background: url('backbg.jpg') no-repeat center center fixed;
background-size: cover;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
header {
background-color: #af7c7c;
padding: 1rem;
color: rgba(0, 0, 0, 0.817);
font-size: 24px;
width: 100%;
box-sizing: border-box;
}
main {
padding: 2rem;
box-sizing: border-box;
width: 100%;
max-width: 600px; /* Adjust max-width as needed */
margin: auto;
background-color: rgba(232, 149, 149, 0.8); /* Adjust background color and opacity */
border-radius: 15px;
}
label {
display: block;
margin-bottom: 0.5rem;
text-align: left;
}
input {
width: calc(100% - 1rem); /* Adjust the width for the padding */
padding: 0.5rem;
margin-bottom: 1rem;
box-sizing: border-box;
border: none;
border-radius: 8px; /* Adjust the border-radius for a more cylindrical shape */
outline: none;
}
button {
background-color: #4caf50;
color: rgb(9, 0, 0);
padding: 0.5rem 1rem;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 8px; /* Adjust the border-radius for a more cylindrical shape */
outline: none;
}
#heart {
width: 30px;
height: auto;
margin: 0 10px;
}
#result {
font-size: 24px;
margin-top: 1rem;
}
#loveGif {
display: none; /* Initially hide the GIF */
width: 100px; /* Adjust the width as needed */
height: auto;
}
</style>
</head>
<body>
<header>
<div>꧁•⊹٭𝙻𝚘𝚟𝚎 𝙲𝚊𝚕𝚌𝚞𝚕𝚊𝚝𝚘𝚛٭⊹•꧂</div>
</header>
<main>
<label for="name1">Your Name:</label>
<input type="text" id="name1" placeholder="Enter your name">
<img src="heart.gif" alt="heart" id="heart">
<label for="name2">Partner's Name:</label>
<input type="text" id="name2" placeholder="Enter partner's name">
<button onclick="calculateLove()">Calculate Love</button>
<div id="result"></div>
<img id="loveGif" src="giph.gif" alt="love gif">
</main>
<script>
function calculateLove() {
const name1 = document.getElementById('name1').value.toLowerCase();
const name2 = document.getElementById('name2').value.toLowerCase();
// Show the love GIF
document.getElementById('loveGif').style.display = 'inline';
const lovePercentage = calculateLovePercentage(name1, name2);
document.getElementById('result').innerHTML = `Your love percentage with ${name2} is: ${lovePercentage}%`;
// Hide the love GIF after 3 seconds
setTimeout(function() {
document.getElementById('loveGif').style.display = 'none';
}, 30000);
}
function calculateLovePercentage(name1, name2) {
const combinedNames = name1 + 'loves' + name2;
const hash = hashString(combinedNames);
// Map the hash code to a percentage between 50% and 100%
const lovePercentage = ((hash % 51) + 50);
return lovePercentage;
}
function hashString(s) {
let hash = 0;
for (let i = 0; i < s.length; i++) {
hash = (hash << 5) - hash + s.charCodeAt(i);
}
return hash;
}
</script>
</body>
</html>