My-First-Site-Expirience/site.html at master · Diablolend/My-First-Site-Expirience · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="ru">

	<head>
		<title>First HTML expierience</title>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=0.0, maximum-scale=1.0">
		<base target="_blank">
		<link href="data/images/icons/favicon.ico" rel="icon" type="image/x-icon"/>
		<script src="data/js/html5shiv.js"></script>
		<script src="data/js/jquery-3.6.1.js"></script>
		<script src="data/js/index.js"></script>
		<script src="data/js/webamp.bundle.js"></script>
		<!-- <link rel="stylesheet" href="data/css/reset.css"/> -->
		<link rel="stylesheet" href="data/css/style.css"/>
	</head>

	<!-- Это основное тело страницы. -->
	<body>
	<script src="data/js/HTML_Pages/background.js"></script>
	<div class="body">
		<!-- Это головной блок. Здесь обычно располагается меню сайта. -->
		<header>
			<nav>
				<ul class="ul_nav my-tabs">
					<li class="li_logo" title="Логотип сайта и переход к предупредительной странице"><a href="index.html" target="_self"><img src="data/images/icons/HTML5_logo_and_wordmark.svg"/></a></li>
					<li class="li_nav my-tabs-link" title="Первая вкладка. Расскажет обо мне."><a href="#main_one" target="_self">
						<span class="text_nav"><b>Главная</b></span><br>
						<span class="description_nav">Обо мне</span>
					</a></li>
					<li class="li_nav my-tabs-link" title="Вторая вкладка. Здесь я делаю мини и просто проекты вперемешку с практикой."><a href="#main_two" target="_self">
						<span class="text_nav"><b>Проектики</b></span><br>
						<span class="description_nav">Моё творчество</span>
					</a></li>
					<li class="li_nav my-tabs-link" title="Третья вкладка. Что я и как сделал и просто записи."><a href="#main_three" target="_self">
						<span class="text_nav"><b>Хранилище</b></span><br>
						<span class="description_nav">База знаний</span>
					</a></li>
					<li class="li_nav" title="Взглянуть на исходники этого сайта"><a href="https://github.com/Diablolend/My-First-Site-Expirience">
						<span class="text_nav"><b>GitHub</b></span><br>
						<span class="description_nav">Исходный код сайта</span>
					</a></li>
					<li class="li_nav" title="Слышь дай ДЕНЯК"><a href="https://boosty.to/diablolend">
						<span class="text_nav"><b>Задонатить</b></span><br>
						<span class="description_nav">(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</span>
					</a></li>
				</ul>
				<ul class="functional_buttons">
					<li class="li_nav" title="Переключения стиля сайта"><a href="#" target="_self">
						<span class="description_nav">Стиль</span>
					</a></li>
					<li class="li_nav" title="Полностью рандомная кнопка. Может менять функционал время от времени"><a href="#" target="_self">
						<span class="description_nav">Тесты</span>
					</a></li>
				</ul>
			</nav>
		</header>

		<!-- Это боковая панель. Но нуждается в форматировании. ^_^ -->
		<aside>
			<!-- Панель для авторизации на сайте. -->
			<div class="auth_panel">
				<p class="block_head"><b>Авторизация</b></p>
				<hr>
				<p>Вы не вошли.</p>
				<input name="имя" type="text" placeholder="Имя пользователя" /><br>
				<input name="пароль" type="password" placeholder="Пароль" /><br>
				<input type="checkbox" name="Remember_password">
				<label for="Remember_password" style="font-size: large;">Запомнить</label><br>
				<input type="submit" onclick="alert('Вийди отсюда, розбийник.');" value="Войти" />
				<input type="submit" onClick="window.location.href='register.html'" value="Регистрация" /><br>
				<input type="submit" onClick="window.location.href='forgot.html'" value="Забыли данные?" />
			</div>
			<!-- Это боковая панель для ссылочек. ^_^ -->
			<div class="sidebar">
				<p class="block_head"><b>Ссылки</b></p>
				<hr>
				<div class="return_anim">
				<a href="https://vk.com/diablolend">Мой ВКонтакте</a><br>
				<a href="https://steamcommunity.com/id/diablolend/">Стимчанский</a><br>
				<a href="https://discord.gg/aNBSxZE">Канал Дискорд</a><br>
				</div>
				<hr>
				<div class="return_anim">
				<a href="https://diablolend.github.io/netology-learn/">Учёба в Нетологии</a>
				</div>
			</div>
			<!-- Это новостное блок. Нужен для новостей. -->
			<article class="news">
				<p class="block_head"><b>Новости</b></p>
				<hr>
				<p>Всё стабильно.</p>
				<iframe class="discord" src="https://discord.com/widget?id=193842199480369152&theme=dark" width="100%" height="666" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
			</article>
		</aside>

		<!-- Первая вкладка. Обо мне и сайте. -->
		<main id="main_one" class="my-tabs-content active">
			<div class="h1_and_button">
				<h1>Практический сайт</h1>
				<div>
					<input type="button" value="Открыть все" onclick="$('.spoiler_body').slideDown('normal')">
					<input type="button" value="Закрыть все" onclick="$('.spoiler_body').slideUp('normal')">
				</div>
			</div>
			<hr>
			<p>Приветствую тебя здесь, кто бы ты ни был. Данный сайт является для меня практикой в веб-программировании на HTML, CSS и JavaScript.</p>
			<article class="progress">
				<p class="block_head"><b>Моё продвижение в изучении:</b></p><hr>
				<table class="progress">
					<tr><td><label for="Web_programming">Веб-программирование: </label></td><td><progress id="Web_programming" max="100" value="17"></progress></td></tr>
					<tr><td><label for="HTML">HTML: </label></td><td><progress id="HTML" max="100" value="70"></progress></td></tr>
					<tr><td><label for="CSS">CSS: </label></td><td><progress id="CSS" max="100" value="45"></progress></td></tr>
					<tr><td><label for="JavaScript">JavaScript: </label></td><td><progress id="JavaScript" max="100" value="6"></progress></td></tr>
					<tr><td><label for="JQuery">JQuery: </label></td><td><progress id="JQuery" max="100" value="0"></progress></td></tr>
					<tr><td><label for="React.js">React.js: </label></td><td><progress id="React.js" max="100" value="0"></progress></td></tr>
					<tr><td><label for="Vue.js">Vue.js: </label></td><td><progress id="Vue.js" max="100" value="0"></progress></td></tr>
					<tr><td><label for="Node.js">Node.js: </label></td><td><progress id="Node.js" max="100" value="0"></progress></td></tr>
				</table>
			</article>
			<hr>
		</main>

		<!-- Вторая вкладка. Для проектов. -->
		<main id="main_two" class="my-tabs-content">
			<div class="h1_and_button">
				<h1>Мои Проектики</h1>
				<div>
					<input type="button" value="Открыть все" onclick="$('.spoiler_body').slideDown('normal')">
					<input type="button" value="Закрыть все" onclick="$('.spoiler_body').slideUp('normal')">
				</div>
			</div>
			<hr>
			<div class="spoiler_head">Генерируемая таблица</div>
			<div class="spoiler_body">
				<script>CreateTablePreset();</script>
				<!-- <button type="button" onclick="CreateTablePreset();">Создать таблицу!</button> -->
			</div><br>
			<div class="spoiler_head">Текстбокс</div>
			<div class="spoiler_body">
				<textarea class="some_textbox" placeholder="Напиши что-нибудь. Это никто не узнает. Честно."></textarea>
            </div><br>
			<div class="spoiler_head">Уничтожение сайта</div>
			<div class="spoiler_body">
				<button type="button" onclick="document.write('<style>body{background-color:black;margin-top:300px;}h1{text-align:center;color:darkred;}</style><h1>Сайт был уничтожен</h1>');"><h1>Уничтожить сайт</h1></button>
			</div><br>
			<div class="spoiler_head">Режим "Долой сайт - хочу фон"</div>
			<div class="spoiler_body">
				<button type="button" onclick="document.querySelector('.body').style.cssText = 'display: none;';"><h1>Долой сайт - хочу фон!</h1></button>
			</div><br>
			<div class="spoiler_head">Кнопка для баловства (Если ничего не произошло, то смотри логи)</div>
			<div class="spoiler_body">
				<button type="button" onclick="resultation()"><h1>Пуньк</h1></button>
			</div><br>
			<div class="spoiler_head">Webamp - плеер Winamp</div>
			<div class="spoiler_body">
				<button type="button" onclick="Web_player();"><h2><b>Нажми сюда для создания плеера</b></h2></button>
				<p>Ссылочка на исходник: <a class="without_style" href="https://github.com/captbaritone/webamp">Github</a>
				</p>
				<div id="app"></div>
			</div><br>
		</main>

		<!-- Третья вкладка. База знаний. -->
        <main id="main_three" class="my-tabs-content">
			<div class="h1_and_button">
				<h1>База знаний</h1>
				<div>
					<input type="button" value="Открыть все" onclick="$('.spoiler_body').slideDown('normal')">
					<input type="button" value="Закрыть все" onclick="$('.spoiler_body').slideUp('normal')">
				</div>
			</div>
			<hr>
			<div class="spoiler_head">Как устроен фон сайта</div>
			<div class="spoiler_body">
			<object type="image/svg+xml" data="data/images/svg/Background-site.svg">Здесь должна быть векторная картинка, но она не работает. :(</object>
			</div><br>
        </main>

		<!-- Подвальное тело. Нужно для копирайтов, правил и прочего. -->
		<footer>
			<div class="return_anim">
				<a href="mailto:diablolend@gmail.com">Написать мне</a>
			</div>
			<p><b>© Diablolend, 2022.</b></p>
		</footer>

		<!-- Кнопки вверх и вниз. -->
		<div class="up-down">
			<span class="up"><a onClick="ScrollUp();" style="user-select: none; ">↑</a></span><br><br>
			<span class="down"><a onclick="ScrollDown();" style="user-select: none;">↓</a></span>
		</div>
	</div>
	</body>
</html>