aboutsummaryrefslogtreecommitdiff
path: root/website4/public/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'website4/public/assets/css')
-rw-r--r--website4/public/assets/css/dialon.css313
-rw-r--r--website4/public/assets/css/extras.css180
-rw-r--r--website4/public/assets/css/hamburger.css138
-rw-r--r--website4/public/assets/css/navbar.css224
4 files changed, 855 insertions, 0 deletions
diff --git a/website4/public/assets/css/dialon.css b/website4/public/assets/css/dialon.css
new file mode 100644
index 0000000..96c1e85
--- /dev/null
+++ b/website4/public/assets/css/dialon.css
@@ -0,0 +1,313 @@
+/* Base Styles */
+:root {
+ --primary-color: #ff9900;
+ --secondary-color: #1a1a1a;
+ --background-color: #333;
+ --text-color: #e6e6e6;
+ --border-color: #444;
+ --navbar-color: #d88900;
+ --navbar-text-color: #fff;
+ --navbar-hover-color: #ffbb00;
+ --hover-color: #ffbb00;
+ --hover-text-color: #1a1a1a;
+}
+
+@font-face {
+ font-family: 'default-512';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/default.ttf') format('truetype');
+}
+
+body {
+ background-color: var(--secondary-color);
+ color: var(--text-color);
+ margin: 0;
+ padding: 0;
+ font-family: Arial, comic-sans; /* ich bin so lustig */
+}
+
+header, .header-content {
+ background-color: var(--secondary-color);
+ color: var(--text-color);
+ text-align: center; /* Center the header content wenn mer kei bock uf navbar her */
+}
+
+header h1 {
+ color: var(--primary-color);
+ font-family: 'default-512', Arial, sans-serif; /* fonts sexi mache*/
+}
+
+h2 {
+ color: var(--primary-color);
+ font-family: 'default-512', Arial, sans-serif; /* nomal fonts sexi mache will us irgend nem grund die ganz site kappoot gaht wenn ich d'funt universal ahwände*/
+}
+
+.sidebar, .sidebar-right, .box, .chat-log, .chat-input .breadcrumbs {
+ background-color: var(--background-color);
+ border: 1px solid var(--border-color);
+ border-radius: 10px; /* mmmm rundi ecke damit mer sich ned ritzt */
+}
+
+.breadcrumbs {
+ background-color: var(--background-color);
+ border: 1px solid var(--border-color);
+ border-radius: 10px;
+ padding: 10px;
+ margin-bottom: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+.breadcrumbs a {
+ color: var(--primary-color);
+ text-decoration: none;
+}
+
+.breadcrumbs a:hover {
+ text-decoration: underline;
+}
+
+.sidebar {
+ float: left;
+ width: 20%;
+ min-width: 200px;
+ max-width: 250px;
+ padding: 10px;
+ padding-bottom: 0px;
+ box-sizing: border-box;
+ padding-bottom: 0px;
+}
+
+.sidebar-right {
+ float: right;
+ width: 20%;
+ min-width: 200px;
+ max-width: 250px;
+ padding: 10px;
+ padding-bottom: 0px;
+ box-sizing: border-box;
+}
+
+.sidebar a, .sidebar-right a, .services a, .menu-overlay .menu-links a, .load-more-button, .mobile-navbar-menu button{
+ display: block;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ padding: 12px 20px;
+ text-decoration: none;
+ border-radius: 10px;
+ transition: background-color 0.3s ease;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+ margin-bottom: 10px;
+ font-family: 'default-512', Arial, sans-serif;
+ border: none;
+}
+
+.sidebar a:hover, .sidebar-right a:hover, .sidebar a.active, .sidebar-right a.active, .services a:hover, .menu-overlay .menu-links a:hover, .load-more-button:hover {
+ background-color: var(--hover-color);
+ color: var(--hover-text-color);
+}
+
+.container {
+ flex: 1;
+ display: flex;
+ width: 100%;
+ min-width: 300px;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ margin: 20px auto 0;
+ max-width: 1200px;
+}
+
+.content {
+ width: 60%;
+ flex-grow: 1;
+ padding: 10px;
+ box-sizing: border-box;
+}
+
+.box {
+ margin-bottom: 10px;
+ padding: 10px;
+}
+
+.box h3 {
+ margin: 0 0 10px 0;
+ font-size: 16px;
+ color: var(--primary-color);
+ font-family: 'default-512', Arial, sans-serif;
+
+}
+
+.box p, .box a {
+ margin: 5px 0;
+ font-size: 14px;
+ color: var(--text-color);
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+.box a {
+ color: var(--primary-color);
+ text-decoration: none;
+}
+
+.box a:hover {
+ text-decoration: underline;
+}
+
+footer {
+ background-color: var(--border-color);
+ color: var(--text-color);
+ text-align: center;
+ padding: 10px 0;
+ font-size: 14px;
+ width: 100%;
+ flex-shrink: 0;
+}
+
+hr {
+ border: 1px solid var(--border-color);
+ margin: 20px 0;
+}
+
+.left-aligned-title {
+ text-align: left;
+ font-size: 48px;
+ font-weight: bold;
+ color: var(--primary-color);
+ margin-bottom: 15px;
+ text-decoration: none;
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+.navbar-title {
+
+ text-decoration: none;
+}
+
+.no-top-m {
+ margin-top: 0 !important;
+}
+
+.ascii-box {
+ border: 2px solid #555;
+ border-radius: 10px;
+ padding: 20px;
+ color: var(--primary-color);
+ font-size: 18px;
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+.services {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 20px;
+ margin: 20px 0;
+}.chat-container {
+ position: fixed;
+ bottom: 0;
+ right: 20px;
+ width: 90%;
+ max-width: 400px;
+ background-color: var(--secondary-color);
+ border: 2px solid var(--border-color);
+ border-radius: 10px;
+ padding: 20px;
+ z-index: 1001;
+ transform: translateY(100%);
+ opacity: 0;
+ transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
+ visibility: hidden;
+}
+
+.chat-container.open {
+ transform: translateY(0);
+ opacity: 1;
+ visibility: visible;
+}
+
+.chat-header {
+ font-size: 20px;
+ font-weight: bold;
+ color: var(--secondary-color);
+ text-align: center;
+ margin-bottom: 10px;
+ position: relative;
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+.audio-track {
+ margin: 20px 0;
+ text-align: center;
+}
+
+.complaints {
+ text-align: center;
+ margin-top: 40px;
+}
+
+.complaints a {
+ color: #ffbb00;
+ text-decoration: none;
+ transition: color 0.3s ease;
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+.complaints a:hover {
+ color: #ff99cc;
+}
+
+.mobile-only {
+ display: none;
+}
+
+ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+ul li {
+ padding: 10px 15px;
+ margin-bottom: 10px;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+ul li::before {
+ content: "•";
+ color: var(--primary-color);
+ padding-right: 10px;
+}
+
+ul li span {
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+
+
+h4 {
+ text-decoration: underline;
+ size: 12px;
+ color: var(--primary-color);
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+@media screen and (max-width: 1280px) {
+ .sidebar, .sidebar-right {
+ display: none;
+ }
+}
+
+@media screen and (min-width: 1281px) {
+ .hamburger-menu {
+ display: none;
+ }
+
+ .chat-toggle-btn {
+ bottom: 20px;
+ }
+}
+
diff --git a/website4/public/assets/css/extras.css b/website4/public/assets/css/extras.css
new file mode 100644
index 0000000..4a9f2fc
--- /dev/null
+++ b/website4/public/assets/css/extras.css
@@ -0,0 +1,180 @@
+.send-btn {
+ background-color: var(--primary-color);
+ color: var(--secondary-color);
+}
+
+.send-btn:hover {
+ background-color: #ffbb00;
+}
+
+.chat-toggle-btn {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ width: 50px;
+ height: 50px;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+ cursor: pointer;
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ transition: background-color 0.3s ease;
+ background-color: var(--background-color);
+ color: var(--primary-color);
+}
+
+.chat-toggle-btn svg {
+ width: 24px;
+ height: 24px;
+ fill: var(--primary-color);
+ transition: fill 0.3s ease;
+}
+
+.chat-toggle-btn:hover,
+.chat-toggle-btn.open {
+ background-color: var(--primary-color);
+}
+
+.chat-toggle-btn:hover svg,
+.chat-toggle-btn.open svg {
+ fill: var(--secondary-color);
+}
+
+.chat-close-btn {
+ color: var(--primary-color);
+}
+
+.chat-close-btn:hover {
+ color: var(--secondary-color);
+}
+
+.chat-close-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+ font-size: 18px;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.chat-log {
+ height: 300px;
+ overflow-y: auto;
+ padding: 10px;
+ border-radius: 10px;
+ margin-bottom: 10px;
+ font-family: 'Courier New', Courier, monospace;
+}
+
+.chat-message {
+ margin: 5px 0;
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+.chat-message .sender {
+ font-weight: bold;
+}
+
+.chat-message .virtual-assistant {
+ color: red;
+}
+
+.chat-message .user {
+ color: blue;
+}
+
+.chat-input-container {
+ display: flex;
+ gap: 10px;
+}
+
+.chat-input {
+ flex: 1;
+ padding: 10px;
+ border-radius: 10px;
+ font-family: 'default-512', Arial, sans-serif;
+ color: var(--primary-color);
+ background-color: var(--secondary-color);
+ border: 1px solid var(--border-color);
+}
+
+.chat-input:focus {
+ outline: none;
+ border-color: var(--primary-color);
+}
+
+.send-btn {
+ padding: 10px;
+ border: none;
+ cursor: pointer;
+ border-radius: 10px;
+}
+
+.chat-container {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ margin-right: 20px;
+ max-width: 400px;
+ background-color: var(--secondary-color);
+ border: 2px solid var(--border-color);
+ border-radius: 10px;
+ padding: 20px;
+ z-index: 1001;
+ transform: translateY(100%);
+ opacity: 0;
+ transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
+ visibility: hidden;
+}
+
+.chat-container.open {
+ transform: translateY(0);
+ opacity: 1;
+ visibility: visible;
+}
+
+.chat-header {
+ font-size: 20px;
+ font-weight: bold;
+ color: var(--primary-color);
+ text-align: center;
+ margin-bottom: 10px;
+ position: relative;
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+@media (max-width: 600px) {
+ .chat-container {
+ width: 100%;
+ margin: 0px;
+ padding: 20px;
+ box-sizing: border-box;
+ }
+}
+
+@media (min-width: 1280px) {
+ .sidebar, .sidebar-right {
+ display: block;
+ }
+
+ .chat-toggle-btn {
+ bottom: 20px;
+ right: 20px;
+ }
+}
+
+@media (max-width: 1279px) {
+ .sidebar, .sidebar-right {
+ display: none;
+ }
+
+ .chat-toggle-btn {
+ bottom: 100px;
+ right: 20px;
+ }
+}
diff --git a/website4/public/assets/css/hamburger.css b/website4/public/assets/css/hamburger.css
new file mode 100644
index 0000000..031d011
--- /dev/null
+++ b/website4/public/assets/css/hamburger.css
@@ -0,0 +1,138 @@
+.hamburger-menu {
+ display: none;
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ width: 50px;
+ height: 50px;
+ background-color: var(--background-color);
+ color: var(--primary-color);
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+ cursor: pointer;
+ z-index: 1001;
+ transition: background-color 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+}
+
+.hamburger-menu svg {
+ width: 24px;
+ height: 24px;
+ fill: var(--primary-color);
+ transition: fill 0.3s ease;
+}
+
+.hamburger-menu:hover,
+.hamburger-menu.open {
+ background-color: var(--primary-color);
+}
+
+.hamburger-menu:hover svg,
+.hamburger-menu.open svg {
+ fill: var(--secondary-color);
+}
+
+.menu-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ background-color: var(--secondary-color);
+ color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s ease-in-out;
+ z-index: 1000;
+ transform: translateY(100%);
+ overflow-y: auto;
+}
+
+.menu-overlay.open {
+ transform: translateY(0);
+}
+
+.menu-content {
+ text-align: center;
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+}
+
+.menu-content .box {
+ background-color: var(--background-color);
+ margin: 10px 0;
+ padding: 10px;
+ border: 1px solid var(--border-color);
+ border-radius: 10px;
+ box-sizing: border-box;
+}
+
+.menu-content .box a {
+ display: block;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ padding: 12px 20px;
+ text-decoration: none;
+ border-radius: 10px;
+ transition: background-color 0.3s ease;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+ margin-bottom: 10px;
+}
+
+.menu-content .box a:hover, .menu-content .box a.active {
+ background-color: var(--primary-color);
+ color: var(--secondary-color);
+}
+
+.menu-close-btn {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background: none;
+ border: none;
+ color: var(--primary-color);
+ font-size: 24px;
+ cursor: pointer;
+}
+
+.menu-close-btn:hover {
+ color: var(--secondary-color);
+}
+
+@media screen and (max-width: 1280px) {
+ .sidebar, .sidebar-right {
+ display: none;
+ }
+
+ .hamburger-menu {
+ display: flex;
+ }
+
+ .menu-overlay {
+ display: block;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .menu-content {
+ padding: 10px;
+ }
+
+ .menu-content .box a {
+ padding: 10px;
+ font-size: 14px;
+ }
+}
+
+@media screen and (min-width: 1281px) {
+ .hamburger-menu {
+ display: none;
+ }
+} \ No newline at end of file
diff --git a/website4/public/assets/css/navbar.css b/website4/public/assets/css/navbar.css
new file mode 100644
index 0000000..6f63aa8
--- /dev/null
+++ b/website4/public/assets/css/navbar.css
@@ -0,0 +1,224 @@
+.navbar {
+ background-color: var(--secondary-color);
+ padding: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+ font-family: 'default-512', Arial, sans-serif;
+ position: relative;
+}
+
+.navbar-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.navbar-left, .navbar-center, .navbar-right {
+ display: flex;
+ align-items: center;
+}
+
+.navbar-center {
+ justify-content: center;
+ flex-grow: 1;
+}
+
+.navbar-mobile {
+ display: none;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ background-color: var(--secondary-color);
+ padding: 10px;
+}
+
+.navbar-mobile .navbar-left {
+ display: flex;
+ align-items: center;
+}
+
+.navbar-logo {
+ height: 40px;
+ margin-right: 10px;
+}
+
+.navbar-title {
+ font-size: 20px;
+ font-weight: bold;
+ color: var(--primary-color);
+ padding-right: 20px;
+}
+
+.navbar, .navbar button, .navbar input[type="text"], .navbar input[type="search"] {
+ color: var(--navbar-text-color);
+ text-decoration: none;
+ padding-inline: 10px;
+ margin: 0 5px;
+ border: none;
+ background: none;
+ cursor: pointer;
+ transition: color 0.3s ease;
+ font-family: 'default-512', Arial, sans-serif;
+ font-size: 18px;
+}
+
+.navbar-link {
+ color: var(--navbar-text-color);
+ text-decoration: none;
+ border: none;
+ background: none;
+ cursor: pointer;
+ transition: color 0.3s ease;
+ font-family: 'default-512', Arial, sans-serif;
+}
+
+.dropdown-link {
+ color: var(--navbar-text-color);
+ text-decoration: none;
+ transition: color 0.3s ease;
+ font-family: 'default-512', Arial, sans-serif;
+ padding-top: 5px;
+}
+
+.navbar a:hover, .navbar button:hover {
+ color: var(--navbar-hover-color);
+}
+
+.navbar-dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.navbar-dropbtn {
+ background-color: var(--navbar-color);
+ color: var(--navbar-text-color);
+ padding: 10px;
+ font-size: 16px;
+ border: none;
+ cursor: pointer;
+ border-radius: 10px;
+}
+
+.navbar-dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: var(--background-color);
+ min-width: 160px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+ border-radius: 10px;
+}
+
+.navbar-dropdown:hover .navbar-dropdown-content {
+ display: block;
+}
+
+.navbar-dropdown-content a {
+ color: var(--text-color);
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.navbar-dropdown-content a:last-child {
+ border-bottom: none;
+}
+
+.bruh-why {
+ padding-inline: 0px;
+}
+
+.mobile-navbar-dropdown {
+ padding-top: 5px;
+}
+
+.mobile-navbar-dropdown:hover {
+ color: var(--navbar-hover-color);
+}
+
+.navbar-toggle {
+ display: none;
+ background: none;
+ border: none;
+ color: var(--primary-color);
+ cursor: pointer;
+ font-size: 24px;
+}
+
+.mobile-navbar-menu {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ background-color: var(--secondary-color);
+ border-radius: 10px;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.4s ease-out, padding 0.4s ease-out;
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+.mobile-navbar-menu.open {
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.mobile-navbar-menu input[type="text"],
+.mobile-navbar-menu input[type="search"] {
+ padding: 10px;
+ margin: 5px 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+ transition: color 0.3s ease;
+ font-family: 'default-512', Arial, sans-serif;
+ color: var(--navbar-text-color);
+ text-decoration: none;
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.mobile-navbar-menu input[type="text"]:hover,
+.mobile-navbar-menu input[type="search"]:hover,
+.mobile-navbar-menu button:hover {
+ color: var(--navbar-hover-color);
+}
+
+@media screen and (max-width: 768px) {
+ .navbar-container {
+ display: none;
+ }
+
+ .navbar-mobile {
+ display: flex;
+ }
+
+ .navbar-toggle {
+ display: block;
+ }
+}
+
+@media screen and (min-width: 769px) {
+ .mobile-navbar-menu {
+ display: none !important;
+ }
+}
+
+.navbar .buttonify{
+ display: block;
+ background-color: var(--background-color); /* penis haha lol ja das isch psychose klass will buttons nei segged abunzdue*/
+ color: var(--text-color);
+ padding: 12px 20px;
+ text-decoration: none;
+ border-radius: 10px;
+ transition: background-color 0.3s ease;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+ font-family: 'default-512', Arial, sans-serif;
+ border: none;
+}
+
+.navbar .buttonify:hover {
+ background-color: var(--hover-color);
+ color: var(--hover-text-color);
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-04-06 02:15:03 +0000