Compare commits

..

No commits in common. "main" and "Laba2" have entirely different histories.
main ... Laba2

68 changed files with 3950 additions and 397 deletions

414
.gitignore vendored
View File

@ -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?

260
Admin.html Normal file
View File

@ -0,0 +1,260 @@
<!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-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">
<form>
<section class="row">
<div class="col-lg-6">
<h3 class="title-h3">Выбор страницы сайта</h3>
<article class="form-section">
<div class="form-radio-btn">
<input id="change-page-1" type="radio" name="change-page" value="1">
<label for="change-page-1">Главная</label>
</div>
<div class="form-radio-btn">
<input id="change-page-2" type="radio" name="change-page" value="2">
<label for="change-page-2">Каталог</label>
</div>
<div class="form-radio-btn">
<input id="change-page-3" type="radio" name="change-page" value="3">
<label for="change-page-3">Магазин</label>
</div>
<div class="form-radio-btn">
<input id="change-page-4" type="radio" name="change-page" value="4">
<label for="change-page-4">Спорт</label>
</div>
<div class="form-radio-btn">
<input id="change-page-5" type="radio" name="change-page" value="5">
<label for="change-page-5">ТВ-каналы</label>
</div>
<div class="form-radio-btn">
<input id="change-page-6" type="radio" name="change-page" value="6">
<label for="change-page-6">Личный кабинет</label>
</div>
</article>
</div>
<div class="col-lg-6">
<h3 class="title-h3">Выбор элемента для добавления</h3>
<article class="form-section">
<div class="form-radio-btn">
<input id="change-section-1" type="radio" name="change-section" value="1">
<label for="change-section-1">Раздел с кинокартинами</label>
</div>
<div class="form-radio-btn">
<input id="change-section-2" type="radio" name="change-section" value="2">
<label for="change-section-2">Рекламный блок</label>
</div>
<div class="form-radio-btn">
<input id="change-section-3" type="radio" name="change-section" value="3">
<label for="change-section-3">Раздел категорий</label>
</div>
<div class="form-radio-btn">
<input id="change-section-4" type="radio" name="change-section" value="4">
<label for="change-section-4">Добавить прямую трансляцию</label>
</div>
<div class="form-radio-btn">
<input id="change-section-5" type="radio" name="change-section" value="5">
<label for="change-section-5">Раздел доп-навигации</label>
</div>
<div class="form-radio-btn">
<input id="change-section-6" type="radio" name="change-section" value="6">
<label for="change-section-6">ТВ-канал</label>
</div>
</article>
</div>
</section>
<section class="row">
<div class="col-lg-6">
<h3 class="title-h3">Заголовок элемента</h3>
<article class="form-section">
<label class="text-field-label" for="title-element">Заголовок</label>
<input class="text-field-input" type="text" required name="title-element" placeholder="Заголовок">
</article>
<h3 class="title-h3">Загрузить файл</h3>
<article class="form-section">
<label class="text-field-label" for="file-element">Загрузить файл</label>
<input class="text-field-input" type="file" name="file-element">
</article>
</div>
<div class="col-lg-6">
<h3 class="title-h3">Описание элемента</h3>
<article class="form-section">
<label class="text-field-label" for="description-element">Описание элемента</label>
<textarea class="text-field-textarea" type="text" name="description-element" placeholder="Описание"></textarea>
</article>
</div>
</section>
<section class="row">
<label class="submit-button-label">Кнопка отправки</label>
<input class="submit-button" type="submit" name="submit-button" value="Добавить элемент">
</section>
</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>
</body>
</html>

253
Cabinet.html Normal file
View 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="Admin.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

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

BIN
Images/Carnifecks.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

BIN
Images/Cartoons-image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
Images/Comedy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
Images/Criminal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
Images/Film-image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
Images/Film1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

BIN
Images/Film2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

BIN
Images/Film3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 962 B

BIN
Images/First.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
Images/First24.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 962 B

BIN
Images/Gampy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

BIN
Images/Juls.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

BIN
Images/Laegue.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

BIN
Images/League.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

BIN
Images/Logotip-tv.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
Images/Love12.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 201 KiB

BIN
Images/Match-mini.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
Images/Miss.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

BIN
Images/NBA.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

BIN
Images/NTV-mini.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
Images/NTV.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
Images/Nature.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
Images/OK.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
Images/Series-image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
Images/Series1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

BIN
Images/Series2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
Images/Series3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

BIN
Images/TG.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
Images/TV.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 KiB

BIN
Images/VK.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
Images/Valencia.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
Images/Viber.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Images/YouTube.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
Images/khl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

BIN
Images/match.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
Images/parents.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

BIN
Images/user-none.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

17
JavaScript/script.js Normal file
View File

@ -0,0 +1,17 @@
$(document).ready(function(){
function HideCaseBody(){
$(this).parent().next().animate({
'min-height': 'toggle',
'height': 'toggle'
}, 500);
$(this).toggleClass('case__btn-close_open');
};
$('body').on('click',
'.case__btn-close',
HideCaseBody);
});

