Add files via upload

gamefelix · Sep 18, 2024 · 72cea13 · 72cea13
1 parent f5d7ada
commit 72cea13
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 58 deletions.
diff --git a/films/avengers_engame/background.png b/films/avengers_engame/background.png
diff --git a/films/avengers_engame/film.html b/films/avengers_engame/film.html
@@ -1,58 +1,58 @@
-<!DOCTYPE html>
-<html lang="cs">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FilmCloud</title>
-    <!-- Přidání fontu Hanalei Fill -->
-    <link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="styles.css"> <!-- Odkaz na externí CSS soubor -->
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon">
-</head>
-<body>
-    <!-- Průhledné pozadí -->
-    <div id="overlay"></div>
-
-    <!-- Kontejner pro filmový plakát -->
-    <div id="posterContainer">
-        <img id="filmPoster" src="poster.png" alt="Film Poster">
-        <button id="customButton">
-            <img id="buttonLogo" src="../../images/play.png" alt="Logo">
-            <div id="prehrat">Přehrát</div>
-        </button>
-    </div>
-
-    <!-- Kontejner pro nadpis filmu -->
-    <div id="filmTitleContainer">
-        <div id="filmTitle">Avengers Endgame</div>
-    </div>
-
-    <!-- Kontejner pro informace o filmu -->
-    <div id="filmInfoContainer">
-        <div id="filmInfo">
-            <p>Hrozivé události způsobené Thanosem, který vyhladil</p>
-            <p>polovinu života ve vesmíru a silně oslabil Avengers,</p>
-            <p>vedou zbylé superhrdiny k tomu, aby ve strhujícím</p>
-            <p>finále 22 filmů studia Marvel zvaném Avengers: Endgame</p>
-            <p>sebrali poslední síly a pokusili se vrátit úder.</p>
-        </div>
-    </div>
-
-    <!-- Tlačítko Zpět -->
-    <a id="backButton" href="../../index.html">Zpět</a>
-
-    <!-- Vložený trailer z YouTube -->
-    <div id="trailerContainer">
-    <iframe id="trailer"  
-        src="https://www.youtube.com/embed/02YEOiHZH1I"
-        title="Avengers: Endgame (2019) CZ dabing HD trailer" 
-        frameborder="0" 
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-        referrerpolicy="strict-origin-when-cross-origin" 
-        allowfullscreen>
-    </iframe>
-    </div>
-    <!-- Odkaz na externí JavaScript soubor -->
-    <script src="script.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="cs">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FilmCloud</title>
+    <!-- Přidání fontu Hanalei Fill -->
+    <link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css"> <!-- Odkaz na externí CSS soubor -->
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon">
+</head>
+<body>
+    <!-- Průhledné pozadí -->
+    <div id="overlay"></div>
+
+    <!-- Kontejner pro filmový plakát -->
+    <div id="posterContainer">
+        <img id="filmPoster" src="poster.png" alt="Film Poster">
+        <button id="customButton">
+            <img id="buttonLogo" src="../../images/play.png" alt="Logo">
+            <div id="prehrat">Přehrát</div>
+        </button>
+    </div>
+
+    <!-- Kontejner pro nadpis filmu -->
+    <div id="filmTitleContainer">
+        <div id="filmTitle">Avengers Endgame</div>
+    </div>
+
+    <!-- Kontejner pro informace o filmu -->
+    <div id="filmInfoContainer">
+        <div id="filmInfo">
+            <p>Hrozivé události způsobené Thanosem, který vyhladil</p>
+            <p>polovinu života ve vesmíru a silně oslabil Avengers,</p>
+            <p>vedou zbylé superhrdiny k tomu, aby ve strhujícím</p>
+            <p>finále 22 filmů studia Marvel zvaném Avengers: Endgame</p>
+            <p>sebrali poslední síly a pokusili se vrátit úder.</p>
+        </div>
+    </div>
+
+    <!-- Tlačítko Zpět -->
+    <a id="backButton" href="../../index.html">Zpět</a>
+
+    <!-- Vložený trailer z YouTube -->
+    <div id="trailerContainer">
+    <iframe id="trailer"  
+        src="https://www.youtube.com/embed/02YEOiHZH1I"
+        title="Avengers: Endgame (2019) CZ dabing HD trailer" 
+        frameborder="0" 
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+        referrerpolicy="strict-origin-when-cross-origin" 
+        allowfullscreen>
+    </iframe>
+    </div>
+    <!-- Odkaz na externí JavaScript soubor -->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/films/avengers_engame/poster.png b/films/avengers_engame/poster.png
diff --git a/films/avengers_engame/script.js b/films/avengers_engame/script.js
@@ -0,0 +1,4 @@
+// Funkce, která spustí akci po kliknutí na tlačítko "Přehrát"
+document.getElementById("customButton").addEventListener("click", function() {
+    window.open("https://ovh-s1-storage1.premiumcdn.net/60643877/dndU6MI4puyNurGtxAfkxIaKhZXsdVF79t5yFOAf0DcyxsAyuG6UpJtAlc7pCV6hvxhmJi8qUz0TzriKOiQOhz7TRpu1oHp7Fyki7ksd1FgkH4gfRYsyr.mp4?token=A1206ZyNVCax&expires=1726771621&sparams=token%2Cpath%2Cexpires&signature=9ca115905b87bb3af6d810a7eaee9ceb1edfdcfc", "_blank");
+});
diff --git a/films/avengers_engame/styles.css b/films/avengers_engame/styles.css
@@ -0,0 +1,163 @@
+/* Celkové nastavení pozadí stránky */
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-image: url('background.png'); /* Cesta k pozadí */
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    height: 100vh;
+    position: relative;
+    overflow: hidden; /* Zabrání scrollování */
+}
+
+html {
+    overflow: hidden; /* Zabrání scrollování */
+}
+
+/* Styl tlačítka */
+#customButton {
+    top: 4.4204322200392925vh;
+    width: 13.427734375vw;
+    height: 6.385068762278978vh;
+    background-color: #CCCCCC;
+    border-radius: 100px; /* Zaoblené rohy */
+    border: none;
+    position: relative;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+
+/* Logo na tlačítku */
+#buttonLogo {
+    position: absolute;
+    top: 0.390625vw; /* Souřadnice Y loga v rámci tlačítka */
+    left: 0.390625vw; /* Souřadnice X loga v rámci tlačítka */
+    width: 2.392578125vw;
+    max-width: 49px;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    z-index: 3;
+}
+
+#prehrat {
+    padding-left: 20px;
+    font-size: 2.9469548133595285vh;
+    font-family: 'Hanalei Fill';
+}
+
+#customButton:hover {
+    transform: scale(1.1); /* Zvětší tlačítko o 10% */
+}
+
+/* Informace o filmu */
+#filmInfo {
+    font-size: 3.9292730844793713vh;
+    line-height: 0.4;
+}
+
+/* Kontejner pro informace o filmu */
+#filmInfoContainer {
+    position: absolute;
+    top: 24.557956777996072vh; /* Umístění informací o filmu 120px od vrchu */
+    left: 4.8828125vw; /* Pozice informací na levé straně */
+    z-index: 2; /* Zajištění, že informace budou nad overlayem */
+    color: #CCCCCC; /* Barva textu */
+    font-family: 'Hanalei Fill', cursive; /* Font pro text */
+    text-align: left;
+}
+
+/* Nadpis filmu */
+#filmTitle {
+    font-size: 6.8762278978389vh;
+}
+
+/* Kontejner pro nadpis filmu */
+#filmTitleContainer {
+    position: absolute;
+    top: 16.208251473477407vh; /* Umístění nadpisu 20px od vrchu */
+    left: 4.8828125vw; /* Pozice nadpisu na levé straně */
+    z-index: 2; /* Zajištění, že nadpis bude nad overlayem */
+    color: #CCCCCC; /* Barva textu */
+    font-family: 'Hanalei Fill', cursive; /* Font pro text */
+    text-align: left;
+}
+
+/* Filmový plakát */
+#filmPoster {
+    width: 49.115913555992144vh; /* Plakát zabere 100 % šířky kontejneru */
+    height: auto; /* Zachování poměru stran */
+    border-radius: 2vw; /* Zaoblené rohy */
+    max-width: 500px; /* Maximální šířka plakátu 500px */
+    aspect-ratio: 2 / 3;
+}
+
+/* Kontejner pro filmový plakát */
+#posterContainer {
+    position: absolute;
+    top: 50%;
+    width: 49.115913555992144vh;
+    left: 64.453125vw; /* Umístění na x = 1320px */
+    transform: translateY(-50%); /* Vertikální vycentrování plakátu */
+    z-index: 2; /* Zajištění, že obsah bude nad overlayem */
+    text-align: center;
+}
+
+/* Průhledný obdélník za obsahem */
+#overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.8); /* Černá s 80% průhledností */
+    z-index: 1; /* Zajistí, že bude za obsahem */
+    overflow: hidden; /* Zabrání scrollování */
+}
+
+/* Kontejner pro trailer */
+#trailerContainer {
+    position: absolute; /* Pozice nad ostatními prvky */
+    width: 640px; /* Šířka traileru */
+    height: 360px; /* Výška traileru */
+    overflow: hidden; /* Zabrání přeplnění obsahu */
+    left: 290px; /* Umístění traileru na x = 290px */
+    top: 600px; /* Umístění traileru na y = 600px */
+    z-index: 2; /* Udržení traileru nad ostatními prvky */
+    border-radius: 2vw;
+}
+
+/* Iframe traileru */
+#trailerContainer iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%; /* Přizpůsobí šířku kontejneru */
+    height: 100%; /* Přizpůsobí výšku kontejneru */
+    border: none;
+}
+
+/* Styl tlačítka Zpět */
+#backButton {
+    position: absolute;
+    top: 1.851851851851852vh; /* Umístění tlačítka 20px od vrchu */
+    right: 1.041666666666667vw; /* Umístění tlačítka 20px od levého okraje */
+    background-color: rgb(204, 204, 204, 0.8);
+    color: #000000;
+    padding: 0.520833333333333vw 1.041666666666667vw;
+    border: none;
+    border-radius: 0.260416666666667vw; /* Zaoblené rohy */
+    text-decoration: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    z-index: 3; /* Zajištění, že tlačítko bude nad ostatními prvky */
+    font-family: 'Hanalei Fill', cursive; /* Font pro text */
+    text-align: left;
+    transition: transform 0.3s ease;
+}
+
+#backButton:hover {
+    transform: scale(1.1); /* Zvětší tlačítko o 10% */
+    background-color: rgb(170, 170, 170,0.8); /* Mírné ztmavnutí barvy při najetí myší */
+}