ChessTrainig/index.html at main · CraftyMuffin/ChessTrainig · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
    <title>ChessTraining</title>
    <meta charset="utf-8">
    <meta name="keywords" content="Добро пожаловать на наш сайт ChessTraining. Мы сделали этот сайт для решения задач по шахматам. Решая их каждый день, вы будете становиться всё сильнее и сильнее. Жми кнопку в меню и становись лучшим игроком шахмат!">
    <link rel="shortcut icon" href="https://i.imgur.com/fcWSaD9.png">
    <link rel="stylesheet" href="style.css">
    <style>
        /* Стили для кнопки */
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .animated-button {
            background-color: #9400D3; /* Фиолетовый цвет */
            color: #fff;
            padding: 20px 40px; /* Увеличьте отступы, чтобы сделать кнопку больше */
            border: none;
            border-radius: 10px; /* Увеличьте радиус скругления углов */
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        /* Анимация при наведении курсора */
        .animated-button:hover {
            background-color: #6A0DAD; /* Фиолетовый цвет при наведении */
            transform: scale(1.1); /* Увеличение кнопки при наведении */
        }

        /* Стили для текста заголовка и параграфа */
        h1 {
            font-size: 28px; /* Уменьшили размер заголовка */
            margin-top: 20px; /* Добавили верхний отступ */
        }

        p {
            font-size: 20px; /* Уменьшили размер параграфа */
            margin-top: 10px; /* Добавили верхний отступ */
        }

        /* Добавлено свойство для картинки */
        img {
            margin-top: 30px; /* Увеличили верхний отступ для картинки */
        }

        /* Стили для меню задач */
        .task-menu {
            display: none; /* Скрываем меню по умолчанию */
        }

        .task-menu.active {
            display: block; /* Показываем меню при активации */
        }

        .task-levels {
            list-style: none;
            padding: 0;
        }

        .task-levels li {
            margin: 10px 0;
        }

        /* Стили для опции подписки */
        .subscription-option {
            font-size: 18px;
            margin-top: 20px;
        }
    </style>
</head>
<body style="background-color: #fff;">
    <div class="container">
        <img src="https://i.imgur.com/pFaVdoh.png" alt="" width="1400" height="760">
        <h1>Добро пожаловать!</h1>
        <p>
            Добро пожаловать на наш сайт <em>ChessTraining</em>.<br>
            Мы сделали этот сайт для решения задач по шахматам.<br>
            Решая их каждый день, вы будете становиться всё сильнее и сильнее. <br>
            <b>Жми кнопку, чтобы начать решать задачи!</b>
        </p>
        <button type="button" class="animated-button" onclick="showTaskMenu()">К задачам</button>
        <div class="task-menu">
            <h2>Выберите уровень сложности:</h2>
            <ul class="task-levels">
                <li><a href="easy_puzzle.html">Легкий</a></li>
                <li><a href="">Средний</a></li>
                <li><a href="">Сложный</a></li>
                <li><a href="random_puzzle.html">Рандомный</a></li>
            </ul>
        </div>
        <hr>
        <ul>
            <a href="https://lichess.org/team/craftymuffins-club" target="_blank">
                <li>Наш клуб на Личесс</li>
            </a>
        </ul>
    </div>

    <script>
        function showTaskMenu() {
            var taskMenu = document.querySelector('.task-menu');
            taskMenu.classList.add('active');
        }
    </script>
</body>
</html>