Skip to content

Commit

Permalink
Minor changes, added About Section.
Browse files Browse the repository at this point in the history
  • Loading branch information
@anuran-roy
anuran-roy committed Jul 9, 2021
1 parent f2bcc88 commit 81ac585
Show file tree
Hide file tree
Showing 2 changed files with 178 additions and 166 deletions.
312 changes: 174 additions & 138 deletions templates/OpnEco/about.html
View file
Original file line number Diff line number Diff line change
@@ -1,150 +1,186 @@

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Playfair+Display:wght@600&display=swap" rel="stylesheet">

</head>
<body>

<style>
li a {
color: green;
}
body {
background-color:#111;
color:white;
font-family: Tahoma, Geneva, Verdana, sans-serif;
/* no-repeat !important; */
}

/* #text{

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Playfair+Display:wght@600&display=swap"
rel="stylesheet">

</head>

<body>

<style>
li a {
color: green;
}

body {
background-color: #111;
color: white;
font-family: Tahoma, Geneva, Verdana, sans-serif;
/* no-repeat !important; */
}

/* #text{
width: 70%;
align-items: center;
} */
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
font-weight:550;
}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #04AA6D;
color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<div class="topnav" id="myTopnav">
<a href="../">Home</a>
<a href="../emo/">OpnEmo</a>
<a href="../insights">OpnInsights</a>
<a href="../keywords/">OpnKeywords</a>
<a href="../settings/">Settings</a>
<a href="" class="active">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<br>
<h1 align="center" style="padding:3%;color:#04AA6D; font-family: 'Bona Nova', serif;">Coming soon... </h1>
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
font-weight: 550;
}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #04AA6D;
color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}

.topnav a.icon {
float: right;
display: block;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}

.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}

.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<div class="topnav" id="myTopnav">
<a href="../">Home</a>
<a href="../emo/">OpnEmo</a>
<a href="../insights">OpnInsights</a>
<a href="../keywords/">OpnKeywords</a>
<a href="../settings/">Settings</a>
<a href="" class="active">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- <br> -->
<h1 align="center" style="padding:3%;color:#04AA6D; font-family: 'Bona Nova', serif;">About</h1>
<div style="margin-left: 50px; margin-right: 50px;">
<h2>What is OpnEco?</h2>
<br>
<b>"Ah, if only I could get someone to read this for feedback."</b><br>
<b>"Only if I could know which keywords to target..."</b><br>
<br>
We all have been there, haven't we?<br>
<br>
OpnEco is a Python3 project developed just for that. To be a constant companion throughout your content writing
process. By content writers, for content writers.<br><br>

<h2>Salient features:</h2><br>
<ul>
<li>Hassle-free installation</li>
<li>Can work without Internet (some modules need them though.)</li>
</ul>
<br>

<!-- <div class="container">
<h2 align="center"><b>Analyzed Text:</b></h2>
<img src="../../../generated/images/emotion.jpg" class="img-fluid" alt="emotion-summary" id="emotion-img">
<br>
<label for="emotion-img">Emotional Analysis Summary</label>
<br>
<img src="../../../generated/images/emotions-line.jpg" class="img-fluid" alt="emotion-sentencewise-line" id="emotions-line-img">
<br>
<label for="emotions-line-img">Sentence-wise tone (line plot)</label>
<br>
<img src="../../../generated/images/emotions-scatter.jpg" class="img-fluid" alt="emotion-sentencewise-scatter" id="emotions-scatter-img">
<br>
<label for="emotions-scatter-img">Sentence-wise tone (scatter plot)</label>
<br>
</div> -->
<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script>
<h2>Installation and usage:</h2>
<br>
OpnEco doesn't require any installation. You can simply download, resolve its dependencies, and use it. But ensure
that you have a proper Internet connection and Python installed and properly configured. Windows users may need to
check if Python is added to the <code>PATH</code> environment variable in their systems.
<br><br>
Steps:
<ol start="0">
<li>Download this project code and open the top-level directory.</li>
<li>Install the Python dependencies using <code>pip install -r requirements.txt</code> (or
<code>pip3 install -r requirements.txt</code> if you have two versions of Python installed.)</li>
<li>Run <code>init.py</code> using <code>python init.py</code> (or <code>python3 init.py</code> if you have two
versions of Python installed.)</li>
<li>Run <code>manage.py</code> using <code>python manage.py runserver</code> (or
<code>python3 manage.py runserver</code> if you have two versions of Python installed.)</li>
</ol>
<br>
<br>
<p align="center" style="font-size: 20px;">Made by <a href="https://github.com/anuran-roy">Anuran</a> and <a
href="https://github.com/tishachawla-jg">Tisha</a> with &#x1F499;</p>
</div>


<!-- Option 1: Bootstrap Bundle with Popper -->
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->

</body>
</body>

</html>
32 changes: 4 additions & 28 deletions templates/OpnEmo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,35 +111,17 @@ <h1 align="center" style="padding:3%;color:#04AA6D;font-family: 'Bona Nova', ser
<div class="form-floating">
<form action='results/' method='POST'> {% csrf_token %}
<div class="form-floating mb-3">
<!-- <input type="text" class="form-control" id="floatingInput" placeholder="Enter your text to analyze">
<label for="floatingInput">Text:</label> -->
<!-- <br> -->
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" name="toAnalyze" style="height:400px; width: 100%; border-radius:0%;background-color: #303030;color:white"></textarea>
<label for="floatingTextarea2">Enter the terms:</label>
<br>
<br>
<center><button type="submit" class="btn btn-outline-success" style="width:200px;height:80px;font-size:x-large;">Submit</button></center>
</div>
</form>
</div>
<!-- <div class="container">
<h2 align="center"><b>Analyzed Text:</b></h2>
<img src="../../../generated/images/emotion.jpg" class="img-fluid" alt="emotion-summary" id="emotion-img">
<br>
<label for="emotion-img">Emotional Analysis Summary</label>
<br>
<img src="../../../generated/images/emotions-line.jpg" class="img-fluid" alt="emotion-sentencewise-line" id="emotions-line-img">
<br>
<label for="emotions-line-img">Sentence-wise tone (line plot)</label>
<br>
<img src="../../../generated/images/emotions-scatter.jpg" class="img-fluid" alt="emotion-sentencewise-scatter" id="emotions-scatter-img">
<br>
<label for="emotions-scatter-img">Sentence-wise tone (scatter plot)</label>
<br>
</div> -->
<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<br>
<!-- <p align="center" style="font-size: 20px;">Made by <a href="https://github.com/anuran-roy">Anuran</a> and <a
href="https://github.com/tishachawla-jg">Tisha</a> with 💙</p> -->

<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
Expand All @@ -152,12 +134,6 @@ <h2 align="center"><b>Analyzed Text:</b></h2>
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->

</body>

Expand Down

0 comments on commit 81ac585

Please sign in to comment.