Spaces:

r3hab
/

numerical-analysis

Running

App Files Files Community

r3hab commited on Jan 26

Commit

90c5bd3

verified ·

1 Parent(s): e76a197

Upload 2.html

Browse files

Files changed (1) hide show

2.html +290 -132

2.html CHANGED Viewed

@@ -1,162 +1,320 @@
 <!DOCTYPE html>
-<html>
   <head>
-    <meta charset="UTF-8">
-    <title>WebTorrent video player</title>
     <style>
-      #output video {
-        width: 100%;
       }
-      #progressBar {
-        height: 5px;
-        width: 0%;
-        background-color: #35b44f;
-        transition: width .4s ease-in-out;
       }
-      body.is-seed .show-seed {
-        display: inline;
       }
-      body.is-seed .show-leech {
-        display: none;
       }
-      .show-seed {
-        display: none;
       }
-      #status code {
-        font-size: 90%;
-        font-weight: 700;
-        margin-left: 3px;
-        margin-right: 3px;
-        border-bottom: 1px dashed rgba(255,255,255,0.3);
       }
-      .is-seed {
-        background-color: #154820;
-        transition: .5s .5s background-color ease-in-out;
       }
-      body {
-        background-color: #2a3749;
-        margin: 0;
-        height: 100%;
       }
-      #status {
         color: #fff;
-        font-size: 17px;
-        padding: 5px;
       }
-      a:link, a:visited {
-        color: #30a247;
         text-decoration: none;
       }
     </style>
   </head>
   <body>
-    <div>
-      <div id="progressBar"></div>
-      <video id="output" controls></video>
-    </div>
-    <!-- Statistics -->
-    <div id="status">
-      <div>
-        <span class="show-leech">Downloading </span>
-        <span class="show-seed">Seeding </span>
-        <code>
-          <a id="torrentLink" href="https://webtorrent.io/torrents/sintel.torrent">sintel.torrent</a>
-        </code>
-        <span class="show-leech"> from </span>
-        <span class="show-seed"> to </span>
-        <code id="numPeers">0 peers</code>.
       </div>
-      <div>
-        <code id="downloaded"></code>
-        of <code id="total"></code>
-        — <span id="remaining"></span><br/>
-        &#x2198;<code id="downloadSpeed">0 b/s</code>
-        / &#x2197;<code id="uploadSpeed">0 b/s</code>
       </div>
     </div>
-    <!-- Moment.js for time formatting -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
-    <script type="module">
-      // Updated WebTorrent import using proper ESM syntax
-      import WebTorrent from 'https://cdn.skypack.dev/webtorrent'
-      const torrentId = 'https://webtorrent.io/torrents/sintel.torrent'
-      const client = new WebTorrent()
-      // HTML elements
-      const $body = document.body
-      const $progressBar = document.querySelector('#progressBar')
-      const $numPeers = document.querySelector('#numPeers')
-      const $downloaded = document.querySelector('#downloaded')
-      const $total = document.querySelector('#total')
-      const $remaining = document.querySelector('#remaining')
-      const $uploadSpeed = document.querySelector('#uploadSpeed')
-      const $downloadSpeed = document.querySelector('#downloadSpeed')
-      // Service Worker registration
-      navigator.serviceWorker.register('https://cdn.jsdelivr.net/npm/webtorrent@latest/sw.min.js', { scope: './' })
-        .then(reg => {
-          const worker = reg.active || reg.waiting || reg.installing
-          function checkState(worker) {
-            if (worker.state === 'activated') {
-              client.createServer({ controller: reg })
-              download()
-            }
-          }
-          if (!checkState(worker)) {
-            worker.addEventListener('statechange', ({ target }) => checkState(target))
-          }
-        })
-      function download() {
-        client.add(torrentId, torrent => {
-          const file = torrent.files.find(file => file.name.endsWith('.mp4'))
-          file.streamTo(document.querySelector('#output'))
-          torrent.on('done', onDone)
-          setInterval(onProgress, 500)
-          onProgress()
-          function onProgress() {
-            $numPeers.innerHTML = torrent.numPeers + (torrent.numPeers === 1 ? ' peer' : ' peers')
-            const percent = Math.round(torrent.progress * 100 * 100) / 100
-            $progressBar.style.width = percent + '%'
-            $downloaded.innerHTML = prettyBytes(torrent.downloaded)
-            $total.innerHTML = prettyBytes(torrent.length)
-            let remaining
-            if (torrent.done) {
-              remaining = 'Done.'
-            } else {
-              remaining = moment.duration(torrent.timeRemaining / 1000, 'seconds').humanize()
-              remaining = remaining[0].toUpperCase() + remaining.substring(1) + ' remaining.'
-            }
-            $remaining.innerHTML = remaining
-            $downloadSpeed.innerHTML = prettyBytes(torrent.downloadSpeed) + '/s'
-            $uploadSpeed.innerHTML = prettyBytes(torrent.uploadSpeed) + '/s'
-          }
-          function onDone() {
-            $body.className += ' is-seed'
-            onProgress()
-          }
-        })
       }