342
Katalog.html Normal file
View 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="#" 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>

View File

@ -1,2 +0,0 @@
# PI-23_Firsov_Kirill_OnlineCinema

261
Shop.html Normal file
View File

@ -0,0 +1,261 @@
<!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 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>
</body>
</html>

240
Sport.html Normal file
View 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>

130
Styles/Admin.css Normal file
View File

@ -0,0 +1,130 @@
.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
View 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
View 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
View 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;
}
}

81
Styles/Shop.css Normal file
View File

@ -0,0 +1,81 @@
.title-h2{
margin: 20px;
font-size: 40px;
font-weight: bold;
}
.recomendation .product{
margin: 20px 0;
position: relative;
}
.recomendation .image-container{
display: block;
border-radius: 27px;
overflow: hidden;
}
.image-container img{
width: 100%;
height: 100%;
}
.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) {
}

150
Styles/Sport.css Normal file
View File

@ -0,0 +1,150 @@
.event{
margin: 30px 0;
position: relative;
}
.event .image-container{
display: block;
border-radius: 50px;
overflow: hidden;
}
.image-container img{
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
View 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
View 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) {
}

279
TV.html Normal file
View 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
View 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)
}

243
index.html Normal file
View File

@ -0,0 +1,243 @@
<!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
View 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

24
main.js Normal file
View 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'))

550
package-lock.json generated Normal file
View File

@ -0,0 +1,550 @@
{
"name": "onlain_cinema",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "onlain_cinema",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.3.2",
"vite": "^4.5.0"
}
},
"node_modules/@esbuild/android-arm": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
"integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/android-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
"integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/android-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
"integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/darwin-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
"integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/darwin-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
"integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/freebsd-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
"integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/freebsd-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
"integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-arm": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
"integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
"integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-ia32": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
"integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-loong64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
"integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
"cpu": [
"loong64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-mips64el": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
"integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
"cpu": [
"mips64el"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-ppc64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
"integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
"cpu": [
"ppc64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-riscv64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
"integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
"cpu": [
"riscv64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-s390x": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
"integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
"cpu": [
"s390x"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
"integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/netbsd-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
"integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"netbsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/openbsd-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
"integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"openbsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/sunos-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
"integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"sunos"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/win32-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
"integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/win32-ia32": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
"integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/win32-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
"integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/bootstrap": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/esbuild": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
"integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
"hasInstallScript": true,
"bin": {
"esbuild": "bin/esbuild"
},
"engines": {
"node": ">=12"
},
"optionalDependencies": {
"@esbuild/android-arm": "0.18.20",
"@esbuild/android-arm64": "0.18.20",
"@esbuild/android-x64": "0.18.20",
"@esbuild/darwin-arm64": "0.18.20",
"@esbuild/darwin-x64": "0.18.20",
"@esbuild/freebsd-arm64": "0.18.20",
"@esbuild/freebsd-x64": "0.18.20",
"@esbuild/linux-arm": "0.18.20",
"@esbuild/linux-arm64": "0.18.20",
"@esbuild/linux-ia32": "0.18.20",
"@esbuild/linux-loong64": "0.18.20",
"@esbuild/linux-mips64el": "0.18.20",
"@esbuild/linux-ppc64": "0.18.20",
"@esbuild/linux-riscv64": "0.18.20",
"@esbuild/linux-s390x": "0.18.20",
"@esbuild/linux-x64": "0.18.20",
"@esbuild/netbsd-x64": "0.18.20",
"@esbuild/openbsd-x64": "0.18.20",
"@esbuild/sunos-x64": "0.18.20",
"@esbuild/win32-arm64": "0.18.20",
"@esbuild/win32-ia32": "0.18.20",
"@esbuild/win32-x64": "0.18.20"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"hasInstallScript": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"bin": {
"nanoid": "bin/nanoid.cjs"
},
"engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/rollup": {
"version": "3.29.4",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
"integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
"bin": {
"rollup": "dist/bin/rollup"
},
"engines": {
"node": ">=14.18.0",
"npm": ">=8.0.0"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/vite": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
"integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
"dependencies": {
"esbuild": "^0.18.10",
"postcss": "^8.4.27",
"rollup": "^3.27.1"
},
"bin": {
"vite": "bin/vite.js"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"funding": {
"url": "https://github.com/vitejs/vite?sponsor=1"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
},
"peerDependencies": {
"@types/node": ">= 14",
"less": "*",
"lightningcss": "^1.21.0",
"sass": "*",
"stylus": "*",
"sugarss": "*",
"terser": "^5.4.0"
},
"peerDependenciesMeta": {
"@types/node": {
"optional": true
},
"less": {
"optional": true
},
"lightningcss": {
"optional": true
},
"sass": {
"optional": true
},
"stylus": {
"optional": true
},
"sugarss": {
"optional": true
},
"terser": {
"optional": true
}
}
}
}
}

20
package.json Normal file
View File

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

1
public/vite.svg Normal file
View 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
View 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.