change page view

move styles to file and fix editorconfig
autoload first episode
2022-02-27 10:59:47 +03:00 · 2022-02-23 21:13:04 +03:00 · 2022-02-23 21:06:52 +03:00 · 2022-02-23 20:21:32 +03:00
7 changed files with 122 additions and 70 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,12 @@
+## Плеер для сериала
+
+Develop
+-------
+**EditorConfig check**
+```
+$ ec
+```
+
+Благодарности
+-------------
+Спасибо маме, за то, что напрягла меня 🙂
--- a/bg.png
+++ b/bg.png
--- a/font/samsung-one-font.css
+++ b/font/samsung-one-font.css
@ -0,0 +1,9 @@
+@font-face {
+	font-family: 'SamsungOne';
+	src: url('SamsungOne-400.woff2') format('woff2'),
+		url('SamsungOne-400.woff') format('woff'),
+		url('SamsungOne-400.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
--- a/humans.txt
+++ b/humans.txt
@ -5,4 +5,4 @@ Twitter: @_iiiypuk
 Location: Russia

 /* SITE */
-Last update (Обновлено): 2022/02/02
+Last update (Обновлено): 2022/02/27
--- a/index.html
+++ b/index.html
@ -1,59 +1,10 @@
 <!doctype html>
-<html>
+<html lang="ru">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Клятва - 2 сезон</title>
-	<style>
-		body {
-			background-color: #fff;
-			background-image: url('bg.png');
-			background-repeat: repeat-x repeat-y;
-			font-family: sans-serif;
-			margin: 0;
-			padding: 0;
-		}
-
-		div.container {
-			max-width: 800px;
-			margin: 10px auto;
-		}
-
-		header {
-			background-color: #000;
-			color: #fff;
-			padding: 16px;
-		}
-
-		header p {
-			margin: 0;
-		}
-
-		nav p {
-			text-align: center;
-			font-weight: bold;
-		}
-
-		nav ul {
-			list-style-type: none;
-			text-align: center;
-			padding-left: 0;
-		}
-
-		nav li {
-			background-color: #ccc;
-			display: inline-block;
-			border-radius: 8px;
-			padding: 8px;
-			border: 2px solid #000;
-			margin: 0 8px;
-			cursor: pointer;
-		}
-
-		div.video {
-			text-align: center;
-			font-weight: bold;
-		}
-	</style>
+	<link href="/styles.css" rel="stylesheet">
 </head>
 <body>
 	<header>
@ -61,22 +12,22 @@
 	</header>

 	<div class="container">
-		<nav>
-			<p>Выбери серию =)</p>
-			<ul id="episodeList"></ul>
-		</nav>
+		<section class="section-episodes">
+			<div class="episodes">
+				<ul id="episodeList"></ul>
+			</div>
+		</section>

-		<div class="video">
-			<p id="episodeName">&nbsp;</p>
+		<section class="section-video">
 			<video id="video" controls>
 			</video>
-		</div>
+		</section>
 	</div>

-<script type="text/javascript">
+<script>
 	'use strict';

-	let episodesList = [];
+	let episodesList = [177, 178]; // example

 	window.onload = function() {
 		let episodeListElement = document.getElementById('episodeList');
@ -88,19 +39,17 @@
 			episodeListElement.appendChild(episodeItem);
 		});

+		changeEpisode(episodesList[0]);
 	}

 	function changeEpisode(episodeId) {
-		let episodeName = document.getElementById('episodeName');
 		let videoElement = document.getElementById('video');

-		episodeName.innerText = `${episodeId} серия`;
-
 		videoElement.textContent = '';
-	    let videoSource = document.createElement('source');
-	    videoSource.setAttribute('src', `https://iiiypuk.me/y/o/${episodeId}.mp4`);
-	    videoSource.setAttribute('type', 'video/mp4');
-	    videoElement.appendChild(videoSource);
+		let videoSource = document.createElement('source');
+		videoSource.setAttribute('src', `https://iiiypuk.me/y/o/${episodeId}.mp4`);
+		videoSource.setAttribute('type', 'video/mp4');
+		videoElement.appendChild(videoSource);
 		videoElement.load();
 	}
 </script>
--- a/publish.bat
+++ b/publish.bat
@ -1,4 +1,8 @@
+scp font/samsung-one-font.css alex@iiiypuk.me:~/Sites/iiiypuk.me/y/font/samsung-one-font.css
+scp font/SamsungOne-400.ttf alex@iiiypuk.me:~/Sites/iiiypuk.me/y/font/SamsungOne-400.ttf
+scp font/SamsungOne-400.woff alex@iiiypuk.me:~/Sites/iiiypuk.me/y/font/SamsungOne-400.woff
+scp font/SamsungOne-400.woff2 alex@iiiypuk.me:~/Sites/iiiypuk.me/y/font/SamsungOne-400.woff2
 scp index.html alex@iiiypuk.me:~/Sites/iiiypuk.me/y/index.html
+scp styles.css alex@iiiypuk.me:~/Sites/iiiypuk.me/y/styles.css
 scp humans.txt alex@iiiypuk.me:~/Sites/iiiypuk.me/y/humans.txt
 scp favicon.ico alex@iiiypuk.me:~/Sites/iiiypuk.me/y/favicon.ico
-scp bg.png alex@iiiypuk.me:~/Sites/iiiypuk.me/y/bg.png
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,78 @@
+@import url('/font/samsung-one-font.css');
+
+:root {
+	--c-peace: #a4b0be;
+	--c-bay-wharf: #747d8c;
+	--c-wild-watermelon: #ff6b81;
+	--c-presige-blue: #2f3542;
+}
+
+body {
+	background-color: #fff;
+	font-family: 'SamsungOne', sans-serif;
+	margin: 0;
+	padding: 0;
+}
+
+div.container {
+	max-width: 800px;
+	margin: 10px auto;
+}
+
+header {
+	background-color: var(--c-presige-blue);
+	color: #fff;
+	padding: 16px;
+}
+
+section {
+	margin: 16px 0;
+}
+
+p.title {
+	font-size: 1.3em;
+	margin: 0;
+}
+
+/* video section */
+section.section-video {
+	text-align: center;
+}
+
+/* episodes section */
+section.section-episodes {
+	text-align: center;
+}
+
+div.episodes {
+	background-color: var(--c-peace);
+	display: inline-block;
+	border: 2px solid #000;
+	border-radius: 8px;
+}
+
+div.episodes ul {
+	margin: 0;
+	list-style-type: none;
+	text-align: center;
+	padding-left: 0;
+}
+
+div.episodes li {
+	display: inline-block;
+	cursor: pointer;
+	padding: 8px 16px;
+	transition: background-color .2s;
+}
+div.episodes li:first-child {
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+div.episodes li:last-child {
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+div.episodes li:hover {
+	background-color: var(--c-bay-wharf);
+	transition: background-color .2s;
+}
Author	SHA1	Message	Date
Alexander Popov	4b3d71e728	change page view	2022-02-27 10:59:47 +03:00
Alexander Popov	1da3c99ec2	move styles to file and fix editorconfig	2022-02-23 21:13:04 +03:00
Alexander Popov	7b88cba43c	autoload first episode	2022-02-23 21:06:52 +03:00
Alexander Popov	f2094640fe	add font	2022-02-23 20:21:32 +03:00