React
This commit is contained in:
parent
d54e881b8f
commit
8eea56f502
@ -1,10 +0,0 @@
|
|||||||
# editorconfig.org
|
|
||||||
|
|
||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
charset = utf-8
|
|
||||||
indent_size = 2
|
|
||||||
indent_style = space
|
|
||||||
insert_final_newline = true
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
194
.gitattributes
vendored
194
.gitattributes
vendored
@ -1,194 +0,0 @@
|
|||||||
## GITATTRIBUTES FOR WEB PROJECTS
|
|
||||||
#
|
|
||||||
# These settings are for any web project.
|
|
||||||
#
|
|
||||||
# Details per file setting:
|
|
||||||
# text These files should be normalized (i.e. convert CRLF to LF).
|
|
||||||
# binary These files are binary and should be left untouched.
|
|
||||||
#
|
|
||||||
# Note that binary is a macro for -text -diff.
|
|
||||||
######################################################################
|
|
||||||
|
|
||||||
## AUTO-DETECT
|
|
||||||
## Handle line endings automatically for files detected as
|
|
||||||
## text and leave all files detected as binary untouched.
|
|
||||||
## This will handle all files NOT defined below.
|
|
||||||
* text=auto
|
|
||||||
|
|
||||||
## SOURCE CODE
|
|
||||||
*.bat text eol=crlf
|
|
||||||
*.coffee text
|
|
||||||
*.css text
|
|
||||||
*.htm text
|
|
||||||
*.html text
|
|
||||||
*.inc text
|
|
||||||
*.ini text
|
|
||||||
*.js text
|
|
||||||
*.json text
|
|
||||||
*.jsx text
|
|
||||||
*.less text
|
|
||||||
*.od text
|
|
||||||
*.onlydata text
|
|
||||||
*.php text
|
|
||||||
*.pl text
|
|
||||||
*.py text
|
|
||||||
*.rb text
|
|
||||||
*.sass text
|
|
||||||
*.scm text
|
|
||||||
*.scss text
|
|
||||||
*.sh text eol=lf
|
|
||||||
*.sql text
|
|
||||||
*.styl text
|
|
||||||
*.tag text
|
|
||||||
*.ts text
|
|
||||||
*.tsx text
|
|
||||||
*.xml text
|
|
||||||
*.xhtml text
|
|
||||||
|
|
||||||
## DOCKER
|
|
||||||
*.dockerignore text
|
|
||||||
Dockerfile text
|
|
||||||
|
|
||||||
## DOCUMENTATION
|
|
||||||
*.markdown text
|
|
||||||
*.md text
|
|
||||||
*.mdwn text
|
|
||||||
*.mdown text
|
|
||||||
*.mkd text
|
|
||||||
*.mkdn text
|
|
||||||
*.mdtxt text
|
|
||||||
*.mdtext text
|
|
||||||
*.txt text
|
|
||||||
AUTHORS text
|
|
||||||
CHANGELOG text
|
|
||||||
CHANGES text
|
|
||||||
CONTRIBUTING text
|
|
||||||
COPYING text
|
|
||||||
copyright text
|
|
||||||
*COPYRIGHT* text
|
|
||||||
INSTALL text
|
|
||||||
license text
|
|
||||||
LICENSE text
|
|
||||||
NEWS text
|
|
||||||
readme text
|
|
||||||
*README* text
|
|
||||||
TODO text
|
|
||||||
|
|
||||||
## TEMPLATES
|
|
||||||
*.dot text
|
|
||||||
*.ejs text
|
|
||||||
*.haml text
|
|
||||||
*.handlebars text
|
|
||||||
*.hbs text
|
|
||||||
*.hbt text
|
|
||||||
*.jade text
|
|
||||||
*.latte text
|
|
||||||
*.mustache text
|
|
||||||
*.njk text
|
|
||||||
*.phtml text
|
|
||||||
*.tmpl text
|
|
||||||
*.tpl text
|
|
||||||
*.twig text
|
|
||||||
|
|
||||||
## LINTERS
|
|
||||||
.babelrc text
|
|
||||||
.csslintrc text
|
|
||||||
.eslintrc text
|
|
||||||
.htmlhintrc text
|
|
||||||
.jscsrc text
|
|
||||||
.jshintrc text
|
|
||||||
.jshintignore text
|
|
||||||
.prettierrc text
|
|
||||||
.stylelintrc text
|
|
||||||
|
|
||||||
## CONFIGS
|
|
||||||
*.bowerrc text
|
|
||||||
*.cnf text
|
|
||||||
*.conf text
|
|
||||||
*.config text
|
|
||||||
.browserslistrc text
|
|
||||||
.editorconfig text
|
|
||||||
.gitattributes text
|
|
||||||
.gitconfig text
|
|
||||||
.gitignore text
|
|
||||||
.htaccess text
|
|
||||||
*.npmignore text
|
|
||||||
*.yaml text
|
|
||||||
*.yml text
|
|
||||||
browserslist text
|
|
||||||
Makefile text
|
|
||||||
makefile text
|
|
||||||
|
|
||||||
## HEROKU
|
|
||||||
Procfile text
|
|
||||||
.slugignore text
|
|
||||||
|
|
||||||
## GRAPHICS
|
|
||||||
*.ai binary
|
|
||||||
*.bmp binary
|
|
||||||
*.eps binary
|
|
||||||
*.gif binary
|
|
||||||
*.ico binary
|
|
||||||
*.jng binary
|
|
||||||
*.jp2 binary
|
|
||||||
*.jpg binary
|
|
||||||
*.jpeg binary
|
|
||||||
*.jpx binary
|
|
||||||
*.jxr binary
|
|
||||||
*.pdf binary
|
|
||||||
*.png binary
|
|
||||||
*.psb binary
|
|
||||||
*.psd binary
|
|
||||||
*.svg text
|
|
||||||
*.svgz binary
|
|
||||||
*.tif binary
|
|
||||||
*.tiff binary
|
|
||||||
*.wbmp binary
|
|
||||||
*.webp binary
|
|
||||||
|
|
||||||
## AUDIO
|
|
||||||
*.kar binary
|
|
||||||
*.m4a binary
|
|
||||||
*.mid binary
|
|
||||||
*.midi binary
|
|
||||||
*.mp3 binary
|
|
||||||
*.ogg binary
|
|
||||||
*.ra binary
|
|
||||||
|
|
||||||
## VIDEO
|
|
||||||
*.3gpp binary
|
|
||||||
*.3gp binary
|
|
||||||
*.as binary
|
|
||||||
*.asf binary
|
|
||||||
*.asx binary
|
|
||||||
*.fla binary
|
|
||||||
*.flv binary
|
|
||||||
*.m4v binary
|
|
||||||
*.mng binary
|
|
||||||
*.mov binary
|
|
||||||
*.mp4 binary
|
|
||||||
*.mpeg binary
|
|
||||||
*.mpg binary
|
|
||||||
*.ogv binary
|
|
||||||
*.swc binary
|
|
||||||
*.swf binary
|
|
||||||
*.webm binary
|
|
||||||
|
|
||||||
## ARCHIVES
|
|
||||||
*.7z binary
|
|
||||||
*.gz binary
|
|
||||||
*.jar binary
|
|
||||||
*.rar binary
|
|
||||||
*.tar binary
|
|
||||||
*.zip binary
|
|
||||||
|
|
||||||
## FONTS
|
|
||||||
*.ttf binary
|
|
||||||
*.eot binary
|
|
||||||
*.otf binary
|
|
||||||
*.woff binary
|
|
||||||
*.woff2 binary
|
|
||||||
|
|
||||||
## EXECUTABLES
|
|
||||||
*.exe binary
|
|
||||||
*.pyc binary
|
|
||||||
26
.gitignore
vendored
26
.gitignore
vendored
@ -1,6 +1,24 @@
|
|||||||
# Include your project-specific ignores in this file
|
# Logs
|
||||||
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
|
logs
|
||||||
# Useful .gitignore templates: https://github.com/github/gitignore
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
node_modules
|
node_modules
|
||||||
dist
|
dist
|
||||||
.cache
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 351 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 276 KiB |
@ -1,84 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Тарелька</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
||||||
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
|
|
||||||
rel="stylesheet" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<a class="navbar-brand" href="/">
|
|
||||||
<i class="fa-solid fa-video-camera"></i>
|
|
||||||
Тарелька
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav" >
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<input class="form-control me-1 nav-link" type="search" style="width: 90%" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="back" type="submit" onclick="document.location='/search.html'">
|
|
||||||
<i class="fa-solid fa-search"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<button class="login nav-link me-1" style="width: 90%" onclick="document.location='/login.html'">Войти/Зарегистрироватся</button>
|
|
||||||
<button class="user nav-link" type="submit" onclick="document.location='/chanel.html'">
|
|
||||||
<i class="fa-solid fa-user"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<div style="width: 100%; height: 20%">
|
|
||||||
<img src="video/fon.jpg" style="width: 100%; height: 100%">
|
|
||||||
</div>
|
|
||||||
<div class="chanel rows" style="--bs-gutter-x: 0;">
|
|
||||||
<div class="chanel-user">
|
|
||||||
<i class="fa-solid fa-user" style="margin: 35% 0 0 35%"> </i>
|
|
||||||
</div>
|
|
||||||
<div class="chanel-text column">
|
|
||||||
<div>НАЗВАНИЕ КАНАЛА</div>
|
|
||||||
</div>
|
|
||||||
<button class="chanel-subscribe" onclick="document.location='videored.html'">
|
|
||||||
Редактировать
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<table id="items-table" class="table table-striped">
|
|
||||||
<thead>
|
|
||||||
<th scope="col">№</th>
|
|
||||||
<th scope="col" class="w-25">Автор</th>
|
|
||||||
<th scope="col" class="w-25">Название</th>
|
|
||||||
<th scope="col"></th>
|
|
||||||
<th scope="col"></th>
|
|
||||||
</thead>
|
|
||||||
<tbody></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<script type="module">
|
|
||||||
import validation from "./js/validation";
|
|
||||||
import { linesForm } from "./js/lines";
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
validation();
|
|
||||||
linesForm();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
109
chanel.html
109
chanel.html
@ -1,109 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Тарелька</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
||||||
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
|
|
||||||
rel="stylesheet" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<a class="navbar-brand" href="/">
|
|
||||||
<i class="fa-solid fa-video-camera"></i>
|
|
||||||
Тарелька
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav" >
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<input class="form-control me-1 nav-link" type="search" style="width: 90%" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="back" type="submit" onclick="document.location='/search.html'">
|
|
||||||
<i class="fa-solid fa-search"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<button class="login nav-link me-1" style="width: 90%" onclick="document.location='/login.html'">Войти/Зарегистрироватся</button>
|
|
||||||
<button class="user nav-link" type="submit" onclick="document.location='/chanel.html'">
|
|
||||||
<i class="fa-solid fa-user"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<div style="width: 100%; height: 20%">
|
|
||||||
<img src="video/fon.jpg" style="width: 100%; height: 100%">
|
|
||||||
</div>
|
|
||||||
<div class="chanel rows" style="--bs-gutter-x: 0;">
|
|
||||||
<div class="chanel-user">
|
|
||||||
<i class="fa-solid fa-user" style="margin: 35% 0 0 35%"> </i>
|
|
||||||
</div>
|
|
||||||
<div class="chanel-text">
|
|
||||||
НАЗВАНИЕ КАНАЛА
|
|
||||||
</div>
|
|
||||||
<button class="chanel-subscribe">
|
|
||||||
Подписаться
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="rows images">
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
645
css/style.css
645
css/style.css
@ -1,645 +0,0 @@
|
|||||||
html, body {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-family: sans-serif;
|
|
||||||
line-height: 1.15;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
header {
|
|
||||||
background-color: #87B650;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 0.5em;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
header nav {
|
|
||||||
justify-content: flex-end !important;
|
|
||||||
display: flex !important;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
header a {
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
margin: 0 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
header a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
|
||||||
padding: 0.5em;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
min-height: calc(100% - 64px - 32px - 0.5em * 6);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: #9c9c9c;
|
|
||||||
color: #ffffff;
|
|
||||||
height: 32px;
|
|
||||||
padding: 0.5em;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item > label {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: .3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control, .form-select {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #212529;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #ced4da;
|
|
||||||
border-radius: .375em;
|
|
||||||
padding: .375rem .75rem;
|
|
||||||
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select {
|
|
||||||
padding: .375rem 2.25rem .375rem .75rem;
|
|
||||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right .75rem center;
|
|
||||||
background-size: 16px 12px;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:not(:disabled) {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: .375em;
|
|
||||||
border: 1px solid #336fab;
|
|
||||||
padding: .375rem .75rem;
|
|
||||||
background-color: #336fab;
|
|
||||||
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login{
|
|
||||||
display: inline-flex;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: black;
|
|
||||||
border-radius: .5em;
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
padding: .375rem .75rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
border: 2px solid #ffa367;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 10px;
|
|
||||||
width: 40px;
|
|
||||||
background-color: #ffa367;
|
|
||||||
background-origin:content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user {
|
|
||||||
font-size: 1rem;
|
|
||||||
width: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #ffa367;
|
|
||||||
background-color: #ffa367;
|
|
||||||
padding: 10px;
|
|
||||||
background-origin: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-blank
|
|
||||||
{
|
|
||||||
height: 60%;
|
|
||||||
width: 20%;
|
|
||||||
top: 20%;
|
|
||||||
overflow: auto;
|
|
||||||
position: fixed;
|
|
||||||
float:left;
|
|
||||||
background-color: #ffa367;
|
|
||||||
}
|
|
||||||
.right-blank
|
|
||||||
{
|
|
||||||
width: 80%;
|
|
||||||
left:22%;
|
|
||||||
right:2%;
|
|
||||||
overflow: auto;
|
|
||||||
float: right;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscribed
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-around;
|
|
||||||
position: relative;
|
|
||||||
top:16%;
|
|
||||||
bottom: 16%;
|
|
||||||
left: 5%;
|
|
||||||
width: 85%;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: .5em;
|
|
||||||
border: 1px solid #F45546;
|
|
||||||
padding: .375rem .75rem;
|
|
||||||
background-color: #F45546;
|
|
||||||
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscribed_text
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.vid_cont
|
|
||||||
{
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, auto);
|
|
||||||
grid-gap: 20px;
|
|
||||||
justify-content: space-between;
|
|
||||||
resize: horizontal;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vid
|
|
||||||
{
|
|
||||||
width: 30%;
|
|
||||||
height: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rows
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.columns
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.images
|
|
||||||
{
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
@media (max-width: 2000px) {
|
|
||||||
.images
|
|
||||||
{
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.vid
|
|
||||||
{
|
|
||||||
width: 30%;
|
|
||||||
height: 30%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
|
||||||
.images
|
|
||||||
{
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.vid
|
|
||||||
{
|
|
||||||
width: 50%;
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.mobdel
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.images
|
|
||||||
{
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.vid
|
|
||||||
{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.mobdel
|
|
||||||
{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.right-blank
|
|
||||||
{
|
|
||||||
width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Тут код на окно регистрации/логина/восстановления */
|
|
||||||
.orange
|
|
||||||
{
|
|
||||||
background-color: #FFA367;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.register-table
|
|
||||||
{
|
|
||||||
height: 70%;
|
|
||||||
width:70%;
|
|
||||||
top: 10%;
|
|
||||||
left: 20%;
|
|
||||||
overflow: auto;
|
|
||||||
position: fixed;
|
|
||||||
background-color: #87B650;
|
|
||||||
}
|
|
||||||
.register-table-text
|
|
||||||
{
|
|
||||||
margin-top: 2%;
|
|
||||||
margin-left: 1%;
|
|
||||||
width: 60%;
|
|
||||||
color: white;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-table-column
|
|
||||||
{
|
|
||||||
top:30%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.register-table-button
|
|
||||||
{
|
|
||||||
width: 60%;
|
|
||||||
top:60%;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
.register-table-input1
|
|
||||||
{
|
|
||||||
top: 15%;
|
|
||||||
width: 60%;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
.register-table-input2
|
|
||||||
{
|
|
||||||
top: 25%;
|
|
||||||
width: 60%;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
.register-table-input3
|
|
||||||
{
|
|
||||||
top: 35%;
|
|
||||||
width: 60%;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
.register-table-input4
|
|
||||||
{
|
|
||||||
top: 45%;
|
|
||||||
width: 60%;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: 500px) {
|
|
||||||
.register-table
|
|
||||||
{
|
|
||||||
height: 500px;
|
|
||||||
width: 300px;
|
|
||||||
top:10%;
|
|
||||||
left: 35%;
|
|
||||||
overflow: auto;
|
|
||||||
display: flex;
|
|
||||||
position: fixed;
|
|
||||||
background-color: #87B650;
|
|
||||||
}
|
|
||||||
.register-table-text
|
|
||||||
{
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-left: 35px;
|
|
||||||
color: white;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-table-column
|
|
||||||
{
|
|
||||||
top:30%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.register-table-button
|
|
||||||
{
|
|
||||||
width: 277px;
|
|
||||||
margin-top:300px;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-table-input1
|
|
||||||
{
|
|
||||||
margin-top: 100px;
|
|
||||||
width: 277px;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
.register-table-input2
|
|
||||||
{
|
|
||||||
margin-top: 150px;
|
|
||||||
width: 277px;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
.register-table-input3
|
|
||||||
{
|
|
||||||
margin-top: 200px;
|
|
||||||
width: 277px;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
.register-table-input4
|
|
||||||
{
|
|
||||||
margin-top: 250px;
|
|
||||||
width: 277px;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.reg_button{
|
|
||||||
display: inline-flex;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: black;
|
|
||||||
border-radius: .5em;
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
padding: .375rem .75rem;
|
|
||||||
width: 80%;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Главный вид канала*/
|
|
||||||
|
|
||||||
.chanel
|
|
||||||
{
|
|
||||||
width: 100%;
|
|
||||||
background-color: #87B650;
|
|
||||||
overflow: auto;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.chanel-user {
|
|
||||||
margin: 40px 0 0 5%;
|
|
||||||
font-size: 1rem;
|
|
||||||
height: 50px;
|
|
||||||
width:80px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #ffa367;
|
|
||||||
background-color: #ffa367;
|
|
||||||
padding: 10px;
|
|
||||||
background-origin: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chanel-text
|
|
||||||
{
|
|
||||||
margin: 40px 0 0 5%;
|
|
||||||
width: 80%;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 20px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.chanel-subscribe
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-around;
|
|
||||||
position: relative;
|
|
||||||
margin: 30px 20px 0 auto;
|
|
||||||
height: 50px;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: .5em;
|
|
||||||
border: 1px solid #F45546;
|
|
||||||
padding: .375rem .75rem;
|
|
||||||
background-color: #F45546;
|
|
||||||
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.chanel-user {
|
|
||||||
top:10%;
|
|
||||||
margin: 20px 20px 20px 20px;
|
|
||||||
font-size: 1rem;
|
|
||||||
height: 70px;
|
|
||||||
width:95px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #ffa367;
|
|
||||||
background-color: #ffa367;
|
|
||||||
padding: 10px;
|
|
||||||
background-origin: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chanel-text
|
|
||||||
{
|
|
||||||
margin: 40px 0 0 100px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 40px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.chanel-subscribe {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-around;
|
|
||||||
position: relative;
|
|
||||||
margin: 40px 20px 10px auto;
|
|
||||||
height: 30%;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: .5em;
|
|
||||||
border: 1px solid #F45546;
|
|
||||||
padding: .375rem .75rem;
|
|
||||||
background-color: #F45546;
|
|
||||||
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
.vid
|
|
||||||
{
|
|
||||||
margin: auto auto auto auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*Видеоплеер*/
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.vid-text-big
|
|
||||||
{
|
|
||||||
margin: 5px 0 0 8%;
|
|
||||||
width: 90%;
|
|
||||||
word-break: break-word;
|
|
||||||
font-size: 35px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
.vid-text-small
|
|
||||||
{
|
|
||||||
margin: 10px 0 0 8%;
|
|
||||||
width: 70%;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
.vid-player
|
|
||||||
{
|
|
||||||
margin: 30px 0 0 8%;
|
|
||||||
}
|
|
||||||
.vid-column
|
|
||||||
{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.vid-worker-small
|
|
||||||
{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.vid-worker-big
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.vid-row
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin: 10px 0 0 10px;
|
|
||||||
}
|
|
||||||
.vid-search-text-big
|
|
||||||
{
|
|
||||||
margin: 0 0 0 5%;
|
|
||||||
font-size: 27px;
|
|
||||||
width: 95%;
|
|
||||||
word-break: break-word;
|
|
||||||
text-align:justify;
|
|
||||||
}
|
|
||||||
.vid-search-text-small
|
|
||||||
{
|
|
||||||
margin: 5% 0 0 5%;
|
|
||||||
font-size: 20px;
|
|
||||||
width: 95%;
|
|
||||||
word-break: break-word;
|
|
||||||
text-align:justify;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.vid-text-big
|
|
||||||
{
|
|
||||||
margin: 5px 0 0 5%;
|
|
||||||
width: 100%;
|
|
||||||
word-break: break-word;
|
|
||||||
font-size: 35px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
.vid-text-small
|
|
||||||
{
|
|
||||||
margin: 10px 0 0 5%;
|
|
||||||
width: 70%;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
.vid-player
|
|
||||||
{
|
|
||||||
margin: 30px 0 0 5%;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
.vid-column
|
|
||||||
{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.vid-worker-small
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.vid-worker-big
|
|
||||||
{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.vid-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin: 10px 0 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.vid-search-text-big
|
|
||||||
{
|
|
||||||
margin: 0 0 0 5%;
|
|
||||||
font-size: 15px;
|
|
||||||
width: 95%;
|
|
||||||
word-break: break-word;
|
|
||||||
text-align:justify;
|
|
||||||
}
|
|
||||||
.vid-search-text-small
|
|
||||||
{
|
|
||||||
margin: 5% 0 0 5%;
|
|
||||||
font-size: 12px;
|
|
||||||
width: 95%;
|
|
||||||
word-break: break-word;
|
|
||||||
text-align:justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.vid-admin
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
height: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#image-preview {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
BIN
doc/Отчет1.docx
BIN
doc/Отчет1.docx
Binary file not shown.
BIN
doc/Отчет2.docx
BIN
doc/Отчет2.docx
Binary file not shown.
BIN
doc/Отчет3.docx
BIN
doc/Отчет3.docx
Binary file not shown.
0
img/.gitignore
vendored
0
img/.gitignore
vendored
107
index.html
107
index.html
@ -1,102 +1,15 @@
|
|||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8" />
|
||||||
<title>Тарелька</title>
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
<title>My shop</title>
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
||||||
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
|
|
||||||
rel="stylesheet" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body class="h-100 d-flex flex-column w-100" style="background-color:#FDF3FB;">
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<a class="navbar-brand" href="/">
|
<body>
|
||||||
<i class="fa-solid fa-video-camera"></i>
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
Тарелька
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
</a>
|
|
||||||
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav" >
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<input class="form-control me-1 nav-link" type="search" style="width: 90%" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="back" type="submit" onclick="document.location='/search.html'">
|
|
||||||
<i class="fa-solid fa-search"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<button class="login nav-link me-1" style="width: 90%" onclick="document.location='/login.html'">Войти/Зарегистрироватся</button>
|
|
||||||
<button class="user nav-link" type="submit" onclick="document.location='/chanel.html'">
|
|
||||||
<i class="fa-solid fa-user"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<div class="container-fluid w-100" style="--bs-gutter-x: 0">
|
|
||||||
<div class="container-fluid w-2 left-blank text-center col mobdel">
|
|
||||||
<div class="row m-3"> <button class="subscribed" onclick="document.location='/chanel.html'">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></div>
|
|
||||||
<div class="row m-3"> <button class="subscribed" onclick="document.location='/chanel.html'">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></div>
|
|
||||||
<div class="row m-3"> <button class="subscribed" onclick="document.location='/chanel.html'">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></div>
|
|
||||||
<div class="row m-3"> <button class="subscribed" onclick="document.location='/chanel.html'">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></div>
|
|
||||||
<div class="row m-3"> <button class="subscribed" onclick="document.location='/chanel.html'">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></div>
|
|
||||||
<div class="row m-3"> <button class="subscribed" onclick="document.location='/chanel.html'">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right-blank rows images">
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
@ -1,35 +0,0 @@
|
|||||||
// Модуль для работы с модальным окном
|
|
||||||
|
|
||||||
// импорт компонента Modal из bootstrap
|
|
||||||
import { Modal } from "bootstrap";
|
|
||||||
import { cntrls, imagePlaceholder } from "./lines-ui";
|
|
||||||
|
|
||||||
// поиск модального окна на странице
|
|
||||||
const modal = document.getElementById("items-update");
|
|
||||||
// если он найден, то создается экземпляр компонента Modal
|
|
||||||
// для программного управления модальным окном
|
|
||||||
const myModal = modal ? new Modal(modal, {}) : null;
|
|
||||||
|
|
||||||
// поиск тега с заголовком модального кона для его смены
|
|
||||||
const modalTitle = document.getElementById("items-update-title");
|
|
||||||
|
|
||||||
// обнуление значений модального окна, т. к.
|
|
||||||
// используется одно окно для всех операций
|
|
||||||
function resetValues() {
|
|
||||||
cntrls.lineId.value = "";
|
|
||||||
cntrls.itemsType.value = "";
|
|
||||||
cntrls.price.value = parseFloat(0).toFixed(2);
|
|
||||||
cntrls.count.value = 0;
|
|
||||||
cntrls.image.value = "";
|
|
||||||
cntrls.imagePreview.src = imagePlaceholder;
|
|
||||||
}
|
|
||||||
|
|
||||||
// функция для скрытия модального окна
|
|
||||||
export function hideUpdateModal() {
|
|
||||||
resetValues();
|
|
||||||
|
|
||||||
// удаление класса was-validated для скрытия результатов валидации
|
|
||||||
cntrls.form.classList.remove("was-validated");
|
|
||||||
|
|
||||||
myModal.hide();
|
|
||||||
}
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
// модуль для работы с REST API сервера
|
|
||||||
|
|
||||||
// адрес сервера
|
|
||||||
const serverUrl = "http://localhost:8081";
|
|
||||||
|
|
||||||
// функция возвращает объект нужной структуры для отправки на сервер
|
|
||||||
function createLineObject(chanel, title, image, video) {
|
|
||||||
return {
|
|
||||||
itemsId: chanel,
|
|
||||||
title,
|
|
||||||
image,
|
|
||||||
video,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// обращение к серверу для получения всех типов товара (get)
|
|
||||||
export async function getAllItemTypes() {
|
|
||||||
const response = await fetch(`${serverUrl}/items`);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// обращение к серверу для получения всех записей (get)
|
|
||||||
export async function getAllLines() {
|
|
||||||
const response = await fetch(`${serverUrl}/lines?_expand=items`);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// обращение к серверу для получения записи по первичному ключу (id) (get)
|
|
||||||
// id передается в качестве части пути URL get-запроса
|
|
||||||
export async function getLine(id) {
|
|
||||||
const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// обращение к серверу для создания записи (post)
|
|
||||||
// объект отправляется в теле запроса (body)
|
|
||||||
export async function createLine(chanel, title, image, video) {
|
|
||||||
const itemObject = createLineObject(chanel, title, image, video);
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(itemObject),
|
|
||||||
headers: {
|
|
||||||
"Accept": "application/json",
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await fetch(`${serverUrl}/lines`, options);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// обращение к серверу для обновления записи по id (put)
|
|
||||||
// объект отправляется в теле запроса (body)
|
|
||||||
// id передается в качестве части пути URL get-запроса
|
|
||||||
export async function updateLine(id, chanel, title, image, video) {
|
|
||||||
const itemObject = createLineObject(chanel, title, image, video);
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
method: "PUT",
|
|
||||||
body: JSON.stringify(itemObject),
|
|
||||||
headers: {
|
|
||||||
"Accept": "application/json",
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// обращение к серверу для удаления записи по id (delete)
|
|
||||||
// id передается в качестве части пути URL get-запроса
|
|
||||||
export async function deleteLine(id) {
|
|
||||||
const options = {
|
|
||||||
method: "DELETE",
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
@ -1,91 +0,0 @@
|
|||||||
// модуль для работы с элементами управления
|
|
||||||
|
|
||||||
// объект для удобного получения элементов
|
|
||||||
// при обращении к атрибуту объекта вызывается
|
|
||||||
// нужная функция для поиска элемента
|
|
||||||
export const cntrls = {
|
|
||||||
button: document.getElementById("items-add"), //
|
|
||||||
table: document.querySelector("#items-table tbody"),
|
|
||||||
form: document.getElementById("items-form"),
|
|
||||||
lineId: document.getElementById("items-line-id"), //
|
|
||||||
chanel: document.getElementById("item"),
|
|
||||||
title: document.getElementById("title"),
|
|
||||||
video: document.getElementById("video"),
|
|
||||||
image: document.getElementById("image"),
|
|
||||||
imagePreview: document.getElementById("image-preview"),
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Дефолтное превью
|
|
||||||
export const imagePlaceholder = "https://via.placeholder.com/200";
|
|
||||||
|
|
||||||
// функция создает тег option для select
|
|
||||||
// <option value="" selected>name</option>
|
|
||||||
export function createItemsOption(name, value = "", isSelected = false) {
|
|
||||||
const option = document.createElement("option");
|
|
||||||
option.value = value || "";
|
|
||||||
option.selected = isSelected;
|
|
||||||
option.text = name;
|
|
||||||
return option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// функция создает ссылку (a) для таблицы
|
|
||||||
// содержимое тега a заполняется необходимой иконкой (icon)
|
|
||||||
// при нажатии вызывается callback
|
|
||||||
// ссылка "оборачивается" тегом td
|
|
||||||
// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
|
|
||||||
function createTableAnchor(icon, callback) {
|
|
||||||
const i = document.createElement("i");
|
|
||||||
i.classList.add("fa-solid", icon);
|
|
||||||
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = "#";
|
|
||||||
a.appendChild(i);
|
|
||||||
a.onclick = (event) => {
|
|
||||||
// чтобы в URL не добавлялась решетка
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
callback();
|
|
||||||
};
|
|
||||||
|
|
||||||
const td = document.createElement("td");
|
|
||||||
td.appendChild(a);
|
|
||||||
return td;
|
|
||||||
}
|
|
||||||
|
|
||||||
// функция создает колонку таблицы с текстом value
|
|
||||||
// <td>value</td>
|
|
||||||
function createTableColumn(value) {
|
|
||||||
const td = document.createElement("td");
|
|
||||||
td.textContent = value;
|
|
||||||
return td;
|
|
||||||
}
|
|
||||||
|
|
||||||
// функция создает строку таблицы
|
|
||||||
// <tr>
|
|
||||||
// <th scope="row">index + 1</th>
|
|
||||||
// <td>item.items.name</td>
|
|
||||||
// <td>parseFloat(item.price).toFixed(2))</td>
|
|
||||||
// <td>item.count</td>
|
|
||||||
// <td>parseFloat(item.sum).toFixed(2))</td>
|
|
||||||
// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
|
|
||||||
// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
|
|
||||||
// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
|
|
||||||
// </tr>
|
|
||||||
export function createTableRow(item, index, editCallback, editPageCallback, deleteCallback) {
|
|
||||||
const rowNumber = document.createElement("th");
|
|
||||||
rowNumber.scope = "row";
|
|
||||||
rowNumber.textContent = index + 1;
|
|
||||||
|
|
||||||
const row = document.createElement("tr");
|
|
||||||
row.id = `line-${item.id}`;
|
|
||||||
|
|
||||||
row.appendChild(rowNumber);
|
|
||||||
row.appendChild(createTableColumn(item.items.name));
|
|
||||||
row.appendChild(createTableColumn(item.title));
|
|
||||||
// редактировать на странице page-edit
|
|
||||||
row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
|
|
||||||
// удаление
|
|
||||||
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
|
||||||
return row;
|
|
||||||
}
|
|
||||||
238
js/lines.js
238
js/lines.js
@ -1,238 +0,0 @@
|
|||||||
// модуль с логикой
|
|
||||||
|
|
||||||
import {
|
|
||||||
createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
|
|
||||||
} from "./lines-rest-api";
|
|
||||||
import {
|
|
||||||
cntrls, createItemsOption, createTableRow, imagePlaceholder,
|
|
||||||
} from "./lines-ui";
|
|
||||||
|
|
||||||
async function drawItemsSelect() {
|
|
||||||
// вызов метода REST API для получения списка типов товаров
|
|
||||||
const data = await getAllItemTypes();
|
|
||||||
// очистка содержимого select
|
|
||||||
// удаляется все, что находится между тегами <select></select>
|
|
||||||
// но не атрибуты
|
|
||||||
//cntrls.chanel.innerHTML = "";
|
|
||||||
// пустое значение
|
|
||||||
cntrls.chanel.appendChild(createItemsOption("Выберите значение", "", true));
|
|
||||||
// цикл по результату ответа от сервера
|
|
||||||
// используется лямбда-выражение
|
|
||||||
// (item) => {} аналогично function(item) {}
|
|
||||||
data.forEach((item) => {
|
|
||||||
cntrls.chanel.appendChild(createItemsOption(item.name, item.id));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function drawLinesTable() {
|
|
||||||
console.info("Try to load data");
|
|
||||||
if (!cntrls.table) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// вызов метода REST API для получения всех записей
|
|
||||||
const data = await getAllLines();
|
|
||||||
// очистка содержимого table
|
|
||||||
// удаляется все, что находится между тегами <table></table>
|
|
||||||
// но не атрибуты
|
|
||||||
cntrls.table.innerHTML = "";
|
|
||||||
// цикл по результату ответа от сервера
|
|
||||||
// используется лямбда-выражение
|
|
||||||
// (item, index) => {} аналогично function(item, index) {}
|
|
||||||
data.forEach((item, index) => {
|
|
||||||
cntrls.table.appendChild(
|
|
||||||
createTableRow(
|
|
||||||
item,
|
|
||||||
index,
|
|
||||||
// функции передаются в качестве параметра
|
|
||||||
// это очень удобно, так как аргументы функций доступны только
|
|
||||||
// в данном месте кода и не передаются в сервисные модули
|
|
||||||
() => location.assign(`videored.html?id=${item.id}`),
|
|
||||||
() => location.assign(`videored.html?id=${item.id}`),
|
|
||||||
() => removeLine(item.id),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function addLine(chanel, title, image, video) {
|
|
||||||
console.info("Try to add item");
|
|
||||||
// вызов метода REST API для добавления записи
|
|
||||||
const data = await createLine(chanel, title, image, video);
|
|
||||||
console.info("Added");
|
|
||||||
console.info(data);
|
|
||||||
// загрузка и заполнение table
|
|
||||||
drawLinesTable();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function editLine(id, chanel, title, image, video) {
|
|
||||||
console.info("Try to update item");
|
|
||||||
// вызов метода REST API для обновления записи
|
|
||||||
const data = await updateLine(id, chanel, title, image, video);
|
|
||||||
console.info("Updated");
|
|
||||||
console.info(data);
|
|
||||||
// загрузка и заполнение table
|
|
||||||
drawLinesTable();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function removeLine(id) {
|
|
||||||
if (!confirm("Do you really want to remove this item?")) {
|
|
||||||
console.info("Canceled");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.info("Try to remove item");
|
|
||||||
// вызов метода REST API для удаления записи
|
|
||||||
const data = await deleteLine(id);
|
|
||||||
console.info(data);
|
|
||||||
// загрузка и заполнение table
|
|
||||||
drawLinesTable();
|
|
||||||
}
|
|
||||||
|
|
||||||
// функция для получения содержимого файла в виде base64 строки
|
|
||||||
// https://ru.wikipedia.org/wiki/Base64
|
|
||||||
async function readFile(file) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
|
|
||||||
// создание Promise-объекта для использования функции
|
|
||||||
// с помощью await (асинхронно) без коллбэков (callback)
|
|
||||||
// https://learn.javascript.ru/promise
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
// 2. "Возвращаем" содержимое когда файл прочитан
|
|
||||||
// через вызов resolve
|
|
||||||
// Если не использовать Promise, то всю работу по взаимодействию
|
|
||||||
// с REST API пришлось бы делать в обработчике (callback) функции
|
|
||||||
// onloadend
|
|
||||||
reader.onloadend = () => {
|
|
||||||
const fileContent = reader.result;
|
|
||||||
// Здесь могла бы быть работа с REST API
|
|
||||||
// Чтение заканчивает выполняться здесь
|
|
||||||
resolve(fileContent);
|
|
||||||
};
|
|
||||||
// 3. Возвращаем ошибку
|
|
||||||
reader.onerror = () => {
|
|
||||||
// Или здесь в случае ошибки
|
|
||||||
reject(new Error("oops, something went wrong with the file reader."));
|
|
||||||
};
|
|
||||||
// Шаг 1. Сначала читаем файл
|
|
||||||
// Чтение начинает выполняться здесь
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// функция для обновления блока с превью выбранного изображения
|
|
||||||
async function updateImagePreview() {
|
|
||||||
// получение выбранного файла
|
|
||||||
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
|
|
||||||
const file = cntrls.image.files[0];
|
|
||||||
// чтение содержимого файла в виде base64 строки
|
|
||||||
const fileContent = await readFile(file);
|
|
||||||
console.info("base64 ", fileContent);
|
|
||||||
// обновление атрибута src для тега img с id image-preview
|
|
||||||
cntrls.imagePreview.src = fileContent;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Функция для обработки создания и редактирования элементов таблицы через модальное окно
|
|
||||||
// Если хотите делать через страницу, то удалите эту функцию
|
|
||||||
export function linesForm() {
|
|
||||||
console.info("linesForm");
|
|
||||||
|
|
||||||
// загрузка и заполнение select со списком товаров
|
|
||||||
//drawItemsSelect();
|
|
||||||
// загрузка и заполнение table
|
|
||||||
drawLinesTable();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
|
||||||
// Если хотите делать через модальное окно, то удалите эту функцию
|
|
||||||
export async function linesPageForm() {
|
|
||||||
console.info("linesPageForm");
|
|
||||||
|
|
||||||
// загрузка и заполнение select со списком товаров
|
|
||||||
drawItemsSelect();
|
|
||||||
|
|
||||||
// func1 = (id) => {} аналогично function func1(id) {}
|
|
||||||
const goBack = () => location.assign("/adminchanel.html");
|
|
||||||
|
|
||||||
// Вызов функции обновления превью изображения при возникновении
|
|
||||||
// события onchange в тэге input с id image
|
|
||||||
cntrls.image.addEventListener("change", () => updateImagePreview());
|
|
||||||
|
|
||||||
// получение параметров GET-запроса из URL
|
|
||||||
// параметры перечислены после символа ? (?id=1&color=black&...)
|
|
||||||
const urlParams = new URLSearchParams(location.search);
|
|
||||||
|
|
||||||
// получение значения конкретного параметра (id)
|
|
||||||
// указан только при редактировании
|
|
||||||
const currentId = urlParams.get("id");
|
|
||||||
// если id задан
|
|
||||||
if (currentId) {
|
|
||||||
try {
|
|
||||||
// вызов метода REST API для получения записи по первичному ключу(id)
|
|
||||||
const line = await getLine(currentId);
|
|
||||||
// заполнение формы для редактирования
|
|
||||||
cntrls.chanel.value = line.itemsId;
|
|
||||||
cntrls.title.value = line.title;
|
|
||||||
// заполнение превью
|
|
||||||
// Если пользователь выбрал изображение, то оно загружается
|
|
||||||
// в тэг image с id image - preview
|
|
||||||
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
|
||||||
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
|
||||||
} catch {
|
|
||||||
// в случае ошибки происходит возврат к page4
|
|
||||||
goBack();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// обработчик события отправки формы
|
|
||||||
// возникает при нажатии на кнопку (button) с типом submit
|
|
||||||
// кнопка должна находится внутри тега form
|
|
||||||
cntrls.form.addEventListener("submit", async (event) => {
|
|
||||||
console.info("Form onSubmit");
|
|
||||||
// отключение стандартного поведения формы при отправке
|
|
||||||
// при отправке страница обновляется и JS перестает работать
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
// если форма не прошла валидацию, то ничего делать не нужно
|
|
||||||
if (!cntrls.form.checkValidity()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let imageBase64 = "imageTag";
|
|
||||||
let videoBase64 = "videoTag"; // Оно должно добавлять видео, но не умеет
|
|
||||||
// Получение выбранного пользователем изображения в виде base64 строки
|
|
||||||
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
|
||||||
// дефолтное изображение
|
|
||||||
if (cntrls.imagePreview.src !== imagePlaceholder) {
|
|
||||||
// Загрузка содержимого атрибута src тэга img с id image-preview
|
|
||||||
// Здесь выполняется HTTP запрос с типом GET
|
|
||||||
const result = await fetch(cntrls.imagePreview.src);
|
|
||||||
// Получение из HTTP-ответа бинарного содержимого
|
|
||||||
const blob = await result.blob();
|
|
||||||
// Получение base64 строки для файла
|
|
||||||
// Здесь выполняется Promise из функции readFile
|
|
||||||
// Promise позволяет писать линейный код для работы с асинхронными методами
|
|
||||||
// без использования обработчиков (callback) с помощью await
|
|
||||||
imageBase64 = await readFile(blob);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!currentId) {
|
|
||||||
await addLine(
|
|
||||||
cntrls.chanel.value,
|
|
||||||
cntrls.title.value,
|
|
||||||
imageBase64,
|
|
||||||
videoBase64,
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
await editLine(
|
|
||||||
currentId,
|
|
||||||
cntrls.chanel.value,
|
|
||||||
cntrls.title.value,
|
|
||||||
imageBase64,
|
|
||||||
videoBase64,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// возврат к странице page4
|
|
||||||
goBack();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
// модуль используется для валидации форма на странице
|
|
||||||
|
|
||||||
function validation() {
|
|
||||||
// поиск всех форма с классом .needs-validation
|
|
||||||
const forms = document.querySelectorAll("form.needs-validation");
|
|
||||||
|
|
||||||
for (let i = 0; i < forms.length; i += 1) {
|
|
||||||
const form = forms[i];
|
|
||||||
// для каждой формы добавляется обработчик события отправки
|
|
||||||
form.addEventListener("submit", (event) => {
|
|
||||||
// если форма не прошла валидацию
|
|
||||||
// то выключить стандартное действие
|
|
||||||
if (!form.checkValidity()) {
|
|
||||||
event.preventDefault();
|
|
||||||
// предотвращает распространение preventDefault
|
|
||||||
// на другие объекты
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
// добавляет к форме класс was-validated
|
|
||||||
form.classList.add("was-validated");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default validation;
|
|
||||||
@ -3,7 +3,7 @@
|
|||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"moduleResolution": "Node",
|
"moduleResolution": "Node",
|
||||||
"target": "ES2020",
|
"target": "ES2020",
|
||||||
"jsx": "preserve",
|
"jsx": "react",
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"strictFunctionTypes": true
|
"strictFunctionTypes": true
|
||||||
},
|
},
|
||||||
|
|||||||
34
login.html
34
login.html
@ -1,34 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Восстановление аккаунта</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
||||||
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
|
|
||||||
rel="stylesheet" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container-fluid w-2 register-table text-center col">
|
|
||||||
<div class="register-table-text">
|
|
||||||
Войти в аккаунт
|
|
||||||
</div>
|
|
||||||
<div class="register-table-column">
|
|
||||||
<div class="register-table-input2">
|
|
||||||
<input class="form-control me-2 orange" type="email" placeholder="Почта" aria-label="Mail">
|
|
||||||
</div>
|
|
||||||
<div class="register-table-input3">
|
|
||||||
<input class="form-control me-2 orange" type="password" placeholder="Пароль" aria-label="Mail">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="register-table-button column">
|
|
||||||
<button class="reg_button" onclick="document.location='/repair.html'">Забыл пароль</button>
|
|
||||||
<button class="reg_button" onclick="document.location='/registr.html'">Регистрация</button>
|
|
||||||
<button class="reg_button" onclick="document.location='/index.html'">Войти</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
6730
package-lock.json
generated
6730
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
40
package.json
40
package.json
@ -1,26 +1,32 @@
|
|||||||
{
|
{
|
||||||
"name": "int-prog",
|
"name": "lec4",
|
||||||
"version": "1.0.0",
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"vite": "vite",
|
"dev": "vite",
|
||||||
"serve": "http-server -p 3000 ./dist/",
|
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"rest": "json-server --watch data.json -p 8081",
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||||
"dev": "npm-run-all --parallel rest vite",
|
"preview": "vite preview"
|
||||||
"prod": "npm-run-all build --parallel serve rest"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "5.3.2",
|
"react": "^18.2.0",
|
||||||
"@fortawesome/fontawesome-free": "6.4.2"
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.18.0",
|
||||||
|
"bootstrap": "^5.3.2",
|
||||||
|
"react-bootstrap": "^2.9.1",
|
||||||
|
"react-bootstrap-icons": "^1.10.3",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vite": "4.4.9",
|
"@types/react": "^18.2.15",
|
||||||
"eslint": "8.50.0",
|
"@types/react-dom": "^18.2.7",
|
||||||
"eslint-config-airbnb-base": "15.0.0",
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
"eslint-plugin-import": "2.28.1",
|
"eslint": "^8.45.0",
|
||||||
"http-server": "14.1.1",
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
"json-server": "0.17.4",
|
"eslint-plugin-react": "^7.32.2",
|
||||||
"npm-run-all": "4.1.5"
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
|
"vite": "^4.4.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
28
readme.md
28
readme.md
@ -1,5 +1,29 @@
|
|||||||
|
#### Окружение:
|
||||||
|
- nodejs 18;
|
||||||
|
- VSCode;
|
||||||
|
- ESLint плагин для VSCode;
|
||||||
|
- для отладки необходимы бразузеры Chrome или Edge.
|
||||||
|
|
||||||
|
#### Создание пустого проекта:
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm create vite@latest ./ -- --template react
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Установка зависимостей:
|
||||||
|
|
||||||
|
```commandline
|
||||||
npm install
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
npm start
|
#### Запуск проекта:
|
||||||
|
|
||||||
npm run prod
|
```commandline
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Сборка проекта:
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
36
registr.html
36
registr.html
@ -1,36 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Моя страница</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
|
||||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container-fluid w-2 register-table text-center col">
|
|
||||||
<div class="register-table-text">
|
|
||||||
Регистрация аккаунта
|
|
||||||
</div>
|
|
||||||
<div class="register-table-column">
|
|
||||||
<div class="register-table-input1">
|
|
||||||
<input class="form-control me-2 orange" type="text" placeholder="Никнейм" aria-label="Mail">
|
|
||||||
</div>
|
|
||||||
<div class="register-table-input2">
|
|
||||||
<input class="form-control me-2 orange" type="email" placeholder="Почта" aria-label="Mail">
|
|
||||||
</div>
|
|
||||||
<div class="register-table-input3">
|
|
||||||
<input class="form-control me-2 orange" type="password" placeholder="Пароль" aria-label="Mail">
|
|
||||||
</div>
|
|
||||||
<div class="register-table-input4">
|
|
||||||
<input class="form-control me-2 orange" type="password" placeholder="Повтор пароля" aria-label="Mail">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="register-table-button">
|
|
||||||
<button class="reg_button">Регистрация</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
27
repair.html
27
repair.html
@ -1,27 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Восстановление аккаунта</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
||||||
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
|
|
||||||
rel="stylesheet" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container-fluid w-2 register-table text-center col">
|
|
||||||
<div class="register-table-text">
|
|
||||||
Восстановление аккаунта
|
|
||||||
</div>
|
|
||||||
<div class="register-table-input1">
|
|
||||||
<input class="form-control me-2 orange" type="email" placeholder="Почта" aria-label="Mail">
|
|
||||||
</div>
|
|
||||||
<div class="register-table-button">
|
|
||||||
<button class="reg_button" onclick="document.location='/index.html'">Восстановить</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
137
search.html
137
search.html
@ -1,137 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Тарелька</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
||||||
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
|
|
||||||
rel="stylesheet" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<a class="navbar-brand" href="/">
|
|
||||||
<i class="fa-solid fa-video-camera"></i>
|
|
||||||
Тарелька
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav" >
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<input class="form-control me-1 nav-link" type="search" style="width: 90%" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="back" type="submit" onclick="document.location='/search.html'">
|
|
||||||
<i class="fa-solid fa-search"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<button class="login nav-link me-1" style="width: 90%" onclick="document.location='/login.html'">Войти/Зарегистрироватся</button>
|
|
||||||
<button class="user nav-link" type="submit" onclick="document.location='/chanel.html'">
|
|
||||||
<i class="fa-solid fa-user"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<div class="columns" style="margin: 5% 5% 5% 5%">
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="vid-row" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 50%">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div>
|
|
||||||
<div class="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
BIN
video/Rick.mp4
BIN
video/Rick.mp4
Binary file not shown.
BIN
video/fon.jpg
BIN
video/fon.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 429 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
@ -1,86 +0,0 @@
|
|||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Моя страница</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
||||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
|
||||||
<link rel="stylesheet" href="./css/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="h-100 d-flex flex-column">
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<a class="navbar-brand" href="/">
|
|
||||||
<i class="fa-solid fa-video-camera"></i>
|
|
||||||
Тарелька
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav" >
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<input class="form-control me-1 nav-link" type="search" style="width: 90%" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="back" type="submit" onclick="document.location='/search.html'">
|
|
||||||
<i class="fa-solid fa-search"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<button class="login nav-link me-1" style="width: 90%" onclick="document.location='/login.html'">Войти/Зарегистрироватся</button>
|
|
||||||
<button class="user nav-link" type="submit" onclick="document.location='/chanel.html'">
|
|
||||||
<i class="fa-solid fa-user"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<main class="container-fluid p-2">
|
|
||||||
<div class="text-center">
|
|
||||||
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-0"
|
|
||||||
alt="placeholder">
|
|
||||||
</div>
|
|
||||||
<form id="items-form" class="needs-validation" novalidate>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="item" class="form-label">Канал</label>
|
|
||||||
<select id="item" class="form-select" name="chanel" required>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label" for="title">Название</label>
|
|
||||||
<input id="title" name="title" class="form-control" type="text" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label" for="image">Изображение</label>
|
|
||||||
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label" for="video">Видео</label>
|
|
||||||
<input id="video" type="file" name="video" class="form-control" accept="video/*">
|
|
||||||
</div>
|
|
||||||
<a href="/adminchanel.html" class="btn btn-secondary">Назад</a>
|
|
||||||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
<script type="module">
|
|
||||||
import validation from "./js/validation";
|
|
||||||
import { linesPageForm } from "./js/lines"
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
validation();
|
|
||||||
linesPageForm();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
162
videowatch.html
162
videowatch.html
@ -1,162 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Тарелька</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
||||||
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
|
|
||||||
rel="stylesheet" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<a class="navbar-brand" href="/">
|
|
||||||
<i class="fa-solid fa-video-camera"></i>
|
|
||||||
Тарелька
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav" >
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<input class="form-control me-1 nav-link" type="search" style="width: 90%" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="back" type="submit" onclick="document.location='/search.html'">
|
|
||||||
<i class="fa-solid fa-search"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
|
|
||||||
<button class="login nav-link me-1" style="width: 90%" onclick="document.location='/login.html'">Войти/Зарегистрироватся</button>
|
|
||||||
<button class="user nav-link" type="submit" onclick="document.location='/chanel.html'">
|
|
||||||
<i class="fa-solid fa-user"> </i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<div class="w-100 rows">
|
|
||||||
<div class="w-75 columns vid-worker-big">
|
|
||||||
<video controls src="video/Rick.mp4" class="vid-player"></video>
|
|
||||||
<div class="vid-text-big">НАЗВАНИЕ ВИДЕОРОЛИКА</div>
|
|
||||||
<div class="vid-text-small">ОПИСАНИЕ ЭТОЙ ВЕЩИ</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-25 columns vid-worker-big">
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="w-100 columns vid-worker-small">
|
|
||||||
<div>
|
|
||||||
<video controls src="video/Rick.mp4" class="vid-player"></video>
|
|
||||||
<div class="vid-text-big">НАЗВАНИЕ ВИДЕОРОЛИКА</div>
|
|
||||||
<div class="vid-text-small">ОПИСАНИЕ ЭТОЙ ВЕЩИ</div>
|
|
||||||
</div>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
<button class="vid-column" onclick="document.location='/videowatch.html'">
|
|
||||||
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
|
|
||||||
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,20 +1,13 @@
|
|||||||
import { resolve } from 'path'
|
/* eslint-disable import/no-extraneous-dependencies */
|
||||||
import { defineConfig } from 'vite'
|
import react from '@vitejs/plugin-react';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
build: {
|
plugins: [react()],
|
||||||
rollupOptions: {
|
build: {
|
||||||
input: {
|
sourcemap: true,
|
||||||
main: resolve(__dirname, 'index.html'),
|
chunkSizeWarningLimit: 1024,
|
||||||
search: resolve(__dirname, 'search.html'),
|
emptyOutDir: true,
|
||||||
login: resolve(__dirname, 'login.html'),
|
},
|
||||||
chanel: resolve(__dirname, 'chanel.html'),
|
});
|
||||||
registration: resolve(__dirname, 'registr.html'),
|
|
||||||
repair: resolve(__dirname, 'repair.html'),
|
|
||||||
video: resolve(__dirname, 'videowatch.html'),
|
|
||||||
admin: resolve(__dirname, 'adminchanel.html'),
|
|
||||||
red: resolve(__dirname, 'videored.html')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user