dan/dano-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add parody DANO landing page

Browse Source
This commit is contained in:
Dan
2025-12-11 13:15:49 +03:00
parent 3da2569af0
commit 96ce7c16ef
4 changed files with 5302 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
index.html Normal file
View File

@@ -0,0 +1,178 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DANO — результатов нет с 1984 • danosito</title>
<meta name="description" content="Национальная олимпиада по анализу данных, где результаты не выкладывают с 1984 года.">
<link rel="icon" type="image/png" sizes="32x32" href="https://www.hse.ru/f/src/global/i/favicon/favicon_32x32.png">
<link rel="stylesheet" href="https://www.hse.ru/f/src/projects/unshm1/unshm1.css" media="all">
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/vision.css" media="all">
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/sitemap.css" media="all">
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/fotorama.css" media="all">
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/magnific-popup.min.css" media="all">
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/owl.carousel2.min.css">
<link rel="stylesheet" href="https://www.hse.ru/f/src/projects/unshm1/busedu.css">
<link rel="stylesheet" href="https://www.hse.ru/f/src/projects/unshm1/promo.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="body">
<div class="header-board--preview row links-dark banner-wrap">
<div class="b-row a_c hero">
<p class="sup">официальный портал отсутствия результатов</p>
<div class="promo-hint">
<div class="hero-img">
<img class="pc1" src="https://dano.hse.ru/mirror/pubs/share/956531756" alt="DANO" />
<img class="mobile1" src="https://dano.hse.ru/mirror/pubs/share/956531758" alt="DANO mobile" />
</div>
</div>
<h1 class="title">Результатов олимпиад DANO нет с 1984 года</h1>
<p class="lead">
Мы храним вакуум ради науки. Каждый год обещаем «выложить скоро», запускаем новые пресс‑релизы
и пересчитываем пустые таблицы. Лука Дуванов по-прежнему не победил задачный этап, ведь формула ссылалась на пустую ячейку.
</p>
<div class="cta">
<a class="button button_large button_preview button_clean" href="#why">почему пусто?</a>
<a class="button button_large button_preview button_dark" href="#timeline">история «скоро»</a>
</div>
<div class="timer-box">
<span class="timer-label">данонетрезовуже</span>
<span class="timer-value" id="ms-since">—</span>
<span class="timer-unit">миллисекунд</span>
</div>
</div>
</div>
<main>
<section class="builder-section results-bait">
<div class="bait-card">
<div class="builder-section__title h1 c">Результаты? Они ЗДЕСЬ</div>
<a class="bait-button" href="https://rutube.ru/video/ac4ac2f35c35fe2dc78e9a66c48097cb/" target="_blank" rel="noopener">резы ЗДЕСЬ</a>
<p class="small-print c">Если что, это не баг, это традиция с 1984 года.</p>
</div>
</section>
<section id="why" class="builder-section">
<div class="builder-section__title h1 c">Почему результатов нет</div>
<div class="builder-section__description">
<p>
Бумаги скреплены степлером, сканер ушел в академический отпуск до 2084, а алгоритм выкладки
использует стохастический спуск в пропасть. Любой запрос в базу возвращает NULL — это фича.
Плохих участников отправляют в Билибино чинить счётчики Гейгера и думать о прозрачности данных.
</p>
<ul class="reason-list">
<li data-egg="p-value">p-value публикации: стабильно &gt; 0.5</li>
<li data-egg="sql">`SELECT * FROM results` — 0 rows affected</li>
<li data-egg="overfit">Модель публикации переобучена на отмазках</li>
<li data-egg="feature">Дата фиксации: 1984. Фиксить не будем.</li>
</ul>
</div>
</section>
<section id="timeline" class="builder-section builder-section_dark">
<div class="builder-section__title h1 c">Хронология великих «скоро»</div>
<div class="timeline">
<div class="timeline__item">
<div class="timeline__date">1984</div>
<div class="timeline__text">Запустили таймер. Файл потеряли. Все довольны.</div>
</div>
<div class="timeline__item">
<div class="timeline__date">2007</div>
<div class="timeline__text">Сделали сайт быстрее результатов. Засчитали как победу.</div>
</div>
<div class="timeline__item">
<div class="timeline__date">2016</div>
<div class="timeline__text">Опубликовали новость, что скоро опубликуют результаты.</div>
</div>
<div class="timeline__item">
<div class="timeline__date">2024</div>
<div class="timeline__text">Автотест «результаты отсутствуют» зелёный на проде.</div>
</div>
</div>
</section>
<section id="easter" class="builder-section builder-section_dark">
<div class="builder-section__title h1 c">Пасхалки для дата‑саентистов</div>
<div class="easter-grid">
<div class="egg" data-egg="heatmap">
Кликните на выделенные фразы выше — увидите лог p-value &gt; 0.5.
</div>
<div class="egg" data-egg="pivot">
Двойной клик по таймеру — признание, что мы округляем в сторону драматизма.
</div>
<div class="egg" data-egg="gradient">
Откройте консоль: строим тепловую карту пустоты. Градусы = уровень цинизма.
</div>
</div>
</section>
<section id="faq" class="builder-section">
<div class="builder-section__title h1 c">FAQ без данных</div>
<div class="faq-grid">
<div class="faq-card">
<h3>Где результаты?</h3>
<p>В отпуске, на карантине и в чьих‑то воспоминаниях. Но не на сайте.</p>
</div>
<div class="faq-card">
<h3>Что будет с плохими участниками?</h3>
<p>Билибино, счётчики Гейгера и бесконечный курс «как публикуют данные».</p>
</div>
<div class="faq-card">
<h3>Почему Лука Дуванов не выиграл задачный этап?</h3>
<p>Формула в Excel ссылалась на пустую ячейку «результаты». Нажали F9 — стало хуже.</p>
</div>
<div class="faq-card">
<h3>Когда ждать выкладку?</h3>
<p>После ретрограда, согласований и еще одной пресс‑релизной итерации.</p>
</div>
<div class="faq-card">
<h3>Как проверяются гипотезы?</h3>
<p>Организаторы очень заняты: отправляют файлик «Очевидный механизм, что …» и пропадают. p-value > 0.5, зато слэк всегда зелёный.</p>
</div>
</div>
</section>
<section class="builder-section bilibino">
<div class="builder-section__title h1 c">Новости Билибино и вечного ожидания</div>
<div class="bilibino-grid">
<div class="bili-card">
<h3>Билибино, модуль «аналитика»</h3>
<p>Аналитиков отправили чинить счётчики Гейгера и считать пропуски в таблицах. Кто неправильно посчитает — идёт копать туннель под новый дата‑центр.</p>
</div>
<div class="bili-card">
<h3>Лука Дуванов и хакатон</h3>
<p>Лука снова не выиграл: бэклог пуст, как результаты. Вечный статус тикета: «в работе с 1984».</p>
</div>
<div class="bili-card">
<h3>Билибино: отдел мотивации</h3>
<p>Тем, кто спрашивает «когда результаты?», выдают фонарик, компас и Excel с круговой ссылкой. Мотивирует молчать годами.</p>
</div>
<div class="bili-card">
<h3>Примерная дата выкладки</h3>
<p>В календаре стоит 19.01.2038 03:14:07. Обещали, что Unix-время само всё выложит.</p>
</div>
<div class="bili-card">
<h3>Экспедиция «Результат»</h3>
<p>Группу отправили в тундру искать итоги. Нашли снег, медведя и «чуть позже». Теперь это их легендарный бэклог.</p>
</div>
<div class="bili-card">
<h3>Лука и задачный этап v2</h3>
<p>Лука подал апелляцию — её отправили в Билибино на «дополнительный анализ». Ответ пришел: «Очевидный механизм, что…» и всё.</p>
</div>
</div>
<div class="c bili-note">Если заметите результаты раньше — срочно создайте баг-репорт, мы откатим.</div>
</section>
</main>
<footer class="footer">
<div class="footer__left">
<p>Мы честно публикуем пустоту. Если появятся результаты — это баг, сообщите.</p>
</div>
<div class="footer__right">
<span class="tag">beta 0.0.1984</span>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

