mirror of
https://codeberg.org/vlw/9i-blackout.git
synced 2025-09-13 19:33:41 +02:00
49 lines
No EOL
4.9 KiB
HTML
49 lines
No EOL
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="assets/style.css">
|
|
<title>9i Blackout</title>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="mode default">
|
|
<div>
|
|
<p>Move this window to the screen you wish to blackout and then press the button below</p>
|
|
</div>
|
|
<div>
|
|
<div class="blackout">
|
|
<p>Blackout</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mode full active">
|
|
<div>
|
|
<p>Tap a display below to blackout</p>
|
|
</div>
|
|
<svg id="nine-i" viewbox="0 0 418 552.201" xmlns="http://www.w3.org/2000/svg">
|
|
<g transform="translate(-605 -281)">
|
|
<rect class="blackout" data-screen="0" height="276" transform="translate(605 281)" width="418"></rect>
|
|
<rect class="blackout" data-screen="1" height="276" transform="translate(605 557)" width="418"></rect>
|
|
<path d="M24.971,14.071a7.412,7.412,0,1,0-11.53,0V9.4a5.765,5.765,0,0,1,11.53,0v4.674ZM29.087,48.12A12.6,12.6,0,0,0,41.442,35.767h0v-9.88a2.471,2.471,0,1,0-4.941,0v.821H34.854V22.6a2.471,2.471,0,1,0-4.941,0v2.46H28.265V20.953a2.471,2.471,0,1,0-4.941,0v5.755H21.677V9.421a2.471,2.471,0,1,0-4.941,0v18.6c-3.391-3.624-7.854-7.611-9.684-5.772-1.791,1.8,2.824,6.762,9.267,17.6,2.9,4.885,6.577,8.263,12.768,8.264Zm14-12.354a14,14,0,0,1-14,14c-5.127,0-10.539-2.392-14.263-9.178C9.45,30.8,2.576,24.374,5.849,21.1c2.342-2.342,6.018-.1,9.239,2.917h0V9.426a4.118,4.118,0,1,1,8.236,0v8.219a4.126,4.126,0,0,1,6.335,1.861A4.114,4.114,0,0,1,36.5,22.586v.022a4.123,4.123,0,0,1,6.589,3.3v9.859Z" fill="#fff" fill-rule="evenodd" transform="translate(779.735 406.9) rotate(-30)"></path>
|
|
<path d="M24.971,14.071a7.412,7.412,0,1,0-11.53,0V9.4a5.765,5.765,0,0,1,11.53,0v4.674ZM29.087,48.12A12.6,12.6,0,0,0,41.442,35.767h0v-9.88a2.471,2.471,0,1,0-4.941,0v.821H34.854V22.6a2.471,2.471,0,1,0-4.941,0v2.46H28.265V20.953a2.471,2.471,0,1,0-4.941,0v5.755H21.677V9.421a2.471,2.471,0,1,0-4.941,0v18.6c-3.391-3.624-7.854-7.611-9.684-5.772-1.791,1.8,2.824,6.762,9.267,17.6,2.9,4.885,6.577,8.263,12.768,8.264Zm14-12.354a14,14,0,0,1-14,14c-5.127,0-10.539-2.392-14.263-9.178C9.45,30.8,2.576,24.374,5.849,21.1c2.342-2.342,6.018-.1,9.239,2.917h0V9.426a4.118,4.118,0,1,1,8.236,0v8.219a4.126,4.126,0,0,1,6.335,1.861A4.114,4.114,0,0,1,36.5,22.586v.022a4.123,4.123,0,0,1,6.589,3.3v9.859Z" fill="#fff" fill-rule="evenodd" transform="translate(779.735 686.9) rotate(-30)"></path>
|
|
<g transform="translate(-1)">
|
|
<path d="M269.878-2.6,205.3-2.583l-72.171.016a2.657,2.657,0,0,0-1.407.276,2.21,2.21,0,0,0-.6.718C130.3-.278,129.238.893,125.461,1c-1.918.054-13.226.082-33.611.082C57.16,1.081,7.5,1,7,1A6.007,6.007,0,0,0,1,7V265a6.007,6.007,0,0,0,6,6H410a6.007,6.007,0,0,0,6-6V7a6.007,6.007,0,0,0-6-6c-.574,0-57.826.045-96.776.045C290.34,1.045,278.151,1.03,277,1a5.658,5.658,0,0,1-4.369-2.168,3.335,3.335,0,0,0-2.75-1.429m0-1c3.677,0,3.26,3.5,7.145,3.6,1.295.034,16.5.045,36.2.045C352.625.045,410,0,410,0a7,7,0,0,1,7,7V265a7,7,0,0,1-7,7H7a7,7,0,0,1-7-7V7A7,7,0,0,1,7,0S56.759.081,91.85.081C109.4.081,123.274.061,125.432,0c6.475-.183,3.451-3.567,7.7-3.567Z" fill="#fff" transform="translate(606 285)"></path>
|
|
<path d="M1,1V248H405V1H1M0,0H406V249H0Z" fill="#fff" transform="translate(611 298)"></path>
|
|
<path d="M7,1A6.007,6.007,0,0,0,1,7V265a6.007,6.007,0,0,0,6,6H410a6.007,6.007,0,0,0,6-6V7a6.007,6.007,0,0,0-6-6H7M7,0H410a7,7,0,0,1,7,7V265a7,7,0,0,1-7,7H7a7,7,0,0,1-7-7V7A7,7,0,0,1,7,0Z" fill="#fff" transform="translate(1023 833.201) rotate(180)"></path>
|
|
<path d="M1,1V253H405V1H1M0,0H406V254H0Z" fill="#fff" transform="translate(611 570)"></path>
|
|
<path d="M.5,5h-1V0h1Z" fill="#fff" transform="translate(619.784 556.5)"></path>
|
|
<path d="M.5,5h-1V0h1Z" fill="#fff" transform="translate(1009.216 556.5)"></path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.135 75.046"><path d="M36.317 28.465a13.731 13.731 0 1 0-14.292 12.457l-1.305-2.26a11.618 11.618 0 1 1 13.376-9.515 7.361 7.361 0 0 1 2.22-.684Zm-4.283.22a9.506 9.506 0 1 0-12.806 7.393l-2.997-5.191a7.394 7.394 0 0 1 12.806-7.394l2.997 5.191ZM58.437 63.86a16.161 16.161 0 0 0 5.802-21.643l-6.336-10.974a3.169 3.169 0 1 0-5.488 3.169l.527.912-1.83 1.056-2.633-4.562a3.169 3.169 0 1 0-5.488 3.168l1.578 2.734-1.83 1.057-2.634-4.563a3.169 3.169 0 1 0-5.488 3.168l3.69 6.391-1.83 1.057-11.084-19.2a3.169 3.169 0 1 0-5.488 3.17l11.929 20.661c-6.09-1.85-13.603-3.416-14.456-.199-.837 3.15 7.472 5.699 21.581 13.609 6.357 3.564 12.605 4.962 19.48.993Zm7.632-22.7a17.955 17.955 0 0 1-6.573 24.528c-5.695 3.288-13.24 4.1-21.726-1.047-12.25-7.43-24.006-10.159-22.468-15.89 1.099-4.099 6.623-3.965 12.132-2.685l-9.356-16.205a5.281 5.281 0 1 1 9.147-5.28l5.27 9.128a5.291 5.291 0 0 1 8.23-1.996 5.277 5.277 0 0 1 9.575-.967l.014.025a5.288 5.288 0 0 1 9.434-.56L66.07 41.16Z" fill="#fff" fill-rule="evenodd"></path></svg>
|
|
<p>Double tap anywhere with one finger to exit</p>
|
|
</div>
|
|
</main>
|
|
<script src="assets/script.js"></script>
|
|
</body>
|
|
</html> |