-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (101 loc) · 3.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mon coeur</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<style>
html {
height: 100%;
font-family: 'Indie Flower', cursive;
background-color: rgba(0,0,0, 0.90);
}
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 6vh;
color: #fafafa;
cursor: pointer;
}
#jetaime {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
text-align: center;
margin-top: 5vh;
}
#intensite {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 5vh;
text-align: center;
}
#coeur {
width: 5vh;
fill: rgba(244, 66, 89, 1);
transition-property: width;
transition-timing-function: cubic-bezier(0.6,0,0.4,1);
filter: drop-shadow(0 0 20px rgba(244, 66, 89, 0.8));
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.pulse {
animation: pulse 2s ease-out infinite 1s;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.03); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div id="jetaime">Je t'aime...</div>
<svg id="coeur" viewBox="0 0 32 29.6">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
<div id="intensite"></div>
<script>
// On ne va pa se priver du charme de la langue française quand même ?
// Je les appelle coeurEl et entensiteEl à cause d'un putain de bug de ***** sur ***** de navigateur de ***** qu'est safari
const coeurEl = document.getElementById('coeur')
const intensiteEl = document.getElementById('intensite')
let currentTimeout
const intensites = [
'pas du tout !',
'un peu...',
'beaucoup',
'passionnément !',
'à la folie !'
]
document.body.addEventListener('click', () => {
window.clearTimeout(currentTimeout)
coeurEl.classList.remove('pulse')
coeurEl.style.transitionDuration = '0s'
coeurEl.style.width = '5vh'
intensiteEl.innerHTML = ''
window.setTimeout(() => {
const prophetie = Math.floor(Math.random() * intensites.length)
coeurEl.style.transitionDuration = '3s'
if (prophetie > 0) {
coeurEl.style.width = (5 + prophetie * 11) + 'vh'
} else {
coeurEl.style.width = 0
}
currentTimeout = window.setTimeout(() => {
intensiteEl.innerHTML = intensites[prophetie]
coeurEl.classList.add('pulse')
}, 3000)
}, 100) // on laisse un peu le temps au coeur de se remettre de ses émotions
}, false)
</script>
</body>
</html>