Serxionaft/InternetProgramming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CommitCode2

Browse Source
This commit is contained in:
Sergey Kozyrev 2023-10-29 15:43:48 +04:00
parent 0ff68b3bab
commit 1194387779
25 changed files with 6563 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.editorconfig Normal file
View File

@ -0,0 +1,10 @@
# editorconfig.org
root = true
[*]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

194
.gitattributes vendored Normal file
View File

@ -0,0 +1,194 @@
## 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

6
.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
# Include your project-specific ignores in this file
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
# Useful .gitignore templates: https://github.com/github/gitignore
node_modules
dist
.cache

1225
.htaccess Normal file
View File

File diff suppressed because it is too large Load Diff

8
.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

5
.idea/misc.xml generated Normal file
View File

@ -0,0 +1,5 @@
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/../untitled.iml" filepath="$PROJECT_DIR$/../untitled.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

140
adminchanel.html Normal file
View File

@ -0,0 +1,140 @@
<!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-microchip"></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">
<form action="/search.html"><button class="back" type="submit">
<i class="fa-solid fa-search"> </i>
</button></form>
</div>
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
<form action="/login.html"><button class="login nav-link me-1" style="width: 90%">Войти/Зарегистрироватся</button></form>
<form action="/chanel.html"><button class="user nav-link" type="submit">
<i class="fa-solid fa-user"> </i>
</button></form>
</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>
<button class="chanel-subscribe">
Выпустить видео
</button>
</div>
<button class="chanel-subscribe">
Редактировать
</button>
</div>
<div class="rows images">
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
</div>
</body>
</html>

125
chanel.html Normal file
View File

@ -0,0 +1,125 @@
<!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-microchip"></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">
<form action="/search.html"><button class="back" type="submit">
<i class="fa-solid fa-search"> </i>
</button></form>
</div>
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
<form action="/login.html"><button class="login nav-link me-1" style="width: 90%">Войти/Зарегистрироватся</button></form>
<form action="/chanel.html"><button class="user nav-link" type="submit">
<i class="fa-solid fa-user"> </i>
</button></form>
</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>
<div class="chanel-subscribe">
Подписаться
</div>
</div>
<div class="rows images">
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button>
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
</div>
</body>
</html>

634
css/style.css Normal file
View File

@ -0,0 +1,634 @@
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: 400px;
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;
}
}

0
img/.gitignore vendored Normal file
View File

93
index.html Normal file
View File

@ -0,0 +1,93 @@
<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" style="background-color:#FDF3FB;">
<header>
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<i class="fa-solid fa-microchip"></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">
<form action="/search.html"><button class="back" type="submit">
<i class="fa-solid fa-search"> </i>
</button></form>
</div>
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
<form action="/login.html"><button class="login nav-link me-1" style="width: 90%">Войти/Зарегистрироватся</button></form>
<form action="/chanel.html"><button class="user nav-link" type="submit">
<i class="fa-solid fa-user"> </i>
</button></form>
</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"> <form action="/chanel.html"><button class="subscribed">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></form></div>
<div class="row m-3"> <form action="/chanel.html"><button class="subscribed">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></form></div>
<div class="row m-3"> <form action="/chanel.html"><button class="subscribed">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></form></div>
<div class="row m-3"> <form action="/chanel.html"><button class="subscribed">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></form></div>
<div class="row m-3"> <form action="/chanel.html"><button class="subscribed">ИМЯ КАНАЛА<i class="fa-solid fa-user back" style="float: right"></i></button></form></div>
</div>
<div class="right-blank rows images">
<form action="/videowatch.html" class="vid"><button >
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button >
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button >
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button >
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button >
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button >
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button >
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html" class="vid"><button >
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
</div>
</div>
</body>
</html>

33
login.html Normal file
View File

@ -0,0 +1,33 @@
<!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="search" placeholder="Почта" aria-label="Mail">
</div>
<div class="register-table-input3">
<input class="form-control me-2 orange" type="search" placeholder="Почта" aria-label="Mail">
</div>
</div>
<div class="register-table-button column">
<form action="/repair.html"><button class="reg_button">Забыл пароль</button></form>
<form action="/registr.html"><button class="reg_button">Регистрация</button></form>
</div>
</div>
</body>
</html>

