initial
This commit is contained in:
parent
d520cd31c5
commit
bbf4f9ed15
GPG Key ID:
EEC31D6437FBCC63
216
app/static/css/style.css
Normal file
216
app/static/css/style.css
Normal file
@ -0,0 +1,216 @@
|
||||
/* Import Google Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
|
||||
/* Body and Global Styles */
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #F8F9FA;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #FFFFFF;
|
||||
width: 60px; /* Collapsed width */
|
||||
height: 100%;
|
||||
transition: width 0.3s ease; /* Smooth transition for expanding */
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.sidebar:hover, .sidebar.sidebar-expanded {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
color: #343A40;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s, padding-left 0.3s;
|
||||
cursor: pointer;
|
||||
overflow: hidden; /* Hide overflow when sidebar is collapsed */
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #007BFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 10px;
|
||||
transition: transform 0.3s ease; /* Smooth icon transition */
|
||||
}
|
||||
|
||||
.sidebar:hover .menu-icon, .sidebar.sidebar-expanded .menu-icon {
|
||||
transform: rotate(360deg); /* Rotate icon on hover */
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.3s ease, width 0.3s ease;
|
||||
display: none; /* Hide labels initially */
|
||||
}
|
||||
|
||||
.sidebar:hover .menu-label, .sidebar.sidebar-expanded .menu-label {
|
||||
display: inline; /* Show labels when sidebar is expanded */
|
||||
}
|
||||
|
||||
/* Adjust sidebar for touch devices (no hover) */
|
||||
@media (hover: none) {
|
||||
.sidebar:hover .menu-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar-expanded {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-left: 60px;
|
||||
width: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.sidebar-expanded + .container {
|
||||
margin-left: 200px;
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Content Styles */
|
||||
.container {
|
||||
margin-left: 60px;
|
||||
transition: margin-left 0.3s ease;
|
||||
padding: 20px;
|
||||
width: calc(100% - 60px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Form and Button Styles */
|
||||
input, .button {
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #003875;
|
||||
}
|
||||
|
||||
/* Login Overlay Styles */
|
||||
.login-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.login-window {
|
||||
background-color: #fff;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Tabbed Interface Styles */
|
||||
.tab-group {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.tab-group li {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.tab-group li a {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
background: #eee;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.tab-group li a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.tab-group .active a {
|
||||
background: #fff;
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
/* Tab Content */
|
||||
.tab-content {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
}
|
||||
42
app/static/js/script.js
Normal file
42
app/static/js/script.js
Normal file
@ -0,0 +1,42 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Tab switching functionality
|
||||
const tabs = document.querySelectorAll('.tab a');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
document.querySelectorAll('.tab, .tab-pane').forEach(elem => elem.classList.remove('active'));
|
||||
tab.parentElement.classList.add('active');
|
||||
document.querySelector(tab.getAttribute('href')).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Password validation in the registration form
|
||||
const passwordInput = document.getElementById('new-password');
|
||||
const confirmPasswordInput = document.getElementById('confirm-password');
|
||||
const handlePasswordValidation = () => {
|
||||
const isValid = passwordInput.value === confirmPasswordInput.value;
|
||||
[passwordInput, confirmPasswordInput].forEach(input => input.classList.toggle('invalid', !isValid));
|
||||
return isValid;
|
||||
};
|
||||
[passwordInput, confirmPasswordInput].forEach(input => input.addEventListener('input', handlePasswordValidation));
|
||||
const registrationForm = document.getElementById('registration-form');
|
||||
registrationForm.addEventListener('submit', event => {
|
||||
if (!handlePasswordValidation()) {
|
||||
event.preventDefault();
|
||||
alert("Passwords do not match.");
|
||||
}
|
||||
});
|
||||
|
||||
// Simple login validation
|
||||
const loginForm = document.getElementById('login-form');
|
||||
loginForm.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
if (username === 'test' && password === 'test') {
|
||||
document.getElementById('login-overlay').style.display = 'none';
|
||||
} else {
|
||||
alert("Invalid username or password");
|
||||
}
|
||||
});
|
||||
});
|
||||
95
app/templates/index.html
Normal file
95
app/templates/index.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Enhanced Web App with Sidebar</title>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="/static/css/style.css" rel="stylesheet" type="text/css">
|
||||
<script src="https://unpkg.com/htmx.org"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-overlay" id="login-overlay">
|
||||
<div class="login-window">
|
||||
<!-- Tab Headers -->
|
||||
<ul class="tab-group">
|
||||
<li class="tab active"><a href="#login-tab">Login</a></li>
|
||||
<li class="tab"><a href="#signup-tab">Sign Up</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab Contents -->
|
||||
<div class="tab-content">
|
||||
<!-- Login Tab Pane -->
|
||||
<div class="tab-pane active" id="login-tab">
|
||||
<h2>Login</h2>
|
||||
<form action="#" id="login-form" method="post">
|
||||
<div class="form-group">
|
||||
<label for="username">Username:</label>
|
||||
<input id="username" name="username" type="text">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input id="password" name="password" type="password">
|
||||
</div>
|
||||
<button class="button" type="submit">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Signup Tab Pane -->
|
||||
<div class="tab-pane" id="signup-tab">
|
||||
<h2>Sign Up</h2>
|
||||
<form action="#" id="registration-form" method="post">
|
||||
<div class="form-group">
|
||||
<label for="new-username">Username:</label>
|
||||
<input id="new-username" name="new-username" type="text">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-password">Password:</label>
|
||||
<input id="new-password" name="new-password" type="password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirm-password">Confirm Password:</label>
|
||||
<input id="confirm-password" name="confirm-password" type="password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email:</label>
|
||||
<input id="email" name="email" type="email">
|
||||
</div>
|
||||
<button class="button" type="submit">Register</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar">
|
||||
<div class="menu-item">
|
||||
<span class="material-icons menu-icon">dashboard</span>
|
||||
<span class="menu-label">Übersicht</span>
|
||||
</div>
|
||||
<div class="menu-item" hx-get="/buchhaltung" hx-trigger="click" hx-target="#main-content">
|
||||
<span class="material-icons menu-icon">account_balance_wallet</span>
|
||||
<span class="menu-label">Buchhaltung</span>
|
||||
</div>
|
||||
<div class="menu-item" hx-get="/flottenmanagement" hx-trigger="click" hx-target="#main-content">
|
||||
<span class="material-icons menu-icon">directions_car</span>
|
||||
<span class="menu-label">Flottenmanagement</span>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<span class="material-icons menu-icon">people</span>
|
||||
<span class="menu-label">Mitarbeiter</span>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<span class="material-icons menu-icon">settings</span>
|
||||
<span class="menu-label">Einstellungen</span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<section id="main-content">
|
||||
<!-- Initial content or instruction for the user -->
|
||||
<h1>Tocknerheld-Dashboard</h1>
|
||||
<p>Select a menu item to view content.</p>
|
||||
</section>
|
||||
</div>
|
||||
<script src="/static/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
14
app/templates/partials/buchhaltung.html
Normal file
14
app/templates/partials/buchhaltung.html
Normal file
@ -0,0 +1,14 @@
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-container">
|
||||
<h3 class="card-title">Card Title 1</h3>
|
||||
<p class="card-text">This is a description for card 1.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-container">
|
||||
<h3 class="card-title">Card Title 2</h3>
|
||||
<p class="card-text">This is a description for card 2.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
14
app/templates/partials/flottenmanagement.html
Normal file
14
app/templates/partials/flottenmanagement.html
Normal file
@ -0,0 +1,14 @@
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-container">
|
||||
<h3 class="card-title">Card Title 3</h3>
|
||||
<p class="card-text">This is a description for card 3.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-container">
|
||||
<h3 class="card-title">Card Title 4</h3>
|
||||
<p class="card-text">This is a description for card 4.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user