Created
October 9, 2023 10:52
-
-
Save IgnatBeresnev/3514cfd8d1f33f535b0646ac9b251cfc to your computer and use it in GitHub Desktop.
did-bragilevsky-stole-that-tweet.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Украл ли Брагилевский твит?</title> | |
<style> | |
body { | |
margin: 0; | |
} | |
.toy { | |
position: relative; | |
margin: 5vmin auto; | |
width: 90vmin; | |
} | |
.ball { | |
position: relative; | |
border-radius: 50%; | |
width: 90vmin; | |
height: 90vmin; | |
overflow: hidden; | |
background: radial-gradient(circle at 30vmin 30vmin, #444, #000); | |
} | |
/* Answers */ | |
.answers { | |
width: 90vmin; | |
height: 90vmin; | |
} | |
.answer { | |
position: absolute; | |
justify-content: center; | |
align-items: center; | |
display: flex; | |
left: 36vmin; | |
top: 34.6vmin; | |
width: 18vmin; | |
height: 20.8vmin; | |
color: white; | |
text-align: center; | |
font-family: sans-serif; | |
font-variant: small-caps; | |
font-size: 2.1vmin; | |
line-height: 2.4vmin; | |
opacity: 0; | |
transition: opacity 1s; | |
animation: floating 6s linear infinite; | |
} | |
/* Triangle */ | |
.answer::before { | |
content: ""; | |
z-index: -1; | |
position: absolute; | |
left: 0; | |
border-left: 8.8vmin solid transparent; | |
border-right: 8.8vmin solid transparent; | |
border-radius: 0.4vmin; | |
width: 0.4vmin; | |
height: 0; | |
} | |
.answer.up::before { | |
top: 0.4vmin; | |
border-bottom: 15.2vmin solid #1c23e8; | |
} | |
.answer.down::before { | |
bottom: 0.4vmin; | |
border-top: 15.2vmin solid #1c23e8; | |
} | |
/* Overlay */ | |
.answer::after { | |
content: ""; | |
z-index: 1; | |
position: absolute; | |
left: -7vmin; | |
top: -5vmin; | |
border-radius: 50%; | |
width: 32vmin; | |
height: 32vmin; | |
background: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0)); | |
animation: rotating 6s infinite linear; | |
} | |
/* Input control */ | |
input { | |
display: none; | |
} | |
input:checked + .answer { | |
opacity: 1; | |
transition: opacity 2s 1s; | |
} | |
form:active input:checked + .answer { | |
opacity: 0; | |
transition: opacity 1s; | |
} | |
/* Invisible labels */ | |
.labels { | |
position: absolute; | |
top: 0; | |
animation: random 1s steps(20) infinite; | |
} | |
form:active .labels { | |
animation-play-state: paused; | |
} | |
label { | |
display: block; | |
width: 90vmin; | |
height: 90vmin; | |
cursor: pointer; | |
} | |
/* Window to see the answer */ | |
.window { | |
position: absolute; | |
left: 22.5vmin; | |
top: 22.5vmin; | |
width: 45vmin; | |
height: 45vmin; | |
border-radius: 50%; | |
background: radial-gradient(#002, #001 18vmin, #666 18vmin, #000 18.5vmin, #000 22vmin, #666 22vmin, #000 22.5vmin); | |
} | |
/* Number 8 */ | |
.eight { | |
position: absolute; | |
left: 22.5vmin; | |
top: 22.5vmin; | |
width: 45vmin; | |
height: 45vmin; | |
border-radius: 50%; | |
background: #fff; | |
font-size: 27vmin; | |
font-family: sans-serif; | |
text-align: center; | |
line-height: 45vmin; | |
transition: opacity 1s; | |
} | |
form:valid .eight { | |
opacity: 0; | |
} | |
/* "Uniform distribution" of labels */ | |
@keyframes random { | |
to { | |
transform: translateY(-1710vmin); | |
} | |
} | |
/* Triangle gently floating around */ | |
@keyframes floating { | |
from { | |
transform: rotateZ(0) rotateY(15deg) translateZ(6.8vmin) rotateZ(0); | |
} | |
to { | |
transform: rotateZ(1turn) rotateY(15deg) translateZ(6.8vmin) rotateZ(-1turn); | |
} | |
} | |
/* Roatating overlay */ | |
@keyframes rotating { | |
to { | |
transform: rotate(1turn); | |
} | |
} | |
/* Instructions */ | |
.instruction { | |
z-index: -1; | |
position: absolute; | |
top: -10vmin; | |
left: -10vmin; | |
width: 110vmin; | |
height: 110vmin; | |
text-align: center; | |
font-family: fantasy; | |
font-size: 3vmin; | |
line-height: 4.2vmin; | |
opacity: 0; | |
} | |
.instruction:nth-of-type(1) { | |
transform: rotate(-45deg); | |
animation: instruction 1s both; | |
} | |
.instruction:nth-of-type(2) { | |
transform: rotate(45deg); | |
animation: instruction 1s 1s both; | |
} | |
.instruction:nth-of-type(3) { | |
transform: rotate(-45deg) translateY(102vmin); | |
animation: instruction 1s 2s both; | |
} | |
.instruction:nth-of-type(4) { | |
transform: rotate(45deg) translateY(102vmin); | |
animation: instruction 1s 3s both; | |
} | |
form:valid ~ .instruction { | |
display: none; | |
} | |
@keyframes instruction { | |
to { | |
opacity: 1; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Украл ли <a href="https://twitter.com/_bravit">Брагилевский</a> твит?</h1> | |
<div class="toy"> | |
<form class="ball"> | |
<div class="window"></div> | |
<div class="eight"> | |
<span>BR</span> | |
</div> | |
<div class="answers"> | |
<!-- Affirmatives --> | |
<input id="affirmative1" type="radio" name="answer" required> | |
<div class="answer up">Бесспорно</div> | |
<input id="affirmative2" type="radio" name="answer" required> | |
<div class="answer up">Предрешено</div> | |
<input id="affirmative3" type="radio" name="answer" required> | |
<div class="answer down">Никаких<br>сомнений</div> | |
<input id="affirmative4" type="radio" name="answer" required> | |
<div class="answer up">Определенно<br>да</div> | |
<input id="affirmative5" type="radio" name="answer" required> | |
<div class="answer down">Можешь быть<br>уверен<br>в этом</div> | |
<input id="affirmative6" type="radio" name="answer" required> | |
<div class="answer down">Мне кажется,<br>да</div> | |
<input id="affirmative7" type="radio" name="answer" required> | |
<div class="answer up">Вероятнее<br>всего</div> | |
<input id="affirmative8" type="radio" name="answer" required> | |
<div class="answer down">Хорошие<br>перспективы</div> | |
<input id="affirmative9" type="radio" name="answer" required> | |
<div class="answer down">Да</div> | |
<input id="affirmative10" type="radio" name="answer" required> | |
<div class="answer down">Знаки<br>говорят<br>да</div> | |
<!-- Non-comittals --> | |
<input id="non-committal1" type="radio" name="answer" required> | |
<div class="answer down">Пока<br>неясно..</div> | |
<input id="non-committal2" type="radio" name="answer"required> | |
<div class="answer up">Спроси<br>позже</div> | |
<input id="non-committal3" type="radio" name="answer"required> | |
<div class="answer down">Лучше не<br>знать</div> | |
<input id="non-committal4" type="radio" name="answer"required> | |
<div class="answer down">Сейчас<br>нельзя<br>предсказать</div> | |
<input id="non-committal5" type="radio" name="answer"required> | |
<div class="answer down">Сконцентрируйся<br>и спроси<br>опять</div> | |
<!-- Negatives --> | |
<input id="negative1" type="radio" name="answer" required> | |
<div class="answer up">Даже<br>не думай</div> | |
<input id="negative2" type="radio" name="answer" required> | |
<div class="answer down">Мой ответ<br>нет</div> | |
<input id="negative3" type="radio" name="answer" required> | |
<div class="answer down">По моим<br>данным<br>нет</div> | |
<input id="negative4" type="radio" name="answer" required> | |
<div class="answer down">Перспективы<br>не очень<br>хорошие</div> | |
<input id="negative5" type="radio" name="answer" required> | |
<div class="answer up">Весьма<br>сомнительно</div> | |
</div> | |
<div class="labels"> | |
<label for="affirmative1"></label> | |
<label for="non-committal1"></label> | |
<label for="affirmative2"></label> | |
<label for="negative1"></label> | |
<label for="affirmative3"></label> | |
<label for="non-committal2"></label> | |
<label for="affirmative4"></label> | |
<label for="negative2"></label> | |
<label for="affirmative5"></label> | |
<label for="non-committal3"></label> | |
<label for="affirmative6"></label> | |
<label for="negative3"></label> | |
<label for="affirmative7"></label> | |
<label for="non-committal4"></label> | |
<label for="affirmative8"></label> | |
<label for="negative4"></label> | |
<label for="affirmative9"></label> | |
<label for="non-committal5"></label> | |
<label for="affirmative10"></label> | |
<label for="negative5"></label> | |
</div> | |
</form> | |
<div class="instruction">Нажми на шар<br>чтобы узнать</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment