diff --git a/api/static/css/report.css b/api/static/css/report.css new file mode 100644 index 0000000..957ae24 --- /dev/null +++ b/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; +} diff --git a/api/static/css/style.css b/api/static/css/style.css index fa00a12..7bc1757 100644 --- a/api/static/css/style.css +++ b/api/static/css/style.css @@ -118,6 +118,7 @@ ul { 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; @@ -188,6 +189,7 @@ footer { } .footer-links { display: flex; + gap: 2rem; } .footer-links img { height: 2.5rem !important; @@ -248,7 +250,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 +265,4 @@ footer { .animate { transform: translateX(0) !important; opacity: 1 !important; -} +} */ diff --git a/api/static/img/Email.png b/api/static/img/Email.png new file mode 100644 index 0000000..6ab2aa4 Binary files /dev/null and b/api/static/img/Email.png differ diff --git a/api/static/img/Website.png b/api/static/img/Website.png new file mode 100644 index 0000000..9d145c9 Binary files /dev/null and b/api/static/img/Website.png differ diff --git a/api/static/img/github-logo.png b/api/static/img/github-logo.png new file mode 100644 index 0000000..9490ffc Binary files /dev/null and b/api/static/img/github-logo.png differ diff --git a/api/static/img/report-page-img.png b/api/static/img/report-page-img.png new file mode 100644 index 0000000..c7b86e2 Binary files /dev/null and b/api/static/img/report-page-img.png differ diff --git a/api/static/img/twitter-logo.png b/api/static/img/twitter-logo.png new file mode 100644 index 0000000..6d69991 Binary files /dev/null and b/api/static/img/twitter-logo.png differ diff --git a/api/static/js/app.js b/api/static/js/app.js new file mode 100644 index 0000000..3697add --- /dev/null +++ b/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) diff --git a/api/js/faqs.js b/api/static/js/faqs.js similarity index 64% rename from api/js/faqs.js rename to api/static/js/faqs.js index 3eb0d30..ea7525a 100644 --- a/api/js/faqs.js +++ b/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') }) }) diff --git a/api/templates/base.html b/api/templates/base.html index 904f732..ebdd2cb 100644 --- a/api/templates/base.html +++ b/api/templates/base.html @@ -6,7 +6,7 @@ - + @@ -15,10 +15,10 @@ - CogniGuard | {% block title %}{% endblock title %} - {% block head %} {% endblock head %} + CogniGuard | {% block title %}{% endblock title %} + @@ -26,7 +26,7 @@
{% block content%} @@ -96,10 +110,10 @@

CogniGuard

- About - Contact - Services - Help + About + Dark Patterns + Report + Help
Feedback @@ -109,23 +123,24 @@

CogniGuard

- footer design right + footer design right
- instagram-icon - instagram-icon - instagram-icon - instagram-icon + instagram-icon + instagram-icon + instagram-icon + instagram-icon
- footer design right + footer design right
- + {% block script %} {% endblock script %} diff --git a/api/templates/faqs.html b/api/templates/faqs.html index a108a32..3cd2ee4 100644 --- a/api/templates/faqs.html +++ b/api/templates/faqs.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% load static %} {% block head %} - + {% endblock head %} {% block title %}FAQs{% endblock title %} @@ -19,124 +19,129 @@

FAQS

- - more_vert - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Consequatur, - esse! - - expand_more - + more_vert + What is Cogniguard? + expand_more
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos qui cumque - ipsam - debitis, consectetur aliquam nulla officia, provident dolor quae blanditiis - doloribus - quibusdam labore dolorem. Est ex voluptates architecto asperiores?

+

Cogniguard is a sophisticated web extension designed to amplify online transparency. It + provides users with a transparency score for visited websites, detecting and alerting users + about the presence of dark patterns. This empowers users to make informed decisions and + protect their privacy.

+
- - more_vert - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Consequatur, - esse! - - expand_more - + more_vert + How does Cogniguard work? + expand_more
-
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos qui cumque - ipsam - debitis, consectetur aliquam nulla officia, provident dolor quae blanditiis - doloribus - quibusdam labore dolorem. Est ex voluptates architecto asperiores?

+
+

Cogniguard analyzes the real-time structure and content of websites. It identifies and flags + instances of dark patterns, generating a transparency score for the website. This score + indicates the level of openness and honesty in its design and user interaction.

+
- - more_vert - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Consequatur, - esse! - - expand_more - + more_vert + What are dark patterns? + expand_more
-
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos qui cumque - ipsam - debitis, consectetur aliquam nulla officia, provident dolor quae blanditiis - doloribus - quibusdam labore dolorem. Est ex voluptates architecto asperiores?

