iiiypuk/yemin_player
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

change page view

Browse Source
This commit is contained in:
Alexander Popov
2022-02-27 10:59:47 +03:00
parent 1da3c99ec2
commit 4b3d71e728
5 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 135 KiB

2
humans.txt
View File

@@ -5,4 +5,4 @@ Twitter: @_iiiypuk
Location: Russia Location: Russia
/* SITE */ /* SITE */
Last update (Обновлено): 2022/02/02 Last update (Обновлено): 2022/02/27

24
index.html
View File

@@ -1,9 +1,10 @@
<!doctype html> <!doctype html>
<html> <html lang="ru">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Клятва - 2 сезон</title> <title>Клятва - 2 сезон</title>
<link href="/styles.css" rel="stylesheet">
</head> </head>
<body> <body>
<header> <header>
@@ -11,21 +12,19 @@
</header> </header>
<div class="container"> <div class="container">
<nav> <section class="section-episodes">
<p>Выбери серию =)</p> <div class="episodes">
<ul id="episodeList"></ul> <ul id="episodeList"></ul>
</nav> </div>
</section>
<hr> <section class="section-video">
<div class="video">
<p id="episodeName">&nbsp;</p>
<video id="video" controls> <video id="video" controls>
</video> </video>
</div> </section>
</div> </div>
<script type="text/javascript"> <script>
'use strict'; 'use strict';
let episodesList = [177, 178]; // example let episodesList = [177, 178]; // example
@@ -44,11 +43,8 @@
} }
function changeEpisode(episodeId) { function changeEpisode(episodeId) {
let episodeName = document.getElementById('episodeName');
let videoElement = document.getElementById('video'); let videoElement = document.getElementById('video');
episodeName.innerText = `${episodeId} серия`;
videoElement.textContent = ''; videoElement.textContent = '';
let videoSource = document.createElement('source'); let videoSource = document.createElement('source');
videoSource.setAttribute('src', `https://iiiypuk.me/y/o/${episodeId}.mp4`); videoSource.setAttribute('src', `https://iiiypuk.me/y/o/${episodeId}.mp4`);

6
publish.bat
View File

@@ -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 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 humans.txt alex@iiiypuk.me:~/Sites/iiiypuk.me/y/humans.txt
scp favicon.ico alex@iiiypuk.me:~/Sites/iiiypuk.me/y/favicon.ico scp favicon.ico alex@iiiypuk.me:~/Sites/iiiypuk.me/y/favicon.ico
scp bg.png alex@iiiypuk.me:~/Sites/iiiypuk.me/y/bg.png

63
styles.css
View File

@@ -1,9 +1,14 @@
@import url('/font/samsung-one-font.css'); @import url('/font/samsung-one-font.css');
:root {
--c-peace: #a4b0be;
--c-bay-wharf: #747d8c;
--c-wild-watermelon: #ff6b81;
--c-presige-blue: #2f3542;
}
body { body {
background-color: #fff; background-color: #fff;
background-image: url('bg.png');
background-repeat: repeat-x repeat-y;
font-family: 'SamsungOne', sans-serif; font-family: 'SamsungOne', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -15,41 +20,59 @@ div.container {
} }
header { header {
background-color: #000; background-color: var(--c-presige-blue);
color: #fff; color: #fff;
padding: 16px; padding: 16px;
} }
header p { section {
margin: 16px 0;
}
p.title {
font-size: 1.3em;
margin: 0; margin: 0;
} }
nav p { /* video section */
section.section-video {
text-align: center; text-align: center;
font-weight: bold;
} }
nav ul { /* 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; list-style-type: none;
text-align: center; text-align: center;
padding-left: 0; padding-left: 0;
} }
nav li { div.episodes li {
background-color: #ccc;
display: inline-block; display: inline-block;
border-radius: 8px;
padding: 8px;
border: 2px solid #000;
margin: 0 8px;
cursor: pointer; cursor: pointer;
padding: 8px 16px;
transition: background-color .2s;
} }
div.episodes li:first-child {
div.video { border-top-left-radius: 8px;
text-align: center; border-bottom-left-radius: 8px;
font-weight: bold;
} }
div.episodes li:last-child {
hr { border-top-right-radius: 8px;
border: 1px solid #444; border-bottom-right-radius: 8px;
}
div.episodes li:hover {
background-color: var(--c-bay-wharf);
transition: background-color .2s;
} }