Skip to content

Commit

Permalink
Merge pull request #95 from bhumika-1-3/master
Browse files Browse the repository at this point in the history 
Dark mode button UI improved.
  • Loading branch information
@SaptarshiSarkar12
SaptarshiSarkar12 committed Oct 9, 2022
2 parents 2b05952 + 726cfeb commit 2529ecb
Show file tree
Hide file tree
Showing 3 changed files with 742 additions and 607 deletions.
323 changes: 201 additions & 122 deletions Website/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,135 +1,214 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drifty</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="responsive-nav.css" />
<!-- Favicons -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="./favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./favicons/favicon-16x16.png"
/>
<link rel="manifest" href="./favicons/site.webmanifest" />
<!-- Bootstrap
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> -->
<link rel="stylesheet" href="style.css" />
</head>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drifty</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive-nav.css">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
<link rel="manifest" href="./favicons/site.webmanifest">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="texture"></div>
<div class="nav-container">
<div class="nav-bar">
<a href="https://saptarshisarkar12.github.io/Drifty/"
><img class="logo" src="Resources/Driftyicon.webp" alt="Drifty-icon"
/></a>
<nav>
<ul class="nav-links">
<li>
<a href="#hero"><button class="button">Home</button></a>
</li>
<li>
<a href="#aboutus"><button class="button">About</button></a>
</li>
<li>
<a href="#download"><button class="button">Download</button></a>
</li>
<li>
<a href="#contrib"><button class="button">Contribute</button></a>
</li>
<li>
<a href="#contact"><button class="button">Contact</button></a>
</li>
<!-- <li><input type="checkbox" class="btn-toggle" /></li> -->
</ul>
</nav>
<button id="menu" class="button"><i class="fas fa-bars"></i></button>
</div>
</div>

<body>
<div class="texture"></div>
<div class="nav-container">
<div class="nav-bar">
<a href="https://saptarshisarkar12.github.io/Drifty/"><img class="logo" src="Resources/Driftyicon.webp"
alt="Drifty-icon" /></a>
<nav>
<ul class="nav-links">
<li><a href="#hero"><button class="button">Home</button></a></li>
<li><a href="#aboutus"><button class="button">About</button></a></li>
<li><a href="#download"><button class="button">Download</button></a></li>
<li><a href="#contrib"><button class="button">Contribute</button></a></li>
<li><a href="#contact"><button class="button">Contact</button></a></li>
<li><input type="checkbox" class="btn-toggle"></li>
</ul>
</nav>
<button id="menu" class="button"><i class="fas fa-bars"></i></button>
</div>
</div>
<section id="hero">
<header>
<div class="header-container">
<h1>DRIFTY</h1>
<p>
Drifty is an open-source interactive File Downloader system built
with java. It takes the link to the file, the directory where it
needs to be saved and the filename of the downloaded file as input
and downloads it in the given directory with the given filename.
</p>
<a href="#contrib" class="btn">More Info</a>
<a href="#demo" class="btn">Demo</a>
</div>

<section id="hero">
<header>
<div class="header-container">
<h1>DRIFTY</h1>
<p>
Drifty is an open-source interactive File Downloader system built with java.
It takes the link to the file, the directory where it needs to be saved and the filename
of the downloaded file as input and downloads it in the given directory with the given filename.
</p>
<a href="#contrib" class="btn">More Info</a>
<a href="#demo" class="btn">Demo</a>
</div>
<!-- <img src="Resources/drifty.webp" alt="drifty_console_img" /> -->
<div class="img-layer" id="imgLayer">
<img src="./Resources/Layers/2.webp" alt="..." srcset="">
<img src="./Resources/Layers/3.webp" alt="..." srcset="">
<img src="./Resources/Layers/4.webp" alt="..." srcset="">
<img src="./Resources/Layers/5.webp" alt="..." srcset="">
<img src="./Resources/Layers/6.webp" alt="..." srcset="">
<img src="./Resources/Layers/7.webp" alt="..." srcset="">
</div>
</header>
</section>
<!-- <img src="Resources/drifty.webp" alt="drifty_console_img" /> -->
<div class="img-layer" id="imgLayer">
<img src="./Resources/Layers/2.webp" alt="..." srcset="" />
<img src="./Resources/Layers/3.webp" alt="..." srcset="" />
<img src="./Resources/Layers/4.webp" alt="..." srcset="" />
<img src="./Resources/Layers/5.webp" alt="..." srcset="" />
<img src="./Resources/Layers/6.webp" alt="..." srcset="" />
<img src="./Resources/Layers/7.webp" alt="..." srcset="" />
</div>
</header>
</section>

