program/templates/index.html - master - aska/Ask

program/templates/index.html
72 строки2 KB
andmigunv
Добавлены файлы сервиса коротких ссылок
08 июн 2026, 00:14
08 июн 2026, 00:140e2427c
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Сервис коротких ссылок</title>
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: system-ui, sans-serif;
            max-width: 600px;
            margin: 40px auto;
            padding: 0 20px;
            color: #222;
        }
        h1 { font-size: 1.5rem; }
        form { margin: 24px 0; }
        input[type="url"], input[type="text"] {
            width: 100%;
            padding: 10px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 6px;
        }
        button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 1rem;
            background: #2563eb;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }
        button:hover { background: #1d4ed8; }
        .error { color: #dc2626; margin: 12px 0; }
        .result {
            background: #f0fdf4;
            border: 1px solid #86efac;
            border-radius: 8px;
            padding: 16px;
            margin-top: 20px;
        }
        .result a { color: #2563eb; word-break: break-all; }
        .label { font-size: 0.85rem; color: #666; margin-bottom: 4px; }
    </style>
</head>
<body>
    <h1>Сервис коротких ссылок</h1>
    <p>Сократите длинную ссылку и отслеживайте переходы.</p>

    {% if error %}
    <p class="error">{{ error }}</p>
    {% endif %}

    <form action="/create" method="post">
        <label class="label" for="url">Длинная ссылка</label>
        <input type="url" id="url" name="url" placeholder="https://example.com/page" required>
        <button type="submit">Сократить</button>
    </form>

    {% if short_url %}
    <div class="result">
        <p class="label">Короткая ссылка</p>
        <p><a href="{{ short_url }}">{{ short_url }}</a></p>
        <p class="label">Оригинал</p>
        <p><a href="{{ long_url }}">{{ long_url }}</a></p>
        <p><a href="{{ stats_url }}">Статистика переходов</a></p>
    </div>
    {% endif %}
</body>
</html>