feat: add dismissible domain migration notice
Publish GitHub Pages output / publish (push) Successful in 33s
Publish GitHub Pages output / publish (push) Successful in 33s
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
<script lang="ts">
|
||||
let dismissed = false;
|
||||
</script>
|
||||
|
||||
{#if !dismissed}
|
||||
<aside class="migration-notice" aria-labelledby="migration-title">
|
||||
<div class="notice-inner">
|
||||
<button class="dismiss" type="button" aria-label="사이트 주소 변경 안내 닫기" on:click={() => dismissed = true}><span aria-hidden="true">×</span></button>
|
||||
<div class="notice-copy">
|
||||
<h2 id="migration-title">9월 28일 00:00부터 사이트 주소가 doricalc.cc로 변경됩니다</h2>
|
||||
<p>주소 변경 후에는 기존 저장 데이터가 자동으로 옮겨지지 않습니다. 지금 사용하는 브라우저에서 <strong>백업 내보내기</strong>로 JSON 파일을 보관해 주세요. 이전 완료 후 새 주소의 ‘사용자 데이터 → 일반’에서 <strong>백업 가져오기</strong>를 해주세요.</p>
|
||||
<p class="notice-schedule">이전 예정: 2026년 9월 28일 00:00 (한국 시간) · 이전 직전에는 최신 데이터로 다시 백업해 주세요.</p>
|
||||
</div>
|
||||
<div class="notice-actions">
|
||||
<a href="/data">사용자 데이터로 이동 <span aria-hidden="true">→</span></a>
|
||||
<a href="https://gall.dcinside.com/mgallery/board/view/?id=holodreams&no=50312" target="_blank" rel="noopener noreferrer" aria-label="자세한 안내 (디시인사이드, 새 탭)">자세한 안내 <span aria-hidden="true">↗</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.migration-notice { border-bottom: 1px solid #725536; background: #30261d; color: #f4e6d4; }
|
||||
.notice-inner { position: relative; display: flex; align-items: center; gap: 16px 28px; width: min(var(--page-max-width), calc(100% - var(--page-gutter))); margin: 0 auto; padding: 16px 48px 16px 0; }
|
||||
.dismiss { position: absolute; top: 10px; right: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #ffe1b8; font-size: 26px; cursor: pointer; }
|
||||
.dismiss:hover { background: #493723; }
|
||||
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.notice-copy { flex: 1; min-width: 0; }
|
||||
h2 { margin: 0 0 6px; color: #ffd49a; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
|
||||
p { margin: 0; font-size: 13px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
|
||||
.notice-schedule { margin-top: 4px; color: #d7c1a6; }
|
||||
a { flex-shrink: 0; padding: 10px 14px; border: 1px solid #a88352; border-radius: 9px; color: #ffe1b8; font-size: 13px; font-weight: 750; line-height: 1.5; text-decoration: none; }
|
||||
a:hover { background: #493723; }
|
||||
a:focus-visible, button:focus-visible { outline: 3px solid #ffd49a; outline-offset: 3px; }
|
||||
@media (max-width: 760px) {
|
||||
.notice-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import AnalyticsConsent from '$lib/components/AnalyticsConsent.svelte';
|
||||
import DomainMigrationNotice from '$lib/components/DomainMigrationNotice.svelte';
|
||||
import { events } from '$lib/data/events.ts';
|
||||
import { createInitialReleaseClock, synchronizeReleaseClock } from '$lib/data/release-clock.ts';
|
||||
import { activeEventAt } from '$lib/engine/event-optimization.ts';
|
||||
@@ -26,6 +27,8 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<DomainMigrationNotice />
|
||||
|
||||
<header class="site-nav">
|
||||
<div class="nav-inner">
|
||||
<a class="brand" href="/" aria-label="홀로도리 계산기 홈">홀로도리 계산기</a>
|
||||
|
||||
Reference in New Issue
Block a user