Yann/Projet6
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

see more/see less in js function; not working yet

Browse Source
This commit is contained in:
yann
2025-03-09 17:27:17 +01:00
parent f3fd9dc2e8
commit 0ff6a70ba4
2 changed files with 501 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
index.html
View File

@@ -2,163 +2,95 @@
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JustStreamIt</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.square {
width: 100%;
padding-top: 100%;
background-color: lightgray;
margin-bottom: 1rem;
}
.overlay {
position: absolute;
top: 10rem;
height: 8rem;
width: 90%;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: space-between;
padding-y: 1rem;
margin: 0.1rem;
}
</style>
</head>
<body>
<center>
<header>
<img alt="logo" title="logo" src=None>
<h1 textalign=center> Vidéos à la demande </h1>
</header>
<div class=best_film>
<h2> Meilleur film </h2>
<div class=category>
<h2> film </h2>
<img src=https://picsum.photos/seed/picsum/200/300 alt="film cover" >
<p> Lorem ipsum odor amet, consectetuer adipiscing elit. Tempus non pellentesque bibendum eu sapien litora neque tortor. Volutpat diam himenaeos risus vitae congue hendrerit elit. Porttitor semper leo pretium mattis bibendum consequat. Tincidunt tincidunt cursus eget aenean senectus pretium consectetur cubilia senectus. Rutrum ex fermentum consectetur parturient ornare. Quam amet maximus potenti ac in penatibus hendrerit lacus. Duis neque non at dictum ligula nullam amet orci. Consequat lectus consequat morbi dis suscipit ridiculus ultricies.
</p>
<button>Details</button>
</div>
</div>
<div class=categorie_mystery >
<h2> Mystery </h2>
<div class=category>
<ul>
<div>Film 1
</div>
<div>
Film 2
</div>
<div>
Film 3
</div>
<div>
Film 4
</div>
<div>
Film 5
</div>
<div>
Film 6
</div>
</ul>
<header>
<div class="container text-bg-secondary shadow rounded-4 p-3 mt-4">
<div class="row">
<div class="col-md-2">
<img alt="logo" title="logo" src="logo.png" class="img-fluid">
</div>
<div class="col align-self-center d-none d-sm-block ms-5">
<h1 color="white" text-align="center"> Vidéos à la demande </h1>
</div>
</div>
</div>
</div>
</header>
<!-- best film -->
<section>
<div class="container mt-5">
<h2> Meilleur film </h2></div>
<div class="container border border-black border-5 mt-1">
<div class="row" id="bestFilm" >
<!-- square block model-->
</div>
</div>
</section>
<!-- best note -->
<section class="py-5">
<div class="container">
<h2>Films les mieux notés</h2>
<div class="row" id="bestRated">
<!-- square block model-->
</div>
</div>
</section>
<div class=category>
<h2> Category2 </h2>
<p>
<ul>
<div>Film 1
</div>
<div>
Film 2
</div>
<div>
Film 3
</div>
<div>
Film 4
</div>
<div>
Film 5
</div>
<div>
Film 6
</div>
</ul>
</p>
</div>
<div class=category>
<h2> Category2 </h2>
<p>
<ul>
<div>Film 1
</div>
<div>
Film 2
</div>
<div>
Film 3
</div>
<div>
Film 4
</div>
<div>
Film 5
</div>
<div>
Film 6
</div>
</ul>
</p>
</div>
<div class=categorie_other>
<h2> Other </h2>
<div class=category>
<ul>
<div>Film 1
</div>
<div>
Film 2
</div>
<div>
Film 3
</div>
<div>
Film 4
</div>
<div>
Film 5
</div>
<div>
Film 6
</div>
</ul>
<section class="py-5">
<div class="container">
<h2>Mystery</h2>
<div class="row" id="mystery">
<!-- square block model-->
</div>
</div>
<div class=category>
<h2> Category </h2>
</section>
<label for="category-select">Category</label>
<section class="py-5">
<div class="container">
<div id="menu">
<label for="category-select" class="fs-2">Autres : </label>
<select name="category" id="category-select">
<option selected id="selected">Category</option>
<!-- getCategory() to fill the options -->
</select>
</div>
<div class="row" id="other">
<!-- square block model-->
</div>
</div>
</section>
<select name="category" id="category-select">
<option value="Action">Action</option>
<option value="Adult">Adult</option>
<option value="Adventure">Adventure</option>
<option value="Animation">Animation</option>
<option value="Biography">Biography</option>
<option value="Comedy">Comedy</option>
<option value="Crime">Crime</option>
<option value="Documentary">Documentary</option>
<option value="Drama">Drama</option>
<option value="Family">Family</option>
<option value="Fantasy">Fantasy</option>
<option value="Film-Noir">Film-Noir</option>
<option value="History">History</option>
<option value="Horror">Horror</option>
<option value="Music">Music</option>
<option value="Musical">Musical</option>
<option value="Mystery">Mystery</option>
<option value="News">News</option>
<option value="Reality-TV">Reality-TV</option>
<option value="Romance">Romance</option>
<option value="Sci-Fi">Sci-Fi</option>
<option value="Sport">Sport</option>
<option value="Thriller">Thriller</option>
<option value="War">War</option>
<option value="Western">Western</option>
</select>
</center>
<script src="script.js" defer></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>