Merge pull request #16 from AmanSingh494/main

Fixed navbar scroll, faqs animation, footer links and their respective styles.

api/home/urls.py

@@ -1,13 +1,11 @@
 from django.contrib import admin
-from django.urls import path,include
+from django.urls import path, include
 from home import views
 
 urlpatterns = [
     path("", views.index, name="home"),
     path("faqs/", views.faqs, name="faqs"),
-
     path("popup_detect/", views.popup_detect, name="popup_detect"),
     path("report-dp/", views.reportDp, name="report-dp"),
-
+    path("about/", views.about, name="about"),
 ]
-

api/home/views.py

@@ -1,4 +1,4 @@
-from django.shortcuts import render,redirect
+from django.shortcuts import render, redirect
 from .popup_detect_ml import predict
 from django.http import JsonResponse
 from json import dump
@@ -8,27 +8,29 @@
 
 # Create your views here.
 
+
 def index(request):
     return render(request, "index.html")
 
+
 def faqs(request):
     return render(request, "faqs.html")
 
 
 def popup_detect(request):
     # img = data_url_to_image(request.GET.get('img', ''))
     # return JsonResponse(dump(predict(img)))
-
-    #get image data url
-    img = request.GET.get('img', '')
 
-    if(img == ""):
-        return JsonResponse({"error" : "data url empty"})
+    # get image data url
+    img = request.GET.get("img", "")
+
+    if img == "":
+        return JsonResponse({"error": "data url empty"})
 
-    #convert dataurl to PIL
-    img=data_url_to_image(img)
+    # convert dataurl to PIL
+    img = data_url_to_image(img)
 
-    #predict the result using trained ml algo
+    # predict the result using trained ml algo
     result = predict(img)
 
     # return the results
@@ -37,7 +39,7 @@ def popup_detect(request):
 
 def data_url_to_image(data_url):
     # Remove the header of the data URL
-    header, base64_str = data_url.split(',')
+    header, base64_str = data_url.split(",")
 
     # Decode the base64 string to bytes
     decoded_image = base64.b64decode(base64_str)
@@ -49,9 +51,11 @@ def data_url_to_image(data_url):
     img = Image.open(image_data)
 
     return img
-
+
+
 def reportDp(request):
     return render(request, "report.html")
 
+
 def about(request):
     return render(request, "about.html")

api/static/css/about.css

@@ -0,0 +1,12 @@
+* {
+  font-family: var(--font-secondary);
+}
+.content-section section {
+  display: flex;
+  align-items: center;
+  gap: 5rem;
+}
+.cogniguard-ss {
+  height: 30rem;
+  border: 1px solid var(--color-primary);
+}

api/static/css/faqs.css

@@ -1,3 +1,7 @@
+.content-section {
+  gap: 3rem;
+  margin: 4rem 2rem;
+}
 .faqs-heading {
   display: flex;
   flex-direction: column;
@@ -10,6 +14,9 @@
   align-items: center;
   gap: 2rem;
 }
+.faqs-section h1 {
+  font-weight: lighter;
+}
 .faqs {
   display: flex;
   gap: 4rem;
@@ -29,36 +36,31 @@
   padding: 0.5rem;
   display: flex;
   align-items: center;
-  /* border: 2px solid black; */
   border-radius: 10px;
   justify-content: space-between;
+  height: 3rem;
+  transition: 4s;
 }
 .faq-button {
   cursor: pointer;
   transform: rotate(90deg);
-  transition: rotate 0.3s ease-in-out;
+  transition: rotate 0.35s ease-in-out;
 }
 
 .faq-answer {
-  padding: 0.5rem;
-  opacity: 0;
-  display: none;
-  height: 0;
-  transform: translateY(-40px);
-  border: 2px solid black;
-  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out,
-    height 0.3s ease-in-out;
   border-radius: 10px;
-  z-index: -1;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+}
+.faq-ques-text {
+  text-align: center;
 }
 .rotate {
   transform: rotate(0deg);
 }
