From 452e0ce2c0b90dccf9a1fbffaf7dbe77142af3b4 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Thu, 23 Apr 2026 10:05:35 +0000 Subject: [PATCH] Auto commit: 2026-04-23T10:05:35.493Z --- assets/css/custom.css | 1076 ++++++++++++++++++++++++++++------------- assets/js/main.js | 149 ++++-- index.php | 547 ++++++++++++++++----- 3 files changed, 1262 insertions(+), 510 deletions(-) diff --git a/assets/css/custom.css b/assets/css/custom.css index 789132e..3d745a7 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,403 +1,793 @@ + :root { + --bg: #0d0f11; + --surface: rgba(20, 24, 28, 0.82); + --surface-strong: rgba(28, 33, 38, 0.95); + --surface-soft: rgba(16, 19, 22, 0.92); + --border: rgba(255, 255, 255, 0.1); + --text: #f4f3ef; + --muted: #a9aeb6; + --accent: #c7a66f; + --accent-soft: rgba(199, 166, 111, 0.14); + --accent-strong: #f0d8ad; + --shadow: 0 28px 70px rgba(0, 0, 0, 0.38); + --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.22); + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 18px; +} + +html { + scroll-behavior: smooth; +} + body { - background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); - background-size: 400% 400%; - animation: gradient 15s ease infinite; - color: #212529; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - font-size: 14px; - margin: 0; - min-height: 100vh; + font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + background: + radial-gradient(circle at top left, rgba(199, 166, 111, 0.15), transparent 30%), + radial-gradient(circle at 85% 12%, rgba(111, 137, 199, 0.12), transparent 26%), + linear-gradient(180deg, #111418 0%, #0d0f11 44%, #0a0b0d 100%); + color: var(--text); + line-height: 1.6; + letter-spacing: -0.01em; + overflow-x: hidden; } -.main-wrapper { - display: flex; - align-items: center; - justify-content: center; - min-height: 100vh; - width: 100%; - padding: 20px; - box-sizing: border-box; - position: relative; - z-index: 1; -} - -@keyframes gradient { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } -} - -.chat-container { - width: 100%; - max-width: 600px; - background: rgba(255, 255, 255, 0.85); - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 20px; - display: flex; - flex-direction: column; - height: 85vh; - box-shadow: 0 20px 40px rgba(0,0,0,0.2); - backdrop-filter: blur(15px); - -webkit-backdrop-filter: blur(15px); - overflow: hidden; -} - -.chat-header { - padding: 1.5rem; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); - background: rgba(255, 255, 255, 0.5); - font-weight: 700; - font-size: 1.1rem; - display: flex; - justify-content: space-between; - align-items: center; -} - -.chat-messages { - flex: 1; - overflow-y: auto; - padding: 1.5rem; - display: flex; - flex-direction: column; - gap: 1.25rem; -} - -/* Custom Scrollbar */ -::-webkit-scrollbar { - width: 6px; -} - -::-webkit-scrollbar-track { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.3); - border-radius: 10px; -} - -::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.5); -} - -.message { - max-width: 85%; - padding: 0.85rem 1.1rem; - border-radius: 16px; - line-height: 1.5; - font-size: 0.95rem; - box-shadow: 0 4px 15px rgba(0,0,0,0.05); - animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(20px) scale(0.95); } - to { opacity: 1; transform: translateY(0) scale(1); } -} - -.message.visitor { - align-self: flex-end; - background: linear-gradient(135deg, #212529 0%, #343a40 100%); - color: #fff; - border-bottom-right-radius: 4px; -} - -.message.bot { - align-self: flex-start; - background: #ffffff; - color: #212529; - border-bottom-left-radius: 4px; -} - -.chat-input-area { - padding: 1.25rem; - background: rgba(255, 255, 255, 0.5); - border-top: 1px solid rgba(0, 0, 0, 0.05); -} - -.chat-input-area form { - display: flex; - gap: 0.75rem; -} - -.chat-input-area input { - flex: 1; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 12px; - padding: 0.75rem 1rem; - outline: none; - background: rgba(255, 255, 255, 0.9); - transition: all 0.3s ease; -} - -.chat-input-area input:focus { - border-color: #23a6d5; - box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2); -} - -.chat-input-area button { - background: #212529; - color: #fff; - border: none; - padding: 0.75rem 1.5rem; - border-radius: 12px; - cursor: pointer; - font-weight: 600; - transition: all 0.3s ease; -} - -.chat-input-area button:hover { - background: #000; - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(0,0,0,0.2); -} - -/* Background Animations */ -.bg-animations { +body.page-cinematic::before, +body.page-cinematic::after { + content: ""; position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - overflow: hidden; + inset: 0; + pointer-events: none; + z-index: -1; +} + +body.page-cinematic::before { + background: + radial-gradient(circle at 20% 10%, rgba(255, 214, 150, 0.14), transparent 20%), + radial-gradient(circle at 80% 18%, rgba(120, 160, 255, 0.08), transparent 24%), + radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.05), transparent 34%); + filter: blur(8px); +} + +body.page-cinematic::after { + opacity: 0.08; + background-image: + linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); + background-size: 160px 160px; + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 90%); +} + +a { + color: inherit; +} + +img { + display: block; +} + +.section-shell { + padding: 4.8rem 0; + position: relative; +} + +.section-shell::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.018)); pointer-events: none; } -.blob { - position: absolute; - width: 500px; - height: 500px; - background: rgba(255, 255, 255, 0.2); - border-radius: 50%; - filter: blur(80px); - animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1); +.section-border-top { + border-top: 1px solid rgba(255, 255, 255, 0.06); } -.blob-1 { - top: -10%; - left: -10%; - background: rgba(238, 119, 82, 0.4); +.site-header { + background: rgba(10, 12, 14, 0.72); + backdrop-filter: blur(18px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); } -.blob-2 { - bottom: -10%; - right: -10%; - background: rgba(35, 166, 213, 0.4); - animation-delay: -7s; - width: 600px; - height: 600px; +.navbar { + padding: 0.9rem 0; } -.blob-3 { - top: 40%; - left: 30%; - background: rgba(231, 60, 126, 0.3); - animation-delay: -14s; - width: 450px; - height: 450px; +.brand-mark { + display: inline-flex; + width: 2.35rem; + height: 2.35rem; + align-items: center; + justify-content: center; + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 10px; + background: var(--surface); + color: var(--accent); + font-size: 0.88rem; + font-weight: 700; + letter-spacing: 0.08em; } -@keyframes move { - 0% { transform: translate(0, 0) rotate(0deg) scale(1); } - 33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); } - 66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); } - 100% { transform: translate(0, 0) rotate(360deg) scale(1); } +.brand-title { + font-size: 0.95rem; + font-weight: 600; + color: var(--text); } -.header-link { - font-size: 14px; - color: #fff; - text-decoration: none; - background: rgba(0, 0, 0, 0.2); - padding: 0.5rem 1rem; +.brand-subtitle { + font-size: 0.74rem; + color: var(--muted); +} + +.nav-link { + color: var(--muted); + font-size: 0.95rem; + padding: 0.55rem 0.75rem !important; border-radius: 8px; - transition: all 0.3s ease; } -.header-link:hover { - background: rgba(0, 0, 0, 0.4); - text-decoration: none; +.nav-link:hover, +.nav-link.active { + color: var(--text); + background: rgba(255, 255, 255, 0.06); } -/* Admin Styles */ -.admin-container { - max-width: 900px; - margin: 3rem auto; - padding: 2.5rem; - background: rgba(255, 255, 255, 0.85); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); +.scene-label { + display: inline-flex; + align-items: center; + gap: 0.55rem; + margin-bottom: 1rem; + padding: 0.38rem 0.78rem; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); + color: var(--text); + font-size: 0.76rem; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.scene-label::before { + content: ""; + width: 0.45rem; + height: 0.45rem; + border-radius: 50%; + background: linear-gradient(135deg, var(--accent), var(--accent-strong)); + box-shadow: 0 0 18px rgba(199, 166, 111, 0.75); +} + +.hero-section { + padding-top: 5.6rem; + padding-bottom: 4.5rem; +} + +.hero-stage { + min-height: calc(100vh - 76px); + display: flex; + align-items: center; +} + +.hero-stage::before { + content: ""; + position: absolute; + inset: 2rem 0 auto; + height: 32rem; + background: + radial-gradient(circle at 16% 25%, rgba(240, 216, 173, 0.22), transparent 22%), + radial-gradient(circle at 82% 16%, rgba(92, 113, 168, 0.18), transparent 20%), + linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.03)); + filter: blur(10px); + pointer-events: none; +} + +.eyebrow, +.list-label, +.modal-eyebrow, +.moment-kicker, +.timeline-year { + text-transform: uppercase; + letter-spacing: 0.12em; + font-size: 0.73rem; + color: var(--accent); +} + +.display-hero { + font-size: clamp(3rem, 6.4vw, 5.8rem); + line-height: 0.92; + letter-spacing: -0.06em; + margin: 0.8rem 0 1.25rem; + max-width: 10.5ch; + text-wrap: balance; +} + +.hero-lead, +.section-heading p, +.content-panel p, +.timeline-card p, +.moment-card p, +.gallery-body p, +.quote-card footer, +.footer-copy, +.modal-copy, +.filter-status { + color: var(--muted); +} + +.hero-lead { + max-width: 42rem; + font-size: 1.06rem; +} + +.hero-actions { + margin-top: 1.75rem; + margin-bottom: 1.9rem; +} + +.btn { + border-radius: 999px; + padding: 0.88rem 1.2rem; + font-weight: 600; + box-shadow: none !important; + transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease; +} + +.btn:hover, +.btn:focus-visible { + transform: translateY(-1px); +} + +.btn-accent { + background: linear-gradient(135deg, var(--accent-strong), var(--accent)); + border: 1px solid rgba(240, 216, 173, 0.85); + color: #101113; + box-shadow: 0 16px 34px rgba(199, 166, 111, 0.22) !important; +} + +.btn-accent:hover, +.btn-accent:focus { + background: #c4ad88; + border-color: #c4ad88; + color: #101113; +} + +.btn-outline-light { + border-color: rgba(255, 255, 255, 0.18); + background: rgba(255, 255, 255, 0.03); +} + +.btn-outline-light:hover, +.btn-outline-light:focus { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.2); +} + +.hero-meta { + max-width: 44rem; +} + +.stat-card, +.content-panel, +.timeline-card, +.moment-card, +.quote-card, +.gallery-card, +.gallery-modal-content, +.modal-image-frame { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01)), var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(14px); +} + +.stat-card { + padding: 1rem 1rem 0.95rem; + min-height: 100%; + position: relative; + overflow: hidden; +} + +.stat-card::after { + content: ""; + position: absolute; + inset: auto -12% -46% auto; + width: 7rem; + height: 7rem; + border-radius: 50%; + background: radial-gradient(circle, rgba(199, 166, 111, 0.24), transparent 70%); +} + +.stat-value { + display: block; + font-size: 1.05rem; + font-weight: 700; + color: var(--text); +} + +.stat-label { + display: block; + margin-top: 0.25rem; + font-size: 0.82rem; + color: var(--muted); +} + +.hero-media { + max-width: 30rem; + margin-inline: auto; + position: relative; +} + +.media-frame { + position: relative; + overflow: hidden; border-radius: 24px; - box-shadow: 0 20px 50px rgba(0,0,0,0.15); - border: 1px solid rgba(255, 255, 255, 0.4); + border: 1px solid rgba(255, 255, 255, 0.12); + background: #0c0d0e; + box-shadow: var(--shadow); +} + +.media-frame::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%, rgba(0, 0, 0, 0.28) 100%); + pointer-events: none; +} + +.media-frame-badge { + position: absolute; + top: 1rem; + left: 1rem; + z-index: 2; + padding: 0.45rem 0.8rem; + border-radius: 999px; + background: rgba(7, 8, 10, 0.62); + border: 1px solid rgba(255, 255, 255, 0.14); + color: var(--text); + font-size: 0.78rem; + letter-spacing: 0.12em; + text-transform: uppercase; + backdrop-filter: blur(10px); +} + +.media-frame img { + width: 100%; + height: auto; + aspect-ratio: 4 / 5; + object-fit: cover; + filter: saturate(0.88) contrast(1.06) brightness(0.92); + transform: scale(1.02); +} + +.image-caption { + margin-top: 0.85rem; + color: var(--muted); + font-size: 0.86rem; +} + +.section-heading { + max-width: 46rem; + margin-bottom: 2.2rem; +} + +.section-heading h2 { + font-size: clamp(2rem, 4vw, 3.25rem); + line-height: 1.02; + margin: 0.65rem 0 0.9rem; + letter-spacing: -0.05em; +} + +.content-panel, +.moment-card, +.quote-card { + padding: 1.35rem; +} + +.content-panel h3, +.timeline-card h3, +.moment-card h3, +.gallery-body h3 { + font-size: 1.15rem; + margin-bottom: 0.7rem; +} + +.detail-list li { + display: flex; + flex-direction: column; + gap: 0.2rem; + padding: 0.9rem 0; + border-top: 1px solid rgba(255, 255, 255, 0.07); +} + +.detail-list li:first-child { + border-top: 0; + padding-top: 0.2rem; +} + +.detail-list span { + color: var(--muted); + font-size: 0.83rem; + text-transform: uppercase; + letter-spacing: 0.12em; +} + +.detail-list strong { + font-size: 0.98rem; + font-weight: 600; +} + +.timeline-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; +} + +.timeline-card { + padding: 1.4rem; +} + +.timeline-card ul { + margin: 1rem 0 0; + padding-left: 1.1rem; + color: var(--muted); +} + +.timeline-card li + li { + margin-top: 0.5rem; +} + +.moment-card { + min-height: 100%; +} + +.gallery-toolbar { + display: flex; + gap: 1rem; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + margin-bottom: 1.5rem; +} + +.btn-filter { + background: transparent; + border: 1px solid var(--border); + color: var(--muted); + padding: 0.68rem 0.95rem; +} + +.btn-filter:hover, +.btn-filter:focus, +.btn-filter.active { + background: var(--accent-soft); + border-color: rgba(184, 160, 122, 0.45); + color: var(--text); +} + +.gallery-card { + width: 100%; + padding: 0; + color: inherit; + overflow: hidden; + transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease; +} + +.gallery-card:hover, +.gallery-card:focus-visible { + transform: translateY(-4px); + border-color: rgba(184, 160, 122, 0.45); + background: var(--surface-strong); +} + +.gallery-image-wrap { + background: #0d0f11; + overflow: hidden; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.gallery-image { + width: 100%; + height: 21rem; + object-fit: cover; + filter: grayscale(0.08); +} + +.gallery-body { + padding: 1rem 1rem 1.1rem; +} + +.gallery-meta { + display: flex; + justify-content: space-between; + gap: 1rem; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--accent); + margin-bottom: 0.7rem; +} + +.gallery-item.is-hidden { + display: none; +} + +.quote-card p { + font-size: 1.28rem; + line-height: 1.3; + letter-spacing: -0.03em; + margin-bottom: 1rem; +} + +.site-footer { + padding: 2rem 0 2.6rem; + background: #0f1113; +} + +.footer-title { + font-weight: 600; + margin-bottom: 0.25rem; +} + +.gallery-modal-content { + background: var(--surface-soft); +} + +.modal-image-frame { + padding: 0.6rem; + background: #0c0d0e; +} + +.modal-image-frame img { + width: 100%; + height: auto; + border-radius: 10px; + object-fit: cover; +} + +.modal-copy { + padding: 1rem 0; +} + +.toast { + border-radius: 12px; +} + +.reveal { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.8s ease, transform 0.8s ease; + will-change: transform, opacity; +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +.reveal-delay-1 { transition-delay: 0.08s; } +.reveal-delay-2 { transition-delay: 0.16s; } +.reveal-delay-3 { transition-delay: 0.24s; } + +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +@media (max-width: 991.98px) { + .timeline-grid { + grid-template-columns: 1fr; + } + + .timeline-grid::before { + display: none; + } + + .hero-section { + padding-top: 3.8rem; + } + + .hero-floating-note { + right: 1rem; + bottom: 1rem; + } +} + +@media (max-width: 767.98px) { + .section-shell { + padding: 3.4rem 0; + } + + .display-hero { + max-width: 12ch; + } + + .gallery-image { + height: 18rem; + } + + .section-heading { + margin-bottom: 1.4rem; + } + + .hero-marquee { + gap: 0.55rem; + letter-spacing: 0.12em; + } + + .hero-floating-note { + position: static; + width: 100%; + margin-top: 1rem; + } +} + + +.hero-copy { position: relative; z-index: 1; } -.admin-container h1 { - margin-top: 0; - color: #212529; - font-weight: 800; -} - -.table { - width: 100%; - border-collapse: separate; - border-spacing: 0 8px; - margin-top: 1.5rem; -} - -.table th { - background: transparent; - border: none; - padding: 1rem; - color: #6c757d; - font-weight: 600; - text-transform: uppercase; - font-size: 0.75rem; - letter-spacing: 1px; -} - -.table td { - background: #fff; - padding: 1rem; - border: none; -} - -.table tr td:first-child { border-radius: 12px 0 0 12px; } -.table tr td:last-child { border-radius: 0 12px 12px 0; } - -.form-group { +.hero-roles { + display: flex; + flex-wrap: wrap; + gap: 0.6rem; margin-bottom: 1.25rem; } -.form-group label { +.hero-roles span { + padding: 0.42rem 0.78rem; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); + color: var(--muted); + font-size: 0.8rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.hero-marquee { + display: flex; + flex-wrap: wrap; + gap: 0.85rem; + margin-top: 1.4rem; + color: rgba(244, 243, 239, 0.72); + font-size: 0.85rem; + letter-spacing: 0.18em; + text-transform: uppercase; +} + +.hero-marquee span { + position: relative; + padding-right: 1rem; +} + +.hero-marquee span::after { + content: "•"; + position: absolute; + right: 0; + color: rgba(199, 166, 111, 0.7); +} + +.hero-marquee span:last-child::after { + display: none; +} + + +.hero-floating-note { + position: absolute; + right: -1.2rem; + bottom: 2.4rem; + width: min(15rem, 72%); + padding: 1rem 1.05rem; + border-radius: 18px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(12, 14, 16, 0.78); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(12px); +} + +.floating-kicker { display: block; - margin-bottom: 0.5rem; - font-weight: 600; - font-size: 0.9rem; + margin-bottom: 0.35rem; + color: var(--accent); + font-size: 0.74rem; + text-transform: uppercase; + letter-spacing: 0.14em; } -.form-control { - width: 100%; - padding: 0.75rem 1rem; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 12px; - background: #fff; - transition: all 0.3s ease; - box-sizing: border-box; +.hero-floating-note strong { + display: block; + font-size: 0.96rem; + line-height: 1.45; } -.form-control:focus { - outline: none; - border-color: #23a6d5; - box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1); + +.content-panel, +.timeline-card, +.moment-card, +.quote-card, +.gallery-card { + transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease; } -.header-container { - display: flex; - justify-content: space-between; - align-items: center; +.content-panel:hover, +.timeline-card:hover, +.moment-card:hover, +.quote-card:hover, +.gallery-card:hover { + transform: translateY(-4px); + border-color: rgba(199, 166, 111, 0.28); + box-shadow: var(--shadow); } -.header-links { - display: flex; - gap: 1rem; +.timeline-grid { + position: relative; } -.admin-card { - background: rgba(255, 255, 255, 0.6); - padding: 2rem; - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.5); - margin-bottom: 2.5rem; - box-shadow: 0 10px 30px rgba(0,0,0,0.05); +.timeline-grid::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0.9rem; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(199, 166, 111, 0.4), transparent); } -.admin-card h3 { - margin-top: 0; - margin-bottom: 1.5rem; - font-weight: 700; +.timeline-card { + position: relative; + padding: 1.45rem; } -.btn-delete { - background: #dc3545; - color: white; - border: none; - padding: 0.25rem 0.5rem; - border-radius: 4px; - cursor: pointer; +.timeline-card::before { + content: ""; + position: absolute; + top: -0.5rem; + left: 1.45rem; + width: 0.7rem; + height: 0.7rem; + border-radius: 50%; + background: linear-gradient(135deg, var(--accent-strong), var(--accent)); + box-shadow: 0 0 0 6px rgba(199, 166, 111, 0.12); } -.btn-add { - background: #212529; - color: white; - border: none; - padding: 0.5rem 1rem; - border-radius: 4px; - cursor: pointer; - margin-top: 1rem; +.quote-card { + position: relative; + overflow: hidden; } -.btn-save { - background: #0088cc; - color: white; - border: none; - padding: 0.8rem 1.5rem; - border-radius: 12px; - cursor: pointer; - font-weight: 600; - width: 100%; - transition: all 0.3s ease; +.quote-card::before { + content: ""; + position: absolute; + top: -1.6rem; + right: 0.9rem; + font-size: 8rem; + line-height: 1; + color: rgba(255, 255, 255, 0.04); + font-family: Georgia, serif; } -.webhook-url { - font-size: 0.85em; - color: #555; - margin-top: 0.5rem; +.gallery-image-wrap { + position: relative; } -.history-table-container { - overflow-x: auto; - background: rgba(255, 255, 255, 0.4); - padding: 1rem; - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.3); +.gallery-image-wrap::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%, rgba(0, 0, 0, 0.38)); + pointer-events: none; } -.history-table { - width: 100%; +.gallery-card:hover .gallery-image, +.gallery-card:focus-visible .gallery-image { + transform: scale(1.05); } -.history-table-time { - width: 15%; - white-space: nowrap; - font-size: 0.85em; - color: #555; +.gallery-image { + transition: transform 0.5s ease; } -.history-table-user { - width: 35%; - background: rgba(255, 255, 255, 0.3); - border-radius: 8px; - padding: 8px; +.site-footer { + background: linear-gradient(180deg, rgba(11, 13, 15, 0.92), #090a0b); } - -.history-table-ai { - width: 50%; - background: rgba(255, 255, 255, 0.5); - border-radius: 8px; - padding: 8px; -} - -.no-messages { - text-align: center; - color: #777; -} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index d349598..510629f 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,39 +1,122 @@ document.addEventListener('DOMContentLoaded', () => { - const chatForm = document.getElementById('chat-form'); - const chatInput = document.getElementById('chat-input'); - const chatMessages = document.getElementById('chat-messages'); + const toastElement = document.getElementById('pageToast'); + const toastBody = document.getElementById('pageToastBody'); + const pageToast = toastElement ? new bootstrap.Toast(toastElement, { delay: 2200 }) : null; - const appendMessage = (text, sender) => { - const msgDiv = document.createElement('div'); - msgDiv.classList.add('message', sender); - msgDiv.textContent = text; - chatMessages.appendChild(msgDiv); - chatMessages.scrollTop = chatMessages.scrollHeight; + const showToast = (message) => { + if (!pageToast || !toastBody || !message) return; + toastBody.textContent = message; + pageToast.show(); }; - chatForm.addEventListener('submit', async (e) => { - e.preventDefault(); - const message = chatInput.value.trim(); - if (!message) return; - - appendMessage(message, 'visitor'); - chatInput.value = ''; - - try { - const response = await fetch('api/chat.php', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ message }) - }); - const data = await response.json(); - - // Artificial delay for realism - setTimeout(() => { - appendMessage(data.reply, 'bot'); - }, 500); - } catch (error) { - console.error('Error:', error); - appendMessage("Sorry, something went wrong. Please try again.", 'bot'); - } + document.querySelectorAll('[data-toast-message]').forEach((link) => { + link.addEventListener('click', () => showToast(link.getAttribute('data-toast-message'))); }); + + const revealItems = document.querySelectorAll('.reveal'); + if ('IntersectionObserver' in window && revealItems.length) { + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { threshold: 0.16 }); + + revealItems.forEach((item) => revealObserver.observe(item)); + } else { + revealItems.forEach((item) => item.classList.add('is-visible')); + } + + const filterButtons = document.querySelectorAll('.btn-filter'); + const galleryItems = document.querySelectorAll('.gallery-item'); + const filterStatus = document.getElementById('filterStatus'); + + filterButtons.forEach((button) => { + button.addEventListener('click', () => { + const filter = button.dataset.filter || 'all'; + filterButtons.forEach((btn) => btn.classList.remove('active')); + button.classList.add('active'); + + let visibleCount = 0; + galleryItems.forEach((item) => { + const matches = filter === 'all' || item.dataset.era === filter; + item.classList.toggle('is-hidden', !matches); + if (matches) visibleCount += 1; + }); + + const statusText = filter === 'all' + ? `Showing all ${visibleCount} images.` + : `Showing ${visibleCount} ${filter} image${visibleCount === 1 ? '' : 's'}.`; + + if (filterStatus) filterStatus.textContent = statusText; + showToast(statusText); + }); + }); + + const galleryModal = document.getElementById('galleryModal'); + if (galleryModal) { + const modalLabel = document.getElementById('galleryModalLabel'); + const modalMeta = document.getElementById('galleryModalMeta'); + const modalImage = document.getElementById('galleryModalImage'); + const modalCaption = document.getElementById('galleryModalCaption'); + + galleryModal.addEventListener('show.bs.modal', (event) => { + const trigger = event.relatedTarget; + if (!trigger) return; + + const title = trigger.getAttribute('data-title') || 'Gallery image'; + const eraLabel = trigger.getAttribute('data-era-label') || 'Archive'; + const year = trigger.getAttribute('data-year') || ''; + const caption = trigger.getAttribute('data-caption') || ''; + const image = trigger.getAttribute('data-image') || ''; + const alt = trigger.getAttribute('data-alt') || title; + + if (modalLabel) modalLabel.textContent = title; + if (modalMeta) modalMeta.textContent = `${eraLabel} · ${year}`; + if (modalCaption) modalCaption.textContent = caption; + if (modalImage) { + modalImage.src = image; + modalImage.alt = alt; + } + }); + } + + const sections = document.querySelectorAll('main section[id]'); + const navLinks = document.querySelectorAll('#mainNav .nav-link'); + const setActiveLink = () => { + let currentId = ''; + sections.forEach((section) => { + const top = section.getBoundingClientRect().top; + if (top <= 140) currentId = section.id; + }); + + navLinks.forEach((link) => { + const href = link.getAttribute('href'); + link.classList.toggle('active', href === `#${currentId}`); + }); + }; + + setActiveLink(); + document.addEventListener('scroll', setActiveLink, { passive: true }); + + + const parallaxItems = document.querySelectorAll('[data-parallax]'); + if (parallaxItems.length && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + const updateParallax = () => { + parallaxItems.forEach((item) => { + const rect = item.getBoundingClientRect(); + const centerOffset = (window.innerHeight * 0.5 - rect.top) / window.innerHeight; + const depth = item.dataset.parallax === 'media' ? 16 : 10; + const translateY = Math.max(-depth, Math.min(depth, centerOffset * depth)); + item.style.transform = `translate3d(0, ${translateY}px, 0)`; + }); + }; + + updateParallax(); + window.addEventListener('scroll', updateParallax, { passive: true }); + window.addEventListener('resize', updateParallax); + } + }); diff --git a/index.php b/index.php index 7205f3d..00e6593 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,429 @@ 'bodybuilding', + 'year' => '1974', + 'title' => "Prime competition form", + 'caption' => "A defining bodybuilding-era image from the run that made him one of the sport's most recognizable figures.", + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/0/05/Arnold_Schwarzenegger_1974.jpg', + 'alt' => 'Arnold Schwarzenegger posing during his bodybuilding career in 1974.' + ], + [ + 'era' => 'acting', + 'year' => '2003', + 'title' => "Cannes red carpet presence", + 'caption' => 'An image from Cannes that reflects the global star power he carried well beyond action cinema.', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/e/ed/Arnold_Schwarzenegger_2003.jpg', + 'alt' => 'Arnold Schwarzenegger at the 2003 Cannes Film Festival.' + ], + [ + 'era' => 'politics', + 'year' => '2004', + 'title' => "Governor-era portrait", + 'caption' => "A formal public image from the period when he served as California's 38th governor.", + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Arnold_Schwarzenegger_2004-01-30.jpg', + 'alt' => 'Arnold Schwarzenegger during his time as governor of California.' + ], + [ + 'era' => 'acting', + 'year' => '2017', + 'title' => "Festival circuit return", + 'caption' => "A later public appearance that reinforces how durable his public image remained decades after the first breakthrough.", + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/c/cc/Arnold_Schwarzenegger_2012.jpg', + 'alt' => 'Arnold Schwarzenegger at a public appearance in 2012.' + ], + [ + 'era' => 'legacy', + 'year' => '2019', + 'title' => "Public figure, decades later", + 'caption' => "A contemporary portrait that captures the elder-statesman phase of his public life.", + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/6/6e/Arnold_Schwarzenegger-2019.jpg', + 'alt' => 'Arnold Schwarzenegger in 2019.' + ], + [ + 'era' => 'politics', + 'year' => '2003', + 'title' => "Service and visibility", + 'caption' => "An image from a military support context, reflecting the civic and ceremonial side of his public role.", + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/b/b3/Arnold_Schwarzenegger_Enduring_Freedom.jpg', + 'alt' => 'Arnold Schwarzenegger visiting service members during a public service event.' + ], +]; ?> - - - New Style - - - - - - - - - + + + <?= htmlspecialchars($projectName) ?> + + + + + - - - - + + - - - - + + - -
-
-

Analyzing your requirements and generating your website…

-
- Loading… + +
+
+ + + +
+
+
+
+
+
+
Cinematic profile
+
Public editorial landing page
+

A career built in three unmistakable acts.

+

From elite bodybuilding to blockbuster cinema to the governor's office, Arnold Schwarzenegger's career stands out because each chapter felt larger than the one before it.

+
+ Athlete + Actor + Governor +
+
+ Explore the timeline + Browse the gallery +
+
+
+
+ 7 + Mr. Olympia titles +
+
+
+
+ 3 + Career eras +
+
+
+
+ 2003–2011 + Governor of California +
+
+
+ +
+
+
+
+
+
Featured portrait
+ Arnold Schwarzenegger in a contemporary portrait. +
+
Later-career portrait — steady, recognizable, and still unmistakably cinematic.
+
+ Three acts + Bodybuilding → Hollywood → California statehouse +
+
+
+
+
+
+ +
+
+
+
Overview
+

Why this career arc still feels singular.

+

Arnold Schwarzenegger's public image works because it never stayed fixed. He emerged as a bodybuilding phenomenon, crossed into Hollywood at full scale, then converted celebrity into an executive political role.

+
+
+
+
+

Three chapters, one through-line

+

The through-line is discipline. In bodybuilding, it meant obsessive repetition and visual presence. In film, it became physical charisma and instantly readable screen identity. In politics, it turned into a different kind of public performance: broad messaging, visibility, and executive symbolism.

+

This landing page is designed as a clean, scroll-first story: fewer distractions, stronger typography, restrained color, and image-led pacing.

+
+
+
+ +
+
+
+
+ +
+
+
+
Timeline
+

A compressed career timeline.

+

The page highlights the milestones most visitors care about first: arrival, breakthrough, cultural dominance, and reinvention.

+
+
+
+
1968–1975
+

Bodybuilding dominance

+

He moved from Austria to the United States, became the youngest Mr. Universe at age 20, and built a run that culminated in seven Mr. Olympia victories.

+
    +
  • Rapid rise through international competition
    • +
  • Visual identity tied to discipline and spectacle
    • +
  • Pumping Iron helped widen his audience
    • +
+
+
+
1976–2002
+

Hollywood scale

+

He converted physique into screen presence, then screen presence into a durable action-movie persona that became global pop culture.

+
    +
  • Conan the Barbarian announced him as a leading man
    • +
  • The Terminator made the persona unforgettable
    • +
  • Comedy and family films broadened the image
    • +
+
+
+
2003–today
+

Politics, advocacy, and legacy

+

His election as California's 38th governor marked a rare shift from entertainment fame to statewide executive power, later followed by a return to media and public advocacy.

+
    +
  • Governor of California from 2003 to 2011
    • +
  • Fitness, climate, and civic messaging remain part of the brand
    • +
  • Public legacy now spans sport, entertainment, and politics
    • +
+
+
+
+
+ +
+
+
+
Signature moments
+

Milestones that define the public narrative.

+

Rather than listing everything, this section isolates the moments that best explain why the career still reads as unusually expansive.

+
+
+
+
+
Sport
+

Mr. Universe at 20

+

Early proof of exceptional ambition and stage presence.

+
+
+
+
+
Film
+

Action-star permanence

+

Blockbuster roles turned a niche celebrity into a mass-market icon.

+
+
+
+
+
Award
+

Golden Globe win

+

Stay Hungry signaled early crossover potential in film.

+
+
+
+
+
Public office
+

Governor of California

+

A rare leap from celebrity scale to executive political office.

+
+
+
+
+
+ + + +
+
+
+
Notable quotes
+

Lines people still associate with the persona.

+

Some lines became larger than the films themselves, helping cement the screen character and public mythology.

+
+
+
+
+

“I'll be back.”

+
— Screen line that became part of pop culture shorthand
+
+
+
+
+

“Strength does not come from winning.”

+
— A line often linked to his discipline-first public image
+
+
+
+
+

“What is the point of being on this Earth if you are going to be like everyone else?”

+
— A quote that mirrors the scale of his career ambitions
+
+
+
+
+
-