Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I have added report page, added content to faqs and home page and changed some styles #12

Merged
merged 6 commits into from
Jan 30, 2024
Merged

I have added report page, added content to faqs and home page and changed some styles #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fbf7192
Updated faqs and some styles
AmanSingh494 Jan 29, 2024
4bcd521
Merge branch 'main' of https://github.com/AmanSingh494/CogniGaurd
AmanSingh494 Jan 29, 2024
fae7672
Added report page and chnaged styles
AmanSingh494 Jan 29, 2024
29e7ef0
Merge branch '4darsh-Dev:main' into main
AmanSingh494 Jan 29, 2024
360529f
Added links
AmanSingh494 Jan 30, 2024
e83df1e
Merge branch 'main' of https://github.com/AmanSingh494/CogniGaurd
AmanSingh494 Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions api/static/css/report.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
6 changes: 4 additions & 2 deletions api/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -188,6 +189,7 @@ footer {
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links img {
height: 2.5rem !important;
Expand Down Expand Up @@ -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),
Expand All @@ -263,4 +265,4 @@ footer {
.animate {
transform: translateX(0) !important;
opacity: 1 !important;
}
} */
Binary file added api/static/img/Email.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added api/static/img/Website.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added api/static/img/github-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added api/static/img/report-page-img.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added api/static/img/twitter-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions api/static/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
6 changes: 6 additions & 0 deletions api/js/faqs.js → api/static/js/faqs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})
57 changes: 36 additions & 21 deletions api/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static "css/style.css" %}">
<link rel="stylesheet" href="{% static " css/style.css" %}">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
Expand All @@ -15,18 +15,18 @@
<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>
<main>
<section class="main-section">
<nav class="navbar">
<div class="navbar__logo">
<img src="{% static "img/logo.png" %}" alt="CogniGuard-logo">
<img src="{% static " img/logo.png" %}" alt="CogniGuard-logo">
</div>
<div class="navbar__links font-primary">
<div class="auth">
Expand All @@ -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%}
Expand All @@ -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>
Expand All @@ -109,23 +123,24 @@ <h1 class="font-mid-large">CogniGuard</h1>
</div>
<div class="footer-design">
<div>
<img src="{% static "img/left-rect.png" %}" alt="footer design right">
<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/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>
<img src="{% static "img/right-rect.png" %}" alt="footer design right">
<img src="{% static " img/right-rect.png" %}" alt="footer design right">
</div>
</div>

</footer>

</main>
<script src="app.js"></script>
<script src="../static/js/app.js"></script>
{% block script %}

{% endblock script %}
Expand Down
Loading