feat: Add bootstrap UI

Gowtham1729 · Dec 13, 2023 · 573b6e8 · 573b6e8
1 parent 19e4995
commit 573b6e8
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 25 deletions.
diff --git a/applications/backend/django_server/django_server/settings.py b/applications/backend/django_server/django_server/settings.py
@@ -38,10 +38,10 @@
 SECRET_KEY = DJANGO_SECRET_KEY
 
 # SECURITY WARNING: don't run with debug turned on in production!
-if ENV != "local":
-    DEBUG = False
-else:
-    DEBUG = True
+# if ENV != "local":
+#     DEBUG = False
+# else:
+DEBUG = True
 
 # FORCE_SCRIPT_NAME = "/api"
 ALLOWED_HOSTS = ["*"]

diff --git a/applications/backend/django_server/news/templates/base.html b/applications/backend/django_server/news/templates/base.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Folio Feed</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/>
+    <style>
+        .bd-placeholder-img {
+            font-size: 1.125rem;
+            text-anchor: middle;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+        }
+
+        @media (min-width: 768px) {
+            .bd-placeholder-img-lg {
+                font-size: 3.5rem;
+            }
+        }
+
+        .b-example-divider {
+            height: 3rem;
+            background-color: rgba(0, 0, 0, .1);
+            border: solid rgba(0, 0, 0, .15);
+            border-width: 1px 0;
+            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+        }
+
+        .b-example-vr {
+            flex-shrink: 0;
+            width: 1.5rem;
+            height: 100vh;
+        }
+
+        .bi {
+            vertical-align: -.125em;
+            fill: currentColor;
+        }
+
+        .nav-scroller {
+            position: relative;
+            z-index: 2;
+            height: 2.75rem;
+            overflow-y: hidden;
+        }
+
+        .nav-scroller .nav {
+            display: flex;
+            flex-wrap: nowrap;
+            padding-bottom: 1rem;
+            margin-top: -1px;
+            overflow-x: auto;
+            text-align: center;
+            white-space: nowrap;
+            -webkit-overflow-scrolling: touch;
+        }
+    </style>
+</head>
+<body>
+<header>
+    <div class="collapse bg-dark" id="navbarHeader">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-8 col-md-7 py-4">
+                    <h4 class="text-white">Folio Feed</h4>
+                    <p class="text-white">Read news of your favorite stocks, currencies, crypto, mutual funds and many
+                        others</p>
+                </div>
+                <div class="col-sm-4 offset-md-1 py-4">
+                    <h4 class="text-white">Contact</h4>
+                    <ul class="list-unstyled">
+                        <li><a href="https://www.linkedin.com/in/gowtham-chitipolu/" class="text-white">Linkedin</a>
+                        </li>
+                        <li><a href="https://github.com/Gowtham1729" class="text-white">Github</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="navbar fixed-top navbar-dark bg-dark shadow-sm">
+        <div class="container">
+            <a href="#" class="navbar-brand d-flex align-items-center">
+                <span class="material-symbols-outlined">newspaper</span>
+                <strong>Folio Feed</strong>
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
+                    aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        </div>
+    </div>
+</header>
+{% block content %}
+{% endblock %}
+<footer class="text-muted py-5">
+    <div class="container">
+        <p class="float-end mb-1">
+            <a href="#">Back to top</a>
+        </p>
+        <p class="mb-1">Folio Feed is made with &copy; Bootstrap</p>
+    </div>
+</footer>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+        crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/applications/backend/django_server/news/templates/home.html b/applications/backend/django_server/news/templates/home.html
@@ -1,9 +1,6 @@
-<!DOCTYPE html>
-<html lang="">
-<head>
-    <title>Folio Feed</title>
-</head>
-<body>
+{% extends 'base.html' %}
+
+{% block content %}
 <h1>Folio Feed</h1>
 
 <p>Your Tickers:</p>
@@ -29,5 +26,5 @@ <h2><a href="{% url 'news' analysis.symbol date %}">{{ analysis.symbol }}</a></h
 <p>Number of Neutral Articles: {{ analysis.neutral_news }}</p>
 <p> Need Attention: {{analysis.need_attention}}</p>
 {% endfor %}
-</body>
-</html>
+
+{% endblock %}
diff --git a/applications/backend/django_server/news/templates/news.html b/applications/backend/django_server/news/templates/news.html
@@ -1,11 +1,37 @@
-<h1>{{symbol}} on {{date}}</h1>
-
-{% for item in news %}
-<h2>{{item.headline}}</h2>
-<img src="{{item.img_src_url}}"/>
-<p>{{item.summary}}</p>
-<p>Source: <a href="{{item.src_url}}" target="_blank">{{item.src}}</a></p>
-<p>Sentiment: {{item.sentiment}}</p>
-<p>Need Attention: {{item.need_attention}}</p>
-<p>Why ? {{item.reason}}</p>
-{% endfor %}
+{% extends "base.html" %}
+
+{% block content %}
+    <section class="py-5 text-center container">
+        <div class="row py-lg-5">
+            <div class="col-lg-6 col-md-8 mx-auto">
+                <h1 class="fw-light">{{date}}: {{symbol}}</h1>
+                <p class="lead text-muted"></p>
+            </div>
+        </div>
+    </section>
+
+    <div class="album py-5 bg-light">
+        <div class="container">
+            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+                {% for item in news %}
+                    <div class="col">
+                        <div class="card shadow-sm btn-group" role="button" onclick="window.open('{{ item.src_url }}')">
+
+                            <img class="bd-placeholder-img card-img-top" width="100%" height="225"
+                                 src="{{ item.img_src_url }}" alt="{{ item.headline }}"/>
+
+                            <div class="card-body">
+                                <p class="card-text">{{ item.summary }}</p>
+                                <div class="d-flex mb-lg-2 justify-content-between align-items-center">
+                                    <small class="text-muted ">- {{ item.src }}</small>
+                                    <small class="text-muted"> {{ item.publish_time }} </small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/applications/backend/django_server/news/urls.py b/applications/backend/django_server/news/urls.py
@@ -11,6 +11,6 @@
 urlpatterns = [
     # path("", views.index, name="main_index"),
     path("api/", include(router.urls)),
-    path("home", views.home, name="home"),
-    path("news/<str:symbol>/<str:date>", views.news, name="news"),
+    path("", views.home, name="home"),
+    path("<str:symbol>/<str:date>", views.news, name="news"),
 ]