<section id="contrib" class="contrib">
<div class="contrib-container">
<div class="content">
<h2 class="text-gradient-ry">More Information About Drifty</h2>
<p>It is currently available in CLI (Command Line Interface) mode and the GUI (Graphical User Interface)
version is under active development. We believe in team work. Any contribution that brings value to
the project is highly appreciated. You may contribute to this project here.</p>
<section id="contrib" class="contrib">
<div class="contrib-container">
<div class="content">
<h2 class="text-gradient-ry">More Information About Drifty</h2>
<p>
It is currently available in CLI (Command Line Interface) mode and
the GUI (Graphical User Interface) version is under active
development. We believe in team work. Any contribution that brings
value to the project is highly appreciated. You may contribute to
this project here.
</p>
</div>
<div class="content">
<h2 class="text-gradient-blue">Be a part of Drifty Family!</h2>
<div class="contributors" id="contributors"></div>
<a href="https://github.com/SaptarshiSarkar12/Drifty" class="btn4"
><i class="fab fa-github"></i> Contribute to Drifty</a
>
</div>
</div>
</section>

</div>
<div class="content">
<h2 class="text-gradient-blue">Be a part of Drifty Family!</h2>
<div class="contributors" id="contributors">
</div>
<a href="https://github.com/SaptarshiSarkar12/Drifty" class="btn4"><i class="fab fa-github"></i>
Contribute to Drifty</a>
</div>
</div>
</section>
<section id="contrib" class="info"></section>

<section id="contrib" class="info"></section>
<section id="download" class="download">
<h2>✨Download Here✨</h2>
<div id="download_section" class="download_section">
<a
href="https://github.com/SaptarshiSarkar12/Drifty/releases/latest/download/Drifty_CLI.exe"
class="btn4"
>Download Now <i class="fab fa-windows"></i
></a>
<a
href="https://github.com/SaptarshiSarkar12/Drifty/releases/latest/download/Drifty.jar"
class="btn4"
>Download Now <i class="fab fa-apple"></i> <i class="fab fa-linux"></i
></a>
</div>

<section id="download" class="download">
<h2>✨Download Here✨</h2>
<div id="download_section" class="download_section">
<a href="https://github.com/SaptarshiSarkar12/Drifty/releases/latest/download/Drifty_CLI.exe"
class="btn4">Download Now <i class="fab fa-windows"></i></a>
<a href="https://github.com/SaptarshiSarkar12/Drifty/releases/latest/download/Drifty.jar"
class="btn4">Download Now <i class="fab fa-apple"></i> <i class="fab fa-linux"></i></a>
</div>
<div id="demo" class="demo">
<div class="text">
<h2>Demonstration of Drifty</h2>
<p>Here is a quick demo of using Drifty.</p>
</div>
<video
src="Resources/Usage.webm"
playsinline
autoplay
muted
loop
></video>
</div>
</section>

<div id="demo" class="demo">
<div class="text">
<h2>Demonstration of Drifty</h2>
<p>Here is a quick demo of using Drifty.</p>
</div>
<video src="Resources/Usage.webm" playsinline autoplay muted loop></video>
</div>
</section>
<!-- contact us section -->
<section id="contact">
<h2>Contact Us</h2>
<div class="contact-container">
<a
href="https://github.com/SaptarshiSarkar12/Drifty/discussions"
type="button"
>
<i class="fa-solid fa-headset"></i> Support
</a>
<a href="https://www.twitter.com/SSarkar2007" type="button"
><i class="fab fa-twitter"></i> Twitter</a
>
<a href="mailto:saptarshi.programmer@gmail.com" type="button"
><i class="fa-sharp fa-solid fa-envelope"></i> Email</a
>
</div>
</section>

