Spaces:

KingNish
/

test-space

Running

App Files Files Community

smolSWE commited on May 19

Commit

ea386b3

verified ·

1 Parent(s): 739c018

Create basic Netflix clone website

Browse files

Added basic HTML structure, CSS styling, and JavaScript functionality for a Netflix clone website.

Files changed (3) hide show

index.html +53 -34
script.js +17 -82
style.css +120 -41

index.html CHANGED Viewed

@@ -1,45 +1,64 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Calculator with Graph</title>
     <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-    <div class="calculator">
-        <input type="text" id="display" readonly>
-        <div class="buttons">
-            <button onclick="clearDisplay()">C</button>
-            <button onclick="deleteLast()">DEL</button>
-            <button onclick="appendValue('%')">%</button>
-            <button onclick="appendValue('/')">/</button>
-            <button onclick="appendValue('7')">7</button>
-            <button onclick="appendValue('8')">8</button>
-            <button onclick="appendValue('9')">9</button>
-            <button onclick="appendValue('*')">*</button>
-            <button onclick="appendValue('4')">4</button>
-            <button onclick="appendValue('5')">5</button>
-            <button onclick="appendValue('6')">6</button>
-            <button onclick="appendValue('-')">-</button>
-            <button onclick="appendValue('1')">1</button>
-            <button onclick="appendValue('2')">2</button>
-            <button onclick="appendValue('3')">3</button>
-            <button onclick="appendValue('+')">+</button>
-            <button onclick="appendValue('0')">0</button>
-            <button onclick="appendValue('.')">.</button>
-            <button onclick="calculate()">=</button>
         </div>
-    </div>
-    <div class="graph-container">
-        <input type="text" id="equation" placeholder="Enter equation (e.g., x^2)">
-        <button onclick="plotGraph()">Plot Graph</button>
-        <canvas id="myChart"></canvas>
-    </div>
     <script src="script.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
+<html>
 <head>
+    <title>Netflix Clone</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <nav class="navbar">
+        <div class="navbar-logo">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" alt="Netflix Logo">
+        </div>
+        <ul class="navbar-menu">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">TV Shows</a></li>
+            <li><a href="#">Movies</a></li>
+            <li><a href="#">My List</a></li>
+        </ul>
+    </nav>
+    <section class="hero">
+        <div class="hero-content">
+            <h1>Movie Title</h1>
+            <p>A brief description of the movie.</p>
+            <div class="hero-buttons">
+                <button>Play</button>
+                <button>More Info</button>
+            </div>
         </div>
+    </section>
+    <main class="container">
+        <div class="movie-row">
+            <h2>Trending Now</h2>
+            <div class="movie-posters">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+            </div>
+        </div>
+        <div class="movie-row">
+            <h2>Top Picks for You</h2>
+            <div class="movie-posters">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
+            </div>
+        </div>
+    </main>
+    <footer class="footer">
+        <p>&copy; 2024 Netflix Clone</p>
+        <ul>
+            <li><a href="#">Terms of Use</a></li>
+            <li><a href="#">Privacy Policy</a></li>
+        </ul>
+    </footer>
     <script src="script.js"></script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -1,87 +1,22 @@
