Merge branch 'main' into main

README.md

@@ -64,6 +64,9 @@ pip install virtualenv
 cd api
 ```
 ```bash 
+cd CogniGaurd
+```
+```bash 
 python -m venv myenv 
 ```
 #### Activating virtual environment named as myenv
@@ -136,6 +139,8 @@ Detailed documentation on usage, contribution guidelines, and API integration ca
 
 - [@amansingh494 (Aman Singh)](https://github.com/amansingh494) - FrontEnd Developer
 
+- [@Anmolgoel29 (Anmol Goel)](https://github.com/Anmolgoel29) - Machine Learning
+
 - [@DharmeshTanwar56 (Dharmesh Tanwar)](https://github.com/DharmeshTanwar56) - UI/UX Designer
 
 - [@goldy-dev123 (Goldy)](https://github.com/goldy-dev123) - Technical Writing

api/home/urls.py

@@ -5,6 +5,9 @@
 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"),
+
+]
 
-]

api/home/views.py

@@ -14,6 +14,7 @@ def index(request):
 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)))
@@ -47,4 +48,10 @@ def data_url_to_image(data_url):
     # Open the image with PIL
     img = Image.open(image_data)
 
-    return img
+    return img
+
+def reportDp(request):
+    return render(request, "report.html")
+
+def about(request):
+    return render(request, "about.html")

api/mlApi/views.py

@@ -34,6 +34,8 @@ def dpData(request):
 
         scraped_text = get_scrape_data(url)
 
+        print(scraped_text)
+
         # Fine-tune BERT model and classify dark pattern
         # predicted_labels = fine_tune_and_classify(scraped_text)
         predicted_labels= {"Sample": "This is a Sample dark pattern"}

api/static/css/report.css

@@ -0,0 +1,31 @@
+.main-section {
+  gap: 10rem;
+}
+.content-section {
+  gap: 3rem;
+}
+.heading-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 2.7rem;
+  font-family: var(--font-primary);
+}
+.report-form form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+}
+.report-form form input {
+  width: 33vw;
+  height: 6vh;
+}
+.report-form form textarea {
+  border-radius: 5px;
+  width: 33vw;
+  height: 20vh;
+}
+::placeholder {
+  font-family: monospace;
+}

api/static/css/style.css

@@ -102,6 +102,7 @@ ul {
 .main-section {
   display: flex;
   align-items: flex-start;
+
   /* gap: 2rem;
   padding: 0 2.87rem; */
 }
@@ -112,18 +113,24 @@ ul {
   align-items: center;
   margin: 6rem 2rem 2rem 4rem;
   gap: 8rem;
+  padding-left: 21rem;
 }
 /* navbar */
 .navbar {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+  align-items: center;
   padding: 1.87rem;
   border: 2px solid #d0d2d9;
   box-shadow: 5px 4px 20px 0px #b7b7c0;
   margin: 1rem;
   border-radius: 1rem;
   gap: 2rem;
+  position: fixed;
+  background: white;gap: 2rem;
+  height: 558px;
+
 }
 .navbar__logo img {
   height: 5.75rem;
@@ -133,7 +140,7 @@ ul {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 3rem;
+  gap: 2rem;
   width: 14rem;
 }
 .auth {
@@ -188,6 +195,7 @@ footer {
 }
 .footer-links {
   display: flex;
+  gap: 2rem;
 }
 .footer-links img {
   height: 2.5rem !important;
@@ -248,7 +256,7 @@ footer {
   height: 42px;
 } */
 /* animation */
-.slide-left {
+/* .slide-left {
   opacity: 0;
   transform: translateX(-15px);
   transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
@@ -263,4 +271,4 @@ footer {
 .animate {
   transform: translateX(0) !important;
   opacity: 1 !important;
-}
+} */

api/static/js/app.js

@@ -0,0 +1,36 @@
+// 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) => {
+  if (
+    window.scrollY >
+    element.getBoundingClientRect().top + element.offsetHeight
+  ) {
+    element.classList.add('animate')
+  }
+  if (
+    window.scrollY <
+    element.getBoundingClientRect().top + element.offsetHeight + 100
+  ) {
+    element.classList.remove('animate')
+  }
+}
+const animateAll = () => {
+  animate(img)
+  animate(p)
+}
+document.addEventListener('scroll', animateAll)

api/js/faqs.js → api/static/js/faqs.js

@@ -4,6 +4,12 @@ faqs.forEach((faq) => {
   const faqContent = faq.querySelector('.faq-answer')
   button.addEventListener('click', () => {
     button.classList.toggle('rotate')
+    if (faqContent.style.maxHeight) {
+      faqContent.style.maxHeight = null
+    } else {
+      faqContent.style.maxHeight = faqContent.scrollHeight + 100 + 'px'
+    }
+
     faqContent.classList.toggle('show')
   })
 })

api/templates/base.html

@@ -15,10 +15,10 @@
     <link
         href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
         rel="stylesheet">
-    <title>CogniGuard | {% block title %}{% endblock title %}</title>
-
     {% block head %}
     {% endblock head %}
+    <title>CogniGuard | {% block title %}{% endblock title %}</title>
+
 </head>
 
 <body>
@@ -47,40 +47,54 @@
                             </div>
                         </a>
                     </div>
-                    <a href="#" class="link">
+                    <a href="/" class="link">
                         <div class="align-items">
                             <i class="material-symbols-outlined icons">
                                 home
                             </i>
                             Home
                         </div>
                     </a>
-                    <a href="#" class="link">
+                    <a href="/about" class="link">
                         <div class="align-items">
                             <span class="material-symbols-outlined">
                                 info
                             </span>
                             About
                         </div>
                     </a>
-                    <a href="#" class="link">
+                    <a href="/" class="link">
                         <div class="align-items">
                             <span class="material-symbols-outlined">
                                 warning
                             </span>
                             Detected Dark Patterns
                         </div>
                     </a>
-                    <a href="#" class="link">Services</a>
-                    <a href="#" class="link">What are Dark Patterns</a>
-                    <a href="#" class="link">
+                    <a href="https://en.wikipedia.org/wiki/Dark_pattern" class="link">
+                        <div>
+                            <span class="material-symbols-outlined">
+                                description
+                            </span>
+                            What are Dark Patterns
+                        </div>
+                    </a>
+                    <a href="/" class="link">
                         <div class="align-items">
                             <span class="material-symbols-outlined">
                                 help
                             </span>
                             Get Help
                         </div>
                     </a>
+                    <a href="/faqs" class="link">
+                        <div class="align-items">
+                            <span class="material-symbols-outlined">
+                                forum
+                            </span>
+                            FAQs
+                        </div>
+                    </a>
                 </div>
             </nav>
             {% block content%}
@@ -96,10 +110,10 @@ <h1 class="font-mid-large">CogniGuard</h1>
                 </div>
                 <div class="cogni-links">
                     <div>
-                        <a href="#">About</a>
-                        <a href="#">Contact</a>
-                        <a href="#">Services</a>
-                        <a href="#">Help</a>
+                        <a href="/about">About</a>
+                        <a href="https://en.wikipedia.org/wiki/Dark_pattern">Dark Patterns</a>
+                        <a href="/report">Report</a>
+                        <a href="/help">Help</a>
                     </div>
                     <div>
                         <a href="#" class="btn-secondary">Feedback</a>
@@ -112,9 +126,10 @@ <h1 class="font-mid-large">CogniGuard</h1>
                     <img src="{% static "img/left-rect.png" %}" alt="footer design right">
                 </div>
                 <div class="footer-links">
-                    <a href="#"><img src="{% static "img/Instagram.png" %}" alt="instagram-icon"></a>
-                    <a href="#"><img src="{% static "img/Instagram.png" %}" alt="instagram-icon"></a>
-                    <a href="#"><img src="{% static "img/Instagram.png" %}" alt="instagram-icon"></a>
+                    <a href="#"><img src="{% static "img/Email.png" %}" alt="instagram-icon"></a>
+                    <a href="https://github.com/4darsh-Dev/CogniGaurd"><img src="{% static "img/github-logo.png" %}"
+                            alt="instagram-icon"></a>
+                    <a href="#"><img src="{% static "img/twitter-logo.png" %}" alt="instagram-icon"></a>
                     <a href="#"><img src="{% static "img/Instagram.png" %}" alt="instagram-icon"></a>
                 </div>
                 <div>
@@ -125,7 +140,7 @@ <h1 class="font-mid-large">CogniGuard</h1>
         </footer>
 
     </main>
-    <script src="app.js"></script>
+    <script src="../static/js/app.js"></script>
     {% block script %}
 
     {% endblock script %}