Upload 13 files

.dockerignore

@@ -0,0 +1,13 @@
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.env
+.git
+.gitignore
+.pytest_cache/
+.coverage
+htmlcov/ 

Dockerfile

@@ -0,0 +1,34 @@
+# Use Python 3.12 slim image as base
+FROM python:3.12-slim
+
+# Set working directory
+WORKDIR /app
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+# Install system dependencies
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends \
+        build-essential \
+        curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first to leverage Docker cache
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Create necessary directories
+RUN mkdir -p static/css
+
+# Expose port 7860
+EXPOSE 7860
+
+# Command to run the application
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"] 

app/data.py

@@ -0,0 +1,25 @@
+from .models import Movie
+
+movie_data = [
+    Movie(
+        title="Rush (2013)",
+        embed_url="https://short.icu/N9uHP3Rwd",
+        description="The epic rivalry between Formula 1 drivers James Hunt and Niki Lauda.",
+        release_year=2013,
+        rating=8.1
+    ),
+    Movie(
+        title="Inception (2010)",
+        embed_url="https://short.icu/example1",
+        description="A thief who steals corporate secrets through dream-sharing technology.",
+        release_year=2010,
+        rating=8.8
+    ),
+    Movie(
+        title="The Dark Knight (2008)",
+        embed_url="https://short.icu/example2",
+        description="Batman faces his greatest challenge as the Joker wreaks havoc on Gotham City.",
+        release_year=2008,
+        rating=9.0
+    )
+] 

app/main.py

@@ -0,0 +1,45 @@
+from fastapi import FastAPI, Request, Query
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from pathlib import Path
+from .models import Movie
+from .data import movie_data
+
+app = FastAPI(title="Binge")
+
+# Create static directory if it doesn't exist
+static_dir = Path("static")
+static_dir.mkdir(exist_ok=True)
+(static_dir / "css").mkdir(exist_ok=True)
+
+# Mount static files
+app.mount("/static", StaticFiles(directory=str(static_dir)), name="static")
+
+# Templates
+templates = Jinja2Templates(directory="templates")
+
+@app.get("/")
+async def home(request: Request, search: str | None = Query(None)):
+    if search:
+        filtered_movies = [
+            movie for movie in movie_data
+            if search.lower() in movie.title.lower() or 
+               (movie.description and search.lower() in movie.description.lower())
+        ]
+    else:
+        filtered_movies = movie_data
+
+    return templates.TemplateResponse(
+        "index.html",
+        {"request": request, "movies": filtered_movies, "search": search}
+    )
+
+@app.get("/movie/{movie_id}")
+async def movie_detail(request: Request, movie_id: int):
+    if 0 <= movie_id < len(movie_data):
+        return templates.TemplateResponse(
+            "movie.html",
+            {"request": request, "movie": movie_data[movie_id]}
+        )
+    return {"error": "Movie not found"} 

app/models.py

@@ -0,0 +1,8 @@
+from pydantic import BaseModel
+
+class Movie(BaseModel):
+    title: str
+    embed_url: str
+    description: str | None = None
+    release_year: int | None = None
+    rating: float | None = None 

requirements.txt

@@ -0,0 +1,5 @@
+fastapi==0.109.0
+uvicorn==0.27.0
+python-multipart==0.0.6
+jinja2==3.1.3
+pydantic==2.5.3 

static/css/main.css

@@ -0,0 +1,54 @@
+/* Add any custom CSS here */
+.aspect-w-16 {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.aspect-w-16 iframe,
+.aspect-w-16 img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #121212;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #2D2D2D;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #404040;
+}
+
+/* Text truncation */
+.line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+} 

templates/base.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Binge{% endblock %}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/main.css') }}">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        dark: '#121212',
+                        'dark-lighter': '#1E1E1E',
+                        'dark-accent': '#2D2D2D',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-dark text-white min-h-screen flex flex-col">
+    <!-- Mobile-first navigation -->
+    <nav class="bg-dark-lighter fixed w-full top-0 z-50 border-b border-dark-accent">
+        <div class="container mx-auto px-4 py-3">
+            <div class="flex items-center justify-between">
+                <a href="/" class="text-2xl font-bold tracking-tighter">BINGE</a>
+                <button id="menuBtn" class="md:hidden p-2">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-16 6h16"></path>
+                    </svg>
+                </button>
+                <div class="hidden md:flex space-x-6">
+                    <a href="/" class="hover:text-gray-300 transition-colors">Home</a>
+                    <a href="#" class="hover:text-gray-300 transition-colors">Movies</a>
+                    <a href="#" class="hover:text-gray-300 transition-colors">TV Shows</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Mobile menu -->
+    <div id="mobileMenu" class="hidden fixed inset-0 bg-dark z-40 pt-16">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex flex-col space-y-4">
+                <a href="/" class="text-lg hover:text-gray-300 transition-colors">Home</a>
+                <a href="#" class="text-lg hover:text-gray-300 transition-colors">Movies</a>
+                <a href="#" class="text-lg hover:text-gray-300 transition-colors">TV Shows</a>
+            </div>
+        </div>
+    </div>
+
+    <main class="container mx-auto px-4 py-8 mt-16 flex-grow">
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="bg-dark-lighter py-6 mt-auto">
+        <div class="container mx-auto px-4 text-center text-sm text-gray-400">
+            <p>&copy; 2024 Binge. All rights reserved.</p>
+        </div>
+    </footer>
+
+    <script>
+        // Mobile menu toggle
+        const menuBtn = document.getElementById('menuBtn');
+        const mobileMenu = document.getElementById('mobileMenu');
+        
+        menuBtn.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+    </script>
+</body>
+</html> 

