Compare commits
No commits in common. "main" and "master" have entirely different histories.
414
.gitignore
vendored
414
.gitignore
vendored
@ -1,400 +1,24 @@
|
||||
# ---> VisualStudio
|
||||
## Ignore Visual Studio temporary files, build results, and
|
||||
## files generated by popular Visual Studio add-ons.
|
||||
##
|
||||
## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore
|
||||
|
||||
# User-specific files
|
||||
*.rsuser
|
||||
*.suo
|
||||
*.user
|
||||
*.userosscache
|
||||
*.sln.docstates
|
||||
|
||||
# User-specific files (MonoDevelop/Xamarin Studio)
|
||||
*.userprefs
|
||||
|
||||
# Mono auto generated files
|
||||
mono_crash.*
|
||||
|
||||
# Build results
|
||||
[Dd]ebug/
|
||||
[Dd]ebugPublic/
|
||||
[Rr]elease/
|
||||
[Rr]eleases/
|
||||
x64/
|
||||
x86/
|
||||
[Ww][Ii][Nn]32/
|
||||
[Aa][Rr][Mm]/
|
||||
[Aa][Rr][Mm]64/
|
||||
bld/
|
||||
[Bb]in/
|
||||
[Oo]bj/
|
||||
[Ll]og/
|
||||
[Ll]ogs/
|
||||
|
||||
# Visual Studio 2015/2017 cache/options directory
|
||||
.vs/
|
||||
# Uncomment if you have tasks that create the project's static files in wwwroot
|
||||
#wwwroot/
|
||||
|
||||
# Visual Studio 2017 auto generated files
|
||||
Generated\ Files/
|
||||
|
||||
# MSTest test Results
|
||||
[Tt]est[Rr]esult*/
|
||||
[Bb]uild[Ll]og.*
|
||||
|
||||
# NUnit
|
||||
*.VisualState.xml
|
||||
TestResult.xml
|
||||
nunit-*.xml
|
||||
|
||||
# Build Results of an ATL Project
|
||||
[Dd]ebugPS/
|
||||
[Rr]eleasePS/
|
||||
dlldata.c
|
||||
|
||||
# Benchmark Results
|
||||
BenchmarkDotNet.Artifacts/
|
||||
|
||||
# .NET Core
|
||||
project.lock.json
|
||||
project.fragment.lock.json
|
||||
artifacts/
|
||||
|
||||
# ASP.NET Scaffolding
|
||||
ScaffoldingReadMe.txt
|
||||
|
||||
# StyleCop
|
||||
StyleCopReport.xml
|
||||
|
||||
# Files built by Visual Studio
|
||||
*_i.c
|
||||
*_p.c
|
||||
*_h.h
|
||||
*.ilk
|
||||
*.meta
|
||||
*.obj
|
||||
*.iobj
|
||||
*.pch
|
||||
*.pdb
|
||||
*.ipdb
|
||||
*.pgc
|
||||
*.pgd
|
||||
*.rsp
|
||||
*.sbr
|
||||
*.tlb
|
||||
*.tli
|
||||
*.tlh
|
||||
*.tmp
|
||||
*.tmp_proj
|
||||
*_wpftmp.csproj
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
*.tlog
|
||||
*.vspscc
|
||||
*.vssscc
|
||||
.builds
|
||||
*.pidb
|
||||
*.svclog
|
||||
*.scc
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Chutzpah Test files
|
||||
_Chutzpah*
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Visual C++ cache files
|
||||
ipch/
|
||||
*.aps
|
||||
*.ncb
|
||||
*.opendb
|
||||
*.opensdf
|
||||
*.sdf
|
||||
*.cachefile
|
||||
*.VC.db
|
||||
*.VC.VC.opendb
|
||||
|
||||
# Visual Studio profiler
|
||||
*.psess
|
||||
*.vsp
|
||||
*.vspx
|
||||
*.sap
|
||||
|
||||
# Visual Studio Trace Files
|
||||
*.e2e
|
||||
|
||||
# TFS 2012 Local Workspace
|
||||
$tf/
|
||||
|
||||
# Guidance Automation Toolkit
|
||||
*.gpState
|
||||
|
||||
# ReSharper is a .NET coding add-in
|
||||
_ReSharper*/
|
||||
*.[Rr]e[Ss]harper
|
||||
*.DotSettings.user
|
||||
|
||||
# TeamCity is a build add-in
|
||||
_TeamCity*
|
||||
|
||||
# DotCover is a Code Coverage Tool
|
||||
*.dotCover
|
||||
|
||||
# AxoCover is a Code Coverage Tool
|
||||
.axoCover/*
|
||||
!.axoCover/settings.json
|
||||
|
||||
# Coverlet is a free, cross platform Code Coverage Tool
|
||||
coverage*.json
|
||||
coverage*.xml
|
||||
coverage*.info
|
||||
|
||||
# Visual Studio code coverage results
|
||||
*.coverage
|
||||
*.coveragexml
|
||||
|
||||
# NCrunch
|
||||
_NCrunch_*
|
||||
.*crunch*.local.xml
|
||||
nCrunchTemp_*
|
||||
|
||||
# MightyMoose
|
||||
*.mm.*
|
||||
AutoTest.Net/
|
||||
|
||||
# Web workbench (sass)
|
||||
.sass-cache/
|
||||
|
||||
# Installshield output folder
|
||||
[Ee]xpress/
|
||||
|
||||
# DocProject is a documentation generator add-in
|
||||
DocProject/buildhelp/
|
||||
DocProject/Help/*.HxT
|
||||
DocProject/Help/*.HxC
|
||||
DocProject/Help/*.hhc
|
||||
DocProject/Help/*.hhk
|
||||
DocProject/Help/*.hhp
|
||||
DocProject/Help/Html2
|
||||
DocProject/Help/html
|
||||
|
||||
# Click-Once directory
|
||||
publish/
|
||||
|
||||
# Publish Web Output
|
||||
*.[Pp]ublish.xml
|
||||
*.azurePubxml
|
||||
# Note: Comment the next line if you want to checkin your web deploy settings,
|
||||
# but database connection strings (with potential passwords) will be unencrypted
|
||||
*.pubxml
|
||||
*.publishproj
|
||||
|
||||
# Microsoft Azure Web App publish settings. Comment the next line if you want to
|
||||
# checkin your Azure Web App publish settings, but sensitive information contained
|
||||
# in these scripts will be unencrypted
|
||||
PublishScripts/
|
||||
|
||||
# NuGet Packages
|
||||
*.nupkg
|
||||
# NuGet Symbol Packages
|
||||
*.snupkg
|
||||
# The packages folder can be ignored because of Package Restore
|
||||
**/[Pp]ackages/*
|
||||
# except build/, which is used as an MSBuild target.
|
||||
!**/[Pp]ackages/build/
|
||||
# Uncomment if necessary however generally it will be regenerated when needed
|
||||
#!**/[Pp]ackages/repositories.config
|
||||
# NuGet v3's project.json files produces more ignorable files
|
||||
*.nuget.props
|
||||
*.nuget.targets
|
||||
|
||||
# Microsoft Azure Build Output
|
||||
csx/
|
||||
*.build.csdef
|
||||
|
||||
# Microsoft Azure Emulator
|
||||
ecf/
|
||||
rcf/
|
||||
|
||||
# Windows Store app package directories and files
|
||||
AppPackages/
|
||||
BundleArtifacts/
|
||||
Package.StoreAssociation.xml
|
||||
_pkginfo.txt
|
||||
*.appx
|
||||
*.appxbundle
|
||||
*.appxupload
|
||||
|
||||
# Visual Studio cache files
|
||||
# files ending in .cache can be ignored
|
||||
*.[Cc]ache
|
||||
# but keep track of directories ending in .cache
|
||||
!?*.[Cc]ache/
|
||||
|
||||
# Others
|
||||
ClientBin/
|
||||
~$*
|
||||
*~
|
||||
*.dbmdl
|
||||
*.dbproj.schemaview
|
||||
*.jfm
|
||||
*.pfx
|
||||
*.publishsettings
|
||||
orleans.codegen.cs
|
||||
|
||||
# Including strong name files can present a security risk
|
||||
# (https://github.com/github/gitignore/pull/2483#issue-259490424)
|
||||
#*.snk
|
||||
|
||||
# Since there are multiple workflows, uncomment next line to ignore bower_components
|
||||
# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
|
||||
#bower_components/
|
||||
|
||||
# RIA/Silverlight projects
|
||||
Generated_Code/
|
||||
|
||||
# Backup & report files from converting an old project file
|
||||
# to a newer Visual Studio version. Backup files are not needed,
|
||||
# because we have git ;-)
|
||||
_UpgradeReport_Files/
|
||||
Backup*/
|
||||
UpgradeLog*.XML
|
||||
UpgradeLog*.htm
|
||||
ServiceFabricBackup/
|
||||
*.rptproj.bak
|
||||
|
||||
# SQL Server files
|
||||
*.mdf
|
||||
*.ldf
|
||||
*.ndf
|
||||
|
||||
# Business Intelligence projects
|
||||
*.rdl.data
|
||||
*.bim.layout
|
||||
*.bim_*.settings
|
||||
*.rptproj.rsuser
|
||||
*- [Bb]ackup.rdl
|
||||
*- [Bb]ackup ([0-9]).rdl
|
||||
*- [Bb]ackup ([0-9][0-9]).rdl
|
||||
|
||||
# Microsoft Fakes
|
||||
FakesAssemblies/
|
||||
|
||||
# GhostDoc plugin setting file
|
||||
*.GhostDoc.xml
|
||||
|
||||
# Node.js Tools for Visual Studio
|
||||
.ntvs_analysis.dat
|
||||
node_modules/
|
||||
|
||||
# Visual Studio 6 build log
|
||||
*.plg
|
||||
|
||||
# Visual Studio 6 workspace options file
|
||||
*.opt
|
||||
|
||||
# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
|
||||
*.vbw
|
||||
|
||||
# Visual Studio 6 auto-generated project file (contains which files were open etc.)
|
||||
*.vbp
|
||||
|
||||
# Visual Studio 6 workspace and project file (working project files containing files to include in project)
|
||||
*.dsw
|
||||
*.dsp
|
||||
|
||||
# Visual Studio 6 technical files
|
||||
*.ncb
|
||||
*.aps
|
||||
|
||||
# Visual Studio LightSwitch build output
|
||||
**/*.HTMLClient/GeneratedArtifacts
|
||||
**/*.DesktopClient/GeneratedArtifacts
|
||||
**/*.DesktopClient/ModelManifest.xml
|
||||
**/*.Server/GeneratedArtifacts
|
||||
**/*.Server/ModelManifest.xml
|
||||
_Pvt_Extensions
|
||||
|
||||
# Paket dependency manager
|
||||
.paket/paket.exe
|
||||
paket-files/
|
||||
|
||||
# FAKE - F# Make
|
||||
.fake/
|
||||
|
||||
# CodeRush personal settings
|
||||
.cr/personal
|
||||
|
||||
# Python Tools for Visual Studio (PTVS)
|
||||
__pycache__/
|
||||
*.pyc
|
||||
|
||||
# Cake - Uncomment if you are using it
|
||||
# tools/**
|
||||
# !tools/packages.config
|
||||
|
||||
# Tabs Studio
|
||||
*.tss
|
||||
|
||||
# Telerik's JustMock configuration file
|
||||
*.jmconfig
|
||||
|
||||
# BizTalk build output
|
||||
*.btp.cs
|
||||
*.btm.cs
|
||||
*.odx.cs
|
||||
*.xsd.cs
|
||||
|
||||
# OpenCover UI analysis results
|
||||
OpenCover/
|
||||
|
||||
# Azure Stream Analytics local run output
|
||||
ASALocalRun/
|
||||
|
||||
# MSBuild Binary and Structured Log
|
||||
*.binlog
|
||||
|
||||
# NVidia Nsight GPU debugger configuration file
|
||||
*.nvuser
|
||||
|
||||
# MFractors (Xamarin productivity tool) working folder
|
||||
.mfractor/
|
||||
|
||||
# Local History for Visual Studio
|
||||
.localhistory/
|
||||
|
||||
# Visual Studio History (VSHistory) files
|
||||
.vshistory/
|
||||
|
||||
# BeatPulse healthcheck temp database
|
||||
healthchecksdb
|
||||
|
||||
# Backup folder for Package Reference Convert tool in Visual Studio 2017
|
||||
MigrationBackup/
|
||||
|
||||
# Ionide (cross platform F# VS Code tools) working folder
|
||||
.ionide/
|
||||
|
||||
# Fody - auto-generated XML schema
|
||||
FodyWeavers.xsd
|
||||
|
||||
# VS Code files for those working on multiple tools
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
*.code-workspace
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Windows Installer files from build outputs
|
||||
*.cab
|
||||
*.msi
|
||||
*.msix
|
||||
*.msm
|
||||
*.msp
|
||||
|
||||
# JetBrains Rider
|
||||
*.sln.iml
|
||||
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
6
.vs/VSWorkspaceState.json
Normal file
6
.vs/VSWorkspaceState.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"ExpandedNodes": [
|
||||
""
|
||||
],
|
||||
"PreviewInSolutionExplorer": false
|
||||
}
|
||||
BIN
.vs/slnx.sqlite
Normal file
BIN
.vs/slnx.sqlite
Normal file
Binary file not shown.
Binary file not shown.
0
.vs/vite-project/FileContentIndex/read.lock
Normal file
0
.vs/vite-project/FileContentIndex/read.lock
Normal file
220
Admin.html
Normal file
220
Admin.html
Normal file
@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<title>Онлайн кинотеатр</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Admin.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="JavaScript/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-wrap">
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<a href="#" class="col-lg-2 col-md-3 col-sm-4 desktop-logo"><img class="Logotip" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра"></a>
|
||||
<div class="col-lg-5 col-md-8 col-sm-8">
|
||||
<img class="smart-logo" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра">
|
||||
<h1 class="title-h1">
|
||||
<a href="#">
|
||||
Онлайн кинотеатр
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<button id="login-button" class="col-lg-4">
|
||||
<a href="index.html">Выйти из личного кабинета</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<nav class="container nav-box">
|
||||
<ul class=" row nav-list">
|
||||
<li class="col-lg-2 col-md nav-item"><a href="index.html">Главная</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Katalog.html">Каталог</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Shop.html">Магазин</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Sport.html">Спорт</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="TV.html">ТВ-каналы</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="pagePage.html">Таблица</a></li>
|
||||
<li class="col-lg-4 col-md-0 nav-item"></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="smart-nav-list">
|
||||
<li class="smart-nav-item">
|
||||
<a href="index.html">
|
||||
Главная
|
||||
</a>
|
||||
<button class="case__btn-close">
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<div class="row">
|
||||
<li class="smart-nav-item">
|
||||
<a href="Katalog.html">
|
||||
Каталог
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Shop.html">
|
||||
Магазин
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Sport.html">
|
||||
Спорт
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="TV.html">
|
||||
ТВ-каналы
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-wrap">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<div class="image-container">
|
||||
<img id="image-preview" src="https://via.placeholder.com/200" class="image-preview"
|
||||
alt="placeholder">
|
||||
</div>
|
||||
</div>
|
||||
<form id="items-form" class="needs-validation" novalidate>
|
||||
<h3 class="title-h3">Введите название фильма</h3>
|
||||
<div class="mb-2 form-section">
|
||||
<label class="form-label text-field-label" for="filmName">Название фильма</label>
|
||||
<input id="filmName" name="filmName" class="form-control" type="text" required>
|
||||
</div>
|
||||
<h3 class="title-h3">Выберите жанр</h3>
|
||||
<div class="mb-2 form-section">
|
||||
<label for="item" class="form-label text-field-label">Жанр</label>
|
||||
<select id="item" class="form-select" name="selected" required>
|
||||
</select>
|
||||
</div>
|
||||
<h3 class="title-h3">Введите цену</h3>
|
||||
<div class="mb-2 form-section">
|
||||
<label class="form-label text-field-label" for="price">Цена</label>
|
||||
<input id="price" name="price" class="form-control" type="number" value="0.00" min="100.00" step="10"
|
||||
required>
|
||||
</div>
|
||||
<h3 class="title-h3">Введите размер скидки</h3>
|
||||
<div class="mb-2 form-section">
|
||||
<label class="form-label text-field-label" for="discount">Скидка</label>
|
||||
<input id="discount" name="discount" class="form-control" type="number" value="0" min="0" max="99" step="1" required>
|
||||
</div>
|
||||
<h3 class="title-h3">Загрузите изображение</h3>
|
||||
<div class="mb-2 form-section">
|
||||
<label class="form-label text-field-label" for="image">Изображение</label>
|
||||
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||
</div>
|
||||
<a href="/pagePage.html" class="btn submit-button">Назад</a>
|
||||
<button type="submit" class="btn submit-button">Сохранить</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer-wrap">
|
||||
<div class="container footer-top">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row sign">
|
||||
Наши соцсети
|
||||
</div>
|
||||
<ul class="row-network">
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/VK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/Viber.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/OK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/TG.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/YouTube.png" alt="" class=""></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-12 row-addinfo">
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">О нас</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Блог</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Карьера</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Агенты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">Помощь</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Вопросы и ответы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Список устройств</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Дистрибьюторы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row meta-text">
|
||||
<a href="#" class="col-lg-2 col-md-3 desktop-logo">
|
||||
<img src="Images/Logotip-tv.png" alt="" class="">
|
||||
</a>
|
||||
<span class="col-lg-10 col-md-12">
|
||||
© 2012-2023 ООО «Онлайн-кинотеатр» 18+<br>
|
||||
Общероссийские каналы доступны для бесплатного просмотра круглосуточно<br>
|
||||
ПО ООО «Онлайн-кинотеатр» состоит в реестре отечественного ПО
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { linesPageForm } from "./js/lines"
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
linesPageForm();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
253
Cabinet.html
Normal file
253
Cabinet.html
Normal file
@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<title>Онлайн кинотеатр</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Cabinet.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="JavaScript/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-wrap">
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<a href="#" class="col-lg-2 col-md-3 col-sm-4 desktop-logo"><img class="Logotip" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра"></a>
|
||||
<div class="col-lg-5 col-md-8 col-sm-8">
|
||||
<img class="smart-logo" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра">
|
||||
<h1 class="title-h1">
|
||||
<a href="#">
|
||||
Онлайн кинотеатр
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<button id="login-button" class="col-lg-4">
|
||||
<a href="index.html">Выйти из личного кабинета</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<nav class="container nav-box">
|
||||
<ul class=" row nav-list">
|
||||
<li class="col-lg-2 col-md nav-item"><a href="index.html">Главная</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Katalog.html">Каталог</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Shop.html">Магазин</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Sport.html">Спорт</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="TV.html">ТВ-каналы</a></li>
|
||||
<li class="col-lg-4 col-md-0 nav-item"></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="smart-nav-list">
|
||||
<li class="smart-nav-item">
|
||||
<a href="index.html">
|
||||
Главная
|
||||
</a>
|
||||
<button class="case__btn-close">
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<div class="row">
|
||||
<li class="smart-nav-item">
|
||||
<a href="Katalog.html">
|
||||
Каталог
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Shop.html">
|
||||
Магазин
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Sport.html">
|
||||
Спорт
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="TV.html">
|
||||
ТВ-каналы
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-wrap">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-sm-12 col-lg-9 user-data-box">
|
||||
<h2 class="title-h2">
|
||||
Личный кабинет
|
||||
</h2>
|
||||
<ul class="overview-list">
|
||||
<li class="overview-item">
|
||||
Пол: Мужской
|
||||
</li>
|
||||
<li class="overview-item">
|
||||
Год рождения: 1999
|
||||
</li>
|
||||
<li class="overview-item">
|
||||
Телефон: +999-999-99-99
|
||||
</li>
|
||||
<li class="overview-item">
|
||||
Почта: pochta@gmail.com
|
||||
</li>
|
||||
<li class="overview-item">
|
||||
Подписка: <u>премиум</u>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="change-info-button">
|
||||
Изменить данные
|
||||
</button>
|
||||
|
||||
<button class="admin-button">
|
||||
<a href="pagePage.html">
|
||||
Открыть панель администратора
|
||||
</a>
|
||||
</button>
|
||||
</section>
|
||||
<aside class="col-md-4 col-lg-3 add-block">
|
||||
<div class="user-name">
|
||||
Кирилл
|
||||
</div>
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/user-none.png">
|
||||
</a>
|
||||
<a href="#" class="add-link">Загрузить свое фото</a>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h3 class="col-sm-12 title-h3">
|
||||
Отложенный просмотр
|
||||
</h3>
|
||||
</div>
|
||||
<section class="row">
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Film1.png"></a>
|
||||
</article>
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Film2.png"></a>
|
||||
</article>
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Film3.png"></a>
|
||||
</article>
|
||||
</section>
|
||||
<div class="row">
|
||||
<button class="col-sm-12 button-more">
|
||||
Показать больше
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h3 class="col-sm-12 title-h3">
|
||||
Мои покупки
|
||||
</h3>
|
||||
</div>
|
||||
<section class="row">
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Series1.png"></a>
|
||||
</article>
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Series2.png"></a>
|
||||
</article>
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Series3.png"></a>
|
||||
</article>
|
||||
</section>
|
||||
<div class="row">
|
||||
<button class="col-sm-12 button-more">
|
||||
Показать больше
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer-wrap">
|
||||
<div class="container footer-top">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row sign">
|
||||
Наши соцсети
|
||||
</div>
|
||||
<ul class="row-network">
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/VK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/Viber.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/OK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/TG.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/YouTube.png" alt="" class=""></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-12 row-addinfo">
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">О нас</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Блог</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Карьера</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Агенты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">Помощь</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Вопросы и ответы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Список устройств</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Дистрибьюторы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row meta-text">
|
||||
<a href="#" class="col-lg-2 col-md-3 desktop-logo">
|
||||
<img src="Images/Logotip-tv.png" alt="" class="">
|
||||
</a>
|
||||
<span class="col-lg-10 col-md-12">
|
||||
© 2012-2023 ООО «Онлайн-кинотеатр» 18+<br>
|
||||
Общероссийские каналы доступны для бесплатного просмотра круглосуточно<br>
|
||||
ПО ООО «Онлайн-кинотеатр» состоит в реестре отечественного ПО
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
Images/81point.png
Normal file
BIN
Images/81point.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
Images/Carnifecks.png
Normal file
BIN
Images/Carnifecks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
Images/Cartoons-image.png
Normal file
BIN
Images/Cartoons-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
Images/Comedy.png
Normal file
BIN
Images/Comedy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
Images/Criminal.png
Normal file
BIN
Images/Criminal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
Images/Film-image.png
Normal file
BIN
Images/Film-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
Images/Film1.png
Normal file
BIN
Images/Film1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
Images/Film2.png
Normal file
BIN
Images/Film2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
Images/Film3.png
Normal file
BIN
Images/Film3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
Images/First-mini.png
Normal file
BIN
Images/First-mini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
Images/First-red-mini.png
Normal file
BIN
Images/First-red-mini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 962 B |
BIN
Images/First.png
Normal file
BIN
Images/First.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
Images/First24.png
Normal file
BIN
Images/First24.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 962 B |
BIN
Images/Gampy.png
Normal file
BIN
Images/Gampy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
Images/Juls.png
Normal file
BIN
Images/Juls.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
Images/Laegue.png
Normal file
BIN
Images/Laegue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
Images/League.png
Normal file
BIN
Images/League.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
Images/Logotip-tv.png
Normal file
BIN
Images/Logotip-tv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
Images/Love12.png
Normal file
BIN
Images/Love12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
BIN
Images/Match-mini.png
Normal file
BIN
Images/Match-mini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
Images/Miss.png
Normal file
BIN
Images/Miss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
Images/NBA.png
Normal file
BIN
Images/NBA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
Images/NTV-mini.png
Normal file
BIN
Images/NTV-mini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
Images/NTV.png
Normal file
BIN
Images/NTV.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
Images/Nature.png
Normal file
BIN
Images/Nature.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
Images/OK.png
Normal file
BIN
Images/OK.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
Images/Series-image.png
Normal file
BIN
Images/Series-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
Images/Series1.png
Normal file
BIN
Images/Series1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
BIN
Images/Series2.png
Normal file
BIN
Images/Series2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
Images/Series3.png
Normal file
BIN
Images/Series3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
Images/TG.png
Normal file
BIN
Images/TG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
Images/TV.png
Normal file
BIN
Images/TV.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
BIN
Images/VK.png
Normal file
BIN
Images/VK.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
Images/Valencia.png
Normal file
BIN
Images/Valencia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
Images/Viber.png
Normal file
BIN
Images/Viber.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
Images/YouTube.png
Normal file
BIN
Images/YouTube.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
Images/khl.png
Normal file
BIN
Images/khl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
Images/match.png
Normal file
BIN
Images/match.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
Images/parents.png
Normal file
BIN
Images/parents.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
BIN
Images/user-none.png
Normal file
BIN
Images/user-none.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
342
Katalog.html
Normal file
342
Katalog.html
Normal file
@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<title>Онлайн кинотеатр</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Katlog.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="JavaScript/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-wrap">
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<a href="#" class="col-lg-2 col-md-3 col-sm-4 desktop-logo"><img class="Logotip" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра"></a>
|
||||
<div class="col-lg-5 col-md-8 col-sm-8">
|
||||
<img class="smart-logo" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра">
|
||||
<h1 class="title-h1">
|
||||
<a href="#">
|
||||
Онлайн кинотеатр
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<button id="login-button" class="col-lg-5">
|
||||
<a href="Cabinet.html">Войти в личный кабинет</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<nav class="container nav-box">
|
||||
<ul class=" row nav-list">
|
||||
<li class="col-lg-2 col-md nav-item"><a href="index.html">Главная</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Katalog.html"><u>Каталог</u></a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Shop.html">Магазин</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Sport.html">Спорт</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="TV.html">ТВ-каналы</a></li>
|
||||
<li class="col-lg-4 col-md-0 nav-item"></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="smart-nav-list">
|
||||
<li class="smart-nav-item">
|
||||
<a href="index.html">
|
||||
Главная
|
||||
</a>
|
||||
<button class="case__btn-close">
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<div class="row">
|
||||
<li class="smart-nav-item">
|
||||
<a href="Katalog.html">
|
||||
<u>Каталог</u>
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Shop.html">
|
||||
Магазин
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Sport.html">
|
||||
Спорт
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="TV.html">
|
||||
ТВ-каналы
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-wrap">
|
||||
<div class="container">
|
||||
<section class="row">
|
||||
<article class="col">
|
||||
<div class="kind">
|
||||
<h3 class="title-h3">
|
||||
Фильмы
|
||||
</h3>
|
||||
<a href="Shop.html" class="image-container">
|
||||
<img src="Images/Film-image.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<article class="col">
|
||||
<div class="kind">
|
||||
<h3 class="title-h3">
|
||||
Сериалы
|
||||
</h3>
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Series-image.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<article class="col">
|
||||
<div class="kind">
|
||||
<h3 class="title-h3">
|
||||
Мультфильмы
|
||||
</h3>
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Cartoons-image.png">
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-1 col-md-3">
|
||||
</div>
|
||||
<button class="col-sm-10 col-md-6 button-more">
|
||||
Показать больше
|
||||
</button>
|
||||
<div class="col-sm-1 col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h2 class="title-h2">
|
||||
Подборка
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<section class="row">
|
||||
<article class="col">
|
||||
<div class="category">
|
||||
<h3 class="title-h3">
|
||||
Комедийные сериалы
|
||||
</h3>
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Comedy.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<article class="col">
|
||||
<div class="category">
|
||||
<h3 class="title-h3">
|
||||
Криминальные фильмы
|
||||
</h3>
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Criminal.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<article class="col">
|
||||
<div class="category">
|
||||
<h3 class="title-h3">
|
||||
Натуральная красота
|
||||
</h3>
|
||||
<a href="#" class="image-container nature-img">
|
||||
<img src="Images/Nature.png">
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-1 col-md-3">
|
||||
</div>
|
||||
<button class="col-sm-10 col-md-6 button-more">
|
||||
Показать больше
|
||||
</button>
|
||||
<div class="col-sm-1 col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h4 class="title-h4">
|
||||
Жанры
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<ul class="row genres">
|
||||
<ul class="col">
|
||||
<li>
|
||||
Комедии
|
||||
</li>
|
||||
<li>
|
||||
Мультфильмы
|
||||
</li>
|
||||
<li>
|
||||
Музыкальное
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="col">
|
||||
<li>
|
||||
Боевики
|
||||
</li>
|
||||
<li>
|
||||
Фентези
|
||||
</li>
|
||||
<li>
|
||||
Биографии
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="col">
|
||||
<li>
|
||||
Фантастика
|
||||
</li>
|
||||
<li>
|
||||
Семейное
|
||||
</li>
|
||||
<li>
|
||||
Военное
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="col">
|
||||
<li>
|
||||
Триллеры
|
||||
</li>
|
||||
<li>
|
||||
Милодраммы
|
||||
</li>
|
||||
<li>
|
||||
Криминал
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="col">
|
||||
<li>
|
||||
Приключения
|
||||
</li>
|
||||
<li>
|
||||
Детективы
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="col">
|
||||
<li>
|
||||
Драмы
|
||||
</li>
|
||||
<li>
|
||||
Аниме
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer-wrap">
|
||||
<div class="container footer-top">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row sign">
|
||||
Наши соцсети
|
||||
</div>
|
||||
<ul class="row-network">
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/VK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/Viber.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/OK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/TG.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/YouTube.png" alt="" class=""></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-12 row-addinfo">
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">О нас</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Блог</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Карьера</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Агенты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">Помощь</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Вопросы и ответы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Список устройств</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Дистрибьюторы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row meta-text">
|
||||
<a href="#" class="col-lg-2 col-md-3 desktop-logo">
|
||||
<img src="Images/Logotip-tv.png" alt="" class="">
|
||||
</a>
|
||||
<span class="col-lg-10 col-md-12">
|
||||
© 2012-2023 ООО «Онлайн-кинотеатр» 18+<br>
|
||||
Общероссийские каналы доступны для бесплатного просмотра круглосуточно<br>
|
||||
ПО ООО «Онлайн-кинотеатр» состоит в реестре отечественного ПО
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
271
Shop.html
Normal file
271
Shop.html
Normal file
@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<title>Онлайн кинотеатр</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Shop.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="JavaScript/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-wrap">
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<a href="#" class="col-lg-2 col-md-3 col-sm-4 desktop-logo"><img class="Logotip" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра"></a>
|
||||
<div class="col-lg-5 col-md-8 col-sm-8">
|
||||
<img class="smart-logo" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра">
|
||||
<h1 class="title-h1">
|
||||
<a href="#">
|
||||
Онлайн кинотеатр
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<button id="login-button" class="col-lg-5">
|
||||
<a href="Cabinet.html">Войти в личный кабинет</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<nav class="container nav-box">
|
||||
<ul class=" row nav-list">
|
||||
<li class="col-lg-2 col-md nav-item"><a href="index.html">Главная</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Katalog.html">Каталог</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Shop.html"><u>Магазин</u></a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Sport.html">Спорт</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="TV.html">ТВ-каналы</a></li>
|
||||
<li class="col-lg-4 col-md-0 nav-item"></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="smart-nav-list">
|
||||
<li class="smart-nav-item">
|
||||
<a href="index.html">
|
||||
Главная
|
||||
</a>
|
||||
<button class="case__btn-close">
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<div class="row">
|
||||
<li class="smart-nav-item">
|
||||
<a href="Katalog.html">
|
||||
Каталог
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Shop.html">
|
||||
<u>Магазин</u>
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Sport.html">
|
||||
Спорт
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="TV.html">
|
||||
ТВ-каналы
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-wrap">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h2 class="title-h2">
|
||||
Рекомендации
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<section id="shopRec" class="row recomendation">
|
||||
<article class="col-md-6 product">
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/81point.png">
|
||||
</a>
|
||||
<div class="price">
|
||||
от 99 Р
|
||||
</div>
|
||||
</article>
|
||||
<article class="col-md-6 product">
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Miss.png">
|
||||
</a>
|
||||
<div class="price">
|
||||
от 99 Р
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-1 col-md-3">
|
||||
</div>
|
||||
<button class="col-sm-10 col-md-6 button-more">
|
||||
Показать больше
|
||||
</button>
|
||||
<div class="col-sm-1 col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h2 class="title-h2">
|
||||
Рекомендации
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<section class="row recomendation">
|
||||
<article class="col-sm-6 col-md-3 product">
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Love12.png">
|
||||
</a>
|
||||
<div class="price">
|
||||
от 99 Р
|
||||
</div>
|
||||
</article>
|
||||
<article class="col-sm-6 col-md-3 product">
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Gampy.png">
|
||||
</a>
|
||||
<div class="price">
|
||||
от 99 Р
|
||||
</div>
|
||||
</article>
|
||||
<article class="col-sm-6 col-md-3 product">
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Juls.png">
|
||||
</a>
|
||||
<div class="price">
|
||||
от 99 Р
|
||||
</div>
|
||||
</article>
|
||||
<article class="col-sm-6 col-md-3 product">
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Carnifecks.png">
|
||||
</a>
|
||||
<div class="price">
|
||||
от 99 Р
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-1 col-md-3">
|
||||
</div>
|
||||
<button class="col-sm-10 col-md-6 button-more">
|
||||
Показать больше
|
||||
</button>
|
||||
<div class="col-sm-1 col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer-wrap">
|
||||
<div class="container footer-top">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row sign">
|
||||
Наши соцсети
|
||||
</div>
|
||||
<ul class="row-network">
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/VK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/Viber.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/OK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/TG.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/YouTube.png" alt="" class=""></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-12 row-addinfo">
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">О нас</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Блог</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Карьера</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Агенты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">Помощь</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Вопросы и ответы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Список устройств</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Дистрибьюторы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row meta-text">
|
||||
<a href="#" class="col-lg-2 col-md-3 desktop-logo">
|
||||
<img src="Images/Logotip-tv.png" alt="" class="">
|
||||
</a>
|
||||
<span class="col-lg-10 col-md-12">
|
||||
© 2012-2023 ООО «Онлайн-кинотеатр» 18+<br>
|
||||
Общероссийские каналы доступны для бесплатного просмотра круглосуточно<br>
|
||||
ПО ООО «Онлайн-кинотеатр» состоит в реестре отечественного ПО
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { drawInShop } from "./js/lines";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
drawInShop();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
240
Sport.html
Normal file
240
Sport.html
Normal file
@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<title>Онлайн кинотеатр</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Sport.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="JavaScript/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-wrap">
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<a href="#" class="col-lg-2 col-md-3 col-sm-4 desktop-logo"><img class="Logotip" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра"></a>
|
||||
<div class="col-lg-5 col-md-8 col-sm-8">
|
||||
<img class="smart-logo" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра">
|
||||
<h1 class="title-h1">
|
||||
<a href="#">
|
||||
Онлайн кинотеатр
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<button id="login-button" class="col-lg-4">
|
||||
<a href="Cabinet.html">Войти в личный кабинет</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<nav class="container nav-box">
|
||||
<ul class=" row nav-list">
|
||||
<li class="col-lg-2 col-md nav-item"><a href="index.html">Главная</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Katalog.html">Каталог</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Shop.html">Магазин</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Sport.html"><u>Спорт</u></a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="TV.html">ТВ-каналы</a></li>
|
||||
<li class="col-lg-4 col-md-0 nav-item"></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="smart-nav-list">
|
||||
<li class="smart-nav-item">
|
||||
<a href="index.html">
|
||||
Главная
|
||||
</a>
|
||||
<button class="case__btn-close">
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<div class="row">
|
||||
<li class="smart-nav-item">
|
||||
<a href="Katalog.html">
|
||||
Каталог
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Shop.html">
|
||||
Магазин
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Sport.html">
|
||||
<u>Спорт</u>
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="TV.html">
|
||||
ТВ-каналы
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-wrap">
|
||||
|
||||
<div class="container">
|
||||
<section class="row">
|
||||
<article class="col-sm-12 event">
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/Valencia.png">
|
||||
</a>
|
||||
<div class="data-time">
|
||||
Сегодня в 23:15
|
||||
</div>
|
||||
<div class="add-info">
|
||||
Валенсия - <br> Реал Мадрид
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul class="row bottom-nav">
|
||||
<li class="col">
|
||||
<div class="bottom-nav_item">
|
||||
Календарь трансляций
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="bottom-nav_item">
|
||||
Футбол
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="bottom-nav_item">
|
||||
Баскетбол
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="bottom-nav_item">
|
||||
Киберспорт
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="bottom-nav_item">
|
||||
Фигурное катание
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="bottom-nav_item">
|
||||
Ещё
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div class="row">
|
||||
<h3 class="title-h3">
|
||||
Смотрите в прямом эфире
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<section class="row">
|
||||
<article class="col-sm-6 col-md-4 translation-box">
|
||||
<a href="#" class="image-container"><img src="Images/khl.png"></a>
|
||||
</article>
|
||||
<article class="col-sm-6 col-md-4 translation-box">
|
||||
<a href="#" class="image-container"><img src="Images/NBA.png"></a>
|
||||
</article>
|
||||
<article class="col-sm-12 col-md-4 translation-box">
|
||||
<a href="#" class="image-container"><img src="Images/Laegue.png"></a>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer-wrap">
|
||||
<div class="container footer-top">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row sign">
|
||||
Наши соцсети
|
||||
</div>
|
||||
<ul class="row-network">
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/VK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/Viber.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/OK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/TG.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/YouTube.png" alt="" class=""></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-12 row-addinfo">
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">О нас</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Блог</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Карьера</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Агенты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">Помощь</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Вопросы и ответы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Список устройств</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Дистрибьюторы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row meta-text">
|
||||
<a href="#" class="col-lg-2 col-md-3 desktop-logo">
|
||||
<img src="Images/Logotip-tv.png" alt="" class="">
|
||||
</a>
|
||||
<span class="col-lg-10 col-md-12">
|
||||
© 2012-2023 ООО «Онлайн-кинотеатр» 18+<br>
|
||||
Общероссийские каналы доступны для бесплатного просмотра круглосуточно<br>
|
||||
ПО ООО «Онлайн-кинотеатр» состоит в реестре отечественного ПО
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
149
Styles/Admin.css
Normal file
149
Styles/Admin.css
Normal file
@ -0,0 +1,149 @@
|
||||
.image-preview{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.image-container{
|
||||
height: 200px;
|
||||
margin: 20px 0;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-center{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-h3{
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-section{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px 20px;
|
||||
margin: 20px 0;;
|
||||
background: linear-gradient(135deg, #161616, #fff);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.form-radio-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-radio-btn input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
.form-radio-btn label {
|
||||
display: block;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
padding: 0px 15px;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
background-color: white;
|
||||
border: 1px solid #999;
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.form-radio-btn input[type=radio]:checked + label {
|
||||
color: white;
|
||||
background: #727272;
|
||||
}
|
||||
|
||||
.form-radio-btn label:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-radio-btn input[type=radio]:disabled + label {
|
||||
background: #efefef;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.text-field-label{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text-field-input{
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 7px;
|
||||
font-family: inherit;
|
||||
font-size: 18px;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.text-field-textarea{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 185px;
|
||||
padding: 7px;
|
||||
font-family: inherit;
|
||||
font-size: 18px;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 0.25rem;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.submit-button-label{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.submit-button{
|
||||
padding: 15px 20px;
|
||||
margin: 20px 0;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #161616, #fff);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.submit-button, .text-field-textarea, .text-field-input, .form-radio-btn label{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title-h3{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 398px) {
|
||||
.title-h3{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
162
Styles/Cabinet.css
Normal file
162
Styles/Cabinet.css
Normal file
@ -0,0 +1,162 @@
|
||||
|
||||
.user-data-box{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 30px 0;
|
||||
padding: 20px 100px 20px 40px;
|
||||
background: linear-gradient(135deg, #161616, #fff);
|
||||
border-radius: 47px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.overview-list{
|
||||
background: linear-gradient(115deg, #161616, #fff);
|
||||
border-radius: 47px;
|
||||
}
|
||||
|
||||
.overview-item{
|
||||
margin: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.change-info-button{
|
||||
display: inline-block;
|
||||
margin: 10px 0 0 0;
|
||||
padding: 20px;
|
||||
background-color: #303030;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.admin-button{
|
||||
display: inline-block;
|
||||
margin: 10px 0 0 0;
|
||||
padding: 5px;
|
||||
background-color: #303030;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.admin-button a{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-link {
|
||||
display: block;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.add-block{
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.user-name{
|
||||
margin: 0 0 20px 0;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.add-block .image-container{
|
||||
display: block;
|
||||
border-radius: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-h3{
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.film-box .image-container{
|
||||
display: block;
|
||||
border-radius: 27px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-more{
|
||||
margin: 0 0 15px 0;
|
||||
padding: 15px 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.add-block{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.film-box{
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.user-data-box{
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.overview-list{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.overview-item{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.change-info-button{
|
||||
padding: 7px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title-h3{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.button-more{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 398px) {
|
||||
|
||||
|
||||
.title-h3{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.button-more{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
123
Styles/Katlog.css
Normal file
123
Styles/Katlog.css
Normal file
@ -0,0 +1,123 @@
|
||||
.kind{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20px 0;
|
||||
height: 350px;
|
||||
padding: 30px;
|
||||
background: linear-gradient(135deg, #848484, #E4E4E4);
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
.kind .title-h3{
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.kind .image-container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button-more{
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
background-color: #727272;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.title-h2{
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.category{
|
||||
margin: 20px 0;
|
||||
height: 200px;
|
||||
padding: 30px;
|
||||
background: linear-gradient(135deg, #848484, #E4E4E4);
|
||||
border-radius: 35px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category .title-h3{
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.category .image-container{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.category .nature-img{
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.title-h4{
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.genres{
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.genres li{
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title-h2{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.category .title-h3{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.button-more{
|
||||
padding: 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 398px) {
|
||||
.kind .title-h3{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.genres{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
144
Styles/Main.css
Normal file
144
Styles/Main.css
Normal file
@ -0,0 +1,144 @@
|
||||
|
||||
.subsribe-box{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
columns: 2;
|
||||
margin: 30px 0;
|
||||
padding: 20px 100px 20px 40px;
|
||||
background: linear-gradient(135deg, #161616, #fff);
|
||||
border-radius: 47px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subsribe-title{
|
||||
margin: 0 0 30px 0;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subsribe-box .text{
|
||||
font-size: 36px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.subsribe-box .add-info{
|
||||
font-size: 24px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.orange-text{
|
||||
color: #FFC047;
|
||||
}
|
||||
|
||||
.subsribe-box .button-subsribe{
|
||||
display: inline-block;
|
||||
margin: 30px 0 0 0;
|
||||
padding: 20px;
|
||||
background-color: #303030;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.add-block{
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.add-block .image-container{
|
||||
display: block;
|
||||
border-radius: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-h3{
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.film-box .image-container{
|
||||
display: block;
|
||||
border-radius: 27px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-more{
|
||||
margin: 0 0 15px 0;
|
||||
padding: 15px 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.add-block{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.film-box{
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.subsribe-box{
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.subsribe-box .text{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subsribe-box .add-info{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
|
||||
.subsribe-box .add-info{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 398px) {
|
||||
.subsribe-box .text{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.subsribe-box .add-info{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.subsribe-box .button-subsribe{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.title-h3{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.button-more{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
91
Styles/Shop.css
Normal file
91
Styles/Shop.css
Normal file
@ -0,0 +1,91 @@
|
||||
.title-h2{
|
||||
margin: 20px;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.film-title{
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
background-color: #D9D9D9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.recomendation .product{
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recomendation .image-container{
|
||||
display: block;
|
||||
border-radius: 27px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img{
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.product .price{
|
||||
display: inline-block;
|
||||
padding: 7px;
|
||||
background-color: #D9D9D9;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.button-more{
|
||||
padding: 10px;
|
||||
margin: 10px 0 30px 0;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
background-color: #727272;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title-h2{
|
||||
margin-top: 0;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.button-more{
|
||||
padding: 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.title-h2{
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 398px) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
151
Styles/Sport.css
Normal file
151
Styles/Sport.css
Normal file
@ -0,0 +1,151 @@
|
||||
|
||||
|
||||
.event{
|
||||
margin: 30px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.event .image-container{
|
||||
display: block;
|
||||
border-radius: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img{
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.event .data-time{
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 50px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
background-color: #D9D9D9;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.event .add-info{
|
||||
padding: 20px 60px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50px;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
background-color: #242424;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.bottom-nav{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bottom-nav .col{
|
||||
margin: 15px 0;
|
||||
|
||||
}
|
||||
|
||||
.bottom-nav_item{
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: linear-gradient(#707070, #A1A1A1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.title-h3{
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.translation-box{
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.translation-box .image-container{
|
||||
display: block;
|
||||
border-radius: 27px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.event .data-time{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.event .add-info{
|
||||
padding: 20px 40px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.event .data-time{
|
||||
padding: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.event .add-info{
|
||||
padding: 10px 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.event .data-time{
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.event .add-info{
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title-h3{
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.bottom-nav{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.event .data-time{
|
||||
padding: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.event .add-info{
|
||||
padding: 3px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.title-h3{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 398px) {
|
||||
.title-h3{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
345
Styles/Styles.css
Normal file
345
Styles/Styles.css
Normal file
@ -0,0 +1,345 @@
|
||||
body,
|
||||
html{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 320px;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
|
||||
.header-top {
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
|
||||
|
||||
.header-top a, h1, button{
|
||||
margin-bottom: 20px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.smart-logo{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-top .row{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-h1 {
|
||||
padding: 20px 0 0 0;
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
#login-button{
|
||||
padding: 32px 0px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
background-color: #212121;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#login-button a{
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-bottom{
|
||||
background-color: #C1C1C1;
|
||||
}
|
||||
|
||||
.nav-list{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-item{
|
||||
display: inline-block;
|
||||
margin: 30px 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-item a{
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.smart-nav-list{
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.smart-nav-item{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.smart-nav-item a{
|
||||
margin-right: 30px;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.case__btn-close{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
padding: 10px 0 0 0;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
transition: 0.5s;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.stick{
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.case__btn-close_open{
|
||||
transform: rotate(360deg);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.footer-wrap{
|
||||
background: linear-gradient(#4E4E4E, #000000);
|
||||
}
|
||||
|
||||
.footer-wrap a{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.footer-wrap ul, li{
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.footer-wrap .footer-top{
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer-wrap .sign{
|
||||
padding-top: 45px;
|
||||
font-size: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-wrap .row-network{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-wrap .item-network{
|
||||
padding: 30px 0 0 0;
|
||||
}
|
||||
|
||||
.footer-wrap .row-addinfo{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.footer-wrap .add-info{
|
||||
margin-top: 45px;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.footer-wrap .add-info .item{
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.footer-wrap .meta-text span{
|
||||
margin-top: 60px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
.footer-wrap .meta-text{
|
||||
padding-bottom: 30px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.footer-wrap .meta-text span{
|
||||
margin-top: 60px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.footer-wrap .meta-text span{
|
||||
margin-top: 40px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title-h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.footer-wrap .desktop-logo{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-wrap .meta-text span{
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-list{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.smart-nav-list{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#login-button{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title-h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.footer-wrap .row-addinfo{
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.container{
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.title-h1 {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.desktop-logo{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.smart-logo{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#login-button{
|
||||
padding: 10px 0px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
background-color: #212121;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-wrap .row-addinfo{
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.footer-wrap .add-info{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-wrap .add-info .item{
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.footer-wrap .meta-text{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 398px) {
|
||||
.container{
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.title-h1 {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.desktop-logo{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.smart-logo{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#login-button{
|
||||
padding: 10px 0px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
background-color: #212121;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-wrap .item-network img{
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.footer-wrap .row-addinfo{
|
||||
flex-direction: space-between;
|
||||
}
|
||||
|
||||
.footer-wrap .add-info .item{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
199
Styles/TV.css
Normal file
199
Styles/TV.css
Normal file
@ -0,0 +1,199 @@
|
||||
.sub-nav{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sub-nav .col{
|
||||
margin: 15px 0;
|
||||
|
||||
}
|
||||
|
||||
.sub-nav_item{
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: linear-gradient(#707070, #A1A1A1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.TV-box{
|
||||
position: relative;
|
||||
margin: 30px 0;
|
||||
height: 470px;
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container{
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-container img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.channel-picture{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.channel-picture img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.watch-free{
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
background-color: #D9D9D9;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.image-container{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.channel-box{
|
||||
margin: 30px 0;
|
||||
padding: 0;
|
||||
height: 470px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* полоса прокрутки (скроллбар) */
|
||||
.channel-box::-webkit-scrollbar {
|
||||
padding: 1px;
|
||||
background-color: #404040;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* ползунок скроллбара */
|
||||
.channel-box::-webkit-scrollbar-thumb {
|
||||
margin: 1px;
|
||||
background-color: #F3F3F3;
|
||||
border: 2px solid #404040;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.channel-box::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #c3c3c3;
|
||||
}
|
||||
|
||||
.channel-box::-webkit-scrollbar-button:vertical:start:decrement {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.channel-box::-webkit-scrollbar-button:vertical:end:increment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.channel-item{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 6px;
|
||||
background: linear-gradient(#7A7A7A, #949494);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.channel-item .image-container{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 10px 20px 0 10px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.channel-text-box{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.programm-time{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.programm-name{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.programm-category{
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.sub-nav_item{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sub-nav{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.TV-box{
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.channel-picture{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.watch-free{
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.programm-time{
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.programm-name{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.programm-category{
|
||||
font-weight: 9px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 398px) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
7
Styles/pagePage.css
Normal file
7
Styles/pagePage.css
Normal file
@ -0,0 +1,7 @@
|
||||
.fa-trash, .fa-pen-to-square{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.btn-success{
|
||||
background: linear-gradient(135deg, #161616, #888);
|
||||
}
|
||||
279
TV.html
Normal file
279
TV.html
Normal file
@ -0,0 +1,279 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<title>Онлайн кинотеатр</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/TV.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="JavaScript/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-wrap">
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<a href="#" class="col-lg-2 col-md-3 col-sm-4 desktop-logo"><img class="Logotip" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра"></a>
|
||||
<div class="col-lg-5 col-md-8 col-sm-8">
|
||||
<img class="smart-logo" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра">
|
||||
<h1 class="title-h1">
|
||||
<a href="#">
|
||||
Онлайн кинотеатр
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<button id="login-button" class="col-lg-4">
|
||||
<a href="Cabinet.html">Войти в личный кабинет</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<nav class="container nav-box">
|
||||
<ul class=" row nav-list">
|
||||
<li class="col-lg-2 col-md nav-item"><a href="index.html">Главная</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Katalog.html">Каталог</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Shop.html">Магазин</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Sport.html">Спорт</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="TV.html"><u>ТВ-каналы</u></a></li>
|
||||
<li class="col-lg-4 col-md-0 nav-item"></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="smart-nav-list">
|
||||
<li class="smart-nav-item">
|
||||
<a href="index.html">
|
||||
Главная
|
||||
</a>
|
||||
<button class="case__btn-close">
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<div class="row">
|
||||
<li class="smart-nav-item">
|
||||
<a href="Katalog.html">
|
||||
Каталог
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Shop.html">
|
||||
Магазин
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Sport.html">
|
||||
Спорт
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="TV.html">
|
||||
<u>ТВ-каналы</u>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-wrap">
|
||||
<div class="container">
|
||||
<section>
|
||||
<ul class="row sub-nav">
|
||||
<li class="col">
|
||||
<div class="sub-nav_item">
|
||||
Все каналы
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="sub-nav_item">
|
||||
Федеральные
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="sub-nav_item">
|
||||
Фильмы и сериалы
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="sub-nav_item">
|
||||
Научно-популярные
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="sub-nav_item">
|
||||
Детские
|
||||
</div>
|
||||
</li>
|
||||
<li class="col">
|
||||
<div class="sub-nav_item">
|
||||
Ещё
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<article class="col-lg-6">
|
||||
<div class="TV-box">
|
||||
<a href="#" class="image-container"><img src="Images/TV.png"></a>
|
||||
<a href="#" class="channel-picture"><img src="Images/First.png"></a>
|
||||
<div class="watch-free">
|
||||
Смотреть бесплатно
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="col-lg-6">
|
||||
<article>
|
||||
<ul class="channel-box">
|
||||
<li class="channel-item">
|
||||
<a class="image-container" href="#"><img src="Images/First-mini.png"></a>
|
||||
<div class="channel-text-box">
|
||||
<div class="programm-time">18:00 - 19:00</div>
|
||||
<div class="programm-name">Информационный канал</div>
|
||||
<div class="programm-category">Новости - 16+</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="channel-item">
|
||||
<a class="image-container" href="#"><img src="Images/First-red-mini.png"></a>
|
||||
<div class="channel-text-box">
|
||||
<div class="programm-time">17:00 - 19:30</div>
|
||||
<div class="programm-name">Малахов</div>
|
||||
<div class="programm-category">Ток-шоу - 16+</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="channel-item">
|
||||
<a class="image-container" href="#"><img src="Images/Match-mini.png"></a>
|
||||
<div class="channel-text-box">
|
||||
<div class="programm-time">17:25 - 19:30</div>
|
||||
<div class="programm-name">Футбол
|
||||
Кубок России</div>
|
||||
<div class="programm-category">Спорт - 0+</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="channel-item">
|
||||
<a class="image-container" href="#"><img src="Images/NTV-mini.png"></a>
|
||||
<div class="channel-text-box">
|
||||
<div class="programm-time">17:45 - 18:50</div>
|
||||
<div class="programm-name">За гранью</div>
|
||||
<div class="programm-category">Ток-шоу - 16+</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="channel-item">
|
||||
<a class="image-container" href="#"><img src="Images/First-mini.png"></a>
|
||||
<div class="channel-text-box">
|
||||
<div class="programm-time">18:00 - 19:00</div>
|
||||
<div class="programm-name">Информационный канал</div>
|
||||
<div class="programm-category">Новости - 16+</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="channel-item">
|
||||
<a class="image-container" href="#"><img src="Images/First-mini.png"></a>
|
||||
<div class="channel-text-box">
|
||||
<div class="programm-time">18:00 - 19:00</div>
|
||||
<div class="programm-name">Информационный канал</div>
|
||||
<div class="programm-category">Новости - 16+</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</article>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer-wrap">
|
||||
<div class="container footer-top">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row sign">
|
||||
Наши соцсети
|
||||
</div>
|
||||
<ul class="row-network">
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/VK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/Viber.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/OK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/TG.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/YouTube.png" alt="" class=""></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-12 row-addinfo">
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">О нас</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Блог</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Карьера</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Агенты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">Помощь</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Вопросы и ответы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Список устройств</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Дистрибьюторы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row meta-text">
|
||||
<a href="#" class="col-lg-2 col-md-3 desktop-logo">
|
||||
<img src="Images/Logotip-tv.png" alt="" class="">
|
||||
</a>
|
||||
<span class="col-lg-10 col-md-12">
|
||||
© 2012-2023 ООО «Онлайн-кинотеатр» 18+<br>
|
||||
Общероссийские каналы доступны для бесплатного просмотра круглосуточно<br>
|
||||
ПО ООО «Онлайн-кинотеатр» состоит в реестре отечественного ПО
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
9
counter.js
Normal file
9
counter.js
Normal file
@ -0,0 +1,9 @@
|
||||
export function setupCounter(element) {
|
||||
let counter = 0
|
||||
const setCounter = (count) => {
|
||||
counter = count
|
||||
element.innerHTML = `count is ${counter}`
|
||||
}
|
||||
element.addEventListener('click', () => setCounter(counter + 1))
|
||||
setCounter(0)
|
||||
}
|
||||
242
index.html
Normal file
242
index.html
Normal file
@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<title>Онлайн кинотеатр</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/Main.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="JavaScript/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-wrap">
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<a href="#" class="col-lg-2 col-md-3 col-sm-4 desktop-logo"><img class="Logotip" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра"></a>
|
||||
<div class="col-lg-5 col-md-8 col-sm-8">
|
||||
<img class="smart-logo" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра">
|
||||
<h1 class="title-h1">
|
||||
<a href="#">
|
||||
Онлайн кинотеатр
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<button id="login-button" class="col-lg-4">
|
||||
<a href="Cabinet.html">Войти в личный кабинет</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<nav class="container nav-box">
|
||||
<ul class=" row nav-list">
|
||||
<li class="col-lg-2 col-md nav-item"><a href="index.html"><u>Главная</u></a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Katalog.html">Каталог</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Shop.html">Магазин</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Sport.html">Спорт</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="TV.html">ТВ-каналы</a></li>
|
||||
<li class="col-lg-4 col-md-0 nav-item"></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="smart-nav-list">
|
||||
<li class="smart-nav-item">
|
||||
<a href="index.html">
|
||||
<u>Главная</u>
|
||||
</a>
|
||||
<button class="case__btn-close">
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<div class="row">
|
||||
<li class="smart-nav-item">
|
||||
<a href="Katalog.html">
|
||||
Каталог
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Shop.html">
|
||||
Магазин
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Sport.html">
|
||||
Спорт
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="TV.html">
|
||||
ТВ-каналы
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-wrap">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-sm-12 col-lg-9 subsribe-box">
|
||||
<h2 class="subsribe-title">
|
||||
Подписка
|
||||
</h2>
|
||||
<span class="text">
|
||||
Смотрите кино, сериалы и мультфильмы
|
||||
</span>
|
||||
<span class="add-info orange-text">
|
||||
Месяц за 1 Р, затем месяц за 199 Р
|
||||
</span>
|
||||
<span class="add-info">
|
||||
Дальше - 399 Р в месяц
|
||||
</span>
|
||||
<button class="button-subsribe">
|
||||
Оформить подписку
|
||||
</button>
|
||||
</section>
|
||||
<aside class="col-md-4 col-lg-3 add-block">
|
||||
<a href="#" class="image-container">
|
||||
<img src="Images/parents.png">
|
||||
</a>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h3 class="col-sm-12 title-h3">
|
||||
Фильмы бесплатно
|
||||
</h3>
|
||||
</div>
|
||||
<section class="row">
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Film1.png"></a>
|
||||
</article>
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Film2.png"></a>
|
||||
</article>
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Film3.png"></a>
|
||||
</article>
|
||||
</section>
|
||||
<div class="row">
|
||||
<button class="col-sm-12 button-more">
|
||||
Показать больше
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h3 class="col-sm-12 title-h3">
|
||||
Сериалы бесплатно
|
||||
</h3>
|
||||
</div>
|
||||
<section class="row">
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Series1.png"></a>
|
||||
</article>
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Series2.png"></a>
|
||||
</article>
|
||||
<article class="col-lg-4 film-box">
|
||||
<a href="#" class="image-container"><img src="Images/Series3.png"></a>
|
||||
</article>
|
||||
</section>
|
||||
<div class="row">
|
||||
<button class="col-sm-12 button-more">
|
||||
Показать больше
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer-wrap">
|
||||
<div class="container footer-top">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row sign">
|
||||
Наши соцсети
|
||||
</div>
|
||||
<ul class="row-network">
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/VK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/Viber.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/OK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/TG.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/YouTube.png" alt="" class=""></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-12 row-addinfo">
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">О нас</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Блог</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Карьера</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Агенты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">Помощь</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Вопросы и ответы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Список устройств</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Дистрибьюторы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row meta-text">
|
||||
<a href="#" class="col-lg-2 col-md-3 desktop-logo">
|
||||
<img src="Images/Logotip-tv.png" alt="" class="">
|
||||
</a>
|
||||
<span class="col-lg-10 col-md-12">
|
||||
© 2012-2023 ООО «Онлайн-кинотеатр» 18+<br>
|
||||
Общероссийские каналы доступны для бесплатного просмотра круглосуточно<br>
|
||||
ПО ООО «Онлайн-кинотеатр» состоит в реестре отечественного ПО
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
javascript.svg
Normal file
1
javascript.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
|
||||
|
After Width: | Height: | Size: 995 B |
101
js/lines-rest-api.js
Normal file
101
js/lines-rest-api.js
Normal file
@ -0,0 +1,101 @@
|
||||
// модуль для работы с REST API сервера
|
||||
|
||||
// адрес сервера
|
||||
const serverUrl = "http://localhost:8081";
|
||||
|
||||
// функция возвращает объект нужной структуры для отправки на сервер
|
||||
function createLineObject(filmName, item, price, discount, image) {
|
||||
return {
|
||||
filmName: String(filmName),
|
||||
itemsId: item,
|
||||
price: parseFloat(price).toFixed(2),
|
||||
discount: (String(discount) + String("%")),
|
||||
finalPrice: parseFloat(price - price * discount / 100).toFixed(2),
|
||||
image,
|
||||
};
|
||||
}
|
||||
|
||||
// обращение к серверу для получения всех типов товара (get)
|
||||
export async function getAllItemTypes() {
|
||||
const response = await fetch(`${serverUrl}/items`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для получения всех записей (get)
|
||||
export async function getAllLines() {
|
||||
const response = await fetch(`${serverUrl}/lines?_expand=items`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для получения записи по первичному ключу (id) (get)
|
||||
// id передается в качестве части пути URL get-запроса
|
||||
export async function getLine(id) {
|
||||
const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для создания записи (post)
|
||||
// объект отправляется в теле запроса (body)
|
||||
export async function createLine(filmName, item, price, discount, image) {
|
||||
const itemObject = createLineObject(filmName, item, price, discount, image);
|
||||
|
||||
const options = {
|
||||
method: "POST",
|
||||
body: JSON.stringify(itemObject),
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const response = await fetch(`${serverUrl}/lines`, options);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для обновления записи по id (put)
|
||||
// объект отправляется в теле запроса (body)
|
||||
// id передается в качестве части пути URL get-запроса
|
||||
export async function updateLine(id, filmName, item, price, discount, image) {
|
||||
const itemObject = createLineObject(filmName, item, price, discount, image);
|
||||
|
||||
const options = {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(itemObject),
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для удаления записи по id (delete)
|
||||
// id передается в качестве части пути URL get-запроса
|
||||
export async function deleteLine(id) {
|
||||
const options = {
|
||||
method: "DELETE",
|
||||
};
|
||||
|
||||
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
140
js/lines-ui.js
Normal file
140
js/lines-ui.js
Normal file
@ -0,0 +1,140 @@
|
||||
// модуль для работы с элементами управления
|
||||
|
||||
// объект для удобного получения элементов
|
||||
// при обращении к атрибуту объекта вызывается
|
||||
// нужная функция для поиска элемента
|
||||
export const cntrls = {
|
||||
button: document.getElementById("items-add"),
|
||||
table: document.querySelector("#items-table tbody"),
|
||||
|
||||
shopRec: document.getElementById("shopRec"),
|
||||
|
||||
form: document.getElementById("items-form"),
|
||||
lineId: document.getElementById("items-line-id"),
|
||||
itemsType: document.getElementById("item"),
|
||||
price: document.getElementById("price"),
|
||||
discount: document.getElementById("discount"),
|
||||
image: document.getElementById("image"),
|
||||
imagePreview: document.getElementById("image-preview"),
|
||||
filmName: document.getElementById("filmName"),
|
||||
};
|
||||
|
||||
// Дефолтное превью
|
||||
export const imagePlaceholder = "https://via.placeholder.com/200";
|
||||
|
||||
// функция создает тег option для select
|
||||
// <option value="" selected>name</option>
|
||||
export function createItemsOption(name, value = "", isSelected = false) {
|
||||
const option = document.createElement("option");
|
||||
option.value = value || "";
|
||||
option.selected = isSelected;
|
||||
option.text = name;
|
||||
return option;
|
||||
}
|
||||
|
||||
// функция создает ссылку (a) для таблицы
|
||||
// содержимое тега a заполняется необходимой иконкой (icon)
|
||||
// при нажатии вызывается callback
|
||||
// ссылка "оборачивается" тегом td
|
||||
// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
|
||||
function createTableAnchor(icon, callback) {
|
||||
const i = document.createElement("i");
|
||||
i.classList.add("fa-solid", icon);
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = "#";
|
||||
a.appendChild(i);
|
||||
a.onclick = (event) => {
|
||||
// чтобы в URL не добавлялась решетка
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
callback();
|
||||
};
|
||||
|
||||
const td = document.createElement("td");
|
||||
td.appendChild(a);
|
||||
return td;
|
||||
}
|
||||
|
||||
// функция создает колонку таблицы с текстом value
|
||||
// <td>value</td>
|
||||
function createTableColumn(value) {
|
||||
const td = document.createElement("td");
|
||||
td.textContent = value;
|
||||
return td;
|
||||
}
|
||||
|
||||
// функция создает строку таблицы
|
||||
// <tr>
|
||||
// <th scope="row">index + 1</th>
|
||||
// <td>item.items.name</td>
|
||||
// <td>parseFloat(item.price).toFixed(2))</td>
|
||||
// <td>item.discount</td>
|
||||
// <td>parseFloat(item.finalPrice).toFixed(2))</td>
|
||||
// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
|
||||
// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
|
||||
// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
|
||||
// </tr>
|
||||
export function createTableRow(item, index, editPageCallback, deleteCallback) {
|
||||
const rowNumber = document.createElement("th");
|
||||
rowNumber.scope = "row";
|
||||
rowNumber.textContent = index + 1;
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.id = `line-${item.id}`;
|
||||
|
||||
row.appendChild(rowNumber);
|
||||
row.appendChild(createTableColumn(String(item.filmName)));
|
||||
row.appendChild(createTableColumn(item.items.name));
|
||||
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||
row.appendChild(createTableColumn(String(item.discount)));
|
||||
row.appendChild(createTableColumn(parseFloat(item.finalPrice).toFixed(2)));
|
||||
// редактировать на странице page-edit
|
||||
row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
|
||||
// удаление
|
||||
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
||||
return row;
|
||||
}
|
||||
|
||||
export function createShopElem(item, index, editPageCallback, deleteCallback) {
|
||||
|
||||
const El = document.createElement("article");
|
||||
El.className = "col-md-6 product";
|
||||
El.id = `line-${item.id}`;
|
||||
|
||||
|
||||
El.appendChild(createFilmName(String(item.filmName)));
|
||||
El.appendChild(createFilmPrice(parseFloat(item.finalPrice).toFixed(2)));
|
||||
El.appendChild(createFilmImage(item.image));
|
||||
return El;
|
||||
}
|
||||
|
||||
|
||||
function createFilmName(value) {
|
||||
const td = document.createElement("h3");
|
||||
td.className = "film-title";
|
||||
td.textContent = value;
|
||||
return td;
|
||||
}
|
||||
|
||||
function createFilmPrice(value) {
|
||||
const td = document.createElement("div");
|
||||
td.className = "price";
|
||||
td.textContent = String(value) + " Р";
|
||||
return td;
|
||||
}
|
||||
|
||||
function createFilmImage(value) {
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.className = "image-container"
|
||||
a.href = "#";
|
||||
|
||||
const td = document.createElement("img");
|
||||
|
||||
td.src = value;
|
||||
|
||||
a.appendChild(td);
|
||||
|
||||
return a;
|
||||
}
|
||||
263
js/lines.js
Normal file
263
js/lines.js
Normal file
@ -0,0 +1,263 @@
|
||||
// модуль с логикой
|
||||
|
||||
import {
|
||||
createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
|
||||
} from "./lines-rest-api";
|
||||
import {
|
||||
cntrls, createItemsOption, createTableRow, imagePlaceholder, createShopElem,
|
||||
} from "./lines-ui";
|
||||
|
||||
async function drawItemsSelect() {
|
||||
// вызов метода REST API для получения списка типов товаров
|
||||
const data = await getAllItemTypes();
|
||||
// очистка содержимого select
|
||||
// удаляется все, что находится между тегами <select></select>
|
||||
// но не атрибуты
|
||||
cntrls.itemsType.innerHTML = "";
|
||||
// пустое значение
|
||||
cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true));
|
||||
// цикл по результату ответа от сервера
|
||||
// используется лямбда-выражение
|
||||
// (item) => {} аналогично function(item) {}
|
||||
data.forEach((item) => {
|
||||
cntrls.itemsType.appendChild(createItemsOption(item.name, item.id));
|
||||
});
|
||||
}
|
||||
|
||||
export async function drawInShop() {
|
||||
console.info("Try to load data");
|
||||
if (!cntrls.shopRec) {
|
||||
return;
|
||||
}
|
||||
// вызов метода REST API для получения всех записей
|
||||
const data = await getAllLines();
|
||||
// очистка содержимого table
|
||||
// удаляется все, что находится между тегами <table></table>
|
||||
// но не атрибуты
|
||||
cntrls.shopRec.innerHTML = "";
|
||||
// цикл по результату ответа от сервера
|
||||
// используется лямбда-выражение
|
||||
// (item, index) => {} аналогично function(item, index) {}
|
||||
data.forEach((item, index) => {
|
||||
cntrls.shopRec.appendChild(
|
||||
createShopElem(
|
||||
item,
|
||||
index,
|
||||
// функции передаются в качестве параметра
|
||||
// это очень удобно, так как аргументы функций доступны только
|
||||
// в данном месте кода и не передаются в сервисные модули
|
||||
() => location.assign(`Admin.html?id=${item.id}`),
|
||||
() => removeLine(item.id),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export async function drawLinesTable() {
|
||||
console.info("Try to load data");
|
||||
if (!cntrls.table) {
|
||||
return;
|
||||
}
|
||||
// вызов метода REST API для получения всех записей
|
||||
const data = await getAllLines();
|
||||
// очистка содержимого table
|
||||
// удаляется все, что находится между тегами <table></table>
|
||||
// но не атрибуты
|
||||
cntrls.table.innerHTML = "";
|
||||
// цикл по результату ответа от сервера
|
||||
// используется лямбда-выражение
|
||||
// (item, index) => {} аналогично function(item, index) {}
|
||||
data.forEach((item, index) => {
|
||||
cntrls.table.appendChild(
|
||||
createTableRow(
|
||||
item,
|
||||
index,
|
||||
// функции передаются в качестве параметра
|
||||
// это очень удобно, так как аргументы функций доступны только
|
||||
// в данном месте кода и не передаются в сервисные модули
|
||||
() => location.assign(`Admin.html?id=${item.id}`),
|
||||
() => removeLine(item.id),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function addLine(filmName, item, price, discount, image) {
|
||||
console.info("Try to add item");
|
||||
// вызов метода REST API для добавления записи
|
||||
const data = await createLine(filmName, item, price, discount, image);
|
||||
console.info("Added");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
async function editLine(id, filmName, item, price, discount, image) {
|
||||
console.info("Try to update item");
|
||||
// вызов метода REST API для обновления записи
|
||||
const data = await updateLine(id, filmName, item, price, discount, image);
|
||||
console.info("Updated");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
async function removeLine(id) {
|
||||
if (!confirm("Do you really want to remove this item?")) {
|
||||
console.info("Canceled");
|
||||
return;
|
||||
}
|
||||
console.info("Try to remove item");
|
||||
// вызов метода REST API для удаления записи
|
||||
const data = await deleteLine(id);
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
// функция для получения содержимого файла в виде base64 строки
|
||||
// https://ru.wikipedia.org/wiki/Base64
|
||||
async function readFile(file) {
|
||||
const reader = new FileReader();
|
||||
|
||||
// создание Promise-объекта для использования функции
|
||||
// с помощью await (асинхронно) без коллбэков (callback)
|
||||
// https://learn.javascript.ru/promise
|
||||
return new Promise((resolve, reject) => {
|
||||
// 2. "Возвращаем" содержимое когда файл прочитан
|
||||
// через вызов resolve
|
||||
// Если не использовать Promise, то всю работу по взаимодействию
|
||||
// с REST API пришлось бы делать в обработчике (callback) функции
|
||||
// onloadend
|
||||
reader.onloadend = () => {
|
||||
const fileContent = reader.result;
|
||||
// Здесь могла бы быть работа с REST API
|
||||
// Чтение заканчивает выполняться здесь
|
||||
resolve(fileContent);
|
||||
};
|
||||
// 3. Возвращаем ошибку
|
||||
reader.onerror = () => {
|
||||
// Или здесь в случае ошибки
|
||||
reject(new Error("oops, something went wrong with the file reader."));
|
||||
};
|
||||
// Шаг 1. Сначала читаем файл
|
||||
// Чтение начинает выполняться здесь
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
// функция для обновления блока с превью выбранного изображения
|
||||
async function updateImagePreview() {
|
||||
// получение выбранного файла
|
||||
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
|
||||
const file = cntrls.image.files[0];
|
||||
// чтение содержимого файла в виде base64 строки
|
||||
const fileContent = await readFile(file);
|
||||
console.info("base64 ", fileContent);
|
||||
// обновление атрибута src для тега img с id image-preview
|
||||
cntrls.imagePreview.src = fileContent;
|
||||
}
|
||||
|
||||
// Функция для обработки создания и редактирования элементов таблицы через модальное окно
|
||||
// Если хотите делать через страницу, то удалите эту функцию
|
||||
|
||||
|
||||
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
||||
// Если хотите делать через модальное окно, то удалите эту функцию
|
||||
export async function linesPageForm() {
|
||||
console.info("linesPageForm");
|
||||
|
||||
// загрузка и заполнение select со списком товаров
|
||||
drawItemsSelect();
|
||||
|
||||
// func1 = (id) => {} аналогично function func1(id) {}
|
||||
const goBack = () => location.assign("/pagePage.html");
|
||||
|
||||
// Вызов функции обновления превью изображения при возникновении
|
||||
// события onchange в тэге input с id image
|
||||
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||
|
||||
// получение параметров GET-запроса из URL
|
||||
// параметры перечислены после символа ? (?id=1&color=black&...)
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
|
||||
// получение значения конкретного параметра (id)
|
||||
// указан только при редактировании
|
||||
const currentId = urlParams.get("id");
|
||||
// если id задан
|
||||
if (currentId) {
|
||||
try {
|
||||
// вызов метода REST API для получения записи по первичному ключу(id)
|
||||
const line = await getLine(currentId);
|
||||
// заполнение формы для редактирования
|
||||
cntrls.filmName.value = line.filmName;
|
||||
cntrls.itemsType.value = line.itemsId;
|
||||
cntrls.price.value = line.price;
|
||||
cntrls.discount.value = line.discount;
|
||||
// заполнение превью
|
||||
// Если пользователь выбрал изображение, то оно загружается
|
||||
// в тэг image с id image - preview
|
||||
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||
} catch {
|
||||
// в случае ошибки происходит возврат к page4
|
||||
goBack();
|
||||
}
|
||||
}
|
||||
|
||||
// обработчик события отправки формы
|
||||
// возникает при нажатии на кнопку (button) с типом submit
|
||||
// кнопка должна находится внутри тега form
|
||||
cntrls.form.addEventListener("submit", async (event) => {
|
||||
console.info("Form onSubmit");
|
||||
// отключение стандартного поведения формы при отправке
|
||||
// при отправке страница обновляется и JS перестает работать
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// если форма не прошла валидацию, то ничего делать не нужно
|
||||
if (!cntrls.form.checkValidity()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let imageBase64 = "";
|
||||
// Получение выбранного пользователем изображения в виде base64 строки
|
||||
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
||||
// дефолтное изображение
|
||||
if (cntrls.imagePreview.src !== imagePlaceholder) {
|
||||
// Загрузка содержимого атрибута src тэга img с id image-preview
|
||||
// Здесь выполняется HTTP запрос с типом GET
|
||||
const result = await fetch(cntrls.imagePreview.src);
|
||||
// Получение из HTTP-ответа бинарного содержимого
|
||||
const blob = await result.blob();
|
||||
// Получение base64 строки для файла
|
||||
// Здесь выполняется Promise из функции readFile
|
||||
// Promise позволяет писать линейный код для работы с асинхронными методами
|
||||
// без использования обработчиков (callback) с помощью await
|
||||
imageBase64 = await readFile(blob);
|
||||
}
|
||||
|
||||
// если значение параметра запроса не задано,
|
||||
// то необходимо выполнить добавление записи
|
||||
// иначе обновление записи
|
||||
if (!currentId) {
|
||||
await addLine(
|
||||
cntrls.filmName.value,
|
||||
cntrls.itemsType.value,
|
||||
cntrls.price.value,
|
||||
cntrls.discount.value,
|
||||
imageBase64,
|
||||
);
|
||||
} else {
|
||||
await editLine(
|
||||
currentId,
|
||||
cntrls.filmName.value,
|
||||
cntrls.itemsType.value,
|
||||
cntrls.price.value,
|
||||
cntrls.discount.value,
|
||||
imageBase64,
|
||||
);
|
||||
}
|
||||
// возврат к странице page4
|
||||
goBack();
|
||||
});
|
||||
}
|
||||
25
js/validation.js
Normal file
25
js/validation.js
Normal file
@ -0,0 +1,25 @@
|
||||
// модуль используется для валидации форма на странице
|
||||
|
||||
function validation() {
|
||||
// поиск всех форма с классом .needs-validation
|
||||
const forms = document.querySelectorAll("form.needs-validation");
|
||||
|
||||
for (let i = 0; i < forms.length; i += 1) {
|
||||
const form = forms[i];
|
||||
// для каждой формы добавляется обработчик события отправки
|
||||
form.addEventListener("submit", (event) => {
|
||||
// если форма не прошла валидацию
|
||||
// то выключить стандартное действие
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
// предотвращает распространение preventDefault
|
||||
// на другие объекты
|
||||
event.stopPropagation();
|
||||
}
|
||||
// добавляет к форме класс was-validated
|
||||
form.classList.add("was-validated");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default validation;
|
||||
24
main.js
Normal file
24
main.js
Normal file
@ -0,0 +1,24 @@
|
||||
import './style.css'
|
||||
import javascriptLogo from './javascript.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import { setupCounter } from './counter.js'
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<div>
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="${viteLogo}" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
|
||||
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
|
||||
</a>
|
||||
<h1>Hello Vite!</h1>
|
||||
<div class="card">
|
||||
<button id="counter" type="button"></button>
|
||||
</div>
|
||||
<p class="read-the-docs">
|
||||
Click on the Vite logo to learn more
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
|
||||
setupCounter(document.querySelector('#counter'))
|
||||
4626
package-lock.json
generated
Normal file
4626
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
package.json
Normal file
31
package.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "int-prog",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"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.29.0",
|
||||
"http-server": "14.1.1",
|
||||
"json-server": "0.17.4",
|
||||
"npm-run-all": "4.1.5",
|
||||
"vite": "4.4.9"
|
||||
},
|
||||
"main": "main.js",
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": ""
|
||||
}
|
||||
200
pagePage.html
Normal file
200
pagePage.html
Normal file
@ -0,0 +1,200 @@
|
||||
<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" type="text/css" href="Styles/Styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="Styles/pagePage.css">
|
||||
</head>
|
||||
|
||||
<body class="h-100 d-flex flex-column">
|
||||
<header class="header-wrap">
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<a href="#" class="col-lg-2 col-md-3 col-sm-4 desktop-logo"><img class="Logotip" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра"></a>
|
||||
<div class="col-lg-5 col-md-8 col-sm-8">
|
||||
<img class="smart-logo" src="Images\Logotip-tv.png" alt="Логотип онлайн кинотеатра">
|
||||
<h1 class="title-h1">
|
||||
<a href="#">
|
||||
Онлайн кинотеатр
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<button id="login-button" class="col-lg-4">
|
||||
<a href="index.html">Выйти из личного кабинета</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<nav class="container nav-box">
|
||||
<ul class=" row nav-list">
|
||||
<li class="col-lg-2 col-md nav-item"><a href="index.html">Главная</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Katalog.html">Каталог</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Shop.html">Магазин</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="Sport.html">Спорт</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="TV.html">ТВ-каналы</a></li>
|
||||
<li class="col-lg-2 col-md nav-item"><a href="pagePage.html"><u>Таблица</u></a></li>
|
||||
<li class="col-lg-4 col-md-0 nav-item"></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="smart-nav-list">
|
||||
<li class="smart-nav-item">
|
||||
<a href="index.html">
|
||||
Главная
|
||||
</a>
|
||||
<button class="case__btn-close">
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
<div class="stick">
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<div class="row">
|
||||
<li class="smart-nav-item">
|
||||
<a href="Katalog.html">
|
||||
Каталог
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Shop.html">
|
||||
Магазин
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="Sport.html">
|
||||
Спорт
|
||||
</a>
|
||||
</li>
|
||||
<li class="smart-nav-item">
|
||||
<a href="TV.html">
|
||||
ТВ-каналы
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<main class="container-fluid p-2">
|
||||
<div class="container">
|
||||
<div class="btn-group" role="group">
|
||||
<a class="btn btn-success" href="/Admin.html">Добавить элемент</a>
|
||||
</div>
|
||||
<div>
|
||||
<table id="items-table" class="table table-striped">
|
||||
<thead>
|
||||
<th scope="col">№</th>
|
||||
<th scope="col" class="w-25">Название</th>
|
||||
<th scope="col" class="w-25">Жанр</th>
|
||||
<th scope="col" class="w-25">Цена</th>
|
||||
<th scope="col" class="w-25">Скидка</th>
|
||||
<th scope="col" class="w-25">Итоговая Цена</th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer-wrap">
|
||||
<div class="container footer-top">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row sign">
|
||||
Наши соцсети
|
||||
</div>
|
||||
<ul class="row-network">
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/VK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/Viber.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/OK.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/TG.png" alt="" class=""></a>
|
||||
</li>
|
||||
<li class="item-network">
|
||||
<a href="#"><img src="Images/YouTube.png" alt="" class=""></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-12 row-addinfo">
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">О нас</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Блог</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Карьера</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Агенты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="add-info">
|
||||
<li class="item">
|
||||
<a href="#">Помощь</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Вопросы и ответы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Список устройств</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Дистрибьюторы</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row meta-text">
|
||||
<a href="#" class="col-lg-2 col-md-3 desktop-logo">
|
||||
<img src="Images/Logotip-tv.png" alt="" class="">
|
||||
</a>
|
||||
<span class="col-lg-10 col-md-12">
|
||||
© 2012-2023 ООО «Онлайн-кинотеатр» 18+<br>
|
||||
Общероссийские каналы доступны для бесплатного просмотра круглосуточно<br>
|
||||
ПО ООО «Онлайн-кинотеатр» состоит в реестре отечественного ПО
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { drawLinesTable } from "./js/lines";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
drawLinesTable();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
97
style.css
Normal file
97
style.css
Normal file
@ -0,0 +1,97 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
BIN
Отчет по третьей лабораторной.docx
Normal file
BIN
Отчет по третьей лабораторной.docx
Normal file
Binary file not shown.
BIN
ОтчетСайт.pdf
BIN
ОтчетСайт.pdf
Binary file not shown.
Loading…
Reference in New Issue
Block a user