talezero/FOFTickets
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Teppy
2024-12-20 17:18:31 -05:00
parent f254e170aa
commit 451d127488
3 changed files with 86 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
public/styles.css
View File

@@ -36,3 +36,62 @@
font-weight: bold;
cursor: pointer;
}
.navbar {
position: relative;
background: #333;
color: #fff;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
.menu-icon {
cursor: pointer;
display: inline-block;
}
.menu-icon span {
display: block;
width: 25px;
height: 3px;
margin: 5px 0;
background: #fff;
transition: 0.4s;
}
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: none; /* Hidden by default; shown when .active */
position: absolute;
top: 100%; /* Appear below the navbar */
left: 0; /* Aligned left under the hamburger */
width: 200px; /* Fixed width for the dropdown panel */
background: #333;
box-shadow: 0 2px 8px rgba(0,0,0,0.4); /* Optional shadow for a "dropdown" effect */
border-radius: 4px; /* Slight rounding for a nicer look */
}
.nav-links li {
border-bottom: 1px solid #444;
}
.nav-links li:last-child {
border-bottom: none; /* No border on the last item */
}
.nav-links li a {
color: #fff;
text-decoration: none;
display: block;
padding: 0.75rem 1rem;
white-space: nowrap; /* Prevent awkward text wrapping */
}
/* Show the nav-links when .active is toggled by JavaScript */
.nav-links.active {
display: block;
}

15
views/partials/nav.ejs Normal file
View File

@@ -0,0 +1,15 @@
<!-- views/partials/nav.ejs -->
<nav class="navbar">
<div class="menu-icon" id="menu-icon">
<!-- The "three lines" hamburger icon -->
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav-links" id="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/about">Aboot</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>

12
views/transfer.ejs
View File

@@ -5,6 +5,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<%- include('partials/nav') %>
<div id="QRShow" class="modal">
<div id="QRBackground" class="modal-content">
<p id="QRBanner">Generating QR Code...</p>
@@ -36,6 +37,17 @@
</table>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuIcon = document.getElementById('menu-icon');
const navLinks = document.getElementById('nav-links');
menuIcon.addEventListener('click', function() {
navLinks.classList.toggle('active');
});
});
// JavaScript to change the form element
const blankimage=document.getElementById("QRCodeImage").src;
console.log("Blank is ",blankimage);