Skip to content

Commit

Permalink
Merge pull request #11 from kunalshah017/pull-req-merge
Browse files Browse the repository at this point in the history 
Added Feedback Page
  • Loading branch information
@kunalshah017
kunalshah017 authored Jan 21, 2024
2 parents 5b6140d + 6000ecc commit 8a98da9
Show file tree
Hide file tree
Showing 10 changed files with 1,268 additions and 55 deletions.
51 changes: 39 additions & 12 deletions Pledge-Ceartificate/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,49 @@

<body>
<nav>
<img src="/assets/sudo.png" alt="Logo" class="logo">

<ul class="nav-links">
<li><a href="https://sudo-choices.vercel.app/#homeSection">Home</a></li>
<li><a href="https://sudo-choices.vercel.app/#aboutTeam">About Team: <strong>Sudo</strong></a></li>
<li><a href="https://sudo-choices.vercel.app/#aboutProject">About Project</a></li>
<li><a onclick="comingSoon(this)" class="ai-button">Ai Counselling</a></li>
<img src="/assets/sudo.png" alt="Logo" class="logo"
onclick="window.location='https://sudo-choices.vercel.app/#homeSection'">
<ul class="nav-links-container">
<li><a href="https://sudo-choices.vercel.app/#homeSection" class="nav-link">Home</a></li>
<li><a href="https://sudo-choices.vercel.app/#aboutTeam" class="nav-link">About Team:
<strong>Sudo</strong></a></li>
<li><a href="https://sudo-choices.vercel.app/#aboutProject" class="nav-link">About Project</a></li>
<li>
<div class="dropdown" onclick="dropDown()">
<a class="nav-link mobile-more">More</a>
<div id="moreDropDown" class="dropdown-content">
<a href="https://github.com/spark-lucifer/web-scraping-2" class="nav-link">Anti-Drug Forum</a>
<a href="/Pledge-Ceartificate/index.html" class="nav-link">Take Pledge</a>
<a href="/Project-Feedback/index.html" class="nav-link">Project Feedback</a>
</div>
<img src="/assets/dropdown-icon.png" alt="dropdown">
</div>
</li>
<li><a href="/Main-Game/1-Childhood/index.html" class="play-game nav-link">Play Game</a></li>
</ul>
<button class="hamburger-menu" onclick="toggleMenu()"></button>
<div class="menu-overlay">
<ul class="menu-overlay-items">
<li><a href="https://sudo-choices.vercel.app/#homeSection" onclick="hideMenu()">Home</a></li>
<li><a href="https://sudo-choices.vercel.app/#aboutTeam" onclick="hideMenu()">About Team:
<li><a href="https://sudo-choices.vercel.app/#homeSection" onclick="hideMenu()"
class="menu-overlay-link">Home</a></li>
<li><a href="https://sudo-choices.vercel.app/#aboutTeam" onclick="hideMenu()"
class="menu-overlay-link">About Team:
<strong>Sudo</strong></a></li>
<li><a href="https://sudo-choices.vercel.app/#aboutProject" onclick="hideMenu()">About Project</a></li>
<li><a onclick="comingSoon(this)" class="ai-button">Ai Counselling</a></li>
<li><a href="https://sudo-choices.vercel.app/#aboutProject" onclick="hideMenu()"
class="menu-overlay-link">About Project</a></li>
<li onclick="dropDown()">
<div class="mobile-dropdown">
<label class="menu-overlay-link">More</label>
<img src="/assets/dropdown-icon.png" alt="dropdown">
<div id="moreDropDown" class="dropdown-content mobile-dropdown-content">
<a href="https://github.com/spark-lucifer/web-scraping-2" class="nav-link">Anti-Drug
Forum</a>
<a href="/Pledge-Ceartificate/index.html" class="nav-link">Take Pledge</a>
<a href="/Project-Feedback/index.html" class="nav-link">Project Feedback</a>
</div>
</div>
</li>
<li><a href="/Main-Game/1-Childhood/index.html" class="play-game menu-overlay-link">Play Game</a></li>
</ul>
</div>
</nav>
Expand All @@ -58,7 +85,7 @@ <h1>Get Your Anti-Drug Warrior Certificate</h1>
<label for="name-input">Please Enter your name :</label>
<input class="name-input" id="name-input" type="text" placeholder="First Name & Last Name"></input>
</div>
<button class="name-input-button" onclick="generateCertificate()">Get certificate</button>
<button class="name-input-button" onclick="generateCertificate()">Get Certificate</button>
<div id="result">
</div>
<img src="assets/certificate.png" alt="" class="temp-img">
Expand Down
35 changes: 35 additions & 0 deletions Pledge-Ceartificate/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,41 @@ window.addEventListener("scroll", function () {
lastScrollPos = currentScrollPos;
});

