Isaak/cuori
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨✨ Refactor HTML Styles & Add Nav Tabs

Browse Source 
- 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:
Isaak Buslovich 2023-12-23 00:51:57 +01:00
parent 2236de57ce
commit 7859861273
Signed by: Isaak
GPG Key ID: EEC31D6437FBCC63
1 changed files with 101 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
index.html
View File

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