+
+

Dark patterns are design elements on websites or apps crafted to manipulate users into taking + actions they may not want to perform. These can include misleading prompts, hidden options, + or confusing interfaces intended to deceive or coerce users.

+
+
+ +
+
+ more_vert + How does Cogniguard detect dark patterns? + expand_more +
+
+

Cogniguard utilizes advanced algorithms to analyze website code and content, identifying + patterns consistent with known dark patterns. It also considers user interactions and + feedback to continuously improve its detection capabilities.

+
+
+
+
+ more_vert + What is the transparency score? + expand_more +
+
+

The transparency score provided by Cogniguard reflects the openness and honesty of a website. + A higher score indicates a more transparent and user-friendly website, while a lower score + suggests the presence of potential dark patterns.

- - more_vert - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Consequatur, - esse! - - expand_more - + more_vert + How can I interpret the transparency score? + expand_more
-
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos qui cumque - ipsam - debitis, consectetur aliquam nulla officia, provident dolor quae blanditiis - doloribus - quibusdam labore dolorem. Est ex voluptates architecto asperiores?

+
+

A transparency score close to 100 indicates a website with high transparency, while a lower + score suggests potential issues. Users can use this score to gauge the reliability and + user-friendliness of the websites they visit.

+
- - more_vert - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Consequatur, - esse! - - expand_more - + more_vert + Is Cogniguard compatible with all browsers? + expand_more
-
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos qui cumque - ipsam - debitis, consectetur aliquam nulla officia, provident dolor quae blanditiis - doloribus - quibusdam labore dolorem. Est ex voluptates architecto asperiores?

+
+

Cogniguard is designed as a browser extension and is compatible with popular web browsers + such as Chrome, Firefox, and Edge. Users can install the extension from their browser's + respective extension stores.

- - more_vert - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Consequatur, - esse! - - expand_more - + more_vert + Is my data safe with Cogniguard? + expand_more
-
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos qui cumque - ipsam - debitis, consectetur aliquam nulla officia, provident dolor quae blanditiis - doloribus - quibusdam labore dolorem. Est ex voluptates architecto asperiores?

+
+

Yes, Cogniguard prioritizes user privacy. The extension focuses solely on analyzing website + structures and does not store or transmit personal user data. It operates with a commitment + to safeguarding user privacy.

+
+
+
+
+ more_vert + Can I provide feedback on website detections? + expand_more +
+
+

Absolutely! Cogniguard values user feedback. Users can report false positives or suggest + improvements through the extension interface, contributing to the ongoing enhancement of the + dark pattern detection algorithm.

+
+
+
+
+ more_vert + How can I install Cogniguard? + expand_more +
+
+

Installing Cogniguard is simple. Visit your browser's extension store, search for + "Cogniguard," and follow the installation instructions. Once installed, the extension will + work seamlessly in the background to enhance your browsing experience.

@@ -146,5 +151,5 @@

FAQS

{% endblock content %} {% block script %} - + {% endblock script %} \ No newline at end of file diff --git a/api/templates/index.html b/api/templates/index.html index 2a0ef33..581680a 100644 --- a/api/templates/index.html +++ b/api/templates/index.html @@ -36,7 +36,7 @@

  • Creating a sense of false scarcity or pressure to act quickly, like countdown timers or limited-time offers.
    • - Know More + Know More

    @@ -47,12 +47,12 @@

    Why CogniGuard Exists...

      -
    • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, provident.
      • -
    • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, provident.
      • -
    • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, provident.
      • -
    • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, provident.
      • -
    • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, provident.
      • - Know More +
    • Provides on time Dark Pattern detection
      • +
    • Transparency Score, shows the reality of the website
      • +
    • Alerts you for Red Flag websites
      • +
    • Lightweight extension, easy installation and setup
      • +
    • Helps in eradication of Dark Patterns
      • + Know More
    diff --git a/api/templates/report.html b/api/templates/report.html index 9c935d9..106e88f 100644 --- a/api/templates/report.html +++ b/api/templates/report.html @@ -7,12 +7,27 @@ {% block title %}Report Dark Pattern{% endblock title %} {% block head %} - + {% endblock head %} {% block content %} - -

    Report for Dark Patterns here :

    +
    +
    +

    Welcome to CogniGuard

    +

    Report Center

    +

    Eradicate Dark Patterns

    +
    +
    +
    + + + + + +
    +
    +
    {% endblock content %}