🎨✨ Refactor HTML Styles & Add Nav Tabs
- Introduced color, font, border, shadow, and transition variables. - Styled nav tabs, tab content, buttons, form elements, and status bar. - Added tabs for config, CSV management, and email ops. - Implemented tab switching and config load/save functions. - Added status message display functionality.
This commit is contained in:
parent
2236de57ce
commit
7859861273
GPG Key ID:
EEC31D6437FBCC63
144
index.html
144
index.html
@ -7,22 +7,20 @@
|
||||
<title>Invoice Email Sender</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* Global styles */
|
||||
:root {
|
||||
/* color scheme */
|
||||
/* Color scheme variables */
|
||||
--primary-color: #007bff;
|
||||
--primary-dark: #0056b3;
|
||||
--secondary-color: #333;
|
||||
--light-color: #f4f7fa;
|
||||
--lighter-color: #f8f9fa;
|
||||
--error-color: #ee5555;
|
||||
|
||||
/* Font and border styling */
|
||||
/* Font, border, shadow, and transition variables */
|
||||
--font-family: 'Lora', serif;
|
||||
--border-radius: 10px;
|
||||
--border-color: #ccc;
|
||||
--border-focus-color: #007bff;
|
||||
|
||||
/* Shadow and transitions */
|
||||
--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
--transition-speed: 0.3s;
|
||||
}
|
||||
@ -46,6 +44,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Navigation tab styling */
|
||||
.nav-tab {
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
@ -60,17 +59,19 @@
|
||||
border-bottom: 3px solid var(--primary-color);
|
||||
}
|
||||
|
||||
/* Tab content area styling */
|
||||
.tab-content {
|
||||
display: none; /* Hide all tab content by default */
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
display: block; /* Display active tab content */
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
.button {
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
@ -88,6 +89,7 @@
|
||||
background-color: var(--primary-dark);
|
||||
}
|
||||
|
||||
/* Form element styling */
|
||||
input[type="text"], input[type="password"], textarea {
|
||||
width: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
@ -113,6 +115,7 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Status bar styling */
|
||||
.status-bar {
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
@ -123,84 +126,109 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="appContainer">
|
||||
<div>
|
||||
<div class="nav-tab active" id="configTab">Configuration</div>
|
||||
<div class="nav-tab" id="csvTab">CSV Management</div>
|
||||
<div class="nav-tab" id="emailTab">Email Operations</div>
|
||||
</div>
|
||||
<div id="config" class="tab-content active">
|
||||
<!-- Navigation Tabs -->
|
||||
<nav>
|
||||
<div class="nav-tab active" data-target="config">Configuration</div>
|
||||
<div class="nav-tab" data-target="csv">CSV Management</div>
|
||||
<div class="nav-tab" data-target="email">Email Operations</div>
|
||||
</nav>
|
||||
<!-- Configuration Form -->
|
||||
<section id="config" class="tab-content active">
|
||||
<form id="configForm">
|
||||
<!-- Configuration Fields -->
|
||||
<div class="form-group">
|
||||
<label for="user">User:</label>
|
||||
<input type="text" id="user" name="user">
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password">
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="ccEmail">CC Email:</label>
|
||||
<input type="text" id="ccEmail" name="ccEmail">
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="bccEmail">BCC Email:</label>
|
||||
<input type="text" id="bccEmail" name="bccEmail">
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="emailTemplate">Email Template:</label>
|
||||
<textarea id="emailTemplate" rows="6"></textarea>
|
||||
|
||||
<button class="button" id="loadConfigBtn">Load Config</button>
|
||||
<button class="button" id="saveConfigBtn">Save Config</button>
|
||||
</div>
|
||||
|
||||
<div id="csv" class="tab-content">
|
||||
<!-- CSV Management Content -->
|
||||
<!-- Form Action Buttons -->
|
||||
<div class="form-actions">
|
||||
<button class="button" type="button" id="loadConfigBtn">Load Config</button>
|
||||
<button class="button" type="button" id="saveConfigBtn">Save Config</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<!-- CSV Management Form -->
|
||||
<section id="csv" class="tab-content">
|
||||
<form id="csvForm">
|
||||
<div class="form-group">
|
||||
<label for="csvPath">CSV Path:</label>
|
||||
<input type="text" id="csvPath" name="csvPath">
|
||||
<button class="button">Load CSV</button>
|
||||
</div>
|
||||
|
||||
<div id="email" class="tab-content">
|
||||
<!-- Email Operations Content -->
|
||||
<button class="button">Send Emails</button>
|
||||
<label>
|
||||
<textarea rows="10">Log output here...</textarea>
|
||||
</label>
|
||||
<div class="form-actions">
|
||||
<button class="button" type="button">Load CSV</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
<!-- Email Operations Form -->
|
||||
<section id="email" class="tab-content">
|
||||
<form id="emailForm">
|
||||
<div class="form-actions">
|
||||
<button class="button" type="button">Send Emails</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="emailLogs">Email Logs:</label>
|
||||
<textarea id="emailLogs" rows="10">Log output here...</textarea>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar" id="statusMessage">Status: Ready</div>
|
||||
</div>
|
||||
<script>
|
||||
// Page Initialization
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||||
tab.addEventListener('click', function () {
|
||||
changeTab(this.getAttribute('data-target'));
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('loadConfigBtn').addEventListener('click', loadConfig);
|
||||
document.getElementById('saveConfigBtn').addEventListener('click', saveConfig);
|
||||
document.getElementById('configTab').addEventListener('click', function (event) {
|
||||
changeTab(event, 'config')
|
||||
});
|
||||
document.getElementById('csvTab').addEventListener('click', function (event) {
|
||||
changeTab(event, 'csv')
|
||||
});
|
||||
document.getElementById('emailTab').addEventListener('click', function (event) {
|
||||
changeTab(event, 'email')
|
||||
});
|
||||
});
|
||||
|
||||
function changeTab(event, tabId) {
|
||||
const tabContents = document.getElementsByClassName("tab-content");
|
||||
const tabs = document.getElementsByClassName("nav-tab");
|
||||
// Tab change function
|
||||
function changeTab(targetId) {
|
||||
const tabContents = document.querySelectorAll(".tab-content");
|
||||
const tabs = document.querySelectorAll(".nav-tab");
|
||||
|
||||
// Hide all tab contents
|
||||
for (let i = 0; i < tabContents.length; i++) {
|
||||
tabContents[i].style.display = "none"; // Hide
|
||||
tabContents[i].classList.remove("active");
|
||||
tabContents.forEach(tab => {
|
||||
tab.style.display = "none";
|
||||
tab.classList.remove("active");
|
||||
});
|
||||
|
||||
tabs.forEach(tab => tab.classList.remove("active"));
|
||||
|
||||
const targetTabContent = document.getElementById(targetId);
|
||||
const targetTab = document.querySelector(`.nav-tab[data-target="${targetId}"]`);
|
||||
|
||||
if (targetTabContent) {
|
||||
targetTabContent.style.display = "block";
|
||||
targetTabContent.classList.add("active");
|
||||
}
|
||||
|
||||
// Remove 'active' class from all tabs
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
tabs[i].classList.remove("active");
|
||||
}
|
||||
|
||||
// Show the clicked tab content and add 'active' class
|
||||
document.getElementById(tabId).style.display = "block";
|
||||
document.getElementById(tabId).classList.add("active");
|
||||
event.currentTarget.classList.add("active");
|
||||
if (targetTab) {
|
||||
targetTab.classList.add("active");
|
||||
}
|
||||
}
|
||||
|
||||
// Configuration load function
|
||||
function loadConfig() {
|
||||
fetch('/data')
|
||||
.then(response => {
|
||||
@ -226,6 +254,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Configuration save function
|
||||
function saveConfig() {
|
||||
const emailData = {
|
||||
user: document.getElementById('user').value,
|
||||
@ -266,13 +295,14 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Status bar update function
|
||||
function updateStatusBar(message, isError = false) {
|
||||
const statusBar = document.getElementById('statusMessage');
|
||||
statusBar.textContent = message;
|
||||
if (isError) {
|
||||
statusBar.style.color = 'var(--error-color)';
|
||||
} else {
|
||||
statusBar.style.color = 'initial'; // or any other color for normal messages
|
||||
statusBar.style.color = 'initial';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user