From 52dbf4dbdf3ec6567942dae4f2e1c44d7b2b3297 Mon Sep 17 00:00:00 2001 From: cyf Date: Mon, 17 Aug 2026 12:39:04 +0100 Subject: [PATCH 01/14] Complete level 100 --- index.html | 38 ++++--- script.js | 45 +++++--- style.css | 306 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 359 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 9a400d1..4ddf74d 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,25 @@ - + - - - - TV Show Project | My Name (My GitHub username) - - - +  +    +    +    TV Show Project | Gideon Defar (gideondefar) +    +    +  - -
-
+  +   
- - +    - - - - +    +    + +    +    +  + \ No newline at end of file diff --git a/script.js b/script.js index 87a7de8..0b0511e 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,33 @@ -//You can edit ALL of the code here -function setup() { - const allEpisodes = getAllEpisodes(); - makePageForEpisodes(allEpisodes); -} - -function makePageForEpisodes(episodeList) { - const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; -} - -window.onload = setup; +const allEpisodes = getAllEpisodes(); + +const root = document.getElementById("root"); + +root.innerHTML = allEpisodes + .map((ep) => { + const seasonNumber = String(ep.season).padStart(2, "0"); // 01 + const episodeNumber = String(ep.number).padStart(2, "0"); + + return ` +
+

+ S${seasonNumber}E${episodeNumber} - ${ep.name} +

+ + ${ + ep.image?.medium + ? ` + ${ep.name} episode poster + ` + : "" + } + +
+ ${ep.summary || "

No summary available.

"} +
+
+ `; + }) + .join(""); \ No newline at end of file diff --git a/style.css b/style.css index 77cb8d4..c988861 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,307 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + scroll-behavior: smooth; +} + +body { + min-height: 100vh; + + font-family: Arial, Helvetica, sans-serif; + + overflow-x: hidden; + + background: radial-gradient( + circle at top, + #252525 0%, + #141414 40%, + #0b0b0b 100% + ); + + color: white; + + padding: 45px 55px; +} + +/* ========================= + EPISODE GRID +========================= */ + #root { - color: red; + width: 100%; + max-width: 1600px; + + margin: 0 auto; + + display: grid; + + grid-template-columns: repeat(auto-fill, minmax(240px, 280px)); + + gap: 30px 22px; + + justify-content: center; + align-items: start; +} + +/* ========================= + CARD +========================= */ + +.card { + width: 100%; + + position: relative; + + display: flex; + flex-direction: column; + + min-height: 390px; + + background: linear-gradient(180deg, #222222 0%, #181818 65%, #111111 100%); + + border-radius: 14px; + + overflow: hidden; + + border: 1px solid rgba(255, 255, 255, 0.06); + + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.45), + 0 2px 6px rgba(0, 0, 0, 0.35); + + cursor: pointer; + + transition: + transform 0.28s ease, + box-shadow 0.28s ease, + border-color 0.28s ease; +} + +/* Card hover */ +.card:hover { + transform: translateY(-10px) scale(1.035); + + border-color: rgba(229, 9, 20, 0.5); + + box-shadow: + 0 20px 45px rgba(0, 0, 0, 0.7), + 0 0 18px rgba(229, 9, 20, 0.12); + + z-index: 5; +} + +/* ========================= + IMAGE +========================= */ + +.card img { + width: 100%; + height: 170px; + + object-fit: cover; + + display: block; + + filter: brightness(0.9); + + transition: + transform 0.35s ease, + filter 0.35s ease; +} + +.card:hover img { + transform: scale(1.05); + + filter: brightness(1); +} + +/* ========================= + TITLE +========================= */ + +.title { + padding: 16px 17px 8px; + + font-size: 1rem; + font-weight: 700; + + line-height: 1.35; + + color: #ffffff; + + min-height: 65px; + + display: -webkit-box; + + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + + overflow: hidden; +} + +/* ========================= + SUMMARY +========================= */ + +.content { + padding: 8px 17px 20px; + + color: #a9a9a9; + + font-size: 0.84rem; + + line-height: 1.55; + + flex: 1; + + overflow: hidden; + + display: -webkit-box; + + -webkit-line-clamp: 6; + -webkit-box-orient: vertical; +} + +.content p { + margin: 0; +} + +/* ========================= + RED NETFLIX-LIKE ACCENT +========================= */ + +.card::after { + content: ""; + + position: absolute; + + bottom: 0; + left: 0; + + width: 0; + height: 3px; + + background: #e50914; + + transition: width 0.3s ease; +} + +.card:hover::after { + width: 100%; +} + +/* ========================= + FOOTER +========================= */ + +.footer { + text-align: center; + + margin-top: 50px; + + padding: 20px; + + color: #777; + + font-size: 0.85rem; +} + +.footer a { + color: #e50914; + + text-decoration: none; +} + +.footer a:hover { + text-decoration: underline; +} + +/* ========================= + TABLET +========================= */ + +@media (max-width: 1000px) { + body { + padding: 35px; + } + + #root { + grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); + + gap: 28px 20px; + + justify-content: center; + } +} + +/* ========================= + MOBILE +========================= */ + +@media (max-width: 600px) { + body { + padding: 20px; + } + + #root { + grid-template-columns: minmax(0, 320px); + + justify-content: center; + + gap: 25px; + padding: 10px; + } + + .card { + width: 100%; + + min-height: auto; + } + + .card img { + height: 200px; + } + + .title { + font-size: 1rem; + + min-height: auto; + + padding: 15px 16px 8px; + } + + .content { + padding: 8px 16px 20px; + + font-size: 0.86rem; + } + + .card:hover { + transform: translateY(-5px) scale(1.01); + } + + .footer { + margin-top: 35px; + + padding: 15px; + } } + +/* ========================= + VERY SMALL PHONES +========================= */ + +@media (max-width: 360px) { + body { + padding: 14px; + } + + #root { + grid-template-columns: 1fr; + } + + .card img { + height: 185px; + } +} \ No newline at end of file From 174124fe58f0059421774f187d1463cbaaf87ed0 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Tue, 18 Aug 2026 10:08:04 +0100 Subject: [PATCH 02/14] add search box --- index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/index.html b/index.html index 4ddf74d..034194f 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,14 @@     + +    
+