3684
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

20
package.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "int-prog",
"version": "1.0.0",
"type": "module",
"scripts": {
"start": "vite",
"serve": "http-server -p 3000 ./dist/",
"build": "vite build",
"prod": "npm-run-all build serve"
},
"dependencies": {
"bootstrap": "5.3.2",
"@fortawesome/fontawesome-free": "6.4.2"
},
"devDependencies": {
"http-server": "14.1.1",
"vite": "4.4.9",
"npm-run-all": "4.1.5"
}
}

5
readme.md Normal file
View File

@ -0,0 +1,5 @@
npm install
npm start
npm run prod

36
registr.html Normal file
View File

@ -0,0 +1,36 @@
<!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="search" placeholder="Почта" aria-label="Mail">
</div>
<div class="register-table-input2">
<input class="form-control me-2 orange" type="search" placeholder="Почта" aria-label="Mail">
</div>
<div class="register-table-input3">
<input class="form-control me-2 orange" type="search" placeholder="Почта" aria-label="Mail">
</div>
<div class="register-table-input4">
<input class="form-control me-2 orange" type="search" placeholder="Почта" aria-label="Mail">
</div>
</div>
<div class="register-table-button">
<button class="reg_button">Регистрация</button>
</div>
</div>
</body>
</html>

27
repair.html Normal file
View File

@ -0,0 +1,27 @@
<!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="search" placeholder="Почта" aria-label="Mail">
</div>
<div class="register-table-button">
<button class="reg_button">Восстановить</button>
</div>
</div>
</body>
</html>

123
search.html Normal file
View File

@ -0,0 +1,123 @@
<!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-microchip"></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">
<form action="/search.html"><button class="back" type="submit">
<i class="fa-solid fa-search"> </i>
</button></form>
</div>
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
<form action="/login.html"><button class="login nav-link me-1" style="width: 90%">Войти/Зарегистрироватся</button></form>
<form action="/chanel.html"><button class="user nav-link" type="submit">
<i class="fa-solid fa-user"> </i>
</button></form>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="columns" style="margin: 5% 5% 5% 5%">
<form action="/videowatch.html"><button class="vid-row">
<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></form>
<form action="/videowatch.html"><button class="vid-row">
<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></form>
<form action="/videowatch.html"><button class="vid-row">
<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></form>
<form action="/videowatch.html"><button class="vid-row">
<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></form>
<form action="/videowatch.html"><button class="vid-row">
<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></form>
<form action="/videowatch.html"><button class="vid-row">
<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></form>
<form action="/videowatch.html"><button class="vid-row">
<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></form>
<form action="/videowatch.html"><button class="vid-row">
<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></form>
<form action="/videowatch.html"><button class="vid-row">
<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></form>
<form action="/videowatch.html"><button class="vid-row">
<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></form>
</div>
</body>
</html>

BIN
video/Rick.mp4 Normal file
View File

Binary file not shown.

BIN
video/fon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 429 KiB

BIN
video/maxresdefault.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

164
videowatch.html Normal file
View File

@ -0,0 +1,164 @@
<!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-microchip"></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">
<form action="/search.html"><button class="back" type="submit">
<i class="fa-solid fa-search"> </i>
</button></form>
</div>
<div class="row" style="flex-wrap: nowrap; margin: 5px 20px 5px 0px">
<form action="/login.html"><button class="login nav-link me-1" style="width: 90%">Войти/Зарегистрироватся</button></form>
<form action="/chanel.html"><button class="user nav-link" type="submit">
<i class="fa-solid fa-user"> </i>
</button></form>
</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">
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
</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>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
<form action="/videowatch.html"><button class="vid-column">
<img src="video/maxresdefault.jpg" style="max-width: 100%; max-height: 100%">
<h1 class="text-center">НАЗВАНИЕ ВИДЕО</h1>
</button></form>
</div>
</div>
</body>
</html>

17
vite.config.js Normal file
View File

@ -0,0 +1,17 @@
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
search: resolve(__dirname, 'search.html'),
login: resolve(__dirname, 'login.html'),
chanel: resolve(__dirname, 'chanel.html'),
registration: resolve(__dirname, 'regisr.html'),
video: resolve(__dirname, 'videowatch.html')
},
},
},
})