102 lines
3.9 KiB
HTML
102 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
|
||
<title>SpeakDaily — английский для работы</title>
|
||
<meta name="description" content="Ежедневный тренажёр английского для общения с коллегами: слова, диалоги, чтение, аудирование, говорение и письмо.">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🗣️</text></svg>">
|
||
</head>
|
||
<body>
|
||
|
||
<header class="top">
|
||
<div class="top-row">
|
||
<div class="brand">
|
||
<span class="logo">🗣️</span>
|
||
<span>SpeakDaily<small>английский для работы</small></span>
|
||
</div>
|
||
<div class="pills">
|
||
<button class="pill bell" id="bellBtn" title="Напоминания">🔔</button>
|
||
<span class="pill" id="streak">🔥 1</span>
|
||
<span class="pill" id="level">Intermediate</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="wrap">
|
||
<div class="hello">Привет! Рад, что ты здесь 👋</div>
|
||
<div class="banner" id="reminderBanner" hidden></div>
|
||
<div class="goal-card">
|
||
<div class="goal-title" id="goalTitle">Цель: свободный английский за 6 месяцев</div>
|
||
<div class="goal-sub" id="goalSub"></div>
|
||
<div class="progress"><span id="goalBar" style="width:0%"></span></div>
|
||
<div class="goal-meta">
|
||
<span id="goalMetaL"></span>
|
||
<span id="goalMetaR"></span>
|
||
</div>
|
||
</div>
|
||
<div class="mission">
|
||
<h3>Задания на сегодня</h3>
|
||
<div class="mission-grid" id="mission"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<nav class="tabs"><div class="tab-row" id="tabrow"></div></nav>
|
||
|
||
<main>
|
||
<div class="wrap">
|
||
<div class="day-bar" id="dayBar">
|
||
<span class="day-tag" id="dayTag"></span>
|
||
<div class="btnrow">
|
||
<button class="btn ghost" id="prevDay" style="padding:8px 14px">←</button>
|
||
<button class="btn ghost" id="nextDay" style="padding:8px 14px">→</button>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="panel" id="words"></section>
|
||
<section class="panel" id="dialogue"></section>
|
||
<section class="panel" id="reading"></section>
|
||
<section class="panel" id="listening"></section>
|
||
<section class="panel" id="speaking"></section>
|
||
<section class="panel" id="writing"></section>
|
||
<section class="panel" id="test"></section>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="done-bar">
|
||
<div class="wrap">
|
||
<div class="info" id="doneInfo"></div>
|
||
<button class="done-btn" id="doneBtn">Отметить выполненным</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<div class="modal" id="remModal">
|
||
<div class="modal-card">
|
||
<h3 class="modal-h">🔔 Напоминания</h3>
|
||
<p class="hint">Напоминание приходит в выбранное время, пока вкладка открыта. А при входе мы подскажем, если ты ещё не занимался сегодня.</p>
|
||
<div class="row-between">
|
||
<div>
|
||
<div class="rl">Ежедневное напоминание</div>
|
||
<div class="hint" id="remPerm" style="margin:0"></div>
|
||
</div>
|
||
<label class="switch"><input type="checkbox" id="remOn"><span class="sl"></span></label>
|
||
</div>
|
||
<div class="field">
|
||
<div class="rl" style="margin-bottom:8px">Время напоминания</div>
|
||
<input type="time" id="remTime" class="time-input">
|
||
</div>
|
||
<button class="btn primary block" id="remSave">Сохранить</button>
|
||
<button class="btn ghost block" id="remCancel" style="margin-top:8px">Отмена</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="data.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|