<!-- contact us section -->
<section id="contact">
<h2>Contact Us</h2>
<div class="contact-container">
<a href="https://github.com/SaptarshiSarkar12/Drifty/discussions" type="button"> <i
class="fa-solid fa-headset"></i> Support </a>
<a href="https://www.twitter.com/SSarkar2007" type="button"><i class="fab fa-twitter"></i> Twitter</a>
<a href="mailto:saptarshi.programmer@gmail.com" type="button"><i class="fa-sharp fa-solid fa-envelope"></i>
Email</a>
</div>
</section>

<footer class="footer">
<div class="social">
<a href="https://www.twitter.com/SSarkar2007"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/SaptarshiSarkar12"><i class="fab fa-github"></i></a>
<a href="mailto:saptarshi.programmer@gmail.com"><i class="fa-sharp fa-solid fa-envelope"></i></a>
<a href="https://saptarshisarkar.hashnode.dev/"><i class="fa-brands fa-hashnode"></i></a>
<a href="https://www.bio.link/saptarshi"><i class="fa-sharp fa-solid fa-link"></i></a>
<!--added footers -->
</div>
<p><i class="fa-solid fa-copyright"></i> Drifty 2022</p>
</footer>
<footer class="footer">
<div class="social">
<a href="https://www.twitter.com/SSarkar2007"
><i class="fab fa-twitter"></i
></a>
<a href="https://github.com/SaptarshiSarkar12"
><i class="fab fa-github"></i
></a>
<a href="mailto:saptarshi.programmer@gmail.com"
><i class="fa-sharp fa-solid fa-envelope"></i
></a>
<a href="https://saptarshisarkar.hashnode.dev/"
><i class="fa-brands fa-hashnode"></i
></a>
<a href="https://www.bio.link/saptarshi"
><i class="fa-sharp fa-solid fa-link"></i
></a>
<!--added footers -->
</div>
<p><i class="fa-solid fa-copyright"></i> Drifty 2022</p>
</footer>

<!-- Scripts -->
<script src="script.js"></script>
</body>

</html>
<!-- dark mode button -->
<div class="btn-toggle">
<p>
<i id="symb" class=" fa-solid fa-moon fb"></i>
<p class="Txt">Dark</p>
</p>
</div>
<!-- Scripts -->
<script src="script.js"></script>
<!-- Bootstrap js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script> -->
</body>
</html>
13 changes: 13 additions & 0 deletions Website/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,27 @@ const menu = document.getElementById("menu");
const toggleBtn = document.querySelector("#menu>i");
const miniNav = document.querySelector("nav");
const links = document.querySelectorAll(".nav-links > li");
const darkTxt = document.querySelector(".Txt");
const symb = document.getElementById("symb");

const enableDarkMode = () => {
document.body.classList.add('darkmode');
darkModeToggle.checked = true; // Check only if the darkmode is on
symb.classList.remove("fa-moon");
symb.classList.add("fa-sun");
darkTxt.innerHTML= "Light"

localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {
document.body.classList.remove('darkmode');
darkModeToggle.checked = false;
darkTxt.innerHTML= "Dark"
symb.classList.add("fa-moon");
symb.classList.remove("fa-sun");


localStorage.setItem('darkMode', null);
}

Expand All @@ -28,6 +39,8 @@ if (darkMode === 'enabled')

darkModeToggle.addEventListener('click', () => {
darkMode = localStorage.getItem('darkMode');
// darkTxt.innerHTML= "Dark"

if (darkMode !== 'enabled')
enableDarkMode();
else
Expand Down
Loading

0 comments on commit 2529ecb

Please sign in to comment.