templates/index.html

@@ -0,0 +1,59 @@
+{% extends "base.html" %}
+
+{% block title %}Binge - Watch Movies Online{% endblock %}
+
+{% block content %}
+<div class="space-y-8">
+    <!-- Search bar -->
+    <div class="max-w-2xl mx-auto mb-12">
+        <form action="/" method="get" class="relative">
+            <input 
+                type="search" 
+                name="search" 
+                placeholder="Search movies..."
+                value="{{ search or '' }}"
+                class="w-full bg-dark-lighter border border-dark-accent rounded-lg px-4 py-3 pl-12 focus:outline-none focus:border-gray-500 transition-colors"
+            >
+            <svg class="w-6 h-6 text-gray-400 absolute left-3 top-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+            </svg>
+        </form>
+    </div>
+
+    {% if not movies %}
+    <div class="text-center py-12">
+        <p class="text-gray-400">No movies found. Try a different search.</p>
+    </div>
+    {% else %}
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {% for movie in movies %}
+        <div class="bg-dark-lighter rounded-lg overflow-hidden shadow-lg transform hover:scale-105 transition-transform duration-200">
+            <a href="/movie/{{ loop.index0 }}" class="block">
+                <div class="aspect-w-16 aspect-h-9 bg-dark-accent">
+                    <img 
+                        src="https://via.placeholder.com/300x450" 
+                        alt="{{ movie.title }}" 
+                        class="w-full h-full object-cover opacity-90 hover:opacity-100 transition-opacity"
+                    >
+                </div>
+                <div class="p-4 space-y-2">
+                    <h2 class="text-lg font-semibold line-clamp-1">{{ movie.title }}</h2>
+                    {% if movie.release_year %}
+                    <p class="text-sm text-gray-400">{{ movie.release_year }}</p>
+                    {% endif %}
+                    {% if movie.rating %}
+                    <div class="flex items-center">
+                        <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                        </svg>
+                        <span class="ml-1 text-sm">{{ movie.rating }}/10</span>
+                    </div>
+                    {% endif %}
+                </div>
+            </a>
+        </div>
+        {% endfor %}
+    </div>
+    {% endif %}
+</div>
+{% endblock %} 

templates/movie.html

@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+
+{% block title %}{{ movie.title }} - Binge{% endblock %}
+
+{% block content %}
+<div class="max-w-4xl mx-auto space-y-8">
+    <div class="flex flex-col md:flex-row md:items-start md:space-x-8">
+        <div class="w-full md:w-2/3">
+            <div class="aspect-w-16 aspect-h-9 bg-dark-lighter rounded-lg overflow-hidden shadow-lg">
+                <iframe 
+                    src="{{ movie.embed_url }}" 
+                    frameborder="0" 
+                    scrolling="0" 
+                    allowfullscreen
+                    class="w-full h-full"
+                ></iframe>
+            </div>
+        </div>
+        
+        <div class="w-full md:w-1/3 mt-6 md:mt-0">
+            <h1 class="text-2xl font-bold mb-4">{{ movie.title }}</h1>
+            
+            <div class="flex items-center space-x-4 mb-6">
+                {% if movie.release_year %}
+                <div class="bg-dark-lighter px-3 py-1 rounded text-sm">
+                    {{ movie.release_year }}
+                </div>
+                {% endif %}
+                
+                {% if movie.rating %}
+                <div class="bg-dark-lighter px-3 py-1 rounded flex items-center">
+                    <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                    </svg>
+                    <span class="ml-1">{{ movie.rating }}/10</span>
+                </div>
+                {% endif %}
+            </div>
+
+            {% if movie.description %}
+            <div class="bg-dark-lighter p-4 rounded-lg">
+                <h2 class="text-lg font-semibold mb-2">About</h2>
+                <p class="text-gray-300 text-sm">{{ movie.description }}</p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}