Spaces:

MarcRyan
/

random-classics

Running

App Files Files Community

MarcRyan commited on Apr 30, 2025

Commit

ed18e04

verified ·

1 Parent(s): b11234d

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +800 -19
prompts.txt +3 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Random Classics
-emoji: 📊
 colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: random-classics
+emoji: 🐳
 colorFrom: purple
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,800 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Epic Vintage Cinema - Classic Films from the Golden Age</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
+        :root {
+            --gold: #FFD700;
+            --dark: #0a0a12;
+            --maroon: #800020;
+        }
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: var(--dark);
+            color: #f8f8f8;
+            overflow-x: hidden;
+        }
+        .hero {
+            height: 100vh;
+            background: linear-gradient(rgba(10, 10, 18, 0.7), rgba(10, 10, 18, 0.9)),
+                        url('https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
+            position: relative;
+            overflow: hidden;
+        }
+        .film-grain {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('https://grainy-gradients.vercel.app/noise.svg');
+            opacity: 0.08;
+            pointer-events: none;
+        }
+        .title {
+            font-family: 'Cinzel', serif;
+            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+            letter-spacing: 2px;
+        }
+        .sparkle {
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            background-color: white;
+            border-radius: 50%;
+            box-shadow: 0 0 10px 2px white;
+            animation: sparkle 2s infinite alternate;
+        }
+        @keyframes sparkle {
+            0% { opacity: 0.3; transform: scale(0.8); }
+            100% { opacity: 1; transform: scale(1.2); }
+        }
+        .theater-screen {
+            width: 90%;
+            max-width: 1200px;
+            height: 0;
+            padding-bottom: 45%;
+            background: #111;
+            position: relative;
+            margin: 0 auto;
+            border-radius: 8px 8px 0 0;
+            box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
+            border: 12px solid var(--maroon);
+            border-bottom: none;
+        }
+        .theater-screen:before {
+            content: '';
+            position: absolute;
+            top: -20px;
+            left: -20px;
+            right: -20px;
+            height: 40px;
+            background: linear-gradient(90deg,
+                var(--gold) 0%,
+                #111 10%,
+                #111 90%,
+                var(--gold) 100%);
+            z-index: -1;
+        }
+        .theater-screen:after {
+            content: '';
+            position: absolute;
+            bottom: -40px;
+            left: -20px;
+            right: -20px;
+            height: 40px;
+            background: linear-gradient(90deg,
+                var(--gold) 0%,
+                #111 10%,
+                #111 90%,
+                var(--gold) 100%);
+            z-index: -1;
+        }
+        .screen-content {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        .screen-curtains {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg,
+                rgba(139, 0, 0, 0.7) 0%,
+                rgba(139, 0, 0, 0.5) 50%,
+                rgba(139, 0, 0, 0.7) 100%);
+            z-index: 2;
+            display: flex;
+            justify-content: space-between;
+        }
+        .curtain {
+            width: 25%;
+            height: 100%;
+            background: var(--maroon);
+            position: relative;
+            transition: transform 1.5s ease-out;
+        }
+        .curtain-left {
+            transform-origin: right center;
+        }
+        .curtain-right {
+            transform-origin: left center;
+        }
+        .screen-open .curtain-left {
+            transform: perspective(800px) rotateY(-60deg);
+        }
+        .screen-open .curtain-right {
+            transform: perspective(800px) rotateY(60deg);
+        }
+        .film-strip {
+            position: absolute;
+            width: 100%;
+            height: 20px;
+            background: repeating-linear-gradient(
+                90deg,
+                #000,
+                #000 10px,
+                #fff 10px,
+                #fff 20px
+            );
+            opacity: 0.3;
+        }
+        .film-strip.top {
+            top: 0;
+        }
+        .film-strip.bottom {
+            bottom: 0;
+        }
+        .movie-card {
+            background: rgba(0, 0, 0, 0.7);
+            border: 1px solid var(--gold);
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .movie-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
+            border-color: #fff;
+        }
+        .movie-card.active {
+            border: 3px solid var(--gold);
+            box-shadow: 0 0 30px var(--gold);
+        }
+        .floating-particles {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+        }
+        .particle {
+            position: absolute;
+            background: linear-gradient(to right, var(--gold), #fff);
+            border-radius: 50%;
+            opacity: 0.6;
+            animation: float-up 15s linear infinite;
+        }
+        @keyframes float-up {
+            0% {
+                transform: translateY(100vh) rotate(0deg);
+                opacity: 0;
+            }
+            10% {
+                opacity: 0.6;
+            }
+            90% {
+                opacity: 0.6;
+            }
+            100% {
+                transform: translateY(-100px) rotate(360deg);
+                opacity: 0;
+            }
+        }
+        .marquee {
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            box-sizing: border-box;
+            background: rgba(0, 0, 0, 0.5);
+            border-top: 2px solid var(--gold);
+            border-bottom: 2px solid var(--gold);
+        }
+        .marquee-content {
+            display: inline-block;
+            padding-left: 100%;
+            animation: marquee 20s linear infinite;
+        }
+        @keyframes marquee {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-100%); }
+        }
+        .projector-light {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(
+                ellipse at center,
+                rgba(255, 215, 0, 0.2) 0%,
+                rgba(255, 215, 0, 0.1) 40%,
+                rgba(255, 215, 0, 0) 70%
+            );
+            pointer-events: none;
+            z-index: 1;
+            opacity: 0;
+            transition: opacity 0.5s ease;
+        }
+        .screen-open .projector-light {
+            opacity: 1;
+        }
+        .scroll-down {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {
+                transform: translateY(0) translateX(-50%);
+            }
+            40% {
+                transform: translateY(-20px) translateX(-50%);
+            }
+            60% {
+                transform: translateY(-10px) translateX(-50%);
+            }
+        }
+        /* Theater seats styling */
+        .theater-seats {
+            perspective: 1000px;
+            margin-top: 50px;
+        }
+        .seat-row {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 15px;
+        }
+        .seat {
+            width: 30px;
+            height: 30px;
+            margin: 0 5px;
+            background: #333;
+            border-radius: 5px 5px 0 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+        .seat:before {
+            content: '';
+            position: absolute;
+            top: -5px;
+            left: 5px;
+            right: 5px;
+            height: 5px;
+            background: #555;
+            border-radius: 3px 3px 0 0;
+        }
+        .seat:hover {
+            background: #555;
+            transform: translateY(-5px);
+        }
+        .seat.selected {
+            background: var(--gold);
+        }
+        .aisle {
+            width: 40px;
+        }
+        /* Loading animation */
+        .film-reel {
+            width: 60px;
+            height: 60px;
+            border: 3px solid var(--gold);
+            border-radius: 50%;
+            position: relative;
+            animation: spin 2s linear infinite;
+        }
+        .film-reel:before {
+            content: '';
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            right: 5px;
+            bottom: 5px;
+            border: 3px solid var(--gold);
+            border-radius: 50%;
+        }
+        .film-reel:after {
+            content: '';
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            right: 15px;
+            bottom: 15px;
+            border: 3px solid var(--gold);
+            border-radius: 50%;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <!-- Hero Section -->
+    <section class="hero flex items-center justify-center text-center relative">
+        <div class="film-grain"></div>
+        <div class="floating-particles" id="particles"></div>
+        <div class="z-10 px-6">
+            <h1 class="title text-6xl md:text-8xl font-bold mb-6">
+                <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-white">Epic Vintage</span>
+                <span class="block text-5xl md:text-7xl mt-4">Cinema</span>
+            </h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto tracking-wider">Classic films from the Golden Age of Hollywood</p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <button id="featuredBtn" class="px-8 py-3 bg-gradient-to-r from-amber-500 to-amber-700 rounded-full font-semibold hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl">
+                    Featured Films
+                </button>
+                <button id="randomBtn" class="px-8 py-3 border-2 border-white rounded-full font-semibold hover:bg-white hover:text-black transition-colors duration-300">
+                    Random Classic
+                </button>
+            </div>
+        </div>
+        <div class="scroll-down">
+            <i class="fas fa-chevron-down text-2xl text-white"></i>
+        </div>
+        <!-- Create random sparkles -->
+        <div id="sparkles"></div>
+    </section>
+    <!-- Main Theater Section -->
+    <section class="py-20 px-4">
+        <div class="text-center mb-16">
+            <h2 class="title text-4xl md:text-5xl font-bold mb-4">The Grand Theater</h2>
+            <div class="w-24 h-1 bg-gradient-to-r from-amber-400 to-amber-600 mx-auto"></div>
+        </div>
+        <!-- Theater Screen -->
+        <div class="theater-screen">
+            <div class="screen-curtains">
+                <div class="curtain curtain-left"></div>
+                <div class="curtain curtain-right"></div>
+            </div>
+            <div class="projector-light"></div>
+            <div class="screen-content">
+                <div class="film-strip top"></div>
+                <div class="film-strip bottom"></div>
+                <div id="playerContainer" class="w-full h-full flex items-center justify-center">
+                    <div class="text-center">
+                        <div class="film-reel mx-auto mb-4"></div>
+                        <p class="text-xl">Select a film from our collection</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Theater Controls -->
+        <div class="max-w-4xl mx-auto mt-8 flex justify-center space-x-4">
+            <button id="openCurtainsBtn" class="px-6 py-2 bg-amber-600 rounded font-semibold hover:bg-amber-700 transition-colors duration-300 flex items-center">
+                <i class="fas fa-theater-masks mr-2"></i> Open Curtains
+            </button>
+            <button id="fullscreenBtn" class="px-6 py-2 bg-gray-700 rounded font-semibold hover:bg-gray-600 transition-colors duration-300 flex items-center">
+                <i class="fas fa-expand mr-2"></i> Full Screen
+            </button>
+            <button id="volumeBtn" class="px-6 py-2 bg-gray-700 rounded font-semibold hover:bg-gray-600 transition-colors duration-300 flex items-center">
+                <i class="fas fa-volume-up mr-2"></i> Volume
+            </button>
+        </div>
+        <!-- Theater Seats (for decoration) -->
+        <div class="theater-seats mt-12">
+            <div class="seat-row">
+                <div class="seat"></div>
+                <div class="seat"></div>
+                <div class="seat"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="aisle"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="seat"></div>
+                <div class="seat"></div>
+            </div>
+            <div class="seat-row">
+                <div class="seat"></div>
+                <div class="seat"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="aisle"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="seat"></div>
+            </div>
+            <div class="seat-row">
+                <div class="seat"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="aisle"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+                <div class="seat selected"></div>
+            </div>
+        </div>
+    </section>
+    <!-- Movie Collection Section -->
+    <section class="py-20 px-6 bg-black bg-opacity-70">
+        <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="title text-4xl md:text-5xl font-bold mb-4">Classic Film Collection</h2>
+                <div class="w-24 h-1 bg-gradient-to-r from-amber-400 to-amber-600 mx-auto"></div>
+                <p class="mt-6 max-w-2xl mx-auto">Browse our curated selection of timeless classics from the Internet Archive</p>
+            </div>
+            <div class="marquee mb-8">
+                <div class="marquee-content">
+                    NOW PLAYING: THE GENERAL (1926) • METROPOLIS (1927) • CITY LIGHTS (1931) • GONE WITH THE WIND (1939) • CASABLANCA (1942) • CITIZEN KANE (1941) • SINGIN' IN THE RAIN (1952) • SOME LIKE IT HOT (1959) •
+                </div>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8" id="movieGrid">
+                <!-- Movies will be loaded here -->
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section class="py-20 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="title text-4xl md:text-5xl font-bold mb-4">About Epic Vintage Cinema</h2>
+                <div class="w-24 h-1 bg-gradient-to-r from-amber-400 to-amber-600 mx-auto"></div>
+            </div>
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div class="relative">
+                    <img src="https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                         alt="Old movie theater"
+                         class="rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
+                    <div class="absolute -inset-4 border-2 border-amber-400 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+                </div>
+                <div>
+                    <h3 class="text-3xl font-semibold mb-6">Preserving Film History</h3>
+                    <p class="text-lg leading-relaxed mb-6">Epic Vintage Cinema is dedicated to preserving and showcasing classic films from the golden age of Hollywood and beyond. Our collection features rare and public domain films from the Internet Archive, carefully curated for film enthusiasts.</p>
+                    <p class="text-lg leading-relaxed">Experience cinema as it was meant to be seen - on our virtual grand theater screen with authentic vintage atmosphere. From silent films to noir classics, we bring history to life.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 px-6 bg-black bg-opacity-80 text-center">
+        <div class="max-w-4xl mx-auto">
+            <h3 class="title text-2xl font-semibold mb-6">Epic Vintage Cinema</h3>
+            <div class="flex justify-center space-x-6 mb-8">
+                <a href="#" class="text-2xl hover:text-amber-400 transition-colors duration-300"><i class="fab fa-twitter"></i></a>
+                <a href="#" class="text-2xl hover:text-amber-400 transition-colors duration-300"><i class="fab fa-facebook"></i></a>
+                <a href="#" class="text-2xl hover:text-amber-400 transition-colors duration-300"><i class="fab fa-instagram"></i></a>
+                <a href="https://archive.org/" target="_blank" class="text-2xl hover:text-amber-400 transition-colors duration-300"><i class="fas fa-archive"></i></a>
+            </div>
+            <p class="text-sm opacity-70 mb-2">All films are provided by the Internet Archive and are in the public domain.</p>
+            <p class="text-xs opacity-50">This site is for educational purposes only. No copyright infringement intended.</p>
+        </div>
+    </footer>
+    <script>
+        // Sample movie data (in a real app, this would come from RSS feed)
+        const movies = [
+            {
+                title: "The General (1926)",
+                description: "Buster Keaton's classic silent comedy about a train engineer pursuing his beloved locomotive.",
+                thumbnail: "https://archive.org/download/the-general-1926_202111/The%20General%20%281926%29.thumbs/The%20General%20%281926%29_000057.jpg",
+                archiveUrl: "https://archive.org/embed/the-general-1926_202111",
+                year: "1926",
+                director: "Buster Keaton, Clyde Bruckman",
+                runtime: "1h 47m"
+            },
+            {
+                title: "Metropolis (1927)",
+                description: "Fritz Lang's groundbreaking sci-fi silent film about class struggle in a futuristic city.",
+                thumbnail: "https://archive.org/download/metropolis-1927_202110/Metropolis%20%281927%29.thumbs/Metropolis%20%281927%29_000270.jpg",
+                archiveUrl: "https://archive.org/embed/metropolis-1927_202110",
+                year: "1927",
+                director: "Fritz Lang",
+                runtime: "2h 33m"
+            },
+            {
+                title: "City Lights (1931)",
+                description: "Charlie Chaplin's masterpiece about the Tramp who falls in love with a blind flower girl.",
+                thumbnail: "https://archive.org/download/city-lights-1931_202110/City%20Lights%20%281931%29.thumbs/City%20Lights%20%281931%29_000270.jpg",
+                archiveUrl: "https://archive.org/embed/city-lights-1931_202110",
+                year: "1931",
+                director: "Charlie Chaplin",
+                runtime: "1h 27m"
+            },
+            {
+                title: "Casablanca (1942)",
+                description: "Humphrey Bogart and Ingrid Bergman star in this timeless wartime romance.",
+                thumbnail: "https://archive.org/download/casablanca_202108/Casablanca.thumbs/Casablanca_000270.jpg",
+                archiveUrl: "https://archive.org/embed/casablanca_202108",
+                year: "1942",
+                director: "Michael Curtiz",
+                runtime: "1h 42m"
+            },
+            {
+                title: "Citizen Kane (1941)",
+                description: "Orson Welles' revolutionary drama about the life of a newspaper tycoon.",
+                thumbnail: "https://archive.org/download/citizen-kane_202108/Citizen%20Kane.thumbs/Citizen%20Kane_000270.jpg",
+                archiveUrl: "https://archive.org/embed/citizen-kane_202108",
+                year: "1941",
+                director: "Orson Welles",
+                runtime: "1h 59m"
+            },
+            {
+                title: "Nosferatu (1922)",
+                description: "F.W. Murnau's unauthorized Dracula adaptation that became a horror classic.",
+                thumbnail: "https://archive.org/download/nosferatu-1922_202110/Nosferatu%20%281922%29.thumbs/Nosferatu%20%281922%29_000270.jpg",
+                archiveUrl: "https://archive.org/embed/nosferatu-1922_202110",
+                year: "1922",
+                director: "F.W. Murnau",
+                runtime: "1h 34m"
+            }
+        ];
+        // Create floating particles
+        function createParticles() {
+            const container = document.getElementById('particles');
+            const particleCount = 30;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                // Random size
+                const size = Math.random() * 5 + 2;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                // Random position
+                particle.style.left = Math.random() * 100 + 'vw';
+                // Random animation duration
+                particle.style.animationDuration = 5 + Math.random() * 20 + 's';
+                particle.style.animationDelay = Math.random() * 5 + 's';
+                container.appendChild(particle);
+            }
+        }
+        // Create sparkles
+        function createSparkles() {
+            const container = document.getElementById('sparkles');
+            const sparkleCount = 20;
+            for (let i = 0; i < sparkleCount; i++) {
+                const sparkle = document.createElement('div');
+                sparkle.className = 'sparkle';
+                // Random position
+                sparkle.style.left = Math.random() * 100 + 'vw';
+                sparkle.style.top = Math.random() * 100 + 'vh';
+                // Random animation delay
+                sparkle.style.animationDelay = Math.random() * 3 + 's';
+                container.appendChild(sparkle);
+            }
+        }
+        // Load movies into grid
+        function loadMovies() {
+            const movieGrid = document.getElementById('movieGrid');
+            movieGrid.innerHTML = '';
+            movies.forEach((movie, index) => {
+                const movieCard = document.createElement('div');
+                movieCard.className = 'movie-card rounded-lg overflow-hidden relative group';
+                movieCard.innerHTML = `
+                    <img src="${movie.thumbnail}" alt="${movie.title}" class="w-full h-64 object-cover">
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold mb-2">${movie.title}</h3>
+                        <p class="text-gray-300 text-sm mb-3">${movie.year} • ${movie.runtime}</p>
+                        <p class="text-gray-400 mb-4">${movie.description}</p>
+                        <button class="play-btn px-4 py-2 bg-amber-600 rounded text-sm font-semibold hover:bg-amber-700 transition-colors duration-300" data-index="${index}">
+                            <i class="fas fa-play mr-1"></i> Play Film
+                        </button>
+                    </div>
+                `;
+                movieGrid.appendChild(movieCard);
+            });
+        }
+        // Play selected movie
+        function playMovie(movieIndex) {
+            const movie = movies[movieIndex];
+            const playerContainer = document.getElementById('playerContainer');
+            // Open curtains
+            document.querySelector('.theater-screen').classList.add('screen-open');
+            // Load player
+            playerContainer.innerHTML = `
+                <iframe src="${movie.archiveUrl}"
+                        width="100%"
+                        height="100%"
+                        frameborder="0"
+                        webkitallowfullscreen="true"
+                        mozallowfullscreen="true"
+                        allowfullscreen
+                        id="moviePlayer">
+                </iframe>
+            `;
+            // Update marquee
+            document.querySelector('.marquee-content').textContent = `NOW PLAYING: ${movie.title.toUpperCase()} • DIRECTED BY ${movie.director.toUpperCase()} • ${movie.year}`;
+            // Highlight selected movie card
+            document.querySelectorAll('.movie-card').forEach(card => card.classList.remove('active'));
+            document.querySelectorAll('.movie-card')[movieIndex].classList.add('active');
+            // Scroll to theater
+            document.querySelector('.theater-screen').scrollIntoView({ behavior: 'smooth' });
+        }
+        // Toggle fullscreen
+        function toggleFullscreen() {
+            const player = document.getElementById('moviePlayer');
+            if (!player) return;
+            if (player.requestFullscreen) {
+                player.requestFullscreen();
+            } else if (player.webkitRequestFullscreen) { /* Safari */
+                player.webkitRequestFullscreen();
+            } else if (player.msRequestFullscreen) { /* IE11 */
+                player.msRequestFullscreen();
+            }
+        }
+        // Toggle curtains
+        function toggleCurtains() {
+            const screen = document.querySelector('.theater-screen');
+            if (screen.classList.contains('screen-open')) {
+                screen.classList.remove('screen-open');
+                document.getElementById('playerContainer').innerHTML = `
+                    <div class="text-center">
+                        <div class="film-reel mx-auto mb-4"></div>
+                        <p class="text-xl">Select a film from our collection</p>
+                    </div>
+                `;
+            } else {
+                screen.classList.add('screen-open');
+            }
+        }
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            createParticles();
+            createSparkles();
+            loadMovies();
+            // Play movie when button clicked
+            document.addEventListener('click', (e) => {
+                if (e.target.classList.contains('play-btn')) {
+                    const movieIndex = e.target.getAttribute('data-index');
+                    playMovie(movieIndex);
+                }
+                // Fullscreen button
+                if (e.target.id === 'fullscreenBtn' || e.target.closest('#fullscreenBtn')) {
+                    toggleFullscreen();
+                }
+                // Curtains button
+                if (e.target.id === 'openCurtainsBtn' || e.target.closest('#openCurtainsBtn')) {
+                    toggleCurtains();
+                }
+                // Featured films button
+                if (e.target.id === 'featuredBtn' || e.target.closest('#featuredBtn')) {
+                    document.getElementById('movieGrid').scrollIntoView({ behavior: 'smooth' });
+                }
+                // Random film button
+                if (e.target.id === 'randomBtn' || e.target.closest('#randomBtn')) {
+                    const randomIndex = Math.floor(Math.random() * movies.length);
+                    playMovie(randomIndex);
+                }
+            });
+            // Create more sparkles on mousemove
+            document.addEventListener('mousemove', (e) => {
+                const sparkle = document.createElement('div');
+                sparkle.className = 'sparkle';
+                sparkle.style.left = `${e.clientX}px`;
+                sparkle.style.top = `${e.clientY}px`;
+                document.body.appendChild(sparkle);
+                // Remove after animation completes
+                setTimeout(() => {
+                    sparkle.remove();
+                }, 2000);
+            });
+            // Smooth scroll for anchor links
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    document.querySelector(this.getAttribute('href')).scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                });
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarcRyan/random-classics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+create epic cinematic engagement
+create epic cinema
+turn this into a website that uses this style and effect to playback classic movies from the internet archives that are movie choices populated via rss feed are picked and played on a giant screen wide xxxxl card that looks like a movie theater screen from the 1920's