├── icon.png ├── music.mp3 ├── README.md ├── index2.html ├── index.html ├── main2.css ├── main2.js ├── main.js └── main.css /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Confession-Website/HEAD/icon.png -------------------------------------------------------------------------------- /music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Confession-Website/HEAD/music.mp3 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Confession Website 2 | 3 | ## Author : Hoang Manh Khiem (Skromnyy) 4 | 5 | ## Language used: 6 | + HTML 7 | + CSS 8 | + Javascript 9 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Love 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | 18 | 19 | 25 | 26 | 31 | 32 | 37 | 38 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Love 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 |
17 | 20 |
21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 | SELF- DESTRUCT 36 |
37 | 38 |
39 |
YOUR ANSWER IS FALSE
40 | AGAIN PLEASE 41 |
42 | 43 | 44 |
45 |
ANSWER NOW
46 |
9
47 | YES 48 | NO 49 | Oc Cho 50 |
51 | 52 |
53 |
54 | 55 |
56 | 57 |
58 | 59 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /main2.css: -------------------------------------------------------------------------------- 1 | body{ 2 | overflow: hidden; 3 | margin: 0; 4 | } 5 | h1{ 6 | position: fixed; 7 | top: 50%; 8 | left: 0; 9 | width: 100%; 10 | text-align: center; 11 | transform:translateY(-50%); 12 | font-family: 'Love Ya Like A Sister', cursive; 13 | font-size: 40px; 14 | color: #c70012; 15 | padding: 0 20px; 16 | } 17 | @media (min-width:1200px){ 18 | h1{ 19 | font-size: 60px; 20 | } 21 | } 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | * { 30 | padding: 0; 31 | margin: 0; 32 | } 33 | 34 | body { 35 | background-color:bisque; 36 | } 37 | 38 | h1 { 39 | font-family: 'Love Ya Like A Sister', cursive; 40 | font-size: 7em; 41 | font-weight: 50px; 42 | text-align: center; 43 | margin-top: 2em; 44 | font-weight: 600; 45 | position: fixed; 46 | top: 50%; 47 | left: 0; 48 | width: 100%; 49 | text-align: center; 50 | transform:translateY(-200%); 51 | 52 | } 53 | 54 | h1 span { 55 | display: inline-block; 56 | } 57 | 58 | h1 span span{ 59 | display: inline-block; 60 | width: auto; 61 | margin-right: -0.3em; 62 | animation: animate-characters 0.75s var(--index) forwards; 63 | animation-duration: 4s ; 64 | animation-iteration-count: infinite; 65 | opacity: 0; 66 | position: relative; 67 | } 68 | 69 | @keyframes animate-characters { 70 | 0% { 71 | bottom: -0.7em; 72 | opacity: 1; 73 | color:azure; 74 | } 75 | 76 | 50% { 77 | bottom: 0.7em; 78 | color:tomato; 79 | } 80 | 81 | 100% { 82 | bottom: 0; 83 | opacity: 1; 84 | } 85 | } 86 | 87 | audio { 88 | 89 | position: absolute; 90 | top: 105%; 91 | right: 44%; 92 | animation: fadein ease 5s; 93 | } 94 | 95 | @keyframes fadein { 96 | from { 97 | opacity: 0; 98 | } 99 | to { 100 | opacity: 1; 101 | } 102 | 103 | } -------------------------------------------------------------------------------- /main2.js: -------------------------------------------------------------------------------- 1 | var canvas = document.querySelector("canvas"), 2 | ctx = canvas.getContext("2d"); 3 | 4 | var ww,wh; 5 | 6 | function onResize(){ 7 | ww = canvas.width = window.innerWidth; 8 | wh = canvas.height = window.innerHeight; 9 | } 10 | 11 | ctx.strokeStyle = "red"; 12 | ctx.shadowBlur = 25; 13 | ctx.shadowColor = "hsla(0, 100%, 60%,0.5)"; 14 | 15 | var precision = 100; 16 | var hearts = []; 17 | var mouseMoved = false; 18 | function onMove(e){ 19 | mouseMoved = true; 20 | if(e.type === "touchmove"){ 21 | hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY)); 22 | hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY)); 23 | } 24 | else{ 25 | hearts.push(new Heart(e.clientX, e.clientY)); 26 | hearts.push(new Heart(e.clientX, e.clientY)); 27 | } 28 | } 29 | 30 | var Heart = function(x,y){ 31 | this.x = x || Math.random()*ww; 32 | this.y = y || Math.random()*wh; 33 | this.size = Math.random()*2 + 1; 34 | this.shadowBlur = Math.random() * 10; 35 | this.speedX = (Math.random()+0.2-0.6) * 8; 36 | this.speedY = (Math.random()+0.2-0.6) * 8; 37 | this.speedSize = Math.random()*0.05 + 0.01; 38 | this.opacity = 1; 39 | this.vertices = []; 40 | for (var i = 0; i < precision; i++) { 41 | var step = (i / precision - 0.5) * (Math.PI * 2); 42 | var vector = { 43 | x : (15 * Math.pow(Math.sin(step), 3)), 44 | y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step)) 45 | } 46 | this.vertices.push(vector); 47 | } 48 | } 49 | 50 | Heart.prototype.draw = function(){ 51 | this.size -= this.speedSize; 52 | this.x += this.speedX; 53 | this.y += this.speedY; 54 | ctx.save(); 55 | ctx.translate(-1000,this.y); 56 | ctx.scale(this.size, this.size); 57 | ctx.beginPath(); 58 | for (var i = 0; i < precision; i++) { 59 | var vector = this.vertices[i]; 60 | ctx.lineTo(vector.x, vector.y); 61 | } 62 | ctx.globalAlpha = this.size; 63 | ctx.shadowBlur = Math.round((3 - this.size) * 10); 64 | ctx.shadowColor = "hsla(0, 100%, 60%,0.5)"; 65 | ctx.shadowOffsetX = this.x + 1000; 66 | ctx.globalCompositeOperation = "screen" 67 | ctx.closePath(); 68 | ctx.fill() 69 | ctx.restore(); 70 | }; 71 | 72 | 73 | function render(a){ 74 | requestAnimationFrame(render); 75 | 76 | hearts.push(new Heart()) 77 | ctx.clearRect(0,0,ww,wh); 78 | for (var i = 0; i < hearts.length; i++) { 79 | hearts[i].draw(); 80 | if(hearts[i].size <= 0){ 81 | hearts.splice(i,1); 82 | i--; 83 | } 84 | } 85 | } 86 | 87 | 88 | 89 | onResize(); 90 | window.addEventListener("mousemove", onMove); 91 | window.addEventListener("touchmove", onMove); 92 | window.addEventListener("resize", onResize); 93 | requestAnimationFrame(render); -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | var theCount; 2 | var alarm = document.getElementById("alarm"); 3 | var panel = document.getElementById("panel"); 4 | var turnOff = document.getElementById("turn-off"); 5 | var turnOffHor = document.getElementById("closing"); 6 | var detonate = document.getElementById("detonate"); 7 | var again = document.getElementById("again"); 8 | var panel2 = document.getElementById("panel2"); 9 | alarm.volume = 0.5; //volume level 10 | 11 | var time = document.getElementById("time"); 12 | function showCountDown() { 13 | time.innerText = time.innerText - 1; 14 | if (time.innerText == 0) { 15 | clearInterval(theCount); 16 | time.classList.add("crono"); 17 | abort.classList.add("hide"); 18 | no.classList.add("hide"); 19 | again.classList.add("hide"); 20 | 21 | 22 | detonate.classList.add("show"); 23 | setTimeout(function () { 24 | turnOff.classList.add("close"); 25 | turnOffHor.classList.add("close"); 26 | reload.classList.add("show"); 27 | alarm.pause(); 28 | }, 1500); 29 | } 30 | 31 | } 32 | 33 | var cover = document.getElementById("cover"); 34 | cover.addEventListener("click", function () { 35 | if (this.className == "box") this.classList.add("opened"); 36 | else this.classList.remove("opened"); 37 | }); 38 | 39 | var btn = document.getElementById("activate"); 40 | activate.addEventListener("click", function () { 41 | this.classList.add("pushed"); 42 | alarm.load(); 43 | alarm.currentTime = 10.1; 44 | alarm.play(); 45 | setTimeout(function () { 46 | panel.classList.add("show"); 47 | theCount = setInterval(showCountDown, 1000); 48 | alarm.load(); 49 | alarm.play(); 50 | }, 500); 51 | }); 52 | 53 | var abort = document.getElementById("abort"); 54 | abort.addEventListener("click", function () { 55 | btn.classList.remove("pushed"); 56 | panel.classList.remove("show"); 57 | clearInterval(theCount); 58 | time.innerText = 9; 59 | alarm.pause(); 60 | alarm.currentTime = 10; 61 | alarm.play(); 62 | 63 | }); 64 | 65 | var no = document.getElementById("no"); 66 | no.addEventListener("click", function () { 67 | btn.classList.remove("pushed"); 68 | panel.classList.remove("show"); 69 | clearInterval(theCount); 70 | time.innerText = 9; 71 | alarm.pause(); 72 | alarm.currentTime = 10; 73 | alarm.play(); 74 | panel2.classList.add("show"); 75 | }); 76 | 77 | var again = document.getElementById("again"); 78 | again.addEventListener("click", function () { 79 | btn.classList.remove("pushed"); 80 | panel2.classList.remove("show"); 81 | no.classList.remove("pushed"); 82 | clearInterval(theCount); 83 | time.innerText = 9; 84 | alarm.pause(); 85 | alarm.currentTime = 10; 86 | alarm.play(); 87 | 88 | 89 | btn.classList.add("pushed"); 90 | alarm.load(); 91 | alarm.currentTime = 10.1; 92 | alarm.play(); 93 | setTimeout(function () { 94 | panel.classList.add("show"); 95 | theCount = setInterval(showCountDown, 1000); 96 | alarm.load(); 97 | alarm.play(); 98 | }, 500); 99 | }); 100 | 101 | 102 | 103 | 104 | var reload = document.getElementById("restart"); 105 | reload.addEventListener("click", function () { 106 | panel.classList.remove("show"); 107 | turnOff.classList.remove("close"); 108 | turnOffHor.classList.remove("close"); 109 | abort.classList.remove("hide"); 110 | no.classList.remove("hide"); 111 | 112 | 113 | 114 | detonate.classList.remove("show"); 115 | cover.classList.remove("opened"); 116 | btn.classList.remove("pushed"); 117 | this.classList.remove("show"); 118 | time.classList.remove("crono"); 119 | time.innerText = 9; 120 | }); 121 | 122 | setTimeout(function () { 123 | cover.classList.remove("opened"); 124 | }, 100); 125 | 126 | var mute = document.getElementById("mute"); 127 | mute.addEventListener("click", function () { 128 | if (this.className == "muted") { 129 | alarm.muted = false; 130 | this.classList.remove("muted"); 131 | } else { 132 | alarm.muted = true; 133 | this.classList.add("muted"); 134 | } 135 | }); 136 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | overflow: hidden; 10 | background-color: #151515; 11 | } 12 | 13 | .base { 14 | background: #cacaca; 15 | width: 20vmin; 16 | border-radius: 27vmin; 17 | box-shadow: 0 6vmin 0.15vmin 0vmin #777, 0 4vmin 0.15vmin 0vmin #777, 0 2vmin 0.15vmin 0vmin #777; 18 | padding: 0vmin 2vmin 2vmin 2vmin; 19 | z-index: 1; 20 | transform: rotateX(60deg) rotateZ(0deg); 21 | margin-top: -4.5vmin; 22 | height: 22vmin; 23 | } 24 | 25 | button#activate { 26 | background: #d60505; 27 | border: 0; 28 | width: 20vmin; 29 | height: 19vmin; 30 | border-radius: 100%; 31 | position: relative; 32 | cursor: pointer; 33 | outline: none; 34 | z-index: 2; 35 | box-shadow: 0 4vmin 0.15vmin 0vmin #af0000, 0 2vmin 0.15vmin 0vmin #af0000; 36 | top: -2.5vmin; 37 | border: 0.5vmin solid #af0000a1; 38 | transition: all 0.25s ease 0s; 39 | } 40 | 41 | button#activate:hover { 42 | box-shadow: 0 3vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000; 43 | top: -1.5vmin; 44 | transition: all 0.5s ease 0s; 45 | } 46 | button#activate:active, button#activate.pushed { 47 | box-shadow: 0 1vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000; 48 | top: 0.5vmin; 49 | transition: all 0.25s ease 0s; 50 | } 51 | button#activate.pushed { 52 | box-shadow: 0 0 20px 10px #ff3c3c, 0 0 100px 50px #ff2828; 53 | background: #ff0000; 54 | border-bottom: 3px solid #00000020; 55 | } 56 | 57 | 58 | .box { 59 | transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg); 60 | transform-origin: center top; 61 | transform-style: preserve-3d; 62 | width: 45vmin; 63 | position: absolute; 64 | z-index: 5; 65 | margin-top: 27vmin; 66 | transition: transform 1s ease 0s; 67 | cursor: pointer; 68 | height: 45vmin; 69 | margin-left: -32vmin; 70 | } 71 | 72 | .box.opened { 73 | transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 180deg); 74 | } 75 | 76 | .box div { 77 | position: absolute; 78 | width: 45vmin; 79 | height: 45vmin; 80 | background: #00bcd47d; 81 | opacity: 0.5; 82 | border: 3px solid #00a4b9; 83 | border-radius: 3px; 84 | box-sizing: border-box; 85 | box-shadow: 0 0 3px 0 #00bcd48a; 86 | } 87 | 88 | .box > div:nth-child(1) { 89 | opacity: 0; 90 | } 91 | .box > div:nth-child(2) { 92 | transform: rotateX(90deg) translate3d(0px, 5vmin, 5vmin); 93 | height: 10vmin; 94 | } 95 | .box > div:nth-child(3) { 96 | transform: rotateX(0deg) translate3d(0, 0, 10vmin); 97 | } 98 | .box > div:nth-child(4) { 99 | transform: rotateX(270deg) translate3d(0px, -5vmin, 40vmin); 100 | height: 10vmin; 101 | } 102 | .box > div:nth-child(5) { 103 | transform: rotateY(90deg) translate3d(-5vmin, 0, 40vmin); 104 | width: 10vmin; 105 | } 106 | .box > div:nth-child(6) { 107 | transform: rotateY(-90deg) translate3d(5vmin, 0vmin, 5vmin); 108 | width: 10vmin; 109 | } 110 | 111 | 112 | 113 | 114 | .grid { 115 | background:repeating-linear-gradient(150deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 49px, rgb(255 255 255 / 10%) 50px ,rgb(0 0 0 / 30%) 51px , rgba(255,255,255,0) 55px ), repeating-linear-gradient(30deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 49px, rgb(255 255 255 / 10%) 50px ,rgb(0 0 0 / 30%) 51px , rgba(255,255,255,0) 55px ); 116 | position: fixed; 117 | width: 200vw; 118 | height: 150vh; 119 | } 120 | 121 | 122 | .warning { 123 | position: absolute; 124 | z-index: 0; 125 | width: 45vmin; 126 | height: 45vmin; 127 | background: repeating-linear-gradient(-45deg, black, black 3vmin, yellow 3vmin, yellow 6vmin); 128 | transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg); 129 | box-shadow: 0 0 0 3vmin #af0000; 130 | } 131 | 132 | .warning:before { 133 | content: ""; 134 | width: 80%; 135 | height: 80%; 136 | background: linear-gradient(45deg, #000000 0%, #414141 74%); 137 | float: left; 138 | margin-top: 10%; 139 | margin-left: 10%; 140 | border: 1vmin solid yellow; 141 | border-radius: 1vmin; 142 | box-sizing: border-box; 143 | } 144 | 145 | .warning:after { 146 | content: "WARNING:\2009 DANGER"; 147 | color: white; 148 | transform: rotate(90deg); 149 | float: left; 150 | background: #af0000; 151 | position: absolute; 152 | bottom: 18.5vmin; 153 | left: -35vmin; 154 | font-size: 5vmin; 155 | font-family: Arial, Helvetica, serif; 156 | width: 49vmin; 157 | text-align: center; 158 | padding: 1vmin; 159 | text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000; 160 | } 161 | 162 | 163 | 164 | 165 | 166 | .hinges { 167 | position: absolute; 168 | z-index: 3; 169 | transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg); 170 | } 171 | 172 | 173 | .hinges:before, .hinges:after { 174 | content: ""; 175 | background: #2b2b2b; 176 | width: 5vmin; 177 | height: 1.5vmin; 178 | position: absolute; 179 | margin-top: -24.5vmin; 180 | z-index: 5; 181 | border: 2px solid #00000010; 182 | border-radius: 5px 5px 0 0; 183 | box-sizing: border-box; 184 | margin-left: -16.25vmin; 185 | } 186 | .hinges:after { 187 | margin-left: 13.75vmin; 188 | margin-top: -24.5vmin; 189 | } 190 | 191 | 192 | .box > span:before, .box > span:after { 193 | content: ""; 194 | width: 5vmin; 195 | height: 1.5vmin; 196 | background: #103e4480; 197 | position: absolute; 198 | margin-left: 6vmin; 199 | border-radius: 0 0 5px 5px; 200 | } 201 | .box > span:after { 202 | margin-left: 36vmin; 203 | } 204 | 205 | .box > span { 206 | transform: rotateX(89deg) translate(0.3vmin, 0.3vmin); 207 | position: absolute; 208 | } 209 | 210 | 211 | 212 | 213 | 214 | .text { 215 | position: absolute; 216 | margin-top: 55vmin; 217 | color: white; 218 | font-family: Arial, Helvetica, serif; 219 | font-size: 5vmin; 220 | text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000; 221 | perspective-origin: left; 222 | background: #af0000; 223 | padding: 1vmin; 224 | transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg) translate(33.5vmin, -2vmin); 225 | text-align: center; 226 | width: 49vmin; 227 | 228 | } 229 | 230 | div#panel:before { 231 | content: "DO YOU LOVE ME"; 232 | top: 3vmin; 233 | position: relative; 234 | font-size: 8vmin; 235 | width: 100vw; 236 | left: 0; 237 | z-index: 6; 238 | text-shadow: 0 0 1px #fff, 0 0 3px #fff; 239 | border-bottom: 1vmin dotted #fff; 240 | } 241 | 242 | #panel { 243 | position: absolute; 244 | background: #ff0000d0; 245 | color: #ffffff; 246 | font-family: Arial, Helvetica, serif; 247 | width: 90vmin; 248 | box-sizing: border-box; 249 | font-size: 3.25vmin; 250 | padding: 1vmin 2vmin; 251 | height: 60vmin; 252 | box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060; 253 | z-index: 5; 254 | display: none; 255 | text-align: center; 256 | text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff; 257 | animation: warning-ligth 1s 0s infinite; 258 | } 259 | 260 | #panel.show { 261 | display: block !important; 262 | } 263 | 264 | #panel2 { 265 | position: absolute; 266 | background: #ff0000d0; 267 | color: #ffffff; 268 | font-family: Arial, Helvetica, serif; 269 | width: 90vmin; 270 | box-sizing: border-box; 271 | font-size: 3.25vmin; 272 | padding: 1vmin 2vmin; 273 | height: 60vmin; 274 | box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060; 275 | z-index: 5; 276 | display: none; 277 | text-align: center; 278 | text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff; 279 | animation: warning-ligth 1s 0s infinite; 280 | } 281 | 282 | #panel2.show { 283 | display: block !important; 284 | } 285 | 286 | div#panel2::before { 287 | content: "WARNING"; 288 | top: 3vmin; 289 | position: relative; 290 | font-size: 10vmin; 291 | width: 100vw; 292 | left: 0; 293 | } 294 | 295 | #msg { 296 | margin-top: 5vmin; 297 | text-shadow: 0 0 2px #fff; 298 | font-size: 50px; 299 | } 300 | 301 | #time { 302 | font-size: 10vmin; 303 | background: #00000080; 304 | max-width: 35vmin; 305 | margin: 6vmin auto 5vmin !important; 306 | position: relative; 307 | border-radius: 0.25vmin; 308 | text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000; 309 | padding: 1vmin 0; 310 | } 311 | 312 | #time:before { 313 | content: "00:0"; 314 | } 315 | 316 | #abort { 317 | background: #ffffffb8; 318 | color: #d30303; 319 | cursor: pointer; 320 | padding: 1vmin 2.75vmin; 321 | font-size: 6vmin; 322 | border-radius: 0.25vmin; 323 | font-weight: bold; 324 | animation: highlight 1s 0s infinite; 325 | } 326 | 327 | #abort:hover { 328 | background: #ffffff; 329 | box-shadow: 0 0 15px 5px #fff; 330 | } 331 | 332 | #no { 333 | background: #ffffffb8; 334 | color: #d30303; 335 | cursor: pointer; 336 | padding: 1vmin 2.75vmin; 337 | font-size: 6vmin; 338 | border-radius: 0.25vmin; 339 | font-weight: bold; 340 | animation: highlight 1s 0s infinite; 341 | } 342 | 343 | #no:hover { 344 | background: #ffffff; 345 | box-shadow: 0 0 15px 5px #fff; 346 | } 347 | 348 | #again { 349 | background: #ffffffb8; 350 | color: #d30303; 351 | cursor: pointer; 352 | padding: 1vmin 2.75vmin; 353 | font-size: 6vmin; 354 | border-radius: 0.25vmin; 355 | font-weight: bold; 356 | animation: highlight 1s 0s infinite; 357 | position: absolute; 358 | top: 70%; 359 | right: 22%; 360 | } 361 | 362 | #again:hover { 363 | background: #ffffff; 364 | box-shadow: 0 0 15px 5px #fff; 365 | } 366 | 367 | 368 | @keyframes highlight { 369 | 50% { box-shadow: 0 0 15px 5px #fff;} 370 | } 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | div#turn-off { 380 | position: fixed; 381 | background: #ffffff80; 382 | left: 0; 383 | width: 100vw; 384 | height: 0vh; 385 | z-index: 7; 386 | } 387 | 388 | div#turn-off:before, div#turn-off:after { 389 | content: ""; 390 | position: fixed; 391 | left: 0; 392 | top: 0; 393 | height: 0vh; 394 | background: #000; 395 | width: 100vw; 396 | transition: height 0.5s ease 0s; 397 | } 398 | div#turn-off:after { 399 | top: inherit; 400 | bottom: 0; 401 | } 402 | 403 | 404 | div#turn-off.close { 405 | height: 100vh; 406 | } 407 | 408 | div#turn-off.close:before, div#turn-off.close:after { 409 | transition: height 0.1s ease 0.1s; 410 | height: 49.75vh; 411 | } 412 | 413 | 414 | 415 | 416 | #time.crono { 417 | background: #ffffffba; 418 | transition: background 0.5s ease 0s; 419 | color: #ff0000; 420 | text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff; 421 | } 422 | #detonate { 423 | display: none; 424 | color: #fff; 425 | z-index: 5; 426 | font-size: 8vmin; 427 | font-family: Arial, Helvetica, serif; 428 | text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff; 429 | } 430 | #detonate.show { 431 | display: block; 432 | animation: blink 0.25s 0s infinite; 433 | } 434 | 435 | #abort.hide { 436 | display: none; 437 | } 438 | 439 | #no.hide { 440 | display: none; 441 | } 442 | 443 | #again.hide { 444 | display: none; 445 | } 446 | 447 | 448 | @keyframes blink { 449 | 50% { opacity: 0;} 450 | } 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | #closing { 460 | width: 100vw; 461 | height: 100vh; 462 | left: 0; 463 | position: absolute; 464 | } 465 | 466 | div#closing:before, div#closing:after { 467 | content: ""; 468 | width: 50vw; 469 | height: 1.5vh; 470 | left: -50vw; 471 | top: 49vh; 472 | position: absolute; 473 | background: #000000; 474 | z-index: 7; 475 | transition: left 0.2s ease 0s; 476 | } 477 | 478 | div#closing:after { 479 | right: -50vw; 480 | transition: right 0.2s ease 0s; 481 | left: initial; 482 | } 483 | 484 | 485 | div#closing.close:before { 486 | left: 0; 487 | transition: left 0.2s ease 0.2s; 488 | } 489 | 490 | 491 | div#closing.close:after { 492 | right: 0; 493 | transition: right 0.2s ease 0.2s; 494 | } 495 | 496 | 497 | 498 | #restart { 499 | position: absolute; 500 | z-index: 8; 501 | display: none; 502 | } 503 | #reload { 504 | position: absolute; 505 | z-index: 8; 506 | width: 10vmin; 507 | height: 10vmin; 508 | border-radius: 100%; 509 | border: 0; 510 | margin-top: -5vmin; 511 | margin-left: -2.5vmin; 512 | opacity: 0; 513 | cursor: pointer; 514 | transform: rotate(0deg); 515 | transition: transform 0.5s ease 0s; 516 | outline: none; 517 | } 518 | #reload:hover { 519 | background: #ef0000; 520 | transform: rotate(360deg); 521 | transition: transform 0.5s ease 0s; 522 | } 523 | #restart.show { 524 | display: block; 525 | } 526 | 527 | #restart.show #reload { 528 | animation: refresh 3.5s 0s 1; 529 | opacity:1; 530 | } 531 | 532 | 533 | @keyframes refresh { 534 | 0% { opacity: 0; } 535 | 50% { opacity: 0; } 536 | 100% { opacity: 1; } 537 | } 538 | 539 | 540 | button#reload:before { 541 | content: ""; 542 | width: 6vmin; 543 | height: 6vmin; 544 | position: absolute; 545 | left: 2vmin; 546 | top: 2vmin; 547 | border-radius: 100%; 548 | border: 1vmin solid #000; 549 | box-sizing: border-box; 550 | border-bottom-color: transparent; 551 | } 552 | 553 | button#reload:after { 554 | content: ""; 555 | border: 1.25vmin solid transparent; 556 | border-top: 2vmin solid black; 557 | position: absolute; 558 | transform: rotate(40deg) translate(0.5vmin, 1.25vmin); 559 | } 560 | 561 | 562 | 563 | 564 | 565 | @keyframes warning-ligth { 566 | 0% { box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060; } 567 | 50% { box-shadow: 0 0 0 100vmin #ff000020, 0 0 0 5vmin #ff000020; } 568 | } 569 | 570 | 571 | 572 | #mute { 573 | position: absolute; 574 | bottom: 1vmin; 575 | right: 1vmin; 576 | background: #8bc34a80; 577 | width: 6vmin; 578 | height: 6vmin; 579 | cursor: pointer; 580 | border: 0.5vmin solid #151515; 581 | } 582 | #mute.muted { 583 | background: #ff000080; 584 | } 585 | 586 | #mute:before { 587 | content: ""; 588 | border: 0.75vmin solid transparent; 589 | height: 2vmin; 590 | border-right: 2vmin solid #151515; 591 | position: absolute; 592 | border-left-width: 0; 593 | top: 1.25vmin; 594 | right: 1.25vmin; 595 | } 596 | #mute:after { 597 | content: ""; 598 | border: 0vmin solid transparent; 599 | height: 2vmin; 600 | border-right: 1.5vmin solid #151515; 601 | position: absolute; 602 | top: 2vmin; 603 | right: 3.5vmin; 604 | } 605 | 606 | 607 | #abort a { 608 | text-decoration: none; 609 | color: #d30303; 610 | } --------------------------------------------------------------------------------