Skip to content

Commit

Permalink
Merge pull request #41 from HarshitaJaiswal5/frosted-glass-navbar
Browse files Browse the repository at this point in the history 
[ui] enhanced the navbar
  • Loading branch information
@TheOpenInnovator
TheOpenInnovator authored Oct 24, 2024
2 parents f829982 + 7ecd5af commit 5dba060
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 107 deletions.
136 changes: 69 additions & 67 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zen Note</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Favicons -->
<link rel="shortcut icon" href="Images/logo.png">
<link rel="apple-touch-icon" href="Images/logo.png">
<link rel="apple-touch-icon" sizes="72x72" href="Images/logo.png">
<link rel="apple-touch-icon" sizes="114x114" href="Images/logo.png">
<link rel="apple-touch-icon" sizes="144x144" href="Images/logo.png">
<!-- Add this line -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<nav>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zen Note</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Favicons -->
<link rel="shortcut icon" href="Images/logo.png">
<link rel="apple-touch-icon" href="Images/logo.png">
<link rel="apple-touch-icon" sizes="72x72" href="Images/logo.png">
<link rel="apple-touch-icon" sizes="114x114" href="Images/logo.png">
<link rel="apple-touch-icon" sizes="144x144" href="Images/logo.png">
<!-- Add this line -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<header class="light-mode">
<nav >
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Sign up</a></li>
</ul>
</nav>
<body class="light-mode">
<div class="container">
<div class="container-head">
<h1>Zen Note</h1>
<button id="darkModeToggle">🌙</button>
</div>
<form id="entryForm">
<div class="input-group">
<div id="fake-textarea" class="fake-textarea" contenteditable="true" data-placeholder="What did you learn today?"></div>
<input type="hidden" id="hiddenTextArea" name="textareaValue">
<div class="category-input">
<select id="existingCategory" class="category-select">
<option value="">Select or add new category</option>
<option value="new">+ Add new category</option>
<!-- Existing categories will be dynamically added here by JavaScript -->
</select>
<input type="text" id="newCategory" placeholder="Enter new category" class="category-text">
<button type="submit">Add Entry</button>
</div>
</div>
<span id="error-message" style="color: red; display: none;">This field is required.</span>
</form>
<div class="categories-section">
<h2>Explore Your Interests</h2>
<div id="categoriesList" class="categories-grid"></div>
</div>

<ul id="entriesList"></ul>
</header>

<body class="light-mode">
<div class="container">
<div class="container-head">
<h1>Zen Note</h1>
<button id="darkModeToggle">🌙</button>
</div>

<div id="snapshotModal" class="modal">
<div class="modal-content">
<div class="modal-options">
<h3>Choose Background:</h3>
<select id="backgroundSelect">
<option value="gradient1">Gradient 1</option>
<option value="gradient2">Gradient 2</option>
<option value="gradient3">Gradient 3</option>
<option value="gradient4">Gradient 4</option>
<option value="uploaded">Uploaded Image</option>
<form id="entryForm">
<div class="input-group">
<div id="fake-textarea" class="fake-textarea" contenteditable="true"
data-placeholder="What did you learn today?"></div>
<input type="hidden" id="hiddenTextArea" name="textareaValue">
<div class="category-input">
<select id="existingCategory" class="category-select">
<option value="">Select or add new category</option>
<option value="new">+ Add new category</option>
<!-- Existing categories will be dynamically added here by JavaScript -->
</select>
<label for="imageUpload" class="custom-file-upload">
Upload Image
</label>
<input type="file" id="imageUpload" accept="image/*" />
</div>
<canvas id="snapshotCanvas"></canvas>
<div class="modal-buttons">
<button id="downloadSnapshot">Download</button>
<button id="copySnapshot">Copy</button>
<button id="closeModal">Close</button>
<input type="text" id="newCategory" placeholder="Enter new category" class="category-text">
<button type="submit">Add Entry</button>
</div>
</div>
<span id="error-message" style="color: red; display: none;">This field is required.</span>
</form>
<div class="categories-section">
<h2>Explore Your Interests</h2>
<div id="categoriesList" class="categories-grid"></div>
</div>
<ul id="entriesList"></ul>
</div>