-.show {
-  display: inline-block;
-  opacity: 1;
-  height: auto;
-  visibility: visible;
-  transform: translateY(0);
-  z-index: 1;
+.hide.show {
+  display: block;
+  border: 2px solid black;
+  padding: 0.5rem;
 }

api/static/css/report.css

@@ -3,6 +3,7 @@
 }
 .content-section {
   gap: 3rem;
+  padding-left: 30rem;
 }
 .heading-section {
   display: flex;

api/static/css/style.css

@@ -10,8 +10,8 @@
   --color-primary-light: rgba(36, 87, 197, 0.3);
   --color-secondary: #469a3f;
   --font-ex-small: 0.4rem;
-  --font-small: 0.625rem;
-  --font-mid-medium: 1.25rem;
+  --font-small: 0.75rem;
+  --font-mid-medium: 1.5rem;
   --font-medium: 2rem;
   --font-mid-large: 2.5rem;
   --font-large: 3rem;
@@ -102,7 +102,7 @@ ul {
 .main-section {
   display: flex;
   align-items: flex-start;
-  
+
   /* gap: 2rem;
   padding: 0 2.87rem; */
 }
@@ -113,7 +113,7 @@ ul {
   align-items: center;
   margin: 6rem 2rem 2rem 4rem;
   gap: 8rem;
-  padding-left: 21rem;
+  padding-left: 20rem;
 }
 /* navbar */
 .navbar {
@@ -128,9 +128,9 @@ ul {
   border-radius: 1rem;
   gap: 2rem;
   position: fixed;
-  background: white;gap: 2rem;
+  background: white;
+  gap: 2rem;
   height: 558px;
-
 }
 .navbar__logo img {
   height: 5.75rem;
@@ -196,12 +196,13 @@ footer {
 .footer-links {
   display: flex;
   gap: 2rem;
+  margin-bottom: 0.5rem;
 }
 .footer-links img {
   height: 2.5rem !important;
 }
-.footer-design img {
-  height: 4rem;
+.footer-design i {
+  font-size: 2rem;
 }
 .footer-text {
   display: flex;
@@ -232,6 +233,9 @@ footer {
   display: flex;
   gap: 3rem;
 }
+.base-design {
+  width: 27rem;
+}
 /* speedometer */
 /* .gauge {
   position: relative;

api/static/js/app.js

@@ -1,36 +1,28 @@
-// function setSpeed(speed) {
-//   const needle = document.getElementById('needle')
-//   needle.style.transform = `rotate(${speed}deg)`
-// }
-// let transparencyScore = prompt('Enter transparency Score (0-100)')
-// // adjusting according to transparency score
-// if (transparencyScore >= 8) {
-//   setSpeed(270)
-// } else if (transparencyScore <= 4) {
-//   setSpeed(90)
-// } else {
-//   setSpeed(0)
-// }
-// animation
-const img = document.querySelector('.animate-img')
-const p = document.querySelector('.animate-p')
-console.log(img.getBoundingClientRect().top, img.offsetHeight)
-const animate = (element) => {
+const footer = document.querySelector('footer')
+const navbar = document.querySelector('.navbar')
+const contentScetion = document.querySelector('.content-section')
+let flag = true
+document.addEventListener('scroll', () => {
+  console.log(
+    window.scrollY,
+    window.innerHeight,
+    window.scrollY + window.innerHeight,
+    footer.offsetTop
+  )
   if (
-    window.scrollY >
-    element.getBoundingClientRect().top + element.offsetHeight
+    window.scrollY + window.innerHeight >= footer.offsetTop &&
+    flag === true
   ) {
-    element.classList.add('animate')
-  }
-  if (
-    window.scrollY <
-    element.getBoundingClientRect().top + element.offsetHeight + 100
+    navbar.style.position = 'absolute'
+    navbar.style.top = footer.offsetTop - navbar.scrollHeight - 50 + 'px'
+    flag = false
+  } else if (
+    flag === false &&
+    window.scrollY + window.innerHeight < footer.offsetTop
   ) {
-    element.classList.remove('animate')
+    navbar.style.position = 'fixed'
+    navbar.style.top = null
+    flag = true
   }
-}
-const animateAll = () => {
-  animate(img)
-  animate(p)
-}
-document.addEventListener('scroll', animateAll)
+})
+//  scrllY + innerHeight = offsetHeight

api/static/js/faqs.js

@@ -9,7 +9,12 @@ faqs.forEach((faq) => {
     } else {
       faqContent.style.maxHeight = faqContent.scrollHeight + 100 + 'px'
     }
-
-    faqContent.classList.toggle('show')
+    if (faqContent.classList.contains('show')) {
+      setTimeout(() => {
+        faqContent.classList.remove('show')
+      }, 250)
+    } else {
+      faqContent.classList.add('show')
+    }
   })
 })

api/templates/about.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% load static %}
+{% block head %}
+<link rel="stylesheet" href="{% static "css/about.css" %}">
+{% endblock head %}
+
+{% block title %}About{% endblock title %}
+
+{% block content %}
+<section class="content-section">
+    <section>
+        <img class="cogniguard-ss" src="{%static "img/cogniguard-popup.png"%}" alt="web-extension-picture">
+        <div>
+            <p class="font-medium">
+                <span class="blue-text font-mid-large font-secondary">Cogniguard</span> is a lightweight but powerful web extension designed to combat
+                deceptive tactics and promote transparency online.
+            </p>
+        </div>
+    </section>
+    <section>
+        <span class="font-medium">
+            <p>It empowers you by</p>
+           <span class="font-mid-medium"> Identifying dark patterns: Uncovers hidden manipulation techniques used by websites, particularly in e-commerce.
+           </span>
+        </span>
+    </section>
+</section>
+{% endblock content %}
+
+{% block script %}
+<script src="{% static "js/about.js"%}"></script>
+{% endblock script %}