/
githubmirror
/
50projects50days
Обзор
Документация
Войти
/
githubmirror
/
50projects50days
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
simple-timer/index.html
59 строк
2 KB
Brad Traversy
Simple timer
22 фев 2024, 19:17
22 фев 2024, 19:17
9409685
Код
Авторство
О чём код?
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css" /> <title>Simple Timer</title> </head> <body class="bg-gray-700 flex justify-center items-center min-h-screen"> <div class="bg-gray-900 p-16 rounded-2xl shadow w-full max-w-sm"> <h1 class="text-4xl text-center text-white">Timer</h1> <!-- Create the circle --> <div id="conic" class="bg-conic flex items-center justify-center w-60 h-60 mx-auto my-10 rounded-full relative" > <p id="timer" class="text-blue-200 relative text-5xl z-10">00:00</p> <!-- Create the inner cirlce and line --> <div class="w-[calc(100%-4px)] aspect-square bg-gray-800 rounded-full absolute inset-[2px]" ></div> <!-- Create the hand/marker --> <div class="hand h-1/2 absolute top-0"> <span class="w-2 h-2 bg-white rounded-full absolute -top-1 -left-1" ></span> </div> </div> <div class="flex justify-center gap-6"> <button id="reset" class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full" > <i class="fas fa-refresh"></i> </button> <button id="play" class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full group" > <i class="fas fa-play"></i> </button> </div> </div> <script src="script.js"></script> </body> </html>