Skip to content

Add favicon and comprehensive-demo.css for new demo styling #193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
d-ulker merged 13 commits into from
Sep 27, 2025
Merged

Add favicon and comprehensive-demo.css for new demo styling #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9211aa6
feat: add website assets from PR #169
d-ulker Sep 27, 2025
373da35
fix: replace HTML redirect favicon.ico with proper binary icon file
d-ulker Sep 27, 2025
97a6f63
fix: update HTML to use modular CSS structure
d-ulker Sep 27, 2025
ad48b66
fix: address code review issues in comprehensive-demo.css
d-ulker Sep 27, 2025
bdd5d57
feat: add core CSS architecture files
d-ulker Sep 27, 2025
b228a9e
feat: add UI component CSS files
d-ulker Sep 27, 2025
6095624
feat: add layout and interactive component CSS files
d-ulker Sep 27, 2025
1b8466f
feat: add final component CSS files and documentation
d-ulker Sep 27, 2025
ff42d29
fix: improve CSS maintainability by reducing !important declarations
d-ulker Sep 27, 2025
fb52afa
fix: update reduced motion selectors to match scoped CSS rules
d-ulker Sep 27, 2025
91ba648
Merge branch 'main' into feat/website-assets
d-ulker Sep 27, 2025
7b7eb1d
fix: ensure reduced motion animations are properly disabled
d-ulker Sep 27, 2025
4d2816c
Merge branch 'feat/website-assets' of github.com:uelkerd/SAMO--DL int…
d-ulker Sep 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion website/comprehensive-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<link href="css/main.css" rel="stylesheet">

</head>
<body>
<body class="comprehensive-demo">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
Expand Down
33 changes: 32 additions & 1 deletion website/css/components/containers.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,29 @@
/* Comprehensive Demo Styles - Extracted from HTML for better maintainability */

/* CSS Variables */
:root {
--primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
--secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
--dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
--accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);

--primary-color: #8b5cf6;
--secondary-color: #a855f7;
--accent-color: #c084fc;
--dark-color: #0f0f23;
--darker-color: #0a0a1a;
--light-accent: #e9d5ff;
--glass-bg: rgba(139, 92, 246, 0.1);
--glass-border: rgba(139, 92, 246, 0.2);
--error-color: #ef4444;
--success-color: #10b981;

--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
--shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Demo Container - Consolidated */
.demo-container {
background: linear-gradient(135deg,
Expand All @@ -24,6 +50,11 @@
}

/* Hero Section */
.hero-section {
position: relative;
overflow: hidden;
}

.hero-section::before {
content: '';
position: absolute;
Expand Down Expand Up @@ -65,4 +96,4 @@
padding: 20px 15px;
margin: -50px 10px 20px 10px;
}
}
}
4 changes: 2 additions & 2 deletions website/css/components/responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}

/* Stack buttons vertically on mobile */
.d-flex.gap-3.justify-content-center {
#titleWithFlow .d-flex.gap-3.justify-content-center {
flex-direction: column;
align-items: center;
gap: 0.75rem !important;
Expand Down Expand Up @@ -52,4 +52,4 @@
/* Debug Test Section Toggleable */
#debugTestSection.hidden {
display: none !important;
}
}
116 changes: 60 additions & 56 deletions website/css/comprehensive-demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@
}

