API tools faq
paste
Guest User

Untitled

a guest
Aug 20th, 2024
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description"
  8. content="Explore a curated collection of classic and modern films on UwU Movies. Search and filter movies by platform, year, genre, and title.">
  9. <title>UwU Movies - Explore Your Favorite Movies</title>
  10. <style>
  11. :root {
  12. --base: #282c34;
  13. --surface0: #3a3f4b;
  14. --surface1: #4b5263;
  15. --text: #abb2bf;
  16. --subtext0: #8b93a7;
  17. --accent: #61afef;
  18. --pink: #c678dd;
  19. --red: #e06c75;
  20. --orange: #d19a66;
  21. --yellow: #e5c07b;
  22. --green: #98c379;
  23. --blue: #61afef;
  24. }
  25.  
  26. body.light-mode {
  27. --base: #fafafa;
  28. --surface0: #eaeaeb;
  29. --surface1: #d4d4d5;
  30. --text: #383a42;
  31. --subtext0: #696c77;
  32. --accent: #4078f2;
  33. --pink: #a626a4;
  34. --red: #e45649;
  35. --orange: #c18401;
  36. --yellow: #986801;
  37. --green: #50a14f;
  38. --blue: #4078f2;
  39. }
  40.  
  41. body {
  42. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  43. background-color: var(--base);
  44. color: var(--text);
  45. line-height: 1.6;
  46. margin: 0;
  47. padding: 0;
  48. transition: background-color 0.3s, color 0.3s;
  49. }
  50.  
  51. #container {
  52. max-width: 1200px;
  53. margin: 0 auto;
  54. padding: 1rem;
  55. }
  56.  
  57. h1 {
  58. color: var(--accent);
  59. font-size: clamp(2rem, 5vw, 3rem);
  60. margin-bottom: 1.5rem;
  61. text-align: center;
  62. letter-spacing: 2px;
  63. font-weight: 800;
  64. text-shadow: 2px 2px var(--surface1);
  65. animation: float 3s ease-in-out infinite;
  66. }
  67.  
  68. @keyframes float {
  69.  
  70. 0%,
  71. 100% {
  72. transform: translateY(0);
  73. }
  74.  
  75. 50% {
  76. transform: translateY(-10px);
  77. }
  78. }
  79.  
  80. .subtitle-container {
  81. display: flex;
  82. justify-content: center;
  83. align-items: center;
  84. gap: 1rem;
  85. margin-top: -1rem;
  86. margin-bottom: 1.5rem;
  87. flex-wrap: wrap;
  88. }
  89.  
  90. .subtitle {
  91. text-align: center;
  92. color: var(--subtext0);
  93. font-size: 1rem;
  94. font-style: italic;
  95. margin: 0;
  96. }
  97.  
  98. #inline-donation-button {
  99. background-color: var(--accent);
  100. color: var(--base);
  101. border: none;
  102. padding: 0.5rem 1rem;
  103. border-radius: 20px;
  104. cursor: pointer;
  105. font-size: 0.9rem;
  106. transition: background-color 0.2s ease;
  107. }
  108.  
  109. #inline-donation-button:hover {
  110. background-color: var(--blue);
  111. }
  112.  
  113. #search-bar {
  114. width: 100%;
  115. padding: 0.8rem;
  116. margin-bottom: 1.5rem;
  117. border: none;
  118. border-radius: 4px;
  119. background-color: var(--surface0);
  120. color: var(--text);
  121. font-size: 1rem;
  122. }
  123.  
  124. .filters {
  125. display: flex;
  126. justify-content: space-between;
  127. margin-bottom: 1.5rem;
  128. flex-wrap: wrap;
  129. gap: 0.5rem;
  130. }
  131.  
  132. .filter {
  133. flex: 1;
  134. min-width: 120px;
  135. background-color: var(--surface0);
  136. border: none;
  137. color: var(--text);
  138. padding: 0.5rem 1rem;
  139. border-radius: 4px;
  140. cursor: pointer;
  141. transition: background-color 0.2s ease;
  142. }
  143.  
  144. .filter:hover {
  145. background-color: var(--surface1);
  146. }
  147.  
  148. #movie-list {
  149. display: grid;
  150. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  151. gap: 1.5rem;
  152. }
  153.  
  154. .movie-card {
  155. background-color: var(--surface1);
  156. border-radius: 8px;
  157. overflow: hidden;
  158. transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  159. cursor: pointer;
  160. }
  161.  
  162. .movie-card:hover {
  163. transform: translateY(-5px);
  164. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  165. }
  166.  
  167. .movie-card img {
  168. width: 100%;
  169. height: 300px;
  170. object-fit: cover;
  171. }
  172.  
  173. .modal-info pre a {
  174. color: var(--blue);
  175. text-decoration: none;
  176. }
  177.  
  178. .modal-info pre a:hover {
  179. text-decoration: underline;
  180. }
  181.  
  182. .movie-info {
  183. padding: 1rem;
  184. }
  185.  
  186. .movie-title {
  187. font-size: 1.1rem;
  188. font-weight: bold;
  189. margin-bottom: 0.5rem;
  190. color: var(--blue);
  191. }
  192.  
  193. .movie-year {
  194. color: var(--orange);
  195. }
  196.  
  197. .movie-platform {
  198. color: var(--green);
  199. font-size: 0.9rem;
  200. }
  201.  
  202. #theme-toggle {
  203. position: fixed;
  204. top: 20px;
  205. right: 20px;
  206. background-color: var(--surface0);
  207. border: none;
  208. color: var(--text);
  209. padding: 10px;
  210. border-radius: 50%;
  211. cursor: pointer;
  212. font-size: 1.2rem;
  213. transition: background-color 0.2s ease;
  214. z-index: 1000;
  215. }
  216.  
  217. #theme-toggle:hover {
  218. background-color: var(--surface1);
  219. }
  220.  
  221. .modal {
  222. display: none;
  223. position: fixed;
  224. z-index: 1001;
  225. left: 0;
  226. top: 0;
  227. width: 100%;
  228. height: 100%;
  229. overflow: auto;
  230. background-color: rgba(0, 0, 0, 0.4);
  231. }
  232.  
  233. .modal-content {
  234. background-color: var(--base);
  235. margin: 15% auto;
  236. padding: 20px;
  237. border: 1px solid var(--surface1);
  238. width: 90%;
  239. max-width: 800px;
  240. border-radius: 8px;
  241. }
  242.  
  243. .close {
  244. color: var(--text);
  245. float: right;
  246. font-size: 28px;
  247. font-weight: bold;
  248. cursor: pointer;
  249. }
  250.  
  251. .close:hover,
  252. .close:focus {
  253. color: var(--accent);
  254. text-decoration: none;
  255. }
  256.  
  257. .modal-body {
  258. display: flex;
  259. flex-wrap: wrap;
  260. gap: 20px;
  261. }
  262.  
  263. .modal-poster {
  264. flex: 0 0 200px;
  265. }
  266.  
  267. .modal-info {
  268. flex: 1 1 300px;
  269. }
  270.  
  271. .modal-info pre {
  272. white-space: pre-wrap;
  273. word-wrap: break-word;
  274. background-color: var(--surface0);
  275. padding: 10px;
  276. border-radius: 4px;
  277. max-height: 300px;
  278. overflow-y: auto;
  279. }
  280.  
  281. @media (max-width: 768px) {
  282. .subtitle-container {
  283. flex-direction: column;
  284. gap: 0.5rem;
  285. }
  286.  
  287. .filters {
  288. flex-direction: column;
  289. }
  290.  
  291. .filter {
  292. width: 100%;
  293. margin-bottom: 0.5rem;
  294. }
  295.  
  296. #movie-list {
  297. grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  298. }
  299.  
  300. .movie-card img {
  301. height: 225px;
  302. }
  303.  
  304. .movie-info {
  305. padding: 0.5rem;
  306. }
  307.  
  308. .movie-title {
  309. font-size: 1rem;
  310. }
  311.  
  312. #theme-toggle {
  313. padding: 8px;
  314. font-size: 1rem;
  315. }
  316. }
  317. </style>
  318. </head>
  319.  
  320. <body>
  321. <div id="container">
  322. <h1>UwU Movies</h1>
  323. <div class="subtitle-container">
  324. <p class="subtitle">Curating cinematic experiences. Your support keeps us sailing.</p>
  325. <button id="inline-donation-button" aria-label="Donate">Support Johan ❤️</button>
  326. </div>
  327. <input type="text" id="search-bar" placeholder="Search movies by title, year, platform, or genre..."
  328. aria-label="Search movies">
  329. <div class="filters">
  330. <select id="platform-filter" class="filter" aria-label="Filter by platform">
  331. <option value="">All Platforms 🎬</option>
  332. </select>
  333. <select id="year-filter" class="filter" aria-label="Filter by year">
  334. <option value="">All Years 📅</option>
  335. </select>
  336. <select id="genre-filter" class="filter" aria-label="Filter by genre">
  337. <option value="">All Genres 🍿</option>
  338. </select>
  339. </div>
  340. <div id="movie-list"></div>
  341. </div>
  342. <button id="theme-toggle" aria-label="Toggle dark/light mode">🌓</button>
  343.  
  344. <div id="donation-modal" class="modal">
  345. <div class="modal-content">
  346. <span class="close">&times;</span>
  347. <h2>Support UwU Movies</h2>
  348. <p>If you enjoy our service, please consider supporting us with a donation.</p>
  349. <!-- Add donation information here -->
  350. </div>
  351. </div>
  352.  
  353. <div id="movieModal" class="modal">
  354. <div class="modal-content">
  355. <span class="close">&times;</span>
  356. <div class="modal-body"></div>
  357. </div>
  358. </div>
  359.  
  360. <script>
  361. const movies = [{
  362. title: "Terror Tuesday Extreme",
  363. year: 2024,
  364. platform: "Netflix",
  365. image: "https://www.themoviedb.org/t/p/w1280/qnaIFI2CkH1UQrGtVbSUqlSNFwX.jpg",
  366. genre: "Horror, Thriller",
  367. downloadInfo: `Terror.Tuesday.Extreme.S01E01.Our.Little.Sister.1080p.NF.WEB-DL.DUAL.DDP5.1.Atmos.H.264-XEBEC.mkv [1.87 GB]
  368. https://new3.gdflix.cfd/file/HkJAmFcJhn
  369.  
  370. Terror.Tuesday.Extreme.S01E02.Wedding.Dress.1080p.NF.WEB-DL.DUAL.DDP5.1.Atmos.H.264-XEBEC.mkv [2.59 GB]
  371. https://new3.gdflix.cfd/file/vJ795g2GjK
  372.  
  373. Terror.Tuesday.Extreme.S01E03.Ode.to.My.Family.1080p.NF.WEB-DL.DUAL.DDP5.1.Atmos.H.264-XEBEC.mkv [2.01 GB]
  374. https://new3.gdflix.cfd/file/qxRPc8okrs
  375.  
  376. Terror.Tuesday.Extreme.S01E04.The.Vow.1080p.NF.WEB-DL.DUAL.DDP5.1.Atmos.H.264-XEBEC.mkv [1.88 GB]
  377. https://new3.gdflix.cfd/file/Qk0Y8SZyzp
  378.  
  379. Terror.Tuesday.Extreme.S01E05.Spectral.Class.1080p.NF.WEB-DL.DUAL.DDP5.1.Atmos.H.264-XEBEC.mkv [2.16 GB]
  380. https://new3.gdflix.cfd/file/tpYDJNOdSs
  381.  
  382. Terror.Tuesday.Extreme.S01E06.Girl.Next.Door.1080p.NF.WEB-DL.DUAL.DDP5.1.Atmos.H.264-XEBEC.mkv [2.37 GB]
  383. https://new3.gdflix.cfd/file/v9jugoBBZl
  384.  
  385. Terror.Tuesday.Extreme.S01E07.Dear.Granny.1080p.NF.WEB-DL.DUAL.DDP5.1.Atmos.H.264-XEBEC.mkv [2.66 GB]
  386. https://new3.gdflix.cfd/file/Zu8el3x8eK
  387.  
  388. Terror.Tuesday.Extreme.S01E08.Viral.Curse.1080p.NF.WEB-DL.DUAL.DDP5.1.Atmos.H.264-XEBEC.mkv [2.39 GB]
  389. https://new3.gdflix.cfd/file/gNPB5ytZ8r
  390.  
  391. PACK
  392. Terror.Tuesday.Extreme.S01.1080p.NF.WEB-DL.DUAL.DDP5.1.Atmos.H.264-XEBEC [17.93GB]
  393.  
  394. https://new3.gdflix.cfd/pack/2Tzqr7wIgk
  395. ENG | THAI | MULTI SUBS`
  396. }, {
  397. title: "Kingdom of the Planet",
  398. year: 2024,
  399. platform: "Apple TV",
  400. image: "https://www.themoviedb.org/t/p/w1280/gKkl37BQuKTanygYQG1pyYgLVgf.jpg",
  401. genre: "Action, Science Fiction, Adventure",
  402. downloadInfo: `🔥Kingdom of the Planet of the Apes (2024) 2160p MA WEB-DL DV HDR [Hindi DDP5.1 + English DDPA 5.1] H.265 (HHWEB-Ionicboy).mkv [25.72 GB]
  403. ➡️https://new3.gdflix.cfd/file/VJRsusdwcc
  404.  
  405. 🔥Kingdom of the Planet of the Apes (2024) 2160p MA WEB-DL SDR [Hindi DDP5.1 + English DDPA 5.1] H.265 (HHWEB-Ionicboy).mkv [25.6 GB]
  406. ➡️https://new3.gdflix.cfd/file/cwIu7LSB7f
  407.  
  408. 🔥Kingdom of the Planet of the Apes (2024) 1080p MA WEB-DL [Hindi DDP5.1 + English DDPA 5.1] H.264 (HHWEB-Ionicboy).mkv [8.66 GB]
  409. ➡️https://new3.gdflix.cfd/file/258nQNwF65
  410.  
  411. 🎵 Audio:
  412. 1. हिन्दी | Dolby Digital Plus 5.1 @ 192kb/s
  413. 2. English | Dolby Digital Plus 5.1 Atmos @ 768kb/s
  414. `
  415.  
  416. }, {title: "Drawing Closer",
  417. year: 2024,
  418. platform: "Netflix",
  419. image: "https://www.themoviedb.org/t/p/w1280/173FD4a0rpSF30z4CoWx6qdx8Ry.jpg",
  420. genre:"Romance, Drama",
  421. downloadInfo: `
  422. Drawing.Closer.2024.2160p.NF.WEB-DL.DDP5.1.H.265-HHWEB.mkv [10.98 GB]
  423. https://new3.gdflix.cfd/file/rfv7uBKNFt
  424.  
  425. Drawing.Closer.2024.2160p.NF.WEB-DL.DDP5.1.HDR.H.265-HHWEB.mkv [6.16 GB]
  426. https://new3.gdflix.cfd/file/lxe0PDo9S1
  427.  
  428. JAPANESE | ESUBS`
  429. }
  430.  
  431.  
  432.  
  433. // Add more movies here...
  434. ];
  435. const movieList = document.getElementById('movie-list');
  436. const searchBar = document.getElementById('search-bar');
  437. const platformFilter = document.getElementById('platform-filter');
  438. const yearFilter = document.getElementById('year-filter');
  439. const genreFilter = document.getElementById('genre-filter');
  440. const themeToggle = document.getElementById('theme-toggle');
  441. const inlineDonationButton = document.getElementById('inline-donation-button');
  442. const donationModal = document.getElementById('donation-modal');
  443. const movieModal = document.getElementById('movieModal');
  444. const closeButtons = document.querySelectorAll('.close');
  445.  
  446. function displayMovies(moviesToShow) {
  447. movieList.innerHTML = moviesToShow.map(movie => `
  448. <div class="movie-card" data-movie='${JSON.stringify(movie)}'>
  449. <img src="${movie.image}"
  450. alt="${movie.title}"
  451. loading="lazy"
  452. onerror="this.onerror=null; this.src='https://via.placeholder.com/300x450?text=Image+Not+Available';">
  453. <div class="movie-info">
  454. <div class="movie-title">${movie.title}</div>
  455. <div class="movie-year">${movie.year}</div>
  456. <div class="movie-platform">${movie.platform}</div>
  457. <div class="movie-genre">${movie.genre}</div>
  458. </div>
  459. </div>
  460. `).join('');
  461.  
  462. document.querySelectorAll('.movie-card').forEach(card => {
  463. card.addEventListener('click', () => showMovieDetails(JSON.parse(card.dataset.movie)));
  464. });
  465. }
  466.  
  467. function showMovieDetails(movie) {
  468. const modalBody = movieModal.querySelector('.modal-body');
  469.  
  470. // Function to convert URLs to clickable links
  471. function linkify(text) {
  472. const urlRegex = /(https?:\/\/[^\s]+)/g;
  473. return text.replace(urlRegex, function (url) {
  474. return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
  475. });
  476. }
  477.  
  478. modalBody.innerHTML = `
  479. <div class="modal-poster">
  480. <img src="${movie.image}" alt="${movie.title}" style="width: 100%;" onerror="this.onerror=null; this.src='https://via.placeholder.com/300x450?text=Image+Not+Available';">
  481. </div>
  482. <div class="modal-info">
  483. <h2>${movie.title}</h2>
  484. <p>Year: ${movie.year}</p>
  485. <p>Platform: ${movie.platform}</p>
  486. <p>Genre: ${movie.genre}</p>
  487. <div class="movie-links">
  488. <h3>Download Links:</h3>
  489. <pre>${movie.downloadInfo ? linkify(movie.downloadInfo) : 'No download information available.'}</pre>
  490. </div>
  491. </div>
  492. `;
  493. movieModal.style.display = 'block';
  494. }
  495.  
  496. function populateFilters() {
  497. const platforms = [...new Set(movies.map(movie => movie.platform))];
  498. const years = [...new Set(movies.map(movie => movie.year))].sort((a, b) => b - a);
  499. const genres = [...new Set(movies.flatMap(movie => movie.genre.split(', ')))];
  500.  
  501. [
  502. { element: platformFilter, options: platforms },
  503. { element: yearFilter, options: years },
  504. { element: genreFilter, options: genres }
  505. ].forEach(({ element, options }) => {
  506. element.innerHTML += options.map(option => `<option value="${option}">${option}</option>`).join('');
  507. });
  508. }
  509.  
  510. function filterMovies() {
  511. const searchString = searchBar.value.toLowerCase();
  512. const platform = platformFilter.value;
  513. const year = yearFilter.value;
  514. const genre = genreFilter.value;
  515.  
  516. return movies.filter(movie =>
  517. (movie.title.toLowerCase().includes(searchString) ||
  518. movie.year.toString().includes(searchString) ||
  519. movie.platform.toLowerCase().includes(searchString) ||
  520. movie.genre.toLowerCase().includes(searchString)) &&
  521. (platform === '' || movie.platform === platform) &&
  522. (year === '' || movie.year.toString() === year) &&
  523. (genre === '' || movie.genre.includes(genre))
  524. );
  525. }
  526.  
  527. function debounce(func, wait) {
  528. let timeout;
  529. return function executedFunction(...args) {
  530. const later = () => {
  531. clearTimeout(timeout);
  532. func(...args);
  533. };
  534. clearTimeout(timeout);
  535. timeout = setTimeout(later, wait);
  536. };
  537. }
  538.  
  539. const debouncedFilter = debounce(() => displayMovies(filterMovies()), 300);
  540.  
  541. [searchBar, platformFilter, yearFilter, genreFilter].forEach(element => {
  542. element.addEventListener('input', debouncedFilter);
  543. });
  544.  
  545. themeToggle.addEventListener('click', () => document.body.classList.toggle('light-mode'));
  546.  
  547. inlineDonationButton.onclick = () => donationModal.style.display = "block";
  548.  
  549. closeButtons.forEach(button => {
  550. button.onclick = () => {
  551. donationModal.style.display = "none";
  552. movieModal.style.display = "none";
  553. };
  554. });
  555.  
  556. window.onclick = (event) => {
  557. if (event.target === donationModal || event.target === movieModal) {
  558. donationModal.style.display = "none";
  559. movieModal.style.display = "none";
  560. }
  561. };
  562.  
  563. // Initialize the page
  564. populateFilters();
  565. displayMovies(movies);
  566. </script>
  567. </body>
  568.  
  569. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!