diff --git a/public/css/styles.css b/public/css/styles.css index e55f420..f300848 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -445,7 +445,7 @@ header { transition: opacity 0.3s ease, visibility 0.3s ease; } -.modal-backdrop.show { +.modal-backdrop.show, #about-modal[style*="flex"] { opacity: 1; visibility: visible; } @@ -463,7 +463,19 @@ header { transition: opacity 0.3s ease, transform 0.3s ease; } -.modal-backdrop.show .modal { +#about-modal .modal { + max-width: 800px; + opacity: 1; + transform: none; + animation: modalFadeIn 0.3s; +} + +@keyframes modalFadeIn { + from { opacity: 0; transform: translateY(-30px); } + to { opacity: 1; transform: translateY(0); } +} + +.modal-backdrop.show .modal, #about-modal[style*="flex"] .modal { opacity: 1; transform: translateY(0); } @@ -493,6 +505,10 @@ header { padding: 1rem; } +#about-modal .modal-body { + padding: 1.5rem; +} + .modal-footer { padding: 1rem; border-top: 1px solid var(--border-color); @@ -500,6 +516,41 @@ header { justify-content: flex-end; } +/* About modal specific styles */ +#about-modal .version-history { + border-left: 3px solid var(--primary-color); + padding-left: 20px; + margin-bottom: 20px; +} + +#about-modal .version { + margin-bottom: 15px; +} + +#about-modal .version h5 { + color: var(--primary-color); + margin-bottom: 5px; +} + +#about-modal .features-list { + list-style-type: none; + padding-left: 0; +} + +#about-modal .features-list li { + padding: 8px 0; + border-bottom: 1px solid var(--border-color); +} + +#about-modal .features-list li:last-child { + border-bottom: none; +} + +#about-modal .lead { + font-size: 1.1rem; + line-height: 1.6; +} + /* Tabs */ .tabs { display: flex; diff --git a/public/index.html b/public/index.html index d5f9158..72d2893 100644 --- a/public/index.html +++ b/public/index.html @@ -551,8 +551,103 @@ + + + + + + \ No newline at end of file