Spaces:

Faizan15
/

movies_Analysis

Runtime error

App Files Files Community

Faizan15 commited on Jan 8

Commit

424219c

•

1 Parent(s): 322c296

Create search.html

Browse files

Files changed (1) hide show

search.html +324 -0

search.html ADDED Viewed

	@@ -0,0 +1,324 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="icon" href="/data/favicon.ico" type="image/vnd.microsoft.icon">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sentiment Analyzer</title>
+    <style>
+      @font-face {
+          font-family: 'HPSimplified';
+          src: url('/data/HPSimplified.ttf') format('truetype');
+          font-weight: normal;
+          font-style: normal;
+      }
+         ::-webkit-scrollbar {
+        width: 0.6vw;
+        }
+        ::-webkit-scrollbar-track {
+        background: #0000;
+        }
+        ::-webkit-scrollbar-thumb {
+        background: #eee;
+        border-radius: 0.5vw;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+        background: #999;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            background-size: cover;
+            background-attachment: fixed;
+            background-color: #000;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: 'HPSimplified';
+            color: white;
+        }
+        .bg {
+            position: fixed;
+            bottom: 0;
+            left: 50%;
+            transform: translate(-50%);
+            height: 100vh;
+            width: 100vw;
+            z-index: -1;
+            opacity: 0.2;
+            object-fit: cover;
+        }
+        a {
+            text-decoration: none;
+            color: white;
+        }
+        .header {
+            background-color: #111b;
+            border-bottom: white solid 0.4vh;
+            height: 10vh;
+            padding: 2vh;
+            text-align: left;
+            display: flex;
+            font-size: 6vh;
+            font-weight: bold;
+        }
+        .header > span {
+            margin: auto 0;
+        }
+        .header > span:hover {
+            text-decoration: underline;
+        }
+        #search-form {
+            display: block;
+            right: 0;
+            position: absolute;
+            margin: auto 1vw;
+        }
+        #search-form > input {
+            width: 30vw;
+            border: initial;
+            background-color: #000;
+            color:white;
+            height: 6vh;
+            font-size: 2vh;
+            border-radius: 0.5vw;
+            margin-right: 1vh;
+            padding-left: 2vh;
+        }
+        #search-form > button {
+            height: 6vh;
+            font-size: 2vh;
+            width: 11vh;
+            border: initial;
+            border-radius: 0.5vw;
+            background-color: #000;
+            color: white;
+        }
+        #search-form > input:hover {
+            background-color: #111;
+        }
+        #search-form > button:hover {
+            background-color: #111;
+            cursor: pointer;
+        }
+        input, button {
+            font-family: 'HPSimplified';
+        }
+        #search-results {
+            overflow-y: scroll;
+            overflow-wrap: break-word;
+            max-height: 70vh;
+            width: 90vw;
+            background-color: #222;
+            padding: 1vw;
+            position: relative;
+            margin-top: 3vh;
+            left: 50%;
+            transform: translate(-50%);
+            border-radius: 1vw;
+        }
+        ul {
+            padding: 0%;
+        }
+        .search-list {
+            list-style-type: none;
+            background-color: #000;
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 10px;
+            cursor: pointer;
+        }
+        .search-list:hover {
+            background-color: #111;
+        }
+        #no-links-form {
+            display: none;
+            text-align: center;
+            padding: 20px;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+        #no-links-form > label {
+            color: white;
+            margin-right: 10px;
+        }
+        #no-links-form > input {
+            width: 60%;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            background-color: #222;
+            color: white;
+            margin: 10px;
+        }
+        #no-links-form > input:hover {
+            background-color: #111;
+        }
+        #no-links-form > button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            background-color: #222;
+            color: white;
+            cursor: pointer;
+            margin: 10px;
+        }
+        #no-links-form > button:hover {
+            background-color: #111;
+        }
+      .logo{
+          position: fixed;
+          bottom: 0;
+          right: 0;
+          width: -moz-fit-content;
+          width: fit-content;
+          margin: 1vw;
+          font-size: 0.5em
+      }
+      .logo > img {
+          height: 4.53vh;
+      }
+      #loading {
+          position: fixed;
+          top: 0;
+          left: 0;
+          height: 100vh;
+          width: 100vw;
+          background-color: #000a;
+          backdrop-filter: blur(8px);
+          -webkit-backdrop-filter: blur(8px);
+          z-index: 2;
+          display: none;
+      }
+      #loading > img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          max-height: 90vh;
+          max-width: 90vw;
+          z-index: 3;
+      }
+      @media screen and (orientation: portrait) {
+        .header {
+          font-size: 10vw;
+          text-align: center;
+          display: block;
+          height: 25vw;
+        }
+        #search-form {
+          position: relative;
+          margin: auto;
+        }
+        #search-form > input {
+          width: 40vw;
+          height: 8vw;
+          font-size: 2.67vw;
+        }
+        #search-form > button {
+          height: 8vw;
+          width: 16vw;
+          font-size: 2.67vw;
+        }
+        main {
+            font-size: 3vw;
+        }
+        #search-results {
+            margin-top: 3vw;
+            max-height: calc(93vh - 25vw - 4vw - 5vw);
+        }
+        .search-list {
+            padding: 2vw;
+            border-radius: 1vw;
+            margin-bottom: 2vw;
+        }
+        .logo > img {
+            height: 5vw;
+        }
+        #no-links-form > input {
+            padding: 2vw;
+            border-radius: 1vw;
+            margin: 2vw;
+            font-size: 3.8vw;
+        }
+        #no-links-form > button {
+            padding: 2vw 4vw;
+            border-radius: 1vw;
+            margin: 2vw;
+            font-size: 3.8vw;
+        }
+      }
+    </style>
+</head>
+<body>
+    <img src="../data/bg.png" class="bg">
+    <div class="header">
+        <span><a href="/">Sentiment Analyzer</a></span>
+        <form id="search-form">
+            <input type="text" id="search-input" name="search-input" required placeholder="Search for a Movie/Show">
+            <button type="submit">Search</button>
+        </form>
+    </div>
+    <main>
+        <div id="search-results"></div>
+        <form id="no-links-form" onsubmit="submitManualLink(event)">
+            <label for="manual-link">{{Err}}, please enter the link to main page of movie from rotten tomatoes manually:</label><br>
+            <input type="text" id="manual-link" name="manual-link" required>
+            <button type="submit">Submit</button>
+        </form>
+        <a href="https://www.rottentomatoes.com">
+        <div class="logo">
+            <span>Powered by: </span> <img src="https://images.fandango.com/cms/assets/2d5a3340-be84-11ed-9d20-83ee649e98bd--rt25-logo-mainnav-161x50.svg" alt="Rotten tomatoes logo">
+        </div>
+        </a>
+    </main>
+  <div id="loading">
+      <img src="">
+  </div>
+    <script>
+        document.onload = load()
+        function load(){
+            const query = new URLSearchParams(window.location.search).get('query')
+            const links = {{ links|tojson|safe }};
+            if (links.length === 0) {
+                document.getElementById('no-links-form').style.display = 'block';
+                document.getElementById('search-results').style.display = 'none';
+            } else {
+                const linksString = links.map(obj => Object.entries(obj).map(([key, value]) => `<a href="/review?url=${encodeURIComponent(value)}"><li class="search-list"><span style="font-size:1.5em">${key}</span><br><span style="color:#2168ff" class="url">${value}</span></li>`).join('')).join('')
+                const msg = "<span style='font-size: 1.5em'>Please select the correct link from search results: </span><br>"
+                const finalString = msg+`<ul>${linksString}</ul>`
+                document.getElementById('search-results').innerHTML = finalString;
+            }
+        }
+      document.querySelectorAll('.search-list').forEach(list => {
+          list.addEventListener('click', ()=>{
+              document.querySelector('#loading > img').src = "../data/search.gif"
+              document.getElementById('loading').style.display = 'block';
+          })
+      })
+        document.getElementById('search-form').addEventListener('submit', (event) => {
+             event.preventDefault();
+             let query = document.getElementById('search-input').value;
+             let redirectURL = '/search?query=' + encodeURIComponent(query);
+             window.location.href = redirectURL;
+         });
+         function submitManualLink(event) {
+            event.preventDefault()
+           document.querySelector('#loading > img').src = "../data/search.gif"
+           document.getElementById('loading').style.display = 'block';
+            const manualLink = document.getElementById('manual-link').value;
+            if (manualLink.trim() !== '') {
+                if(!manualLink.startsWith('https://www.rottentomatoes.com/')){
+                    alert( "Please enter a valid link from rotten tomatoes starting with https://www.rottentomatoes.com/")
+                    document.getElementById('manualLink').value = ""
+                } else {
+                    window.location.href = '/review?url=' + encodeURIComponent(manualLink);
+                }
+            }
+        }
+    </script>
+</body>
+</html>