/* Info icon styling */
.info-icon {
font-size: 16px !important;
.comprehensive-demo .info-icon {
font-size: 16px;
color: #6b7280;
margin-left: 6px;
cursor: help;
Expand Down Expand Up @@ -178,14 +178,14 @@ body.comprehensive-demo {
display: none !important;
}

.result-section-visible {
.comprehensive-demo .result-section-visible {
display: block;
animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure all text is visible - scoped to comprehensive demo */
.comprehensive-demo .text-muted {
color: #cbd5e1 !important;
color: #cbd5e1;
}

/* Scoped to demo container only */
Expand All @@ -194,16 +194,16 @@ body.comprehensive-demo {
}

/* Feature card text improvements */
.feature-card .text-muted {
color: #cbd5e1 !important;
.comprehensive-demo .feature-card .text-muted {
color: #cbd5e1;
}

.feature-card h5, .feature-card h6 {
color: #f1f5f9 !important;
.comprehensive-demo .feature-card h5, .comprehensive-demo .feature-card h6 {
color: #f1f5f9;
}

.feature-card small {
color: #cbd5e1 !important;
.comprehensive-demo .feature-card small {
color: #cbd5e1;
}

/* Scoped form controls to demo container */
Expand All @@ -221,7 +221,7 @@ body.comprehensive-demo {
}

.comprehensive-demo .form-control::placeholder {
color: #94a3b8 !important;
color: #94a3b8;
}

/* Hero Section */
Expand Down Expand Up @@ -310,12 +310,12 @@ body.comprehensive-demo {
}

/* Processing Information Icons */
.processing-info i {
font-size: 1.5rem !important;
.comprehensive-demo .processing-info i {
font-size: 1.5rem;
margin-bottom: 8px;
}

.result-section.show {
.comprehensive-demo .result-section.show {
display: block;
animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
Expand Down Expand Up @@ -440,19 +440,19 @@ body.comprehensive-demo {
width: 100%; /* Full width for better appearance */
}

.progress-step-vertical .step-icon-small {
width: 24px !important; /* Increased from 18px */
height: 24px !important; /* Increased from 18px */
.comprehensive-demo .progress-step-vertical .step-icon-small {
width: 24px; /* Increased from 18px */
height: 24px; /* Increased from 18px */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px; /* Increased margin */
margin-bottom: 0;
font-size: 0.8rem !important; /* Increased from 0.6rem */
font-size: 0.8rem; /* Increased from 0.6rem */
transition: var(--transition-smooth);
background: rgba(255, 255, 255, 0.1) !important;
color: #e2e8f0 !important;
background: rgba(255, 255, 255, 0.1);
color: #e2e8f0;
border: 1px solid rgba(255, 255, 255, 0.2);
flex-shrink: 0;
}
Expand All @@ -466,20 +466,20 @@ body.comprehensive-demo {
flex: 1; /* Take remaining space */
}

.progress-step-vertical.active .step-icon-small {
background: var(--primary-gradient) !important;
color: white !important;
.comprehensive-demo .progress-step-vertical.active .step-icon-small {
background: var(--primary-gradient);
color: white;
box-shadow: var(--shadow-glow);
}

.progress-step-vertical.completed .step-icon-small {
background: var(--success-color) !important;
color: white !important;
.comprehensive-demo .progress-step-vertical.completed .step-icon-small {
background: var(--success-color);
color: white;
}

.progress-step-vertical.error .step-icon-small {
background: var(--error-color) !important;
color: white !important;
.comprehensive-demo .progress-step-vertical.error .step-icon-small {
background: var(--error-color);
color: white;
}

.pipeline-arrow-vertical {
Expand Down Expand Up @@ -685,8 +685,8 @@ body.comprehensive-demo {
transition: all 0.2s ease;
}

#processingInfoSidebar .bg-dark:hover {
background-color: rgba(0, 0, 0, 0.4) !important;
.comprehensive-demo #processingInfoSidebar .bg-dark:hover {
background-color: rgba(0, 0, 0, 0.4);
transform: translateX(2px);
}

Expand All @@ -712,20 +712,20 @@ body.comprehensive-demo {
}

/* Enhanced Input Area Background */
#textInput {
min-height: 240px !important;
.comprehensive-demo #textInput {
min-height: 240px;
font-size: 16px;
line-height: 1.5;
resize: vertical;
padding: 1.5rem; /* Increased padding for better appearance */
background-color: rgba(255, 255, 255, 0.12) !important; /* More prominent background */
border: 2px solid rgba(139, 92, 246, 0.3) !important; /* Thicker border */
background-color: rgba(255, 255, 255, 0.12); /* More prominent background */
border: 2px solid rgba(139, 92, 246, 0.3); /* Thicker border */
}

#textInput:focus {
background-color: rgba(255, 255, 255, 0.18) !important;
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25) !important;
.comprehensive-demo #textInput:focus {
background-color: rgba(255, 255, 255, 0.18);
border-color: var(--primary-color);
box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25);
transform: scale(1.01); /* Subtle scale on focus */
}

Expand All @@ -738,18 +738,18 @@ body.comprehensive-demo {
transition: var(--transition-smooth);
}

.progress-step-horizontal .step-icon-small {
width: 18px !important;
height: 18px !important;
.comprehensive-demo .progress-step-horizontal .step-icon-small {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.25rem;
font-size: 0.7rem !important;
font-size: 0.7rem;
transition: var(--transition-smooth);
background: rgba(255, 255, 255, 0.1) !important;
color: #cbd5e1 !important;
background: rgba(255, 255, 255, 0.1);
color: #cbd5e1;
border: 1px solid rgba(255, 255, 255, 0.15);
flex-shrink: 0;
}
Expand All @@ -762,23 +762,23 @@ body.comprehensive-demo {
transition: var(--transition-smooth);
}

.progress-step-horizontal.active .step-icon-small {
background: var(--primary-gradient) !important;
color: white !important;
.comprehensive-demo .progress-step-horizontal.active .step-icon-small {
background: var(--primary-gradient);
color: white;
transform: scale(1.1);
}

.progress-step-horizontal.active .step-label {
.comprehensive-demo .progress-step-horizontal.active .step-label {
color: var(--primary-color);
font-weight: 600;
}

.progress-step-horizontal.completed .step-icon-small {
background: #10b981 !important;
color: white !important;
.comprehensive-demo .progress-step-horizontal.completed .step-icon-small {
background: #10b981;
color: white;
}

.progress-step-horizontal.completed .step-label {
.comprehensive-demo .progress-step-horizontal.completed .step-label {
color: #10b981;
}

Expand All @@ -805,7 +805,7 @@ body.comprehensive-demo {
display: none;
}

.error-message.show {
.comprehensive-demo .error-message.show {
display: block;
animation: fadeInUp 0.3s ease-out;
}
Expand All @@ -822,7 +822,7 @@ body.comprehensive-demo {
display: none;
}

.success-message.show {
.comprehensive-demo .success-message.show {
display: block;
animation: fadeInUp 0.3s ease-out;
}
Expand Down Expand Up @@ -1130,6 +1130,10 @@ body.comprehensive-demo {

/* Reduced Motion Preferences - Consolidated */
@media (prefers-reduced-motion: reduce) {
.comprehensive-demo .result-section-visible,
.comprehensive-demo .result-section.show,
.comprehensive-demo .error-message.show,
.comprehensive-demo .success-message.show,
.step.active .step-circle,
.spinner,
.hero-section::before,
Expand Down Expand Up @@ -1210,4 +1214,4 @@ body.comprehensive-demo {
#resultsLayout {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
}
Loading