Spaces:
Running
Running
| <!-- | |
| @file index.html | |
| @description Main user interface structure for the Text Summarizer application. | |
| Defines the layout for text usage, URL inputs, and results display. | |
| @author Amey Thakur <https://github.com/Amey-Thakur> | |
| @author Mega Satish <https://github.com/msatmod> | |
| @created 2022-08-09 | |
| @repository https://github.com/Amey-Thakur/TEXT-SUMMARIZER | |
| @license MIT | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>TEXT SUMMARIZER</title> | |
| <!-- Typography and Framework Styles --> | |
| <link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet"> | |
| <link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" /> | |
| <link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" /> | |
| <!-- Icon Libraries --> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" | |
| integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/unicons.css" /> | |
| </head> | |
| <body> | |
| <!-- Security Protection --> | |
| <div id="securityOverlay" | |
| style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.95); z-index: 9999; justify-content: center; align-items: center; flex-direction: column;"> | |
| <div style="color: #ff3333; font-size: 60px; margin-bottom: 20px;">🛡️</div> | |
| <h1 | |
| style="color: #ffffff; font-family: 'Segoe UI'; text-transform: uppercase; letter-spacing: 3px; font-size: 24px; margin-bottom: 15px;"> | |
| Unauthorized Action Detected</h1> | |
| <p | |
| style="color: #888; font-family: 'Segoe UI'; margin-bottom: 30px; text-align: center; max-width: 500px; line-height: 1.6;"> | |
| This project is protected by academic integrity protocols.<br> | |
| Direct access to source code or developer tools is restricted. | |
| </p> | |
| <div style="color: #444; font-size: 12px; margin-bottom: 30px; letter-spacing: 2px;"> | |
| AMEY THAKUR · MEGA SATISH | |
| </div> | |
| <button id="dismissSecurity" | |
| style="background: transparent; border: 1px solid #ff3333; color: #ff3333; padding: 10px 30px; cursor: pointer; transition: all 0.3s;"> | |
| DISMISS | |
| </button> | |
| </div> | |
| <!-- Global Page Stylings for Theme Consistency --> | |
| <style> | |
| body { | |
| background-color: rgb(0, 0, 0); | |
| font-family: Play; | |
| } | |
| .flex-parent { | |
| display: flex; | |
| } | |
| .jc-center { | |
| justify-content: center; | |
| } | |
| footer { | |
| text-align: center; | |
| text-shadow: black; | |
| padding: 3px; | |
| color: whitesmoke; | |
| } | |
| </style> | |
| <!-- Navigation Bar: Fixed positioning for persistent user access --> | |
| <div class="navbar-fixed"> | |
| <nav class="grey darken-4" role="navigation"> | |
| <div class="nav-wrapper container"> | |
| <a id="logo-container" href="#" class="brand-logo">TEXT SUMMARIZER</a> | |
| <!-- Desktop Navigation Menu --> | |
| <ul class="right hide-on-med-and-down"> | |
| <li><a href="{{url_for('index')}}">HOME</a></li> | |
| <li><a href="{{url_for('compare_summary')}}">COMPARE</a></li> | |
| <li><a href="#aboutapp">ABOUT US</a></li> | |
| </ul> | |
| <a href="#" data-target="nav-mobile" class="sidenav-trigger">MENU</a> | |
| </div> | |
| </nav> | |
| </div> | |
| <ul id="nav-mobile" class="sidenav"> | |
| <li><a href="{{url_for('index')}}">HOME</a></li> | |
| <li><a href="{{url_for('compare_summary')}}">COMPARE</a></li> | |
| <li><a href="#contactme">ABOUT US</a></li> | |
| </ul> | |
| <!-- Main Input Section: URL and Raw Text Interfaces --> | |
| <div class="container"> | |
| <div class="section"> | |
| <!-- URL Input Block --> | |
| <div class="row"> | |
| <div class="input-field col s12 m10"> | |
| <div class="icon-block"> | |
| <h4 align="center" style="color: rgb(255, 255, 255);">LINK</h4> | |
| <form method="POST" action="/analyze_url"> | |
| <input type="text" name="raw_url" style="color: #ffffff;" placeholder="Paste your link here" | |
| required="true"> | |
| <div class="flex-parent jc-center"> | |
| <button type="reset" class="btn btn-small waves-effect waves-light red lighten-1">CLEAR</button> | |
| | |
| <button type="submit" | |
| class="btn btn-small waves-effect waves-light light-blue lighten-1">SUMMARIZE</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Raw Text Input Block --> | |
| <div class="row"> | |
| <div class="input-field col s12 m10"> | |
| <div class="icon-block"> | |
| <h4 align="center" style="color: rgb(255, 255, 255);">TEXT</h4> | |
| <form method="POST" action="/analyze"> | |
| <textarea name="rawtext" cols="10" rows="10" style="color: #ffffff;" class="form-control" required="true" | |
| placeholder="Enter your text here"></textarea> | |
| <br /> | |
| <div class="flex-parent jc-center"> | |
| <button type="reset" class="btn btn-small waves-effect waves-light red lighten-1">CLEAR</button> | |
| | |
| <button type="submit" | |
| class="btn btn-small waves-effect waves-light light-blue lighten-1">SUMMARIZE</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Display Section: Split View for Summary and Metrics --> | |
| <section class="section section-solutions-about #fafafa grey lighten-5"> | |
| <div class="container white-text"> | |
| <div class="row"> | |
| <!-- Generated Summary Output --> | |
| <div class="col s12 m6 grey darken-3"> | |
| <div class="icon-block"> | |
| <h4 align="center" style="color: rgb(255, 255, 255);">TEXT SUMMARY</h4> | |
| <div class="" role="alert"> | |
| <p style="color: rgb(255, 255, 255);">READING TIME: <span style="color:#1100ff;">{{ summary_reading_time | |
| }} MINUTES </span></p> | |
| </div> | |
| <p class="light">{{ final_summary }}</p> | |
| </div> | |
| </div> | |
| <!-- Original Text and Metrics --> | |
| <div class="col s12 m6"> | |
| <div class="icon-block"> | |
| <h4 align="center" style="color: rgb(0, 0, 0);">INPUT TEXT</h4> | |
| <p style="color: rgb(0, 0, 0);">READING TIME: <span style="color:#1100ff;">{{ final_reading_time }} MINUTES | |
| </span></p> | |
| <p class="light" style="color: #000000;">{{ctext}}</p> | |
| <div class="alert alert-info" role="alert"> | |
| <p style="color: rgb(0, 0, 0);">TIME ELAPSED: <span style="color:#ff0000;">{{ final_time }} MINUTES | |
| </span></p> | |
| <br /> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer and Author Attribution --> | |
| <footer class="page-footer grey darken-4"> | |
| <div class="container" id="aboutapp"> | |
| <div class="row"> | |
| <h5 class="white-text" align="center">ABOUT US</h5> | |
| <p class="grey-text text-lighten-4" align="center">👷 Project Authors: <a href="https://github.com/Amey-Thakur" | |
| style="color: rgb(255, 0, 0);" target="_blank">Amey Thakur</a> & <a href="https://github.com/msatmod " | |
| style="color: rgb(0, 0, 255);" target="_blank">Mega Satish</a></p> | |
| <p class="grey-text text-lighten-4" align="center"><a href="mailto:ameythakur20@gmail.com" | |
| style="color: greenyellow;" target="_blank">🔗 Queries? Get in touch </a><br></p> | |
| <p class="grey-text text-lighten-4" align="center"><a | |
| href="https://github.com/Amey-Thakur/TEXT-SUMMARIZER/pulls" style="color: greenyellow;" target="_blank">🔗 | |
| Interested in collaborating? Open a pull request </a< /p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="static/js/materialize.js"></script> | |
| <script src="static/js/init.js"></script> | |
| </body> | |
| </html> |