refactoring
This commit is contained in:
Ettore Di Giacinto
223
webui/views/partials/header.html
Normal file
223
webui/views/partials/header.html
Normal file
@@ -0,0 +1,223 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;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">
|
||||
<script src="https://unpkg.com/htmx.org"></script>
|
||||
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
|
||||
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
||||
|
||||
<script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://unpkg.com/alpinejs" defer></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
.section-box {
|
||||
background-color: #2a2a2a; /* Darker background for the form */
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #1a1a1a; /* Lighter overall background */
|
||||
color: #ffffff;
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
input, button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="file"] {
|
||||
background-color: #333333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4a76a8; /* Blue color for buttons */
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #5a86b8;
|
||||
}
|
||||
textarea {
|
||||
height: 200px; /* Increased height for better JSON visibility */
|
||||
}
|
||||
/* Enhancing select box styles */
|
||||
select {
|
||||
appearance: none; /* Remove default system appearance */
|
||||
background-color: #333; /* Darker background for the dark theme */
|
||||
border: 2px solid #555; /* Slightly lighter border for contrast */
|
||||
color: white; /* Text color */
|
||||
padding: 10px; /* Padding inside the select box */
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /* Custom dropdown arrow using SVG */
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center; /* Positioning the arrow nicely */
|
||||
background-size: 12px; /* Size of the arrow */
|
||||
cursor: pointer; /* Cursor indicates it's clickable */
|
||||
}
|
||||
|
||||
select:hover {
|
||||
border-color: #777; /* Lighter border on hover for visibility */
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none; /* Remove default focus outline */
|
||||
border-color: #1e90ff; /* Focus color similar to the hover background of buttons */
|
||||
box-shadow: 0 0 3px #1e90ff; /* Adding a slight glow effect */
|
||||
}
|
||||
|
||||
select {
|
||||
/* Previous styles */
|
||||
overflow-y: auto; /* Ensures that a scrollbar is available when needed */
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: #333; /* Dark background for each option */
|
||||
color: white; /* Light color for the text */
|
||||
padding: 8px 10px; /* Padding for each option */
|
||||
}
|
||||
|
||||
/* Adding a hover effect for options is not consistently supported across all browsers */
|
||||
select:hover option {
|
||||
background-color: #444; /* Slightly lighter background on hover */
|
||||
}
|
||||
|
||||
/* Custom Scrollbars for the dropdown */
|
||||
select {
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
scrollbar-color: #666 #333; /* Firefox: thumb and track color */
|
||||
}
|
||||
|
||||
select::-webkit-scrollbar {
|
||||
width: 8px; /* For WebKit browsers */
|
||||
}
|
||||
|
||||
select::-webkit-scrollbar-track {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
select::-webkit-scrollbar-thumb {
|
||||
background-color: #666;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
/* Basic setup for the checkbox */
|
||||
.checkbox-custom {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px; /* Width of the checkbox */
|
||||
height: 20px; /* Height of the checkbox */
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Hide the default checkbox input */
|
||||
.checkbox-custom input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Create a custom box */
|
||||
.checkbox-custom .checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #444; /* Dark grey box */
|
||||
border-radius: 4px; /* Rounded corners for the box */
|
||||
border: 1px solid #777; /* Slightly lighter border */
|
||||
}
|
||||
|
||||
/* On mouse-over, add a different border color */
|
||||
.checkbox-custom:hover .checkmark {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, change the background and insert a checkmark */
|
||||
.checkbox-custom input:checked ~ .checkmark {
|
||||
background-color: #1e90ff; /* Blue background for checked state */
|
||||
border-color: #1e90ff;
|
||||
}
|
||||
|
||||
/* Create the checkmark using a pseudo element */
|
||||
.checkbox-custom .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
.checkbox-custom input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Style the checkmark */
|
||||
.checkbox-custom .checkmark:after {
|
||||
left: 7px;
|
||||
top: 3px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.card-link {
|
||||
text-decoration: none; /* Removes underline from links */
|
||||
}
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px auto;
|
||||
text-align: left;
|
||||
width: 90%;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
|
||||
display: block; /* Ensures the link fills the card */
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-5px); /* Slight lift effect */
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Shadow for depth */
|
||||
}
|
||||
.card h2 {
|
||||
font-size: 1.5em; /* Larger and more prominent */
|
||||
font-weight: bold; /* Ensures boldness */
|
||||
color: white; /* Ensures visibility against the card's background */
|
||||
margin-bottom: 0.5em; /* Space below the heading */
|
||||
}
|
||||
.card a,
|
||||
.card p {
|
||||
color: white; /* Ensures text color is consistent */
|
||||
}
|
||||
.card p {
|
||||
font-size: 1em;
|
||||
}
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user