4722
original.html Normal file
View File

File diff suppressed because it is too large Load Diff

48
script.js Normal file
View File

@@ -0,0 +1,48 @@
(() => {
const start = Date.parse("1984-01-01T00:00:00Z");
const timerEl = document.getElementById("ms-since");
const fmt = new Intl.NumberFormat("ru-RU");
const eggMessages = {
"p-value": "p-value = 0.73 — отсутствие результатов статистически значимо.",
sql: "SELECT * FROM results; 0 rows. База данных благодарит за лёгкий запрос.",
overfit: "Модель публикации переобучена на отмазках. Generalization error → ∞.",
feature: "Фича «1984» в проде. Release notes: добавили вечность.",
heatmap: "Строим тепловую карту пустоты: самый горячий пиксель под диваном.",
pivot: "Pivot в никуда: развернули таблицу, получили NaN.",
gradient: "Градиент неопределённости сошёлся к нулю информации."
};
function update() {
if (!timerEl) return;
const diff = Date.now() - start;
timerEl.textContent = fmt.format(diff);
}
function toast(message) {
console.log(`[dano easter] ${message}`);
const box = document.createElement("div");
box.className = "toast";
box.textContent = message;
document.body.appendChild(box);
requestAnimationFrame(() => box.classList.add("visible"));
setTimeout(() => box.classList.remove("visible"), 2200);
setTimeout(() => box.remove(), 2600);
}
document.querySelectorAll("[data-egg]").forEach((el) => {
el.addEventListener("click", () => {
const msg = eggMessages[el.dataset.egg] || "Логируем вакуум данных.";
toast(msg);
});
});
if (timerEl) {
timerEl.addEventListener("dblclick", () =>
toast("Таймер округляет миллисекунды в сторону драматизма.")
);
}
update();
setInterval(update, 100);
})();

