добавлена лаба2
20
.eslintrc.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": "airbnb-base",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"quotes": "off",
|
||||
"indent": "off",
|
||||
"no-console": "off",
|
||||
"no-use-before-define": "off",
|
||||
"no-alert": "off",
|
||||
"no-restricted-globals": "off",
|
||||
"quote-props": "off"
|
||||
}
|
||||
}
|
45
.gitignore
vendored
Normal file
@ -0,0 +1,45 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Ignore dist
|
||||
dist/
|
BIN
2 - Терёхин Андрей Сергеевич.docx
Normal file
BIN
PF_Films.xcf
BIN
PF_Main.xcf
BIN
PF_Series.xcf
BIN
PF_profile.xcf
81
WelcomeToZombieLand.html
Normal file
@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="bg-image-html">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
|
||||
<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">
|
||||
<link rel="stylesheet" href="css/filmpage_style.css">
|
||||
<link rel="stylesheet" href="css/Zombieland.css">
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js" ></script>
|
||||
<title>ProstoFilms</title>
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-black">
|
||||
<div class="container"> <a class="navbar-brand" href="index.html">PF</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html" >Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="films.html" >Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="serials.html" >Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="profile.html" >Профиль</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reg.html" >Регистрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<img src="films/lgs/zombielandlogo.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row ms-3">
|
||||
<div class="col-12 mt-4">
|
||||
<h3 class="text-light">2009, ужасы, фантастика США 1ч 27мин 18+</h3>
|
||||
</div>
|
||||
<div class="col-4 mt-3">
|
||||
<h5 class="text-light">Только зомби апокалипсис
|
||||
может заставить социофоба найти друзей.
|
||||
Комедия с уморительным камео Билла Мюррея.</h5>
|
||||
</div>
|
||||
<div class="col-8"></div>
|
||||
<form action="" class="mt-5 gap-3 d-flex">
|
||||
<button class="btn btn-outline-light">Смотреть фильм</button>
|
||||
<button class="btn btn-outline-light">В любимое</button>
|
||||
<button class="btn btn-outline-light">Хочу посмотреть</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
<div class="footer">
|
||||
<div class="container-fluid fixed-bottom bg-black">
|
||||
<footer class="py-3">
|
||||
<div class="col-md-4">
|
||||
<span class=" ms-4 mb-3 mb-md-0 text-muted">© 2023 ProstoFilms, Inc</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
12
css/Zombieland.css
Normal file
@ -0,0 +1,12 @@
|
||||
.body {
|
||||
background: linear-gradient(to right, rgba(0,0,0,1) 0, rgba(255,255,255,0) 100%); height:100%;
|
||||
}
|
||||
.img {
|
||||
height: 200px; margin-top:30px; margin-left:45px;
|
||||
}
|
||||
.bg-image-html {
|
||||
background-image: url(../films/bgs/zombielandbg.jfif);
|
||||
background-position: center;
|
||||
height:100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
17
css/edit_reg_style.css
Normal file
@ -0,0 +1,17 @@
|
||||
.row img {
|
||||
margin-bottom: 20px;
|
||||
transition: 0.3s;
|
||||
border: 5px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.row img:hover {
|
||||
-moz-transform: scale(1.1);
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 15px 10px rgba(255, 123, 178, 0.5);
|
||||
}
|
||||
li:hover {
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
114
css/film_serial_style.css
Normal file
@ -0,0 +1,114 @@
|
||||
*
|
||||
{
|
||||
margin:0px ;
|
||||
padding:0px;
|
||||
}
|
||||
html {
|
||||
background-image: url(../image/background.png); /* Путь к картинке */
|
||||
background-size: cover; /* Растягиваем картинку по ширине */
|
||||
background-repeat: no-repeat; /* Картинка фона без повторения */
|
||||
background-position: center; /* Позиция фона по центру */
|
||||
}
|
||||
.menu li
|
||||
{
|
||||
float:left;
|
||||
margin:10px 25px;
|
||||
}
|
||||
.blok-menu
|
||||
{
|
||||
position: sticky;
|
||||
height: 100px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: #000000;
|
||||
box-shadow: 0px 13px 17px -6px #000000;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
margin:0 auto;
|
||||
display:table;
|
||||
}
|
||||
.menu li span
|
||||
{
|
||||
margin-top: 20px;
|
||||
font: 32px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.menu li span:hover
|
||||
{
|
||||
font: 32px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cc9999;
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.content
|
||||
{
|
||||
width: 1415px;
|
||||
height: auto;
|
||||
margin:0 auto;
|
||||
padding:0px;
|
||||
}
|
||||
.content h1
|
||||
{
|
||||
font: 30px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
position: relative;
|
||||
margin-top: 100px;
|
||||
left: 150px;
|
||||
}
|
||||
.obj img
|
||||
{
|
||||
float: left;
|
||||
display: table;
|
||||
padding:10px;
|
||||
margin:0 auto;
|
||||
transition: transform 500ms;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.obj img:hover
|
||||
{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.footer
|
||||
{
|
||||
width:1200px;
|
||||
margin-top:100px;
|
||||
}
|
||||
.footer p
|
||||
{
|
||||
font: 18px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding-top: 1%;
|
||||
padding-left: 1%;
|
||||
width: 99%;
|
||||
height: 40px;
|
||||
background-color: black;
|
||||
box-shadow: 0px -13px 17px -6px #000000;
|
||||
}
|
||||
img {
|
||||
height:180px;
|
||||
transition: 0.3s;
|
||||
border: 5px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
a img {
|
||||
transition: 0.3s;
|
||||
border: 5px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
img:hover {
|
||||
-moz-transform: scale(1.1);
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 15px 10px rgba(255, 123, 178, 0.5);
|
||||
}
|
||||
li:hover {
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
135
css/filmpage_style.css
Normal file
@ -0,0 +1,135 @@
|
||||
*
|
||||
{
|
||||
margin:0px ;
|
||||
padding:0px;
|
||||
}
|
||||
html {
|
||||
background-image: url(../image/background.png); /* Путь к картинке */
|
||||
background-size: cover; /* Растягиваем картинку по ширине */
|
||||
background-repeat: no-repeat; /* Картинка фона без повторения */
|
||||
background-position: center; /* Позиция фона по центру */
|
||||
}
|
||||
.menu li
|
||||
{
|
||||
float:left;
|
||||
margin:10px 25px;
|
||||
}
|
||||
.blok-menu
|
||||
{
|
||||
position: sticky;
|
||||
height: 100px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: #000000;
|
||||
box-shadow: 0px 13px 17px -6px #000000;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
margin:0 auto;
|
||||
display:table;
|
||||
}
|
||||
.menu li span
|
||||
{
|
||||
margin-top: 20px;
|
||||
font: 32px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.menu li span:hover
|
||||
{
|
||||
font: 32px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cc9999;
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.films-page h1
|
||||
{
|
||||
font: 30px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
left: 90px;
|
||||
width: 50%;
|
||||
}
|
||||
.films-page p
|
||||
{
|
||||
font: 25px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
left: 90px;
|
||||
width: 400px;
|
||||
word-spacing: 5px;
|
||||
}
|
||||
.films-page h2 {
|
||||
font: 30px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:black;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
left: 90px;
|
||||
width: 260px;
|
||||
background-color: #cc9999;
|
||||
padding: 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.films-page h3 {
|
||||
font: 25px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:black;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
left: 90px;
|
||||
width: 260px;
|
||||
background-color: #cc9999;
|
||||
padding: 2px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.obj img
|
||||
{
|
||||
width: 30%;
|
||||
margin-left: 70px;
|
||||
transition: transform 500ms;
|
||||
}
|
||||
.obj img:hover
|
||||
{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.footer
|
||||
{
|
||||
width:1200px;
|
||||
margin-top:px;
|
||||
}
|
||||
.footer p
|
||||
{
|
||||
font: 18px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding-top: 1%;
|
||||
padding-left: 1%;
|
||||
width: 99%;
|
||||
height: 40px;
|
||||
background-color: black;
|
||||
box-shadow: 0px -13px 17px -6px #000000;
|
||||
}
|
||||
img {
|
||||
height: 200px; margin-top:30px; margin-left:45px;
|
||||
transition: 0.3s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
-moz-transform: scale(1.1);
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
li:hover {
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
body {
|
||||
background: linear-gradient(to right, rgba(0,0,0,1) 0, rgba(255,255,255,0) 100%); height:100%;
|
||||
}
|
21
css/films_style.css
Normal file
@ -0,0 +1,21 @@
|
||||
img {
|
||||
height:180px;
|
||||
transition: 0.3s;
|
||||
border: 5px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
a img {
|
||||
transition: 0.3s;
|
||||
border: 5px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
img:hover {
|
||||
-moz-transform: scale(1.1);
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 15px 10px rgba(255, 123, 178, 0.5);
|
||||
}
|
||||
li:hover {
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
16
css/index_style.css
Normal file
@ -0,0 +1,16 @@
|
||||
img {
|
||||
transition: 0.3s;
|
||||
border: 5px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
-moz-transform: scale(1.1);
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 15px 10px rgba(255, 123, 178, 0.5);
|
||||
}
|
||||
li:hover {
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
23
css/profile_style.css
Normal file
@ -0,0 +1,23 @@
|
||||
.row img {
|
||||
margin-bottom: 20px;
|
||||
transition: 0.3s;
|
||||
border: 5px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.row img:hover {
|
||||
-moz-transform: scale(1.1);
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 15px 10px rgba(255, 123, 178, 0.5);
|
||||
}
|
||||
li:hover {
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.main {
|
||||
background-image: url('image/background.png'); background-position: center;
|
||||
}
|
||||
img {
|
||||
border-radius: 50%; height: 150px;
|
||||
}
|
165
css/style.css
Normal file
@ -0,0 +1,165 @@
|
||||
*
|
||||
{
|
||||
|
||||
margin:0px ;
|
||||
padding:0px;
|
||||
}
|
||||
html {
|
||||
background-image: url(../image/background.png);
|
||||
background-size: cover cover;
|
||||
background-repeat: repeat-y;
|
||||
background-position: center;
|
||||
|
||||
}
|
||||
.menu li
|
||||
{
|
||||
float:left;
|
||||
margin:10px 25px;
|
||||
}
|
||||
.blok-menu
|
||||
{
|
||||
position: sticky;
|
||||
height: 100px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: #000000;
|
||||
box-shadow: 0px 13px 17px -6px #000000;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
margin:0 auto;
|
||||
display:table;
|
||||
}
|
||||
.menu li span
|
||||
{
|
||||
margin-top: 20px;
|
||||
font: 32px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.menu li span:hover
|
||||
{
|
||||
font: 32px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cc9999;
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.content
|
||||
{
|
||||
width: 1200px;
|
||||
height: auto;
|
||||
margin:0 auto;
|
||||
padding:0px;
|
||||
}
|
||||
.content h1
|
||||
{
|
||||
font: 30px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
position: relative;
|
||||
margin-top: 100px;
|
||||
left: 150px;
|
||||
}
|
||||
.obj img
|
||||
{
|
||||
float: left;
|
||||
display: table;
|
||||
padding:30px;
|
||||
margin:0 auto;
|
||||
transition: transform 500ms;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.obj img:hover
|
||||
{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.footer
|
||||
{
|
||||
width:1200px;
|
||||
margin-top:100px;
|
||||
box-shadow: 0 -13px 17px -6px black;
|
||||
|
||||
}
|
||||
.footer p
|
||||
{
|
||||
font: 18px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding-top: 1%;
|
||||
padding-left: 1%;
|
||||
width: 99%;
|
||||
height: 40px;
|
||||
background-color: black;
|
||||
box-shadow: 0px -13px 17px -6px #000000;
|
||||
}
|
||||
|
||||
.profile-wishlist {
|
||||
margin-top: 150px;
|
||||
}
|
||||
.profile-vid img
|
||||
{
|
||||
height: 90px;
|
||||
width: 160px;
|
||||
float: left;
|
||||
padding:10px;
|
||||
transition: transform 500ms;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.profile-vid img:hover
|
||||
{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.padding {
|
||||
padding: 3rem !important
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
background: linear-gradient(to right, #ee5a6f, #f29263);
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.img-states {
|
||||
border-radius: 50%;
|
||||
width: 100;
|
||||
height: 100;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font: 24px Verdana, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
font: 18px Verdana, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.title {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 40px;
|
||||
font-weight: 600;
|
||||
font: 22px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
}
|
||||
.name-chapter{
|
||||
font-weight: 600;
|
||||
font: 18px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.data{
|
||||
color: #919aa3 !important;
|
||||
font: 18px Verdana, Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-block {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.bg-image {
|
||||
background-image: url(../image/background.png); background-position: center;
|
||||
}
|
17
css/wishlist.css
Normal file
@ -0,0 +1,17 @@
|
||||
.row img {
|
||||
margin-bottom: 20px;
|
||||
transition: 0.3s;
|
||||
border: 5px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.row img:hover {
|
||||
-moz-transform: scale(1.1);
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 15px 10px rgba(255, 123, 178, 0.5);
|
||||
}
|
||||
li:hover {
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
85
css/Новый текстовый документ.txt
Normal file
@ -0,0 +1,85 @@
|
||||
*
|
||||
{
|
||||
margin:0px ;
|
||||
padding:0px;
|
||||
}
|
||||
html {
|
||||
background-image: url(../image/background.png); /* Путь к картинке */
|
||||
background-size: cover; /* Растягиваем картинку по ширине */
|
||||
background-repeat: no-repeat; /* Картинка фона без повторения */
|
||||
background-position: center; /* Позиция фона по центру */
|
||||
}
|
||||
.menu li
|
||||
{
|
||||
float:left;
|
||||
margin:10px 25px;
|
||||
}
|
||||
.blok-menu
|
||||
{
|
||||
position: sticky;
|
||||
height: 100px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: #000000;
|
||||
box-shadow: 0px 13px 17px -6px #000000;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
margin:0 auto;
|
||||
display:table;
|
||||
}
|
||||
.menu li span
|
||||
{
|
||||
margin-top: 20px;
|
||||
font: 32px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.menu li span:hover
|
||||
{
|
||||
font: 32px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cc9999;
|
||||
transition: transform 500ms;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.content
|
||||
{
|
||||
width: 1200px;
|
||||
height: auto;
|
||||
margin:0 auto;
|
||||
padding:0px;
|
||||
}
|
||||
.content h1
|
||||
{
|
||||
font: 30px Verdana, Arial, Helvetica, sans-serif;
|
||||
color:#cccccc;
|
||||
position: relative;
|
||||
margin-top: 100px;
|
||||
left: 150px;
|
||||
}
|
||||
.obj img
|
||||
{
|
||||
float: left;
|
||||
display: table;
|
||||
padding:30px;
|
||||
margin:0 auto;
|
||||
transition: transform 500ms;
|
||||
}
|
||||
.obj img:hover
|
||||
{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.footer
|
||||
{
|
||||
width:1200px;
|
||||
margin-top:100px;
|
||||
}
|
||||
.footer p
|
||||
{
|
||||
font: 14px Verdana, Arial, Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
color:#cccccc;
|
||||
}
|
108
edit.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
|
||||
<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">
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js" ></script>
|
||||
<title>ProstoFilms</title>
|
||||
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-black">
|
||||
<div class="container"> <a class="navbar-brand" href="index.html">PF</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html" >Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="films.html" >Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="serials.html" >Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="profile.html" >Профиль</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reg.html" >Регистрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<body class="bg-image">
|
||||
<main>
|
||||
<div class="p-2">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
|
||||
alt="placeholder">
|
||||
</div>
|
||||
<form id="frm-items" class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label text-light">Название</label>
|
||||
<input type="text" class="form-control" id="name" value="" min="" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="genre" class="form-label text-light">Жанр</label>
|
||||
<select class="form-select" id="genre" required>
|
||||
<option selected disabled value="">Укажите жанр...</option>
|
||||
<option>Комедия</option>
|
||||
<option>Хоррор</option>
|
||||
<option>Триллер</option>
|
||||
<option>Боевик</option>
|
||||
<option>Экшен</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="rating" class="form-label text-light">Рейтинг</label>
|
||||
<input type="number" class="form-control" id="rating" value="0.00" step="0.01" min="0" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="image" class="form-label text-light">Изображение</label>
|
||||
<input id="image" type="file" name="image" class="form-control" accept="image/*" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button id="btn-add-item" class="btn btn-secondary" type="submit">Добавить</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict'
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
const forms = document.querySelectorAll('.needs-validation');
|
||||
// Loop over them and prevent submission
|
||||
for (let i = 0; i < forms.length; i++) {
|
||||
const form = forms[i];
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
<div class="footer">
|
||||
<div class="container-fluid fixed-bottom bg-black">
|
||||
<footer class="py-3">
|
||||
<div class="col-md-4">
|
||||
<span class=" ms-4 mb-3 mb-md-0 text-muted">© 2023 ProstoFilms, Inc</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
103
films.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
|
||||
<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">
|
||||
<link rel="stylesheet" href="css/films_style.css">
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js" ></script>
|
||||
<title>ProstoFilms</title>
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-black">
|
||||
<div class="container"> <a class="navbar-brand" href="index.html">PF</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html" >Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="films.html" >Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="serials.html" >Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="profile.html" >Профиль</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reg.html" >Регистрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<body class="bg-image">
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-light ps-5 ms-5 mt-5">Новинки</h2>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/dirt.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/django.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/gentlemen.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/inglourious basterds.png">
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-light ps-5 ms-5 mt-3">С высоким рейтингом</h2>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/kill bill.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/made in america.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/drive.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/paul.png">
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-light ps-5 ms-5 mt-3">Популярные</h2>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/rango.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/snatch.jpg">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/trueman show.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<a href="WelcomeToZombieLand.html"><img src ="films/welcome to zombieland.png"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<div class="footer">
|
||||
<div class="container-fluid fixed-bottom bg-black">
|
||||
<footer class="py-3">
|
||||
<div class="col-md-4">
|
||||
<span class=" ms-4 mb-3 mb-md-0 text-muted">© 2023 ProstoFilms, Inc</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
BIN
films/bgs/zombielandbg.jfif
Normal file
After Width: | Height: | Size: 386 KiB |
BIN
films/dirt.png
Normal file
After Width: | Height: | Size: 58 KiB |
BIN
films/django.png
Normal file
After Width: | Height: | Size: 82 KiB |
BIN
films/drive.png
Normal file
After Width: | Height: | Size: 141 KiB |
BIN
films/gentlemen.png
Normal file
After Width: | Height: | Size: 116 KiB |
BIN
films/inglourious basterds.png
Normal file
After Width: | Height: | Size: 166 KiB |
BIN
films/kill bill.png
Normal file
After Width: | Height: | Size: 54 KiB |
BIN
films/lgs/zombielandlogo.png
Normal file
After Width: | Height: | Size: 695 KiB |
BIN
films/made in america.png
Normal file
After Width: | Height: | Size: 151 KiB |
BIN
films/paul.png
Normal file
After Width: | Height: | Size: 125 KiB |
BIN
films/rango.png
Normal file
After Width: | Height: | Size: 99 KiB |
BIN
films/snatch.jpg
Normal file
After Width: | Height: | Size: 37 KiB |
BIN
films/snatch.png
Normal file
After Width: | Height: | Size: 119 KiB |
BIN
films/trueman show.png
Normal file
After Width: | Height: | Size: 138 KiB |
BIN
films/welcome to zombieland.png
Normal file
After Width: | Height: | Size: 170 KiB |
BIN
image/background.png
Normal file
After Width: | Height: | Size: 809 KiB |
BIN
image/logo3.png
Normal file
After Width: | Height: | Size: 33 KiB |
82
index.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
|
||||
<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">
|
||||
<link rel="stylesheet" href="css/index_style.css">
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js" ></script>
|
||||
<title>ProstoFilms</title>
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-black">
|
||||
<div class="container"> <a class="navbar-brand" href="index.html">PF</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html" >Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="films.html" >Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="serials.html" >Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="profile.html" >Профиль</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reg.html" >Регистрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<body class="bg-image">
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-light ps-5 ms-5 mt-5">Популярные фильмы</h2>
|
||||
<div class="row ps-5 d-flex justify-content-center">
|
||||
<div class="col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/django.png">
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/rango.png">
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="films/gentlemen.png">
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-light ps-5 ms-5 mt-3">Популярные сериалы</h2>
|
||||
<div class="row ps-5 d-flex justify-content-center">
|
||||
<div class="col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/drwho.png">
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/office.png">
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/RoM.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<div class="footer">
|
||||
<div class="container-fluid fixed-bottom bg-black">
|
||||
<footer class="py-3">
|
||||
<div class="col-md-4">
|
||||
<span class=" ms-4 mb-3 mb-md-0 text-muted">© 2023 ProstoFilms, Inc</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
23
javaS/autoSlider.js
Normal file
@ -0,0 +1,23 @@
|
||||
var URL = new Array("news.php", "script.php", "useful_site.php", "statistics.php");
|
||||
var image_ID = new Array("atSlider/paul.png", "atSlider/kill bill.png", "atSlider/dirt.png",
|
||||
"atSlider/made in america.png");
|
||||
|
||||
var banner = 3;
|
||||
var pause = 2000;
|
||||
var flag = 0;
|
||||
|
||||
function Rotate(image_num) {
|
||||
if (banner==URL.length-1) banner = 0;
|
||||
else banner++;
|
||||
document.getElementById("banners").src = image_ID[banner];
|
||||
document.getElementById("links").href = URL[banner];
|
||||
}
|
||||
|
||||
function Start_Rotate() {
|
||||
if (flag==0) { Timeout = window.setInterval('Rotate("banners")', pause); flag = 1; }
|
||||
}
|
||||
|
||||
window.onfocus = function(){ Start_Rotate(); }
|
||||
window.onblur = function(){ window.clearInterval(Timeout); flag = 0; }
|
||||
|
||||
if (flag==0) Start_Rotate();
|
81
javaS/items.js
Normal file
@ -0,0 +1,81 @@
|
||||
'use strict'
|
||||
|
||||
function addItemToTable(name, genre, rating) {
|
||||
console.info('Try to add item');
|
||||
|
||||
const table = document.querySelector("#tbl-items tbody");
|
||||
if (table == null) {
|
||||
throw 'Table is not found';
|
||||
}
|
||||
|
||||
const linesCount = document.querySelectorAll("#tbl-items tbody tr").length;
|
||||
|
||||
const id = 'item-' + Date.now();
|
||||
const tableHtml =
|
||||
'<tr id="' + id + '">\
|
||||
<th scope="row">' + (linesCount + 1) + '</th>\
|
||||
<td>' + name +'</td>\
|
||||
<td>' + genre + '</td>\
|
||||
<td>' + rating.toFixed(2) + '</td>\
|
||||
<td><button class="btn btn-danger" onclick="removeItemFromTable(\''+ id +'\')">Удалить</button></td>\
|
||||
</tr>';
|
||||
table.innerHTML += tableHtml;
|
||||
|
||||
console.info('Added');
|
||||
}
|
||||
|
||||
function removeItemFromTable(id) {
|
||||
console.info('Try to remove item');
|
||||
|
||||
if (!confirm('Do you really want to remove this item?')) {
|
||||
console.info('Canceled');
|
||||
return;
|
||||
}
|
||||
|
||||
const item = document.querySelector('#' + id);
|
||||
if (item == null) {
|
||||
throw 'Item with id [' + id + '] is not found';
|
||||
}
|
||||
item.remove();
|
||||
|
||||
const numbers = document.querySelectorAll("#tbl-items tbody tr th");
|
||||
for (let i = 0; i < numbers.length; i++) {
|
||||
numbers[i].innerHTML = i + 1;
|
||||
}
|
||||
|
||||
console.info('Removed');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
console.info('Loaded');
|
||||
|
||||
const form = document.querySelector("#frm-items");
|
||||
if (form !== null) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
console.info('Form onsubmit');
|
||||
event.preventDefault();
|
||||
|
||||
const name = document.querySelector("#name");
|
||||
if (name == null) {
|
||||
throw 'Name control is not found';
|
||||
}
|
||||
|
||||
const genre = document.querySelector("#genre");
|
||||
if (genre == null) {
|
||||
throw 'Count control is not found';
|
||||
}
|
||||
|
||||
const price = document.querySelector("#price");
|
||||
if (rating == null) {
|
||||
throw 'Price control is not found';
|
||||
}
|
||||
|
||||
|
||||
addItemToTable(name.value, genre.value, parseFloat(rating.value));
|
||||
|
||||
name.value = '';
|
||||
rating.value = 0;
|
||||
genre.value = '';
|
||||
});
|
||||
}
|
||||
});
|
4708
package-lock.json
generated
Normal file
29
package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "int-prog",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
"vite": "vite",
|
||||
"serve": "http-server -p 3000 ./dist/",
|
||||
"build": "vite build",
|
||||
"rest": "json-server --watch data.json -p 8081",
|
||||
"dev": "npm-run-all --parallel rest vite",
|
||||
"prod": "npm-run-all build --parallel serve rest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "6.4.2",
|
||||
"bootstrap": "5.3.2 "
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.54.0",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
"eslint-plugin-import": "2.28.1",
|
||||
"http-server": "14.1.1",
|
||||
"json-server": "0.17.4",
|
||||
"npm-run-all": "4.1.5",
|
||||
"vite": "4.4.9"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
86
profile.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
|
||||
<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">
|
||||
<link rel="stylesheet" href="css/profile_style.css">
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js" ></script>
|
||||
<title>ProstoFilms</title>
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-black">
|
||||
<div class="container"> <a class="navbar-brand" href="index.html">PF</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html" >Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="films.html" >Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="serials.html" >Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="profile.html" >Профиль</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reg.html" >Регистрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<body class="bg-image">
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="row mt-5 d-flex justify-content-center">
|
||||
<div class="user-profile p-4">
|
||||
<img src = "profiles/user.jpg">
|
||||
<h3 class="mt-2">Терёхин Андрей</h3>
|
||||
<h5>Подписка: Активна</h5>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<h4 class="border-bottom text-light">Информация</h4>
|
||||
<h5 class="mt-2 mb-1 text-light">Почта</h5>
|
||||
<h5 class="text-light">mail@gmail.ru</h5>
|
||||
<h5 class="mt-2 mb-1 text-light">Номер тел. для верификация аккаунта</h5>
|
||||
<h5 class="text-light">88005553535</h5>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<h4 class="border-bottom text-light">Фильмы и Сериалы</h4>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h5 class="mt-2 text-light">Любимое</h5>
|
||||
<img class="mx-3" src="profiles/favourite/deep space.png">
|
||||
<img class="mx-3" src="profiles/favourite/drive.png">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a class="nav-link" href="wishlist.html"><h5 class="mt-2 text-light">Хочу посмотреть</h5></a>
|
||||
<img class="mx-3" src="profiles/wishlist/broken pixels.png">
|
||||
<img class="mx-3" src="profiles/wishlist/trueman show.png">
|
||||
</div>
|
||||
</div>>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<div class="footer">
|
||||
<div class="container-fluid fixed-bottom bg-black">
|
||||
<footer class="py-3">
|
||||
<div class="col-md-4">
|
||||
<span class=" ms-4 mb-3 mb-md-0 text-muted">© 2023 ProstoFilms, Inc</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
BIN
profiles/favourite/deep space.png
Normal file
After Width: | Height: | Size: 177 KiB |
BIN
profiles/favourite/drive.png
Normal file
After Width: | Height: | Size: 141 KiB |
BIN
profiles/user.jpg
Normal file
After Width: | Height: | Size: 83 KiB |
BIN
profiles/wishlist/broken pixels.png
Normal file
After Width: | Height: | Size: 161 KiB |
BIN
profiles/wishlist/trueman show.png
Normal file
After Width: | Height: | Size: 138 KiB |
153
reg.html
Normal file
@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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/edit_reg_style.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js" ></script>
|
||||
<title>ProstoFilms</title>
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-black">
|
||||
<div class="container"> <a class="navbar-brand" href="index.html">PF</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html" >Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="films.html" >Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="serials.html" >Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="profile.html" >Профиль</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reg.html" >Регистрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<body class="bg-image">
|
||||
<main>
|
||||
<div class="p-4">
|
||||
<div class="container">
|
||||
<form class="row row-cols-1 g-3 needs-validation mt-3" novalidate>
|
||||
<div class="col md-6 justify-content-center">
|
||||
<label for="validationCustom01" class="form-label text-light">Имя</label>
|
||||
<input type="text" class="form-control" id="validationCustom01" value="" required>
|
||||
<div class="valid-feedback">
|
||||
Отлично!
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Укажите ваше имя.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col md-6">
|
||||
<label for="validationCustom02" class="form-label text-light">Фамилия</label>
|
||||
<input type="text" class="form-control" id="validationCustom02" value="" required>
|
||||
<div class="valid-feedback">
|
||||
Отлично!
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Укажите вашу фамилию.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col md-6">
|
||||
<label for="validationCustomUsername" class="form-label text-light">Имя пользователя</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
||||
<input type="text" class="form-control" id="validationCustomUsername"
|
||||
aria-describedby="inputGroupPrepend" required>
|
||||
<div class="valid-feedback">
|
||||
Отлично!
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Выберите имя пользователя.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col md-6">
|
||||
<label for="validationCustom03" class="form-label text-light">Город</label>
|
||||
<input type="text" class="form-control" id="validationCustom03" required>
|
||||
<div class="valid-feedback">
|
||||
Отлично!
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Укажите город.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col md-6">
|
||||
<label for="validationCustom04" class="form-label text-light">Пол</label>
|
||||
<select class="form-select" id="validationCustom04" required>
|
||||
<option selected disabled value="">Выберите...</option>
|
||||
<option>Мужской</option>
|
||||
<option>Женский</option>
|
||||
</select>
|
||||
<div class="valid-feedback">
|
||||
Отлично!
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Укажите пол.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col 12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
|
||||
<label class="form-check-label text-light" for="invalidCheck">
|
||||
Вы ознакомлены и согласны с пользовательским соглашением.
|
||||
</label>
|
||||
<div class="valid-feedback">
|
||||
Отлично!
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Вы должны согласиться с пользовательским соглашением.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col 12">
|
||||
<button class="btn btn-secondary" type="submit">Подтвердить заявку</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict'
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
const forms = document.querySelectorAll('.needs-validation');
|
||||
// Loop over them and prevent submission
|
||||
for (let i = 0; i < forms.length; i++) {
|
||||
const form = forms[i];
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
<div class="footer">
|
||||
<div class="container-fluid fixed-bottom bg-black">
|
||||
<footer class="py-3">
|
||||
<div class="col-md-4">
|
||||
<span class=" ms-4 mb-3 mb-md-0 text-muted">© 2023 ProstoFilms, Inc</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
103
serials.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
|
||||
<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">
|
||||
<link rel="stylesheet" href="css/film_serial_style.css">
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js" ></script>
|
||||
<title>ProstoFilms</title>
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-black">
|
||||
<div class="container"> <a class="navbar-brand" href="index.html">PF</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html" >Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="films.html" >Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="serials.html" >Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="profile.html" >Профиль</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reg.html" >Регистрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<body class="bg-image">
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-light ps-5 ms-5 mt-5">Новинки</h2>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/academy of death.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/brassic.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/broken pixels.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/deep space.png">
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-light ps-5 ms-5 mt-3">С высоким рейтингом</h2>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/drwho.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/future human.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/how i met ur mom.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/its england 1986.png">
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-light ps-5 ms-5 mt-3">Популярные</h2>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/its england 1990.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/office.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img class="" src ="serials/RoM.png">
|
||||
</div>
|
||||
<div class="col-xxl-3 col-xl-4 col-md-6 mt-2 d-flex justify-content-center">
|
||||
<img src ="serials/stan against evel.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<div class="footer">
|
||||
<div class="container-fluid fixed-bottom bg-black">
|
||||
<footer class="py-3">
|
||||
<div class="col-md-4">
|
||||
<span class=" ms-4 mb-3 mb-md-0 text-muted">© 2023 ProstoFilms, Inc</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
BIN
serials/RoM.png
Normal file
After Width: | Height: | Size: 159 KiB |
BIN
serials/academy of death.png
Normal file
After Width: | Height: | Size: 100 KiB |
BIN
serials/brassic.png
Normal file
After Width: | Height: | Size: 174 KiB |
BIN
serials/broken pixels.png
Normal file
After Width: | Height: | Size: 161 KiB |
BIN
serials/deep space.png
Normal file
After Width: | Height: | Size: 177 KiB |
BIN
serials/drwho.png
Normal file
After Width: | Height: | Size: 151 KiB |
BIN
serials/future human.png
Normal file
After Width: | Height: | Size: 180 KiB |
BIN
serials/how i met ur mom.png
Normal file
After Width: | Height: | Size: 107 KiB |
BIN
serials/its england 1986.png
Normal file
After Width: | Height: | Size: 158 KiB |
BIN
serials/its england 1990.png
Normal file
After Width: | Height: | Size: 182 KiB |
BIN
serials/office.png
Normal file
After Width: | Height: | Size: 146 KiB |
BIN
serials/stan against evel.png
Normal file
After Width: | Height: | Size: 161 KiB |
77
wishlist.html
Normal file
@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
|
||||
<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">
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js" ></script>
|
||||
<title>ProstoFilms</title>
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-black">
|
||||
<div class="container"> <a class="navbar-brand" href="index.html">PF</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html" >Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="films.html" >Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="serials.html" >Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="profile.html" >Профиль</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reg.html" >Регистрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<body class="bg-image">
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="p-2">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="items-add" class="btn btn-info">Добавить фильм (диалог)</button>
|
||||
<a class="btn btn-success" href="/edit.html">Добавить фильм (страница)</a>
|
||||
</div>
|
||||
<table id="tbl-items" class="table text-light">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">№</th>
|
||||
<th scope="col">Название</th>
|
||||
<th scope="col">Жанр</th>
|
||||
<th scope="col">Рейтинг</th>
|
||||
<th scope="col">Удалить</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="javaS/items.js"></script>
|
||||
</body>
|
||||
<div class="footer">
|
||||
<div class="container-fluid fixed-bottom bg-black">
|
||||
<footer class="py-3">
|
||||
<div class="col-md-4">
|
||||
<span class=" ms-4 mb-3 mb-md-0 text-muted">© 2023 ProstoFilms, Inc</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|