ponshu-room-lite/web/index.html

124 lines
4.5 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ponshu Room</title>
<meta name="description" content="日本酒コレクションアプリ">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Noto+Serif+JP:wght@400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍶</text></svg>">
</head>
<body>
<div class="container">
<!-- Hero Section -->
<header class="hero">
<div class="logo">
<svg class="sake-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 4L28 12H20L24 4Z" fill="currentColor" opacity="0.6" />
<path d="M16 12H32V16C32 18 30 20 30 24V40C30 42 28 44 24 44C20 44 18 42 18 40V24C18 20 16 18 16 16V12Z"
fill="currentColor" />
<ellipse cx="24" cy="32" rx="4" ry="2" fill="currentColor" opacity="0.3" />
</svg>
<h1>Ponshu Room</h1>
</div>
<p class="tagline">日本酒を撮って、記録して、味わう</p>
</header>
<!-- App Preview -->
<section class="preview">
<div class="phone-frame">
<div class="screen-placeholder">
<div class="grid-preview">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>
</div>
</section>
<!-- Download Section -->
<section class="download">
<div class="version-cards">
<!-- Lite Version -->
<a href="/releases/ponshu-room-lite.apk" class="version-card" download>
<div class="card-header">
<span class="version-name">Lite</span>
<span class="version-badge free">Free</span>
</div>
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 3v12m0 0l-4-4m4 4l4-4M5 17v2a2 2 0 002 2h10a2 2 0 002-2v-2" />
</svg>
</div>
<span class="file-size">88 MB</span>
</a>
<!-- Pro Version -->
<a href="/releases/ponshu-room-pro.apk" class="version-card pro" download>
<div class="card-header">
<span class="version-name">Pro</span>
<span class="version-badge pro-badge">Pro</span>
</div>
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 3v12m0 0l-4-4m4 4l4-4M5 17v2a2 2 0 002 2h10a2 2 0 002-2v-2" />
</svg>
</div>
<span class="file-size">89 MB</span>
</a>
</div>
<p class="platform-note">Android 8.0+</p>
</section>
<!-- Features (Icons Only) -->
<section class="features">
<div class="feature">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" />
<circle cx="12" cy="13" r="4" />
</svg>
<span>撮影</span>
</div>
<div class="feature">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
<span>AI解析</span>
</div>
<div class="feature">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
</svg>
<span>コレクション</span>
</div>
<div class="feature">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
<span>マップ</span>
</div>
</section>
<!-- Footer -->
<footer>
<p>v1.0.12</p>
</footer>
</div>
</body>
</html>