schmidt1024/kashilo
1
0
Fork 0
Code Issues Pull Requests Releases Activity

initial commit

Browse Source
This commit is contained in:
Schmidt
2026-01-28 07:02:55 +01:00
commit 1ab026c35c
37 changed files with 4447 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/animate.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

103
css/base.css Normal file
View File

@@ -0,0 +1,103 @@
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--color-bg);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary-hover);
}
img, svg {
display: block;
max-width: 100%;
height: auto;
}
button, input, textarea, select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
border: none;
background: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: -0.02em;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
p + p {
margin-top: var(--space-md);
}
:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}
::selection {
background-color: var(--color-primary);
color: white;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-md);
}
@media (min-width: 768px) {
.container {
padding: 0 var(--space-lg);
}
}

353
css/components.css Normal file
View File

@@ -0,0 +1,353 @@
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-bg);
}
.btn-primary:hover {
background-color: var(--color-primary-hover);
color: var(--color-bg);
}
.btn-secondary {
background-color: var(--color-bg-tertiary);
color: var(--color-text);
}
.btn-secondary:hover {
background-color: var(--color-border);
}
.btn-outline {
border: 1px solid var(--color-border);
background-color: transparent;
}
.btn-outline:hover {
background-color: var(--color-bg-secondary);
}
.btn-lg {
padding: var(--space-md) var(--space-lg);
font-size: var(--font-size-base);
}
.btn-icon {
padding: var(--space-sm);
border-radius: var(--radius-full);
}
/* Form Elements */
.input {
width: 100%;
padding: var(--space-sm) var(--space-md);
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus {
border-color: var(--color-border-focus);
box-shadow: 0 0 0 3px var(--color-primary-light);
}
.input::placeholder {
color: var(--color-text-muted);
}
.label {
display: block;
margin-bottom: var(--space-xs);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.form-group {
margin-bottom: var(--space-md);
}
/* Cards */
.card {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow var(--transition-fast);
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card-image {
aspect-ratio: 4 / 3;
background-color: var(--color-bg-tertiary);
object-fit: cover;
}
.card-body {
padding: var(--space-md);
}
.card-title {
font-size: var(--font-size-lg);
margin-bottom: var(--space-xs);
}
.card-price {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.card-meta {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: var(--space-sm);
}
/* Grid */
.grid {
display: grid;
gap: var(--space-md);
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
.grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
}
/* Badges */
.badge {
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
background-color: var(--color-bg-tertiary);
color: var(--color-text-secondary);
}
.badge-primary {
background-color: var(--color-primary-light);
color: var(--color-primary);
}
/* Header Component */
app-header {
display: block;
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-border);
}
app-header .header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: var(--space-md);
}
app-header .logo {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
app-header .search-box {
flex: 1;
max-width: 500px;
}
app-header .header-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
app-header .btn-create {
padding: var(--space-sm);
border-radius: var(--radius-full);
}
app-header .btn-create-text {
display: none;
}
@media (min-width: 480px) {
app-header .btn-create {
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
}
app-header .btn-create-text {
display: inline;
}
}
/* Footer Component */
app-footer {
display: block;
background-color: var(--color-bg-secondary);
border-top: 1px solid var(--color-border);
padding: var(--space-lg) 0;
margin-top: auto;
}
app-footer .footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-md);
}
app-footer .footer-links {
display: flex;
gap: var(--space-md);
}
app-footer .footer-links a {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
/* App Shell */
app-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
app-shell main {
flex: 1;
padding: var(--space-lg) 0;
}
/* Page Transitions */
.page-enter {
opacity: 0;
transform: translateY(10px);
}
.page-enter-active {
opacity: 1;
transform: translateY(0);
transition: opacity var(--transition-normal), transform var(--transition-normal);
}
/* Loading State */
.loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2xl);
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Empty State */
.empty-state {
text-align: center;
padding: var(--space-3xl);
color: var(--color-text-muted);
}
.empty-state-icon {
font-size: 3rem;
margin-bottom: var(--space-md);
}
/* Dropdown */
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
min-width: 150px;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--space-xs);
z-index: var(--z-dropdown);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--transition-fast);
}
.dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: block;
width: 100%;
padding: var(--space-sm) var(--space-md);
text-align: left;
border-radius: var(--radius-sm);
color: var(--color-text);
}
.dropdown-item:hover {
background-color: var(--color-bg-secondary);
}
.dropdown-item.active {
background-color: var(--color-primary-light);
color: var(--color-primary);
}