<div id="snapshotModal" class="modal">
<div class="modal-content">
<div class="modal-options">
<h3>Choose Background:</h3>
<select id="backgroundSelect">
<option value="gradient1">Gradient 1</option>
<option value="gradient2">Gradient 2</option>
<option value="gradient3">Gradient 3</option>
<option value="gradient4">Gradient 4</option>
<option value="uploaded">Uploaded Image</option>
</select>
<label for="imageUpload" class="custom-file-upload">
Upload Image
</label>
<input type="file" id="imageUpload" accept="image/*" />
</div>
<canvas id="snapshotCanvas"></canvas>
<div class="modal-buttons">
<button id="downloadSnapshot">Download</button>
<button id="copySnapshot">Copy</button>
<button id="closeModal">Close</button>
</div>
</div>
<script src="script.js"></script>
</div>
<script src="script.js"></script>
</body>

</html>
</html>
2 changes: 2 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,8 @@ function renderEntries() {
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
document.body.classList.toggle("light-mode");
document.querySelector('header').classList.toggle("dark-mode");
document.querySelector('header').classList.toggle("light-mode");
darkModeToggle.textContent = document.body.classList.contains("dark-mode")
? "☀️"
: "🌙";
Expand Down
82 changes: 42 additions & 40 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
--button-bg-dark: #42515e;
--button-hover-light: #529bb8;
--button-hover-dark: #08041f;
--underline-color-light: #005f7f;
--underline-color-dark: grey;

}

body {
Expand All @@ -19,17 +22,19 @@ body {
transition: background 0.3s, color 0.3s;
display: flex;
flex-direction: column;

}

body.light-mode {
background: var(--bg-gradient-light);
color: var(--text-color-light);
--underline-color: var(--underline-color-light);
}

body.dark-mode {
background: var(--bg-gradient-dark);
color: var(--text-color-dark);
--underline-color: var(--underline-color-dark);

}

.container {
Expand All @@ -51,7 +56,6 @@ h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin: 0 0 30px 0;
font-weight: 600;

}

.light-mode h1 {
Expand Down Expand Up @@ -540,47 +544,28 @@ body.dark-mode .categories-section h2 {
}

}

nav {
background-color: var(--bg-gradient-light);
padding: 10px;
text-align: center;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav {
background-color: var(--bg-gradient-light);
padding: 10px;
text-align: center;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav {
background-color: var(--bg-gradient-light);
padding: 10px;
text-align: center;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
header{
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
z-index: 100;
}

nav {
background-color: var(--bg-gradient-light);
background-color: rgba(255, 255, 255, 0.1); /* Lightly tinted semi-transparent background */
padding: 10px;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.5); /* Slightly transparent border */
width: 25rem;
margin-top: 0.5rem;
border-radius: 20px;
backdrop-filter: blur(20px); /* Increased blur effect */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
position: sticky;
top: 0;
z-index: 100;
}

nav ul {
Expand All @@ -597,10 +582,27 @@ nav li {
nav a {
color: var(--text-color-light);
text-decoration: none;
position: relative;
}

nav a::after {
content: ''; /* Create an empty content for the pseudo-element */
position: absolute; /* Position it absolutely */
left: 50%; /* Start from the center */
bottom: 0; /* Position it at the bottom of the text */
width: 0; /* Initial width is 0 */
height: 2px; /* Height of the underline */
background: var(--underline-color);
transition: width 0.4s ease, left 0.4s ease; /* Animation */
}

nav a:hover::after {
width: 100%; /* Expand to full width on hover */
left: 0; /* Move to the left corner */
}

nav a:hover {
color: var(--button-hover-light);
color: var(--underline-color-light);
}

.dark-mode nav {
Expand All @@ -612,7 +614,7 @@ nav a:hover {
}

.dark-mode nav a:hover {
color: var(--button-hover-dark);
color: var(--underline-color-dark);
}

.form-group {
Expand Down

0 comments on commit 5dba060

Please sign in to comment.