Skip to content

Commit

Permalink
upated
Browse files Browse the repository at this point in the history
  • Loading branch information
@4darsh-Dev
4darsh-Dev committed Jan 30, 2024
2 parents 1b2b686 + fe82397 commit 99e45bf
Show file tree
Hide file tree
Showing 13 changed files with 234 additions and 124 deletions.
31 changes: 31 additions & 0 deletions api/static/css/report.css
View file
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
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
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
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
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
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
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
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
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
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="script.js"></script>
<script src="../static/js/app.js"></script>
{% block script %}

{% endblock script %}
Expand Down
Loading

0 comments on commit 99e45bf

Please sign in to comment.