354
style.css Normal file
View File

@@ -0,0 +1,354 @@
:root {
--accent: #1658da;
--bg-dark: #0f2d69;
--yellow: #ffc107;
}
body {
background: #fffef8;
color: #111;
word-spacing: 0.035em;
}
main {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 0 12px 32px;
width: 100%;
box-sizing: border-box;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
width: min(1100px, 96vw);
margin: 0 auto;
}
.banner-wrap {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.16), rgba(22, 88, 218, 0.08), rgba(15, 45, 105, 0.12));
padding: 32px 16px 8px;
display: flex;
justify-content: center;
}
.banner-wrap .b-row {
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-img {
text-align: center;
margin-bottom: 24px;
}
.hero-img img {
max-width: 720px;
width: 100%;
height: auto;
}
.hero-text {
max-width: 960px;
margin: 0 auto 24px;
}
.sup {
text-transform: uppercase;
letter-spacing: 0.08em;
color: #0f2d69;
margin: 0 0 6px;
font-size: 12px;
word-spacing: 0.12em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.sup::after {
content: "";
width: 40px;
height: 6px;
border-radius: 999px;
background: var(--yellow);
}
.title {
font-size: clamp(28px, 4vw, 42px);
line-height: 1.15;
margin: 6px 0 12px;
color: #0f2d69;
word-spacing: 0.06em;
letter-spacing: 0.005em;
}
.lead {
font-size: 18px;
line-height: 1.6;
color: #333;
word-spacing: 0.06em;
}
.cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 16px 0;
justify-content: center;
}
.button_dark {
background: #0f2d69;
color: #fff;
box-shadow: 0 12px 30px rgba(15, 45, 105, 0.25);
}
.button_clean {
background: linear-gradient(90deg, #fff3cd, #ffe082);
color: #3c2a00;
box-shadow: 0 10px 26px rgba(255, 193, 7, 0.35);
}
.cta .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
}
.timer-box {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 10px 12px;
border-radius: 10px;
background: linear-gradient(90deg, rgba(255, 193, 7, 0.25), rgba(15, 45, 105, 0.15));
font-family: "Courier New", monospace;
color: #0f2d69;
}
.builder-section {
padding: 48px 16px;
width: min(1200px, 96vw);
margin: 24px auto;
background: #fffdf5;
border: 1px solid #111;
box-shadow: 12px 12px 0 #ffc107;
border-radius: 16px;
align-self: center;
}
.builder-section_dark {
background: #0b0b0f;
color: #f4f7ff;
border-radius: 16px;
box-shadow: 12px 12px 0 #ffc107;
border: 1px solid #ffc107;
}
.builder-section_dark .builder-section__title {
color: #f4f7ff;
}
.builder-section__title {
margin-bottom: 12px;
}
.builder-section__description {
font-size: 16px;
line-height: 1.6;
word-spacing: 0.06em;
}
.reason-list {
margin: 12px 0 0;
padding-left: 18px;
list-style: disc;
}
.timeline {
display: grid;
gap: 14px;
}
.timeline__item {
background: rgba(255, 255, 255, 0.06);
border-radius: 10px;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.builder-section:not(.builder-section_dark) .timeline__item {
background: #fff;
border: 1px solid #111;
box-shadow: 6px 6px 0 #ffc107;
}
.timeline__date {
font-weight: 700;
color: #0f2d69;
}
.builder-section_dark .timeline__date {
color: #cde0ff;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
margin-top: 14px;
}
.faq-card {
background: #fff;
border: 1px solid #111;
border-radius: 10px;
padding: 14px;
box-shadow: 6px 6px 0 #ffc107;
}
.builder-section_dark .faq-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
}
.easter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-top: 10px;
}
.egg {
border: 1px dashed #ffc107;
padding: 12px;
border-radius: 10px;
}
.results-bait .bait-card {
background: #0b0b0f;
color: #f8f8f8;
border: 1px solid #ffc107;
border-radius: 14px;
box-shadow: 12px 12px 0 #ffc107;
padding: 28px 18px;
text-align: center;
}
.bait-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 12px;
background: linear-gradient(90deg, #fff3cd, #ffe082);
color: #2c1a00;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
text-decoration: none;
margin: 12px auto;
box-shadow: 0 10px 26px rgba(255, 193, 7, 0.35);
}
.small-print {
font-size: 13px;
color: #c4c4c4;
}
.bilibino {
background: #0b0b0f;
color: #f8f8f8;
border: 1px solid #ffc107;
box-shadow: 12px 12px 0 #ffc107;
}
.bilibino-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
margin-top: 12px;
}
.bili-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 193, 7, 0.4);
border-radius: 12px;
padding: 14px;
}
.bili-note {
margin-top: 10px;
color: #f1d48a;
font-size: 14px;
}
.footer {
padding: 24px 16px;
background: #0f2d69;
color: #f4f7ff;
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
}
.tag {
background: rgba(255, 255, 255, 0.12);
padding: 8px 12px;
border-radius: 12px;
font-weight: 700;
}
.cta .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
word-spacing: 0.12em;
}
.toast {
position: fixed;
right: 16px;
bottom: 16px;
background: rgba(15, 45, 105, 0.92);
color: #f4f7ff;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
max-width: 280px;
z-index: 10;
}
.toast.visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 720px) {
.hero-img img.pc1 {
display: none;
}
.hero-img img.mobile1 {
display: block;
}
}
@media (min-width: 721px) {
.hero-img img.mobile1 {
display: none;
}
}