pavel/timer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dev

Browse source
This commit is contained in:
Pavel Gnedov 2026-03-11 23:54:03 +07:00
parent b8346d5913
commit 5b1e7bc7cd
1 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
index.html
View file

@ -27,16 +27,16 @@
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 2.5rem; border-radius: 1rem;
padding: 2.5rem 3rem; padding: 1rem 1rem;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
max-width: 700px; max-width: 700px;
width: 100%; /* width: 100%; */
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.description { .description {
font-size: 1.8rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
color: #b3ccff; color: #b3ccff;
letter-spacing: -0.02em; letter-spacing: -0.02em;
@ -47,18 +47,18 @@
.timer { .timer {
font-family: 'Fira Mono', 'JetBrains Mono', 'Courier New', monospace; font-family: 'Fira Mono', 'JetBrains Mono', 'Courier New', monospace;
font-size: 4.2rem; font-size: 2rem;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
line-height: 1.2; line-height: 1.2;
background: rgba(0, 0, 0, 0.35); background: rgba(0, 0, 0, 0.35);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border-radius: 2rem; border-radius: 1rem;
display: inline-block; display: inline-block;
border: 1px solid rgba(255, 215, 100, 0.3); border: 1px solid rgba(255, 215, 100, 0.3);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
letter-spacing: 2px; letter-spacing: 2px;
margin: 1rem 0 1.5rem 0; /* margin: 1rem 0 1.5rem 0; */
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
@ -103,8 +103,8 @@
@media (max-width: 500px) { @media (max-width: 500px) {
.card { padding: 1.8rem; } .card { padding: 1.8rem; }
.description { font-size: 1.4rem; } .description { font-size: 1rem; }
.timer { font-size: 2.8rem; } .timer { font-size: 2rem; }
} }
</style> </style>
</head> </head>
@ -117,16 +117,17 @@
<div id="timer" class="timer">-- д. --:--</div> <div id="timer" class="timer">-- д. --:--</div>
<!-- Информационная панель (всегда видна) --> <!-- Информационная панель (всегда видна) -->
<div class="note"> <!-- <div class="note"> -->
<div class="example"> <!-- <div class="example"> -->
🔧 <strong>Параметры URL</strong>: <code>?datetime=2025-12-31T23:59:59&description=Нового%20года</code><br> <!-- 🔧 <strong>Параметры URL</strong>: <code>?datetime=2025-12-31T23:59:59&description=Нового%20года</code><br> -->
<span style="opacity:0.8;">⏱️ Обновление каждые 60 секунд</span> <!-- <span style="opacity:0.8;">⏱️ Обновление каждые 60 секунд</span> -->
</div> <!-- </div> -->
</div> <!-- </div> -->
</div> </div>
<script> <script>
(function() { (function() {
console.debug('page loaded'); // DEBUG
// --- Чтение параметров из строки запроса --- // --- Чтение параметров из строки запроса ---
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
let datetimeRaw = urlParams.get('datetime'); let datetimeRaw = urlParams.get('datetime');
@ -162,6 +163,7 @@
function refreshTimer() { function refreshTimer() {
if (!isValidTarget) { if (!isValidTarget) {
// Случай невалидной даты обрабатывается один раз ниже // Случай невалидной даты обрабатывается один раз ниже
console.error(`Не правильная дата`);
return; return;
} }
@ -198,7 +200,7 @@
console.error('Таймер: передан невалидный datetime =', datetimeRaw); console.error('Таймер: передан невалидный datetime =', datetimeRaw);
} else { } else {
// Формируем строку описания // Формируем строку описания
let descriptionText = `До ${descriptionRaw} осталось`; let descriptionText = `${descriptionRaw}`;
if (isDemoDate || isDemoDesc) { if (isDemoDate || isDemoDesc) {
// Если хотя бы один параметр был подставлен автоматически, добавляем метку (демо) // Если хотя бы один параметр был подставлен автоматически, добавляем метку (демо)
// Но чтобы не загромождать, покажем в скобках, если не было параметра description // Но чтобы не загромождать, покажем в скобках, если не было параметра description