zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-06 06:20:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

countdown

Browse source
This commit is contained in:
zyqunix 2025-06-12 11:09:09 +02:00
parent 94ca706258
commit 6728ebcfbf
3 changed files with 15 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

3
countdown/index.html
View file

@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<div class="main"> <div class="cards">
<a href="/timer">Stopwatch</a> <a href="/timer">Stopwatch</a>
<label for="hours-input">Hours</label><input id="hours-input" type="number" placeholder="0"/> <label for="hours-input">Hours</label><input id="hours-input" type="number" placeholder="0"/>
<label for="minutes-input">Minutes</label><input id="minutes-input" type="number" placeholder="0"/> <label for="minutes-input">Minutes</label><input id="minutes-input" type="number" placeholder="0"/>
@ -18,7 +18,6 @@
<span id="time">00:00:00:00</span> <span id="time">00:00:00:00</span>
<button id="start">Start</button> <button id="start">Start</button>
<button id="reset">Reset</button> <button id="reset">Reset</button>
</div> </div>

28
countdown/style.css
View file

@ -1,21 +1,20 @@
@import url(/global.css); @import url(/global.css);
.cards {
text-align: center;
}
input { input {
width: 70px; width: 70px;
padding: 12px; padding: 12px;
margin: 10px 5px; margin: 10px 5px;
border: 2px solid #5a5a5a; border: 2px solid var(--surface1);
border-radius: 6px; border-radius: 6px;
background-color: #2a2a2a; background-color: var(--surface0);
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
transition: border-color 0.3s ease, box-shadow 0.3s ease; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus {
border-color: #4caf50;
box-shadow: 0 0 5px #4caf50;
outline: none; outline: none;
} }
@ -23,12 +22,11 @@ button {
padding: 12px 20px; padding: 12px 20px;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background-color: #4caf50; background-color: var(--green);
color: #ffffff; color: var(--crust);
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
margin: 10px 5px; margin: 10px 5px;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.2s ease; transition: background-color 0.3s ease, transform 0.2s ease;
} }
@ -42,16 +40,6 @@ button:active {
transform: translateY(0); transform: translateY(0);
} }
div.main {
padding: 50px;
background-color: #3a3a3a;
border-radius: 10px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 600px;
margin: 50px auto;
}
span#time { span#time {
font-size: 36px; font-size: 36px;
font-weight: bold; font-weight: bold;

7
global.css
View file

@ -72,7 +72,7 @@ svg:hover {
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
width: 600px !important; width: 600px !important;
text-align: left; text-align: center;
transition: border 0.1s; transition: border 0.1s;
} }
@ -108,3 +108,8 @@ svg:hover {
transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s;
cursor: default; cursor: default;
} }
.separator {
width: 5px;
background-color: var(--overlay0);
}