Skip to content

Instantly share code, notes, and snippets.

@Notookk

Notookk/index.html

Created June 27, 2025 16:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Notookk/ca6c1978e0a51645b31cc047ad2033eb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Notookk/ca6c1978e0a51645b31cc047ad2033eb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maruti Suzuki Tenders</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
:root {
--primary: #ba1212;
--primary-dark: #8a0e0e;
--secondary: #39393b;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--light-gray: #e9ecef;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
color: var(--secondary);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header Styles */
header {
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 100;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
position: relative;
}
.logo {
height: 60px;
transition: all 0.3s ease;
}
.logo:hover {
transform: scale(1.03);
}
/* Main Content */
main {
flex: 1;
padding: 40px 0;
}
h1 {
color: var(--secondary);
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 30px;
position: relative;
display: inline-block;
text-align: center;
width: 100%;
}
h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--primary);
border-radius: 2px;
}
/* Gallery Section */
.gallery {
margin: 40px 0;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.gallery-container {
display: flex;
gap: 20px;
padding-bottom: 10px;
min-width: fit-content;
}
.gallery-item {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
height: 180px;
min-width: 250px;
flex-shrink: 0;
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
}
/* Description Section */
.description {
background: white;
border-radius: 12px;
padding: 30px;
margin: 40px 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.description::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--primary);
}
.description h3 {
color: var(--secondary);
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: 500;
}
.editable {
border: 1px dashed var(--light-gray);
padding: 20px;
min-height: 100px;
border-radius: 8px;
transition: all 0.3s ease;
}
.editable:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(186, 18, 18, 0.1);
}
/* Table Section */
.table-container {
background: white;
border-radius: 12px;
padding: 30px;
margin: 40px 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
overflow-x: auto;
}
.tender-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 800px;
}
.tender-table th {
background: var(--primary);
color: white;
font-weight: 500;
padding: 15px;
text-align: left;
position: sticky;
top: 0;
}
.tender-table td {
padding: 15px;
border-bottom: 1px solid var(--light-gray);
vertical-align: middle;
}
.tender-table tr:last-child td {
border-bottom: none;
}
.tender-table tr:hover td {
background: rgba(186, 18, 18, 0.03);
}
/* Admin Controls */
.admin-controls {
display: none;
gap: 15px;
margin: 20px 0;
flex-wrap: wrap;
justify-content: center;
}
button {
background: var(--primary);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
button:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(186, 18, 18, 0.2);
}
button i {
font-size: 1rem;
}
/* Login/Logout */
.auth-btn {
position: fixed;
top: 25px;
right: 25px;
z-index: 1000;
background: white;
color: var(--primary);
border: 2px solid var(--primary);
padding: 8px 16px;
border-radius: 50px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.auth-btn:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background: white;
margin: 10% auto;
padding: 30px;
border-radius: 12px;
width: 100%;
max-width: 400px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: slideDown 0.4s ease;
}
@keyframes slideDown {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.close {
color: var(--gray);
float: right;
font-size: 24px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
}
.close:hover {
color: var(--dark);
transform: rotate(90deg);
}
.modal h3 {
margin-bottom: 20px;
color: var(--secondary);
font-size: 1.5rem;
}
input {
width: 100%;
padding: 12px 15px;
margin: 10px 0;
border: 1px solid var(--light-gray);
border-radius: 8px;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}
input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(186, 18, 18, 0.1);
}
.error-message {
color: var(--primary);
font-size: 0.9rem;
margin-top: 5px;
display: block;
}
/* Footer */
footer {
background: var(--secondary);
color: white;
padding: 40px 0 20px;
margin-top: 60px;
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-logo {
height: 50px;
margin-bottom: 20px;
opacity: 0.8;
}
.contact-info {
margin-bottom: 20px;
}
.contact-link {
color: white;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.contact-link:hover {
color: var(--primary);
transform: translateY(-2px);
}
.social-links {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.social-link {
color: white;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.social-link:hover {
color: var(--primary);
transform: translateY(-3px);
}
.copyright {
font-size: 0.9rem;
opacity: 0.7;
margin-top: 20px;
}
/* Responsive */
@media (max-width: 992px) {
h1 {
font-size: 2.2rem;
}
.gallery-item {
min-width: 220px;
height: 160px;
}
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.description, .table-container {
padding: 20px;
}
.modal-content {
margin: 20% auto;
width: 90%;
}
.auth-btn {
top: 15px;
right: 15px;
padding: 6px 12px;
font-size: 0.9rem;
}
.gallery-item {
min-width: 200px;
height: 140px;
}
}
@media (max-width: 576px) {
h1 {
font-size: 1.8rem;
}
.header-content {
flex-direction: column;
gap: 15px;
}
.logo {
height: 50px;
}
.description h3, .modal h3 {
font-size: 1.3rem;
}
.editable {
padding: 15px;
}
.gallery-item {
min-width: 180px;
height: 120px;
}
button {
padding: 10px 18px;
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="header-content">
<img src="headerimage.jpg" alt="Maruti Suzuki Logo" class="logo">
</div>
</div>
</header>
<!-- Admin Login Button -->
<button class="auth-btn" id="loginBtn">
<i class="fas fa-lock"></i> Admin Login
</button>
<!-- Main Content -->
<main>
<div class="container">
<h1>MARUTI UDYOG TENDER</h1>
<!-- Gallery -->
<section class="gallery">
<div class="gallery-container">
<div class="gallery-item">
<img src="1.jpeg" alt="Tender Image 1">
</div>
<div class="gallery-item">
<img src="2.jpeg" alt="Tender Image 2">
</div>
<div class="gallery-item">
<img src="3.jpeg" alt="Tender Image 3">
</div>
<div class="gallery-item">
<img src="4.jpeg" alt="Tender Image 4">
</div>
<div class="gallery-item">
<img src="5.jpeg" alt="Tender Image 5">
</div>
<div class="gallery-item">
<img src="6.jpeg" alt="Tender Image 6">
</div>
</div>
</section>
<!-- Description -->
<section class="description">
<h3>Tender Description</h3>
<div class="editable" contenteditable="false" id="tenderDescription">
This is the tender description area. It can be edited by administrators to provide details about the tender process, requirements, and other relevant information.
</div>
</section>
<!-- Admin Controls (Hidden by default) -->
<div class="admin-controls" id="adminControls">
<button onclick="saveAllData()">
<i class="fas fa-save"></i> Save All Data
</button>
<button onclick="addRow()">
<i class="fas fa-plus"></i> Add New Row
</button>
<button onclick="clearAllData()">
<i class="fas fa-trash"></i> Clear All Data
</button>
</div>
<!-- Tender Table -->
<section class="table-container">
<table class="tender-table" id="tenderTable">
<thead>
<tr>
<th>Serial No.</th>
<th>Product Name</th>
<th>Tender Number</th>
<th>Due Date</th>
<th>End Date</th>
<th>Tender Form Cost</th>
</tr>
</thead>
<tbody>
<!-- Rows will be added dynamically -->
</tbody>
</table>
</section>
</div>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<img src="headerimage.jpg" alt="Maruti Suzuki Logo" class="footer-logo">
<div class="contact-info">
<a href="mailto:mudyogltd@gmail.com" class="contact-link">
<i class="fas fa-envelope"></i> mudyogltd@gmail.com
</a>
</div>
<div class="social-links">
<a href="https://morning.is-a.dev/" class="social-link"><i class="fab fa-dev"></i></a>
</div>
<p class="copyright">© 2023 Maruti Udyog Limited. All Rights Reserved.</p>
</div>
</div>
</footer>
<!-- Login Modal -->
<div id="loginModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span>
<h3>Admin Login</h3>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button onclick="login()" style="width: 100%; margin-top: 15px;">
<i class="fas fa-sign-in-alt"></i> Login
</button>
<span id="loginError" class="error-message"></span>
</div>
</div>
<script>
// Admin credentials (in a real app, this would be server-side)
const ADMIN_CREDENTIALS = {
username: "admin",
password: "maruti123"
};
let isAdmin = false;
// DOM Elements
const loginBtn = document.getElementById('loginBtn');
const adminControls = document.getElementById('adminControls');
const tenderDescription = document.getElementById('tenderDescription');
const loginModal = document.getElementById('loginModal');
const loginError = document.getElementById('loginError');
const tenderTable = document.getElementById('tenderTable');
const tbody = tenderTable.querySelector('tbody');
// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
loadAllData();
});
// ======================
// DATA PERSISTENCE LOGIC
// ======================
function saveAllData() {
if (!isAdmin) return;
const data = {
description: tenderDescription.innerHTML,
tableData: getTableData()
};
localStorage.setItem('tenderPortalData', JSON.stringify(data));
showNotification('All data saved successfully!');
}
function loadAllData() {
const savedData = localStorage.getItem('tenderPortalData');
if (savedData) {
const data = JSON.parse(savedData);
// Load description
if (data.description) {
tenderDescription.innerHTML = data.description;
}
// Load table data
if (data.tableData && data.tableData.length > 0) {
populateTable(data.tableData);
} else {
// Add initial empty row if no data exists
addRow();
}
} else {
// Add initial empty row if no data exists
addRow();
}
}
function clearAllData() {
if (!isAdmin) return;
if (confirm('Are you sure you want to clear all data? This cannot be undone.')) {
localStorage.removeItem('tenderPortalData');
tenderDescription.innerHTML = '';
tbody.innerHTML = '';
addRow(); // Add back one empty row
showNotification('All data cleared successfully');
}
}
function getTableData() {
const tableData = [];
const rows = tbody.querySelectorAll('tr');
rows.forEach(row => {
const cells = row.querySelectorAll('td');
// Skip serial number (index 0)
const rowData = {
productName: cells[1].textContent,
tenderNumber: cells[2].textContent,
dueDate: cells[3].textContent,
endDate: cells[4].textContent,
formCost: cells[5].textContent
};
tableData.push(rowData);
});
return tableData;
}
function populateTable(data) {
tbody.innerHTML = '';
data.forEach((row, index) => {
const newRow = tbody.insertRow();
newRow.innerHTML = `
<td>${index + 1}</td>
<td contenteditable="${isAdmin}">${row.productName || ''}</td>
<td contenteditable="${isAdmin}">${row.tenderNumber || ''}</td>
<td contenteditable="${isAdmin}">${row.dueDate || ''}</td>
<td contenteditable="${isAdmin}">${row.endDate || ''}</td>
<td contenteditable="${isAdmin}">${row.formCost || ''}</td>
`;
});
// Ensure at least one row exists
if (data.length === 0) {
addRow();
}
}
// ======================
// ADMIN CONTROL FUNCTIONS
// ======================
function addRow() {
if (!isAdmin) return;
const rowCount = tbody.querySelectorAll('tr').length;
const newRow = tbody.insertRow();
newRow.innerHTML = `
<td>${rowCount + 1}</td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
`;
showNotification('New row added');
}
// ======================
// AUTHENTICATION FUNCTIONS
// ======================
// Open modal
loginBtn.addEventListener('click', () => {
loginModal.style.display = 'block';
});
// Close modal
function closeModal() {
loginModal.style.display = 'none';
loginError.textContent = '';
document.getElementById('username').value = '';
document.getElementById('password').value = '';
}
// Close modal when clicking outside
window.addEventListener('click', (e) => {
if (e.target === loginModal) {
closeModal();
}
});
// Login function
function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === ADMIN_CREDENTIALS.username && password === ADMIN_CREDENTIALS.password) {
isAdmin = true;
closeModal();
adminControls.style.display = 'flex';
tenderDescription.contentEditable = 'true';
loginError.textContent = '';
// Make all table cells editable
const editableCells = document.querySelectorAll('td[contenteditable="false"]');
editableCells.forEach(cell => {
cell.contentEditable = 'true';
});
// Change button to logout
loginBtn.innerHTML = '<i class="fas fa-sign-out-alt"></i> Logout';
loginBtn.onclick = logout;
showNotification('Admin access granted');
} else {
loginError.textContent = 'Invalid username or password';
}
}
// Logout function
function logout() {
isAdmin = false;
adminControls.style.display = 'none';
tenderDescription.contentEditable = 'false';
// Make all table cells non-editable
const editableCells = document.querySelectorAll('td[contenteditable="true"]');
editableCells.forEach(cell => {
cell.contentEditable = 'false';
});
// Change button back to login
loginBtn.innerHTML = '<i class="fas fa-lock"></i> Admin Login';
loginBtn.onclick = () => loginModal.style.display = 'block';
showNotification('Logged out successfully');
}
// ======================
// UTILITY FUNCTIONS
// ======================
// Show notification
function showNotification(message) {
const notification = document.createElement('div');
notification.style.position = 'fixed';
notification.style.bottom = '20px';
notification.style.right = '20px';
notification.style.backgroundColor = 'var(--primary)';
notification.style.color = 'white';
notification.style.padding = '15px 25px';
notification.style.borderRadius = '8px';
notification.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
notification.style.zIndex = '1000';
notification.style.animation = 'slideIn 0.3s ease';
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'fadeOut 0.3s ease';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
// Add keyframe animations
const style = document.createElement('style');
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment