Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	My Movie List
ID	5316883362463744
Created	8 days ago, 1744338413943
Updated	4 days ago, 1744681753259
Code	<!DOCTYPE html> <!--- WELCOME!! This is my movie list, which ranks my favorite movies/series plus my unwatched watchlist. Enjoy! You can also suggest movies/series and I might add them here! Please consider subbing: https://www.khanacademy.org/computer-programming/subpage-version-3/6245375547457536 CREDITS: -- HUGE HUGE Shoutout to w3schools for making me learn new stuff! -- to my friend, who isn't found in KA -- Some help from Chatgpt, like drak mode/light mode transition and some CSS animation questions And yes, I love war movies UPDATES: -- 24 hours later: WHAT DA.... 36 votes already?? -- 36 Hours later: 2nd (or 3rd) in the HOTLIST?!? (correct me if I'm wrong) -- 48 Hours later: 46 votes?!?! This just became my most upvoted program ever ---> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>My Movie List</title> <style> :root { --bg-light: #f8f9fa; --text-light: #222; --card-light: #fff; --divider-light: #ccc; --review-light: #f1f1f1; --star-light: #ccc; --button-bg-light: #ccc; --button-active-light: #4caf50; --bg-dark: #121212; --text-dark: #f1f1f1; --card-dark: #1e1e1e; --divider-dark: #444; --review-dark: #2c2c2c; --star-dark: #555; --button-bg-dark: #333; --button-active-dark: #81c784; } [data-theme="dark"] { --bg-color: var(--bg-dark); --text-color: var(--text-dark); --card-color: var(--card-dark); --divider-color: var(--divider-dark); --review-bg: var(--review-dark); --star-color: var(--star-dark); --button-bg: var(--button-bg-dark); --button-active: var(--button-active-dark); } [data-theme="light"] { --bg-color: var(--bg-light); --text-color: var(--text-light); --card-color: var(--card-light); --divider-color: var(--divider-light); --review-bg: var(--review-light); --star-color: var(--star-light); --button-bg: var(--button-bg-light); --button-active: var(--button-active-light); } body { font-family: Arial, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 2rem; transition: background 0.3s, color 0.3s; } h1 { text-align: center; animation: fadeInDown 0.7s ease-out; } .top-bar { display: flex; justify-content: center; margin-bottom: 1rem; gap: 1rem; } .filter-buttons button, .theme-toggle { padding: 0.5rem 1rem; font-size: 1rem; border: none; border-radius: 6px; background: var(--button-bg); color: var(--text-color); cursor: pointer; transition: background 0.3s; } .filter-buttons button.active { background: var(--button-active); color: white; } .divider { height: 3px; background: var(--divider-color); max-width: 800px; margin: 2rem auto; border-radius: 2px; animation: expandDivider 1s ease-out; } .section { background: var(--card-color); border-radius: 10px; padding: 1rem; margin: 1rem auto; max-width: 800px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); animation: fadeIn 0.6s ease-out; } .movie { display: flex; margin: 1rem 0; gap: 1rem; border-bottom: 1px solid var(--divider-color); padding-bottom: 1rem; animation: slideIn 0.4s ease-out; } .movie img { width: 120px; height: 180px; object-fit: cover; border-radius: 8px; } .movie-info { flex: 1; } .movie-title { font-size: 1.2rem; font-weight: bold; } .type-badge { background: #555; color: #fff; padding: 2px 6px; border-radius: 12px; font-size: 0.7rem; margin-left: 0.5rem; text-transform: uppercase; } .movie-description, .movie-review { margin: 0.5rem 0; } .movie-review { background: var(--review-bg); padding: 0.5rem; border-radius: 5px; } .stars { display: flex; font-size: 1.3rem; color: var(--star-color); gap: 4px; cursor: pointer; } .star.filled, .star:hover, .star.hovered { color: #ffc107; } .toggle-button { margin-top: 0.5rem; padding: 0.4rem 0.7rem; background: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer; animation: bounce 0.6s ease; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideIn { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } @keyframes expandDivider { 0% { width: 0; opacity: 0; } 100% { width: 100%; opacity: 1; } } </style> </head> <body> <h1>🎬 My Movie List</h1> <!--- The Navbar---> <div class="top-bar"> <div class="filter-buttons"> <button class="filter-btn active" data-filter="all">All</button> <button class="filter-btn" data-filter="watched">Watched</button> <button class="filter-btn" data-filter="unwatched">Unwatched</button> </div> <button class="theme-toggle">🌙 Dark Mode</button> </div> <!--- WATCHED SECTION ---> <div class="section watched" data-type="watched"> <!--- Saving Private Ryan ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/a/ac/Saving_Private_Ryan_poster.jpg" alt="Saving Private Ryan Poster" /> <div class="movie-info"> <div class="movie-title"> Saving Private Ryan <span class="type-badge">Movie</span> </div> <div class="movie-description"><strong>Official:</strong> In the last great Invasion, of the Last Great War, the greatest danger of eight men, was saving one.</div> <div class="movie-review"><strong>Your Review:</strong> Incredible! The sounds, cinematograpy, the realism and the acting was insane! Totally a must watch.</div> <div class="stars" data-rating="5"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Unwatched</button> </div> </div> <!--- Avengers: Endgame ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg" alt="Endgame Poster" /> <div class="movie-info"> <div class="movie-title"> Avengers: Endgame <span class="type-badge">Movie</span> </div> <div class="movie-description"><strong>Official:</strong> The grave course of events set in motion by Thanos that wiped out half the universe and fractured the Avengers ranks compels the remaining Avengers to take one final stand in Marvel Studios' grand conclusion to twenty-two films, "Avengers: Endgame."</div> <div class="movie-review"><strong>Your Review:</strong> I don't watch much Marvel but this was breathtaking! Action-packed and a nice end to the Infinity Saga!</div> <div class="stars" data-rating="5"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Unwatched</button> </div> </div> <!--- Sonic the Hedgehog ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/4/45/Sonic_the_Hedgehog_film_poster.jpg" alt="Sonic 1 poster" /> <div class="movie-info"> <div class="movie-title"> Sonic the Hedgehog <span class="type-badge">Movie</span> </div> <div class="movie-description"><strong>Official:</strong> Sonic, a blue anthropomorphic hedgehog who can run at supersonic speeds and teams up with small town sheriff Tom Wachowski to stop the mad scientist Dr. Robotnik from taking over the world.</div> <div class="movie-review"><strong>Your Review:</strong> I loved the character development and it was also hillarious! And who made the effects? That was cool!</div> <div class="stars" data-rating="5"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Unwatched</button> </div> </div> <!--- Pearl Harbor ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/3/3c/Pearl_harbor_movie_poster.jpg" alt="Pearl Harbor Poster" /> <div class="movie-info"> <div class="movie-title"> Pearl Harbour <span class="type-badge">Movies</span> </div> <div class="movie-description"><strong>Official:</strong> The story follows two lifelong friends and a beautiful nurse who are caught up in the horror of an infamous Sunday morning in 1941. A tale of war and romance mixed in with history.</div> <div class="movie-review"><strong>Your Review:</strong> The story line was good. The effects and sounds were legendary! The only reason why it is 4 stars because it was inaccurate in some aspects.</div> <div class="stars" data-rating="4"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Unwatched</button> </div> </div> <!--- Jack Hunter and the Lost Treasure of Ugarit ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/3/3f/Jack_Hunter_and_the_Lost_Treasure_of_Ugarit_Poster.jpg" alt="Jack Huter 1 poster" /> <div class="movie-info"> <div class="movie-title"> Jack Hunter and the Lost Treasure of Ugarit <span class="type-badge">Movies</span> </div> <div class="movie-description"><strong>Official:</strong> "Jack Hunter" is a three part movie series that consists of three parts: Jack Hunter and the Lost Treasure of Ugarit, Jack Hunter and the Quest for Akhenaten's Tomb and Jack Hunter and the Star of Heaven. Jack, with three friends, must serach for the treasure of the once unsurpassed Mesopatamian civilatzation before their arch-nemesis, Litmann, a gang, and the Russians get to it first.</div> <div class="movie-review"><strong>Your Review:</strong> Loved the character development. This was like <em>Indianna Jone's</em> less popular cousin. The only thing it could have made better was its poster!</div> <div class="stars" data-rating="4"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Unwatched</button> </div> </div> </div> <div class="divider"></div> <!--- UNWATCHED SECTION ---> <div class="section unwatched" data-type="unwatched"> <!--- Band of Brothers---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/f/f0/BandofBrothersIntertitle.jpg" alt="Movie 2" /> <div class="movie-info"> <div class="movie-title"> Band of Brothers <span class="type-badge">Series</span> </div> <div class="movie-description"><strong>Official:</strong> The story of Easy Company of the U.S. Army 101st Airborne Division and their mission in World War II Europe, from Operation Overlord to V-J Day.</div> <div class="movie-review"><strong>Your Review:</strong> Haven't watched it yet, but I watched clips and listened to the music. it just might be my favorite series ever.</div> <div class="stars" data-rating="0"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Watched</button> </div> </div> <!--- Masters of the Air ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/c/c1/Masters_of_the_Air_%282024%29_Title_card.png" alt="Movie 2" /> <div class="movie-info"> <div class="movie-title"> Masters of the Air <span class="type-badge">Series</span> </div> <div class="movie-description"><strong>Official:</strong> "Masters of the Air" is a docuseries about the Mighty Eighth Air Force during World War II, specifically the 100th Bomb Group, a unit within the US Army Air Forces. It chronicles the airmen's experiences in the air war against Nazi Germany, focusing on their courage, losses, and triumphs as they navigate the dangers of the war.</div> <div class="movie-review"><strong>Your Review:</strong> Haven't watched it yet, but I watched clips and listened to the music. The effects and cinematography was cool too. I heard it was pretty accurate too.</div> <div class="stars" data-rating="0"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Watched</button> </div> </div> <!--- The Pacific ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/1/19/ThePacificIntertitle.jpg" alt="The Pacific Poster" /> <div class="movie-info"> <div class="movie-title"> The Pacific <span class="type-badge">Series</span> </div> <div class="movie-description"><strong>Official:</strong> "The Pacific" is a 10-part HBO miniseries that chronicles the true stories of three U.S. Marines (Robert Leckie, Eugene Sledge, and John Basilone) fighting in the Pacific Theater during World War II. It follows their experiences, including their battles at Guadalcanal, Peleliu, and Okinawa, and Basilone's involvement in the Battle of Iwo Jima. The series also explores the lives of soldiers who returned home to support the war effort and the psychological impact of combat. </div> <div class="movie-review"><strong>Your Review:</strong> Haven't watched it yet, but I watched clips and listened to the music. The Music was AMAZING! Can't wait to watch this!</div> <div class="stars" data-rating="0"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Watched</button> </div> </div> <!--- All Quiet in the Western Front ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/c/c3/All_quiet_on_the_western_front_%282022_film%29.jpg" alt="All Quiet Poster" /> <div class="movie-info"> <div class="movie-title"> All Quiet in the Western Front <span class="type-badge">Movie</span> </div> <div class="movie-description"><strong>Official:</strong> "All Quiet on the Western Front" (2022) is a German war drama film that depicts the brutal realities of World War I through the eyes of a young German soldier, Paul Bäumer, who enlists with his friends. The film follows Paul as he experiences the horrors of trench warfare and the psychological toll it takes on him and his comrades. The initial excitement of war quickly turns to a desperate struggle for survival as they face constant death, violence, and the dehumanizing effects of conflict. </div> <div class="movie-review"><strong>Your Review:</strong> Haven't watched it yet, but I read the book, which I loved.</div> <div class="stars" data-rating="0"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Watched</button> </div> </div> <!--- Sonic the Hedgehog 2 ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/3/3e/Sonic_the_Hedgehog_2_film_poster.jpg" alt="Sonic 2 Poster" /> <div class="movie-info"> <div class="movie-title"> Sonic the Hedgehog 2 <span class="type-badge">Movie</span> </div> <em><div class="movie-description"><strong>Reccomended by:</strong> Sonic the Hedgehog (KA)</div></em> <div class="movie-description"><strong>Official:</strong> Sonic the Hedgehog and his friend Tails embark on a journey to find the Master Emerald before their nemesis, Dr. Ivo Robotnik, and his accomplice, Knuckles the Echidna. </div> <div class="movie-review"><strong>Your Review:</strong> The trailers looked cool, and I'll definately watch this sometime soon.</div> <div class="stars" data-rating="0"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Watched</button> </div> </div> <!--- Sonic the Hedgehog 3 ---> <div class="movie"> <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Sonic_the_Hedgehog_3_film_poster.jpg" alt="Sonic 3 Poster" /> <div class="movie-info"> <div class="movie-title"> Sonic the Hedgehog 3 <span class="type-badge">Movie</span> </div> <em><div class="movie-description"><strong>Reccomended by:</strong> Sonic the Hedgehog (KA)</div></em> <div class="movie-description"><strong>Official:</strong> Sonic, Tails and Knuckles face Shadow the Hedgehog, who allies with the mad scientists Ivo and Gerald Robotnik to pursue revenge against humanity. </div> <div class="movie-review"><strong>Your Review:</strong> If Sonic 2's trailers look cool, then this movie's trailers were even better!</div> <div class="stars" data-rating="0"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <button class="toggle-button">Mark as Watched</button> </div> </div> </div> <!--- SCRIPT LOGIC, MOST WHICH COMES FROM A FRIEND ---> <script type="module"> // Theme toggle const themeToggle = document.querySelector('.theme-toggle'); const html = document.documentElement; const applyTheme = (mode) => { html.setAttribute('data-theme', mode); themeToggle.textContent = mode === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode'; }; const storedTheme = localStorage.getItem('theme'); if (storedTheme) { applyTheme(storedTheme); } else { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; applyTheme(prefersDark ? 'dark' : 'light'); } themeToggle.addEventListener('click', () => { const newTheme = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; localStorage.setItem('theme', newTheme); applyTheme(newTheme); }); // Filter buttons document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); const filter = btn.dataset.filter; document.querySelectorAll('.section').forEach(section => { const type = section.dataset.type; section.style.display = (filter === 'all' \|\| filter === type) ? 'block' : 'none'; }); document.querySelector('.divider').style.display = (filter === 'all') ? 'block' : 'none'; }); }); // Toggle watched/unwatched document.querySelectorAll('.toggle-button').forEach(button => { button.addEventListener('click', () => { const movie = button.closest('.movie'); const currentSection = movie.closest('.section'); const isWatched = currentSection.classList.contains('watched'); const targetSection = document.querySelector(`.section.${isWatched ? 'unwatched' : 'watched'}`); button.textContent = isWatched ? 'Mark as Watched' : 'Mark as Unwatched'; targetSection.appendChild(movie); }); }); // Star rating document.querySelectorAll('.stars').forEach(container => { const stars = container.querySelectorAll('.star'); const updateStars = (rating) => { stars.forEach(star => { star.classList.toggle('filled', parseInt(star.dataset.index) <= rating); }); }; stars.forEach(star => { star.addEventListener('mouseenter', () => { const hoverVal = parseInt(star.dataset.index); stars.forEach(s => s.classList.toggle('hovered', parseInt(s.dataset.index) <= hoverVal)); }); star.addEventListener('mouseleave', () => { stars.forEach(s => s.classList.remove('hovered')); }); star.addEventListener('click', () => { const rating = parseInt(star.dataset.index); container.dataset.rating = rating; updateStars(rating); }); }); updateStars(parseInt(container.dataset.rating)); }); </script> <!--The Thumbnail Script 2.1.0 12/18/2023 by Bluebird@kaid_157624541333313939750668--><script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script><script type>var r=600,s=document.documentElement.clientWidth;window.parent.html2canvas=t=>{try{html2canvas(document.body,{width:s,height:s,useCORS:!0,onclone:t=>t.getAnimations().forEach((t=>{try{t.finish()}catch{}}))}).then((t=>{var e=document.createElement("canvas");e.width=r,e.height=r,e.getContext("2d").drawImage(t,0,0,t.width,t.height,0,0,r,r),window.top.postMessage(e.toDataURL(),"")})).catch((t=>{alert("Thumbnail Script Error: "+t)}))}catch{window.top.postMessage(document.createElement("canvas").toDataURL(),"")}};</script> </body> </html>
Folds	26,227,232,239,243,260,262,279,281,298,300,317,319,336,344,361,363,380,382,399,401,418,420,438,440,458,461,537
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIeB1vW4CQw
Votes	47
Spin-Offs	4
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	CodeNinja
Author Name	AimingforGM
Author ID	kaid_6247985199070618801670730
Author Profile Access	PUBLIC

Archive Data

Added	4 days ago, 1744686157303
Updated	4 days ago, 1744686165608
Source Deleted	unknown