AdNarayan/Sentiment-Analysis
1
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta http-equiv="X-UA-Compatible" content="IE=edge">6 <link rel="icon" href="/data/favicon.ico" type="image/vnd.microsoft.icon">7 <meta name="viewport" content="width=device-width, initial-scale=1.0">8 <title>Sentiment Analyzer</title>9 <style>10 @font-face {11 font-family: 'HPSimplified';12 src: url('/data/HPSimplified.ttf') format('truetype');13 font-weight: normal;14 font-style: normal;15 }16 ::-webkit-scrollbar {17 width: 0.6vw;18 }19 ::-webkit-scrollbar-track {20 background: #0000;21 }22 ::-webkit-scrollbar-thumb {23 background: #eee;24 border-radius: 0.5vw;25 }26 ::-webkit-scrollbar-thumb:hover {27 background: #999;28 }29 body {30 font-family: Arial, sans-serif;31 background-size: cover;32 background-attachment: fixed;33 background-color: #000;34 margin: 0;35 padding: 0;36 overflow: hidden;37 font-family: 'HPSimplified';38 color: white;39 }40 .bg {41 position: fixed;42 bottom: 0;43 left: 50%;44 transform: translate(-50%);45 height: 100vh;46 width: 100vw;47 z-index: -1;48 opacity: 0.2;49 object-fit: cover;50 }51 a {52 text-decoration: none;53 color: white;54 }55 .header {56 background-color: #111b;57 border-bottom: white solid 0.4vh;58 height: 10vh;59 padding: 2vh;60 text-align: left;61 display: flex;62 font-size: 6vh;63 font-weight: bold;64 }65 .header > span {66 margin: auto 0;67 }68 .header > span:hover {69 text-decoration: underline;70 }71 #search-form {72 display: block;73 right: 0;74 position: absolute;75 margin: auto 1vw;76 }77 #search-form > input {78 width: 30vw;79 border: initial;80 background-color: #000;81 color:white;82 height: 6vh;83 font-size: 2vh;84 border-radius: 0.5vw;85 margin-right: 1vh;86 padding-left: 2vh;87 }88 #search-form > button {89 height: 6vh;90 font-size: 2vh;91 width: 11vh;92 border: initial;93 border-radius: 0.5vw;94 background-color: #000;95 color: white;96 }97 98 #search-form > input:hover {99 background-color: #111;100 }101 102 #search-form > button:hover {103 background-color: #111;104 cursor: pointer;105 }106 input, button {107 font-family: 'HPSimplified';108 }109 #search-results {110 overflow-y: scroll;111 overflow-wrap: break-word;112 max-height: 70vh;113 width: 90vw;114 background-color: #222;115 padding: 1vw;116 position: relative;117 margin-top: 3vh;118 left: 50%;119 transform: translate(-50%);120 border-radius: 1vw;121 }122 ul {123 padding: 0%;124 }125 .search-list {126 list-style-type: none;127 background-color: #000;128 padding: 10px;129 border-radius: 5px;130 margin-bottom: 10px;131 cursor: pointer;132 }133 134 .search-list:hover {135 background-color: #111;136 }137 #no-links-form {138 display: none;139 text-align: center;140 padding: 20px;141 border-radius: 5px;142 margin-top: 20px;143 }144 145 #no-links-form > label {146 color: white;147 margin-right: 10px;148 }149 150 #no-links-form > input {151 width: 60%;152 padding: 10px;153 border: none;154 border-radius: 5px;155 background-color: #222; 156 color: white;157 margin: 10px;158 }159 160 #no-links-form > input:hover {161 background-color: #111;162 }163 #no-links-form > button {164 padding: 10px 20px;165 border: none;166 border-radius: 5px;167 background-color: #222;168 color: white;169 cursor: pointer;170 margin: 10px;171 }172 173 #no-links-form > button:hover {174 background-color: #111;175 }176 .logo{177 position: fixed;178 bottom: 0;179 right: 0;180 width: -moz-fit-content;181 width: fit-content;182 margin: 1vw;183 font-size: 0.5em184 }185 .logo > img {186 height: 4.53vh;187 }188 #loading {189 position: fixed; 190 top: 0; 191 left: 0; 192 height: 100vh;193 width: 100vw;194 background-color: #000a;195 backdrop-filter: blur(8px);196 -webkit-backdrop-filter: blur(8px);197 z-index: 2;198 display: none;199 }200 #loading > img {201 position: absolute;202 top: 50%;203 left: 50%;204 transform: translate(-50%, -50%);205 max-height: 90vh;206 max-width: 90vw;207 z-index: 3;208 }209 @media screen and (orientation: portrait) {210 .header {211 font-size: 10vw;212 text-align: center;213 display: block;214 height: 25vw;215 }216 #search-form {217 position: relative;218 margin: auto;219 }220 #search-form > input {221 width: 40vw;222 height: 8vw;223 font-size: 2.67vw;224 }225 #search-form > button {226 height: 8vw;227 width: 16vw;228 font-size: 2.67vw;229 }230 main {231 font-size: 3vw;232 }233 #search-results {234 margin-top: 3vw;235 max-height: calc(93vh - 25vw - 4vw - 5vw);236 }237 .search-list {238 padding: 2vw;239 border-radius: 1vw;240 margin-bottom: 2vw;241 }242 .logo > img {243 height: 5vw;244 }245 #no-links-form > input {246 padding: 2vw;247 border-radius: 1vw;248 margin: 2vw;249 font-size: 3.8vw;250 }251 #no-links-form > button {252 padding: 2vw 4vw;253 border-radius: 1vw;254 margin: 2vw;255 font-size: 3.8vw;256 }257 }258 </style>259</head>260<body>261 <img src="../data/bg.png" class="bg">262 <div class="header">263 <span><a href="/">Sentiment Analyzer</a></span>264 <form id="search-form">265 <input type="text" id="search-input" name="search-input" required placeholder="Search for a Movie/Show">266 <button type="submit">Search</button>267 </form>268 </div>269 <main>270 <div id="search-results"></div>271 <form id="no-links-form" onsubmit="submitManualLink(event)">272 <label for="manual-link">{{Err}}, please enter the link to main page of movie from rotten tomatoes manually:</label><br>273 <input type="text" id="manual-link" name="manual-link" required>274 <button type="submit">Submit</button>275 </form>276 <a href="https://www.rottentomatoes.com">277 <div class="logo">278 <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">279 </div>280 </a>281 </main>282 <div id="loading">283 <img src="">284 </div>285 286 <script>287 document.onload = load()288 function load(){289 const query = new URLSearchParams(window.location.search).get('query')290 const links = {{ links|tojson|safe }};291 if (links.length === 0) {292 document.getElementById('no-links-form').style.display = 'block';293 document.getElementById('search-results').style.display = 'none';294 } else {295 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('')296 const msg = "<span style='font-size: 1.5em'>Please select the correct link from search results: </span><br>"297 const finalString = msg+`<ul>${linksString}</ul>`298 document.getElementById('search-results').innerHTML = finalString;299 }300 }301 document.querySelectorAll('.search-list').forEach(list => {302 list.addEventListener('click', ()=>{303 document.querySelector('#loading > img').src = "../data/search.gif"304 document.getElementById('loading').style.display = 'block';305 })306 })307 document.getElementById('search-form').addEventListener('submit', (event) => {308 event.preventDefault();309 let query = document.getElementById('search-input').value;310 let redirectURL = '/search?query=' + encodeURIComponent(query);311 window.location.href = redirectURL;312 });313 function submitManualLink(event) {314 event.preventDefault()315 document.querySelector('#loading > img').src = "../data/search.gif"316 document.getElementById('loading').style.display = 'block';317 const manualLink = document.getElementById('manual-link').value;318 if (manualLink.trim() !== '') {319 if(!manualLink.startsWith('https://www.rottentomatoes.com/')){320 alert( "Please enter a valid link from rotten tomatoes starting with https://www.rottentomatoes.com/")321 document.getElementById('manualLink').value = ""322 } else {323 window.location.href = '/review?url=' + encodeURIComponent(manualLink);324 }325 }326 }327 </script>328</body>329</html>330