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

172
index.html
View File

@ -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">
<label for="user">User:</label>
<input type="text" id="user" name="user">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="ccEmail">CC Email:</label>
<input type="text" id="ccEmail" name="ccEmail">
<label for="bccEmail">BCC Email:</label>
<input type="text" id="bccEmail" name="bccEmail">
<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 -->
<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>
<!-- 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>
</div>
<!-- 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">
</div>
<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");
if (targetTab) {
targetTab.classList.add("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() {
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>