-      function prettyBytes(num) {
-        const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-        const neg = num < 0
-        if (neg) num = -num
-        if (num < 1) return (neg ? '-' : '') + num + ' B'
-        const exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1)
-        const unit = units[exponent]
-        num = Number((num / Math.pow(1000, exponent)).toFixed(2))
-        return (neg ? '-' : '') + num + ' ' + unit
       }
     </script>
   </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Movie Streamer</title>
     <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
       }
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #1a1a1a;
+        color: white;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
       }
+      .header {
+        background-color: #2a2a2a;
+        padding: 20px 0;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
       }
+      .header h1 {
+        text-align: center;
+        color: #007bff;
+        font-size: 2rem;
+        margin-bottom: 10px;
       }
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+        flex: 1;
       }
+      .search-container {
+        text-align: center;
+        margin: 20px 0;
       }
+      #searchInput {
+        padding: 10px;
+        width: 300px;
+        border-radius: 5px;
+        border: none;
+        font-size: 16px;
       }
+      #searchButton {
+        padding: 10px 20px;
+        background-color: #007bff;
+        border: none;
+        border-radius: 5px;
+        color: white;
+        cursor: pointer;
+        margin-left: 10px;
+        font-size: 16px;
       }
+      .section-title {
+        font-size: 24px;
+        margin: 30px 0 20px 0;
         color: #fff;
       }
+      .movie-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 20px;
+        margin-top: 20px;
+      }
+      .movie-card {
+        background-color: #2a2a2a;
+        border-radius: 10px;
+        overflow: hidden;
+        cursor: pointer;
+        transition: transform 0.3s;
+      }
+      .movie-card:hover {
+        transform: scale(1.05);
+      }
+      .movie-poster {
+        width: 100%;
+        height: 300px;
+        object-fit: cover;
+      }
+      .movie-info {
+        padding: 10px;
+      }
+      .movie-info h4 {
+        margin-bottom: 8px;
+        font-size: 16px;
+      }
+      .movie-info p {
+        font-size: 14px;
+        color: #ccc;
+        line-height: 1.4;
+      }
+      .player-container {
+        margin-top: 20px;
+        aspect-ratio: 16/9;
+      }
+      #moviePlayer {
+        width: 100%;
+        height: 100%;
+        border: none;
+        border-radius: 10px;
+      }
+      .rating {
+        color: #ffd700;
+        margin-top: 8px;
+        font-weight: bold;
+      }
+      .footer {
+        background-color: #2a2a2a;
+        padding: 20px;
+        text-align: center;
+        margin-top: 40px;
+      }
+      .footer p {
+        color: #ccc;
+        font-size: 14px;
+        line-height: 1.6;
+      }
+      .footer a {
+        color: #007bff;
         text-decoration: none;
       }
+      .footer a:hover {
+        text-decoration: underline;
+      }
+      /* Mobile Responsiveness */
+      @media (max-width: 768px) {
+        .header h1 {
+          font-size: 1.5rem;
+        }
+        .container {
+          padding: 10px;
+        }
+        #searchInput {
+          width: calc(100% - 20px);
+          margin-bottom: 10px;
+        }
+        #searchButton {
+          width: calc(100% - 20px);
+          margin-left: 0;
+        }
+        .movie-grid {
+          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+          gap: 15px;
+        }
+        .movie-poster {
+          height: 225px;
+        }
+        .movie-info h4 {
+          font-size: 14px;
+        }
+        .movie-info p {
+          font-size: 12px;
+        }
+        .section-title {
+          font-size: 20px;
+          margin: 20px 0 15px 0;
+        }
+      }
     </style>
   </head>
   <body>
