86 lines
5.3 KiB
Svelte
86 lines
5.3 KiB
Svelte
<script lang="ts">
|
|
import UpdateNotice from '$lib/components/UpdateNotice.svelte';
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>홀로도리 계산기</title>
|
|
<meta name="description" content="홀로라이브 드림즈의 편성, 스킬 순서와 멤버 보드를 분석하는 계산기" />
|
|
</svelte:head>
|
|
|
|
<main>
|
|
<UpdateNotice />
|
|
|
|
<aside class="start-guide" aria-label="시작 안내">
|
|
<p><span>처음 사용한다면</span><strong>사용자 데이터를 먼저 설정하세요.</strong> 보유 카드와 개화 단계, 멤버별 보드를 실제 분석에 반영할 수 있습니다.</p>
|
|
<a href="/data">설정하기 <span aria-hidden="true">→</span></a>
|
|
</aside>
|
|
|
|
<section class="features" aria-labelledby="features-title">
|
|
<div class="section-heading">
|
|
<p>주요 기능</p>
|
|
<h2 id="features-title">무엇을 확인하고 싶나요?</h2>
|
|
</div>
|
|
<div class="feature-grid">
|
|
<a class="feature-card featured" href="/analysis">
|
|
<span class="feature-number">01</span>
|
|
<div><h3>배치 분석</h3><p>특정 악곡과 5인 편성에서 가장 높은 점수를 내는 멤버 순서와 빈도 감소 조합을 찾습니다.</p></div>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</a>
|
|
<a class="feature-card" href="/combination">
|
|
<span class="feature-number">02</span>
|
|
<div><h3>조합 탐색</h3><p>리더와 악곡, 고정 멤버를 기준으로 남은 자리에 들어갈 최적의 카드를 비교합니다.</p></div>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</a>
|
|
<a class="feature-card" href="/rating">
|
|
<span class="feature-number">03</span>
|
|
<div><h3>리더 레이팅</h3><p>입력한 편성으로 레이팅을 높이기 좋은 가창곡의 모든 난이도를 최대 20개 추천하고, 5개씩 비교합니다.</p></div>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</a>
|
|
<a class="feature-card" href="/data/boards">
|
|
<span class="feature-number">04</span>
|
|
<div><h3>멤버 보드</h3><p>멤버별 노드와 연결 카드를 설정하고 초록 노드의 자원 대비 효율을 분석합니다.</p></div>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</a>
|
|
<a class="feature-card" href="/cards">
|
|
<span class="feature-number">05</span>
|
|
<div><h3>카드 목록</h3><p>카드의 타입과 주스탯, 패시브·액티브·스페셜 스킬 정보를 빠르게 찾아봅니다.</p></div>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</a>
|
|
<a class="feature-card" href="/tools">
|
|
<span class="feature-number">06</span>
|
|
<div><h3>도구</h3><p>악곡과 난이도를 랜덤으로 뽑거나, 홀로워크에 보낸 횟수를 멤버별로 기록하고 확인합니다.</p></div>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<style>
|
|
main { width: min(var(--page-max-width), calc(100% - var(--page-gutter))); margin: 0 auto; padding: clamp(34px, 4vw, 58px) 0 80px; }
|
|
.start-guide { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 18px; border: 1px solid rgb(237 139 181 / 24%); border-radius: 12px; background: rgb(237 139 181 / 7%); }
|
|
.start-guide p { min-width: 0; margin: 0; color: #a4adba; font-size: 14px; line-height: 1.55; }
|
|
.start-guide p span { margin-right: 10px; color: #df8db0; font-size: 13px; font-weight: 850; }
|
|
.start-guide strong { margin-right: 7px; color: #e9edf2; font-size: 14px; }
|
|
.start-guide a { flex: 0 0 auto; color: #f2a6c6; font-size: 14px; font-weight: 850; text-decoration: none; }
|
|
.start-guide a span { margin-left: 4px; }
|
|
.features { padding-top: clamp(48px, 6vw, 76px); }
|
|
.section-heading p { margin: 0 0 14px; color: #ed8bb5; font-size: 14px; font-weight: 850; letter-spacing: .08em; }
|
|
.section-heading h2 { margin: 0; color: #edf0f5; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.045em; }
|
|
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
|
|
.feature-card { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 26px; align-items: start; gap: 16px; min-height: 176px; padding: 26px; border: 1px solid #2c3440; border-radius: 14px; color: inherit; background: #151a22; text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
|
|
.feature-card:hover { border-color: #556170; background: #19212a; transform: translateY(-2px); }
|
|
.feature-card.featured { border-color: rgb(237 139 181 / 35%); background: rgb(237 139 181 / 7%); }
|
|
.feature-number { color: #747f8e; font-size: 13px; font-weight: 900; letter-spacing: .04em; }
|
|
.feature-card h3 { margin: -3px 0 10px; color: #eef1f5; font-size: 22px; letter-spacing: -.03em; }
|
|
.feature-card p { max-width: 560px; margin: 0; color: #9da7b5; font-size: 15px; line-height: 1.65; }
|
|
.arrow { justify-self: end; color: #ed8bb5; font-size: 21px; line-height: 1; }
|
|
a:focus-visible { outline: 3px solid rgb(239 139 182 / 28%); outline-offset: 3px; }
|
|
|
|
@media (max-width: 680px) {
|
|
main { padding-top: 38px; }
|
|
.start-guide { align-items: flex-start; flex-direction: column; gap: 9px; }
|
|
.feature-grid { grid-template-columns: 1fr; }
|
|
.feature-card { min-height: 0; padding: 22px 20px; }
|
|
}
|
|
</style>
|