// dropdown
var isDropdownOpen = false;
function dropDown() {
const dropdownContent = document.querySelector(".dropdown-content");
const dropdownIcon = document.querySelector(".dropdown img");
const mobileDropdownContent = document.querySelector(
".mobile-dropdown-content"
);
const mobileDropdownIcon = document.querySelector(".mobile-dropdown img");

if (!isDropdownOpen) {
dropdownContent.style.display = "flex";
dropdownIcon.style.transform = "rotate(180deg)";
mobileDropdownContent.style.display = "flex";
mobileDropdownIcon.style.transform = "rotate(180deg)";
console.log("showing dropdown");
isDropdownOpen = true;
setTimeout(() => {
// if mouse is not hovering over the dropdown hide the dropdown
dropdownContent.addEventListener("mouseleave", () => {
dropdownContent.style.display = "none";
dropdownIcon.style.transform = "rotate(0deg)";
isDropdownOpen = false;
});
}, 1000);
} else {
dropdownContent.style.display = "none";
dropdownIcon.style.transform = "rotate(0deg)";
mobileDropdownContent.style.display = "none";
mobileDropdownIcon.style.transform = "rotate(0deg)";
console.log("hiding dropdown");
isDropdownOpen = false;
}
}

// Mobile Menu
const mobileMenu = document.querySelector(".menu-overlay");
const menuButton = document.querySelector(".hamburger-menu");
Expand Down
118 changes: 107 additions & 11 deletions Pledge-Ceartificate/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,19 @@
font-family: 'Poppins', sans-serif;
}

::-webkit-scrollbar {
width: 3px;
}

::-webkit-scrollbar-track {
background: #212121;
}

::-webkit-scrollbar-thumb {
background: #0edf23;
border-radius: 10px;
}

nav {
display: flex;
height: 70px;
Expand All @@ -25,44 +38,95 @@ nav * {
.logo {
height: 50%;
margin-left: 30px;
cursor: pointer;
}

.nav-links {
.nav-links-container {
list-style-type: none;
display: flex;
width: 50%;
width: 60%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}

.nav-links li a {
.nav-link{
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: 500;
outline: none;
cursor: pointer;
text-align: center;
}

.nav-links li a strong, .menu-overlay-items li a strong{
.nav-link strong, .menu-overlay-items li a strong{
color: #0edf23;
}

.nav-links li a:hover {
.nav-link:hover {
color: #fff;
border-bottom: 2px solid #0edf23;
}

.nav-links li a:active {
.nav-link:active {
color: #fff;
border-bottom: 2px solid #0edf23;
}

.ai-button{
.dropdown{
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
}

.dropdown img{
width: 20px;
height: 20px;
cursor: pointer;
transition: all 0.3s ease;
transform: rotate(0deg);
}

.dropdown-content{
display: none;
position: absolute;
background-color: #1c1b1b;
box-shadow: 0px 8px 16px 0px rgba(59, 255, 59, 0.192);
min-width: 160px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
padding: 10px 10px;
z-index: 1;
margin-top: 170px;
border-radius: 10px;
animation: dropdown 0.6s ease-in-out;
}

@keyframes dropdown{
0%{
opacity: 0;
transform: translateY(-10px);
}

100%{
opacity: 1;
transform: translateY(0px);
}
}

.play-game{
background-color: #0edf23;
padding: 5px 10px;
border-radius: 10px;
border: 3px solid #fff;
cursor: pointer;
}

.hamburger-menu {
position: absolute;
right: 0;
Expand Down Expand Up @@ -113,7 +177,7 @@ nav * {
margin-bottom: 25px;
}

.menu-overlay-items li a {
.menu-overlay-link {
text-decoration: none;
color: #fff;
font-size: 20px;
Expand Down Expand Up @@ -422,20 +486,52 @@ main{
}

@media screen and (max-width: 1150px) {
.nav-links {
.nav-links-container {
width: 60%;
}
}

@media screen and (max-width: 1000px) {
.nav-links {
.nav-links-container {
display: none;
}

.hamburger-menu {
display: flex;
}

.dropdown{
position: relative;
}

.dropdown-content{
display: none;
}

.mobile-dropdown{
height: 30px;
display: flex;
/* border: 1px solid red; */
gap: 7px;
}


.mobile-dropdown img{
height: 20px;
align-self: center;
cursor: pointer;
transition: all 0.3s ease;
transform: rotate(0deg);
/* border: 1px solid red; */
}

.mobile-dropdown-content{
display: none;
position: absolute;
margin-top: 50px;
right: 30px;
}

}

@media screen and (max-width: 620px){
Expand All @@ -444,7 +540,7 @@ main{
margin-left: 10px;
}

.nav-links {
.nav-links-container {
display: none;
}

Expand Down
Loading

0 comments on commit 8a98da9

Please sign in to comment.