+    <header class="header">
+      <h1>SlimShadow Movies</h1>
+    </header>
+    <div class="container">
+      <div class="search-container">
+        <input
+          type="text"
+          id="searchInput"
+          placeholder="Search for movies..."
+        />
+        <button id="searchButton">Search</button>
       </div>
+      <h2 class="section-title">Trending Movies</h2>
+      <div class="movie-grid" id="movieGrid"></div>
+      <div class="player-container">
+        <iframe id="moviePlayer" allowfullscreen></iframe>
       </div>
     </div>
+    <footer class="footer">
+      <p>
+        © 2024 SlimShadow Organization. All rights reserved.
+      </p>
+      <p>
+        This application is part of the SlimShadow Organization's suite of entertainment services.
+        Movie data provided by <a href="https://www.themoviedb.org" target="_blank">TMDB</a>.
+      </p>
+      <p>
+        For educational and demonstration purposes only. Not for commercial use.
+      </p>
+    </footer>
+    <script>
+      const TMDB_API_KEY = 'c8402e1c7b8bb9bcbf95b3fa3bad4d84';
+      const movieGrid = document.getElementById('movieGrid');
+      const searchInput = document.getElementById('searchInput');
+      const searchButton = document.getElementById('searchButton');
+      const moviePlayer = document.getElementById('moviePlayer');
+      // Get trending movies
+      async function getTrendingMovies() {
+        try {
+          const response = await fetch(
+            `https://api.themoviedb.org/3/trending/movie/day?api_key=${TMDB_API_KEY}`
+          );
+          const data = await response.json();
+          return data.results;
+        } catch (error) {
+          console.error('Error fetching trending movies:', error);
+        }
       }
+      // Search movies
+      async function searchMovies(query) {
+        try {
+          const response = await fetch(
+            `https://api.themoviedb.org/3/search/movie?api_key=${TMDB_API_KEY}&query=${query}`
+          );
+          const data = await response.json();
+          return data.results;
+        } catch (error) {
+          console.error('Error searching movies:', error);
+        }
       }
+      // Display movies
+      function displayMovies(movies) {
+        movieGrid.innerHTML = '';
+        movies.forEach((movie) => {
+          const movieCard = document.createElement('div');
+          movieCard.className = 'movie-card';
+          movieCard.innerHTML = `
+            <img class="movie-poster"
+                 src="https://image.tmdb.org/t/p/w500${movie.poster_path || ''}"
+                 onerror="this.src='https://via.placeholder.com/500x750?text=No+Poster'"
+                 alt="${movie.title}">
+            <div class="movie-info">
+                <h4>${movie.title}</h4>
+                <p>${movie.overview ? movie.overview.substring(0, 80) + '...' : 'No description available'}</p>
+                <div class="rating">★ ${movie.vote_average.toFixed(1)}</div>
+            </div>
+          `;
+          movieCard.addEventListener('click', () => playMovie(movie.id));
+          movieGrid.appendChild(movieCard);
+        });
+      }
+      // Play movie using vidsrc
+      function playMovie(tmdbId) {
+        moviePlayer.src = `https://vidsrc.in/embed/movie/${tmdbId}`;
+      }
+      // Event listeners
+      searchButton.addEventListener('click', async () => {
+        const query = searchInput.value;
+        if (query) {
+          const movies = await searchMovies(query);
+          displayMovies(movies);
+        }
+      });
+      searchInput.addEventListener('keypress', async (e) => {
+        if (e.key === 'Enter') {
+          const query = searchInput.value;
+          if (query) {
+            const movies = await searchMovies(query);
+            displayMovies(movies);
+          }
+        }
+      });
+      // Load trending movies on page load
+      window.addEventListener('load', async () => {
+        const trendingMovies = await getTrendingMovies();
+        displayMovies(trendingMovies);
+      });
     </script>
   </body>
 </html>