diff --git a/public/images/logo-publicity/logo-award-01.jpeg b/public/images/logo-publicity/logo-award-01.jpeg new file mode 100644 index 0000000..12b0a62 Binary files /dev/null and b/public/images/logo-publicity/logo-award-01.jpeg differ diff --git a/public/images/logo-publicity/logo-award-02.jpeg b/public/images/logo-publicity/logo-award-02.jpeg new file mode 100644 index 0000000..2bd344d Binary files /dev/null and b/public/images/logo-publicity/logo-award-02.jpeg differ diff --git a/public/images/logo-publicity/logo-award-03.jpeg b/public/images/logo-publicity/logo-award-03.jpeg new file mode 100644 index 0000000..67d1652 Binary files /dev/null and b/public/images/logo-publicity/logo-award-03.jpeg differ diff --git a/public/images/logo-publicity/logo-award-04.jpeg b/public/images/logo-publicity/logo-award-04.jpeg new file mode 100644 index 0000000..e6138bc Binary files /dev/null and b/public/images/logo-publicity/logo-award-04.jpeg differ diff --git a/public/images/logo-publicity/logo-award-05.jpeg b/public/images/logo-publicity/logo-award-05.jpeg new file mode 100644 index 0000000..e37f6ae Binary files /dev/null and b/public/images/logo-publicity/logo-award-05.jpeg differ diff --git a/public/images/logo-publicity/logo-award-06.png b/public/images/logo-publicity/logo-award-06.png new file mode 100644 index 0000000..f2181a8 Binary files /dev/null and b/public/images/logo-publicity/logo-award-06.png differ diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php index 8df0e80..7e2cc85 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -1985,6 +1985,233 @@ opacity: 1; } } + + .float-logo-btn { + position: fixed; + right: max(28px, calc(env(safe-area-inset-right) + 12px)); + bottom: max(36px, calc(env(safe-area-inset-bottom) + 28px)); + z-index: 120; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: clamp(52px, 6vw, 68px); + aspect-ratio: 1; + border-radius: 50%; + padding: clamp(8px, 0.9vw, 10px); + font-size: clamp(9px, 0.78vw, 11px); + font-weight: 800; + line-height: 1.12; + color: rgba(255,255,255,0.96); + border: 1px solid rgba(255,211,106,0.28); + background: + radial-gradient(circle at 50% 22%, rgba(255,211,106,0.14), transparent 54%), + rgba(14, 84, 104, 0.88); + box-shadow: + 0 0 0 clamp(5px, 0.7vw, 8px) rgba(24,126,139,0.32), + 0 0 0 clamp(6px, 0.8vw, 9px) rgba(255,211,106,0.12), + 0 0 22px rgba(255,211,106,0.14), + 0 16px 34px rgba(0,0,0,0.28); + cursor: pointer; + transition: transform 0.22s ease, box-shadow 0.22s ease; + } + + .float-logo-btn:hover, + .float-logo-btn:focus-visible { + transform: translateY(-4px); + outline: none; + box-shadow: + 0 0 0 clamp(7px, 0.95vw, 11px) rgba(23,119,151,0.38), + 0 0 0 clamp(8px, 1.05vw, 12px) rgba(255,211,106,0.14), + 0 0 32px rgba(255,211,106,0.18), + 0 22px 46px rgba(0,0,0,0.3); + } + + .float-logo-btn .action-label { + font-size: inherit; + } + + .logo-modal { + position: fixed; + inset: 0; + z-index: 200; + display: flex; + align-items: center; + justify-content: center; + padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); + background: rgba(3, 16, 38, 0.72); + backdrop-filter: blur(8px); + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: opacity 0.24s ease, visibility 0.24s ease; + } + + .logo-modal.is-open { + opacity: 1; + visibility: visible; + pointer-events: auto; + } + + .logo-modal-panel { + width: min(920px, 100%); + max-height: min(88vh, 920px); + overflow: auto; + border-radius: 18px; + border: 1px solid rgba(143,232,255,0.18); + background: + radial-gradient(ellipse at 18% 0%, rgba(101,216,255,0.08), transparent 42%), + radial-gradient(ellipse at 88% 8%, rgba(255,211,106,0.05), transparent 38%), + linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), + #11244c; + box-shadow: 0 24px 60px rgba(0,0,0,0.36); + } + + .logo-modal-head { + position: sticky; + top: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 18px 56px; + border-bottom: 1px solid rgba(143,232,255,0.12); + background: rgba(17, 36, 76, 0.96); + backdrop-filter: blur(8px); + } + + .logo-modal-title { + margin: 0; + flex: 1; + font-size: clamp(16px, 2vw, 20px); + font-weight: 800; + line-height: 1.4; + text-align: center; + color: rgba(255,255,255,0.96); + } + + .logo-modal-close { + position: absolute; + top: 50%; + right: 22px; + transform: translateY(-50%); + flex: 0 0 auto; + width: 36px; + height: 36px; + border: 1px solid rgba(143,232,255,0.2); + border-radius: 50%; + background: rgba(6, 42, 88, 0.72); + color: rgba(255,255,255,0.9); + font-size: 22px; + line-height: 1; + cursor: pointer; + transition: background 0.2s ease, transform 0.2s ease; + } + + .logo-modal-close:hover, + .logo-modal-close:focus-visible { + background: rgba(10, 74, 122, 0.88); + transform: translateY(-50%) scale(1.04); + outline: none; + } + + .logo-modal-body { + padding: 22px clamp(18px, 3vw, 28px) 28px; + color: rgba(232,241,255,0.88); + font-size: clamp(14px, 1.2vw, 16px); + line-height: 1.75; + } + + .logo-modal-intro, + .logo-modal-notice, + .logo-modal-contact, + .logo-modal-footer { + margin: 0 0 18px; + } + + .logo-modal-intro, + .logo-modal-notice, + .logo-modal-contact { + text-indent: 2em; + } + + .logo-modal-footer { + text-align: right; + } + + .logo-modal-contact a { + color: #8fe8ff; + text-decoration: underline; + text-underline-offset: 3px; + } + + .logo-award-list { + display: grid; + gap: 18px; + margin: 24px 0; + } + + .logo-award-item { + padding: 16px; + border-radius: 14px; + border: 1px solid rgba(143,232,255,0.12); + background: rgba(6, 42, 88, 0.42); + } + + .logo-award-item.is-first { + border-color: rgba(255,211,106,0.28); + background: + radial-gradient(circle at 12% 12%, rgba(255,211,106,0.1), transparent 42%), + rgba(14, 84, 104, 0.42); + } + + .logo-award-name { + margin: 0 0 12px; + font-size: clamp(15px, 1.4vw, 18px); + font-weight: 800; + color: rgba(255,244,204,0.95); + } + + .logo-award-item.is-first .logo-award-name { + color: #ffd36a; + } + + .logo-award-image { + display: block; + width: auto; + max-width: min(72%, 340px); + max-height: 220px; + margin: 0 auto; + object-fit: contain; + border-radius: 10px; + background: rgba(255,255,255,0.96); + box-shadow: 0 10px 28px rgba(0,0,0,0.18); + } + + @media (max-width: 480px) { + .float-logo-btn { + width: clamp(46px, 13vw, 54px); + font-size: clamp(8px, 2.4vw, 9px); + right: max(22px, calc(env(safe-area-inset-right) + 10px)); + bottom: max(28px, calc(env(safe-area-inset-bottom) + 22px)); + } + + .logo-modal-head { + padding: 14px 48px; + } + + .logo-modal-close { + right: 16px; + } + + .logo-modal-body { + padding: 18px 14px 22px; + } + + .logo-award-item { + padding: 12px; + } + } @if ($publicSourceCode)