-let display = document.getElementById('display');
-let chart;
-function appendValue(value) {
-    display.value += value;
-}
-function clearDisplay() {
-    display.value = '';
-}
-function calculate() {
-    try {
-        let expression = display.value;
-        let result = evaluateExpression(expression);
-        display.value = result;
-    } catch (error) {
-        display.value = 'Error';
-    }
-}
-function evaluateExpression(expression) {
-    // Basic implementation, more robust parsing needed for complex expressions
-    expression = expression.replace(/[^-()\d/*+.]/g, ''); // Remove invalid characters
-    expression = expression.replace(/(\d+\.\d+)/g, parseFloat); // clean floats
-    expression = expression.replace(/(\d+)/g, parseInt); // clean integers
-    try {
-        return new Function('return ' + expression)();
-    } catch (e) {
-        return 'Error';
-    }
 }
-function deleteLast() {
-    display.value = display.value.slice(0, -1);
 }
-function plotGraph() {
-    const equation = document.getElementById('equation').value;
-    const xValues = [];
-    const yValues = [];
-    for (let x = -10; x <= 10; x += 0.5) {
-        xValues.push(x);
-        try {
-            // Replace x in the equation and evaluate
-            let y = evaluateExpression(equation.replace(/x/g, x));
-            yValues.push(y);
-        } catch (error) {
-            alert("Invalid equation!");
-            return;
-        }
-    }
-    // Destroy previous chart if it exists
-    if (chart) {
-        chart.destroy();
-    }
-    const ctx = document.getElementById('myChart').getContext('2d');
-    chart = new Chart(ctx, {
-        type: 'line',
-        data: {
-            labels: xValues,
-            datasets: [{
-                label: equation,
-                data: yValues,
-                borderColor: 'blue',
-                fill: false
-            }]
-        },
-        options: {
-            scales: {
-                x: {
-                    type: 'linear',
-                    position: 'bottom'
-                },
-                y: {
-                   type: 'linear',
-                   position: 'left'
-                }
-            }
-        }
-    });
-}

+// Function to display a movie trailer (placeholder)
+function showTrailer() {
+    alert('Trailer is not available yet.');
 }
+// Function to add a movie to My List (placeholder)
+function addToMyList() {
+    alert('Added to My List!');
 }
+// Add event listeners to movie posters
+const moviePosters = document.querySelectorAll('.movie-posters img');
+moviePosters.forEach(poster => {
+    poster.addEventListener('click', showTrailer);
+});
+// Add event listener to the "More Info" button (placeholder)
+const moreInfoButton = document.querySelector('.hero-buttons button:last-child');
+moreInfoButton.addEventListener('click', () => {
+    alert('More info about the movie will be displayed here.');
+});

style.css CHANGED Viewed

@@ -1,64 +1,143 @@
-.calculator {
-    width: 300px;
-    margin: 50px auto;
-    background-color: #333;
-    border-radius: 10px;
-    overflow: hidden;
 }
-.calculator input {
-    width: 100%;
-    padding: 20px;
-    font-size: 24px;
-    border: none;
-    background-color: #222;
-    color: white;
-    text-align: right;
-    white-space: nowrap;
-    overflow-x: auto;
 }
-.calculator .buttons {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
 }
-.calculator button {
-    padding: 20px;
-    font-size: 20px;
     border: none;
-    background-color: #444;
-    color: white;
     cursor: pointer;
-    transition: background-color 0.3s ease;
 }
-.calculator button:hover {
-    background-color: #555;
 }
-.calculator button:active {
-    background-color: #666;
 }
-.calculator .buttons button:nth-child(4n) {
-    background-color: #f0a040;
 }
-.calculator .buttons button:nth-child(4n):hover {
-    background-color: #f2b96e;
 }
-.graph-container {
-    width: 600px;
-    margin: 20px auto;
     text-align: center;
 }
-#equation {
-    padding: 10px;
-    font-size: 16px;
-    width: 400px;
-    margin-bottom: 10px;
 }

+body {
+    font-family: sans-serif;
+    background-color: #000;
+    color: #fff;
+    margin: 0;
 }
+.navbar {
+    background-color: #000;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
+.navbar-logo img {
+    width: 100px;
 }
+.navbar-menu {
+    list-style: none;
+    display: flex;
+    padding: 0;
+}
+.navbar-menu li {
+    margin-left: 20px;
+}
+.navbar-menu li a {
+    color: #fff;
+    text-decoration: none;
+}
+.hero {
+    background-image: url('https://via.placeholder.com/1920x1080');
+    background-size: cover;
+    background-position: center;
+    height: 500px;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+}
+.hero-content {
+    max-width: 600px;
+}
+.hero-content h1 {
+    font-size: 3em;
+    margin-bottom: 20px;
+}
+.hero-content p {
+    font-size: 1.2em;
+    margin-bottom: 30px;
+}
+.hero-buttons button {
+    background-color: rgba(0, 0, 0, 0.5);
+    color: #fff;
     border: none;
+    padding: 10px 20px;
+    margin-right: 10px;
+    font-size: 1.1em;
     cursor: pointer;
 }
+.container {
+    padding: 20px;
 }
+.movie-row {
+    margin-bottom: 30px;
 }
+.movie-posters {
+    display: flex;
+    overflow-x: auto;
 }
+.movie-posters img {
+    margin-right: 10px;
+    width: 150px;
+    height: 200px;
 }
+.footer {
+    background-color: #222;
+    padding: 20px;
     text-align: center;
 }
+.footer ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+}
+.footer li {
+    margin: 0 10px;
+}
+.footer li a {
+    color: #fff;
+    text-decoration: none;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .navbar-menu {
+        margin-top: 10px;
+        flex-direction: column;
+    }
+    .navbar-menu li {
+        margin-left: 0;
+        margin-bottom: 10px;
+    }
+    .hero {
+        height: 400px;
+    }
+    .hero-content {
+        max-width: 100%;
+    }
+    .hero-content h1 {
+        font-size: 2em;
+    }
+    .hero-content p {
+        font-size: 1em;
+    }
 }