67
css/fonts.css Normal file
View File

@@ -0,0 +1,67 @@
/*
* Typography: Space Grotesk (Headlines) + Inter (Body)
*
* Download fonts from:
* - Inter: https://github.com/rsms/inter/releases (Variable font)
* - Space Grotesk: https://github.com/nicholasrougeux/space-grotesk/releases
*
* Place files in /assets/fonts/
*/
/* Inter - Body Text */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/Inter-Bold.woff2') format('woff2');
}
/* Space Grotesk - Headlines */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2');
}

189
css/variables.css Normal file
View File

@@ -0,0 +1,189 @@
:root {
/*
* Lavender Light + Deep Purple Dark
* WCAG AAA konform (Kontrast > 7:1)
*/
/* Colors - Light Mode */
--color-primary: #6B5B95;
--color-primary-hover: #574A7A;
--color-primary-light: #E8E4F0;
--color-secondary: #9B8AA6;
--color-secondary-hover: #7D6E8A;
--color-accent: #A67B9E;
--color-accent-hover: #8A6283;
--color-success: #5A8F6B;
--color-warning: #C49A3C;
--color-error: #B54747;
--color-bg: #FAF8FC;
--color-bg-secondary: #F3F0F7;
--color-bg-tertiary: #EBE6F2;
--color-text: #2A2633;
--color-text-secondary: #524A5E;
--color-text-muted: #8A8295;
--color-border: #DDD8E6;
--color-border-focus: #6B5B95;
--color-shadow: rgba(42, 38, 51, 0.1);
--color-overlay: rgba(42, 38, 51, 0.5);
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-family-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px var(--color-shadow);
--shadow-md: 0 4px 6px var(--color-shadow);
--shadow-lg: 0 10px 15px var(--color-shadow);
--shadow-xl: 0 20px 25px var(--color-shadow);
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 350ms ease;
/* Layout */
--header-height: 4rem;
--footer-height: 3rem;
--container-max: 1200px;
--sidebar-width: 280px;
/* Z-Index */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-toast: 400;
}
/* Dark Mode - System Preference */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-primary: #B8A5D6;
--color-primary-hover: #C9BAE3;
--color-primary-light: #2D2440;
--color-secondary: #A699B8;
--color-secondary-hover: #BAAFCA;
--color-accent: #C9A5C4;
--color-accent-hover: #D9BAD5;
--color-success: #7CB88A;
--color-warning: #D4B05C;
--color-error: #D47070;
--color-bg: #1A1424;
--color-bg-secondary: #252033;
--color-bg-tertiary: #312A42;
--color-text: #F5F2FA;
--color-text-secondary: #D4CCDF;
--color-text-muted: #9A90A8;
--color-border: #3D3550;
--color-border-focus: #B8A5D6;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.6);
}
}
/* Dark Mode - Manual Override */
[data-theme="dark"] {
--color-primary: #B8A5D6;
--color-primary-hover: #C9BAE3;
--color-primary-light: #2D2440;
--color-secondary: #A699B8;
--color-secondary-hover: #BAAFCA;
--color-accent: #C9A5C4;
--color-accent-hover: #D9BAD5;
--color-success: #7CB88A;
--color-warning: #D4B05C;
--color-error: #D47070;
--color-bg: #1A1424;
--color-bg-secondary: #252033;
--color-bg-tertiary: #312A42;
--color-text: #F5F2FA;
--color-text-secondary: #D4CCDF;
--color-text-muted: #9A90A8;
--color-border: #3D3550;
--color-border-focus: #B8A5D6;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.6);
}
/* Light Mode - Manual Override */
[data-theme="light"] {
--color-primary: #6B5B95;
--color-primary-hover: #574A7A;
--color-primary-light: #E8E4F0;
--color-secondary: #9B8AA6;
--color-secondary-hover: #7D6E8A;
--color-accent: #A67B9E;
--color-accent-hover: #8A6283;
--color-success: #5A8F6B;
--color-warning: #C49A3C;
--color-error: #B54747;
--color-bg: #FAF8FC;
--color-bg-secondary: #F3F0F7;
--color-bg-tertiary: #EBE6F2;
--color-text: #2A2633;
--color-text-secondary: #524A5E;
--color-text-muted: #8A8295;
--color-border: #DDD8E6;
--color-border-focus: #6B5B95;
--color-shadow: rgba(42, 38, 51, 0.1);
--color-overlay: rgba(42, 38, 51, 0.5);
}