index.html (5216B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Hug?</title> 6 <style> 7 html, body { height: 100%; padding: 0; margin: 0; } 8 body { font-size: 2em; display: grid; justify-items: center; align-content: center; } 9 #main { } 10 table { transition: transform 3s cubic-bezier(1,0,0.5,1); transform-origin: top left; } 11 table, tr, td { border: none; padding: 0; } 12 td { position: relative; } 13 td { cursor: default; transition: filter 1s ease-in-out, opacity 1s ease-in-out; filter: grayscale(100%) brightness(50%) blur(0.3em); } 14 td.on { filter: grayscale(0%) brightness(100%) blur(0em); } 15 td.mini { vertical-align: top; } 16 td.next { cursor: pointer; filter: grayscale(100%) brightness(100%) blur(0.3em); } 17 td.next:hover { cursor: pointer; filter: grayscale(0%) brightness(100%) blur(0em); } 18 #hearts * { color: pink; font-weight: bold; font-family: 'Noto Color Emoji', monospace; opacity: 0; } 19 #hearts :nth-child(3n+0) { animation: flutter0 3s linear; } 20 #hearts :nth-child(3n+1) { animation: flutter1 3.2s linear; } 21 #hearts :nth-child(3n+2) { animation: flutter2 3.3s linear; } 22 #hearts { pointer-events: none; } 23 @keyframes flutter0 { 24 0% { opacity: 0.9; transform: translate( 0.00em, 0.00em) scale(1.00); } 25 10% { opacity: 0.9; transform: translate( 0.17em, -1.36em) scale(1.46); } 26 20% { opacity: 0.9; transform: translate( 0.36em, -2.64em) scale(1.55); } 27 30% { opacity: 0.9; transform: translate( 0.08em, -3.84em) scale(1.09); } 28 40% { opacity: 0.9; transform: translate(-0.61em, -4.96em) scale(0.47); } 29 50% { opacity: 0.9; transform: translate(-0.96em, -6.00em) scale(0.28); } 30 60% { opacity: 0.9; transform: translate(-0.34em, -6.96em) scale(0.78); } 31 70% { opacity: 0.9; transform: translate( 0.92em, -7.84em) scale(1.56); } 32 80% { opacity: 0.9; transform: translate( 1.58em, -8.64em) scale(1.89); } 33 90% { opacity: 0.6; transform: translate( 0.74em, -9.36em) scale(1.39); } 34 100% { opacity: 0; transform: translate(-1.09em, -10.00em) scale(0); } 35 } 36 @keyframes flutter1 { 37 0% { opacity: 0.9; transform: translate( 0.00em, 0.00em) scale(1.00); } 38 10% { opacity: 0.9; transform: translate(-0.15em, -1.64em) scale(1.46); } 39 20% { opacity: 0.9; transform: translate(-0.38em, -3.16em) scale(1.55); } 40 30% { opacity: 0.9; transform: translate(-0.17em, -4.56em) scale(1.09); } 41 40% { opacity: 0.9; transform: translate( 0.53em, -5.84em) scale(0.47); } 42 50% { opacity: 0.9; transform: translate( 0.99em, -7.00em) scale(0.28); } 43 60% { opacity: 0.9; transform: translate( 0.49em, -8.04em) scale(0.78); } 44 70% { opacity: 0.9; transform: translate(-0.76em, -8.96em) scale(1.56); } 45 80% { opacity: 0.9; transform: translate(-1.60em, -9.76em) scale(1.89); } 46 90% { opacity: 0.6; transform: translate(-0.97em, -10.44em) scale(1.39); } 47 100% { opacity: 0; transform: translate( 0.84em, -11.00em) scale(0); } 48 } 49 @keyframes flutter2 { 50 0% { opacity: 0.9; transform: translate( 0.00em, -0.00em) scale(1.00); } 51 10% { opacity: 0.9; transform: translate( 0.13em, -1.17em) scale(1.46); } 52 20% { opacity: 0.9; transform: translate( 0.40em, -2.28em) scale(1.55); } 53 30% { opacity: 0.9; transform: translate( 0.25em, -3.33em) scale(1.09); } 54 40% { opacity: 0.9; transform: translate(-0.44em, -4.32em) scale(0.47); } 55 50% { opacity: 0.9; transform: translate(-1.00em, -5.25em) scale(0.28); } 56 60% { opacity: 0.9; transform: translate(-0.64em, -6.12em) scale(0.78); } 57 70% { opacity: 0.9; transform: translate( 0.59em, -6.93em) scale(1.56); } 58 80% { opacity: 0.9; transform: translate( 1.58em, -7.68em) scale(1.89); } 59 90% { opacity: 0.6; transform: translate( 1.17em, -8.37em) scale(1.39); } 60 100% { opacity: 0; transform: translate(-0.58em, -9.00em) scale(0); } 61 } 62 #level { 63 font-size: 1.5rem; 64 font-family: monospace; 65 color: pink; 66 text-align: center; 67 } 68 td { font-family: 'Noto Color Emoji'; } 69 @font-face { 70 font-family: 'Noto Color Emoji'; 71 src: url(https://cdn.jsdelivr.net/gh/SuzanneSoy/googlefonts--noto-emoji/fonts/NotoColorEmoji.ttf); 72 } 73 </style> 74 </head> 75 <body> 76 <h1 id="level"></h1> 77 <div id="main"></div> 78 <div id="hearts"></div> 79 <script src="hug.js"></script> 80 </body> 81 </html>