feat: add design D (white background, restored from pre-dark)
This commit is contained in:
parent
396cafbb28
commit
3c108ad83c
|
|
@ -0,0 +1,850 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="description" content="Posimai Store — 日々の暮らしをそっと助けるアプリ">
|
||||
<meta name="theme-color" content="#FAFAF8">
|
||||
<title>Posimai Store</title>
|
||||
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js" integrity="sha384-tTkFttkBclaU1cloKwOi9xk3pbao3VZxTjLNBt8iFABWDBQibbAbWpVmO28zMuxq" crossorigin="anonymous"></script>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #FAFAF8;
|
||||
--bg2: #F2F2EF;
|
||||
--surface: #FFFFFF;
|
||||
--border: rgba(0,0,0,0.07);
|
||||
--text: #18181B;
|
||||
--text2: #52525B;
|
||||
--text3: #A1A1AA;
|
||||
--accent: #059669;
|
||||
--accent-h: #047857;
|
||||
--accent-l: rgba(5,150,105,0.08);
|
||||
--accent-b: rgba(5,150,105,0.18);
|
||||
--accent-bg:#F0FDF4;
|
||||
--r-xl: 28px;
|
||||
--r-lg: 20px;
|
||||
--r-md: 14px;
|
||||
--r-sm: 9px;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { cursor: pointer; border: none; background: none; font-family: inherit; }
|
||||
|
||||
/* ── Nav ── */
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32px;
|
||||
height: 58px;
|
||||
background: rgba(250,250,248,0.92);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 7px;
|
||||
background: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-size: 13px;
|
||||
color: var(--text2);
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--r-sm);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.nav-links a:hover { background: var(--bg2); color: var(--text); }
|
||||
|
||||
.btn-nav {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
padding: 7px 16px;
|
||||
border-radius: var(--r-sm);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.btn-nav:hover { background: var(--accent-h); color: #fff; }
|
||||
|
||||
@media (max-width: 680px) {
|
||||
nav { padding: 0 20px; }
|
||||
.nav-links a { display: none; }
|
||||
}
|
||||
|
||||
/* ── Hero ── */
|
||||
.hero {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 32px 72px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.hero { padding: 56px 24px 48px; }
|
||||
}
|
||||
|
||||
.hero-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 1px solid var(--accent-b);
|
||||
padding: 5px 14px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(30px, 5vw, 54px);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.12;
|
||||
color: var(--text);
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.hero h1 .muted { font-weight: 400; color: var(--text2); }
|
||||
|
||||
.hero-sub {
|
||||
font-size: 16px;
|
||||
color: var(--text2);
|
||||
line-height: 1.75;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.hero-trust {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.trust-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
.trust-pill svg { color: var(--accent); }
|
||||
|
||||
.trust-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text3); opacity: 0.4; }
|
||||
|
||||
/* ── Section ── */
|
||||
.section {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) { .section { padding: 0 20px 64px; } }
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.section-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
max-width: 960px;
|
||||
margin: 0 auto 80px;
|
||||
padding: 0 32px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ── Featured app ── */
|
||||
.featured {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-xl);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.featured { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.featured-body {
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) { .featured-body { padding: 28px 24px; } }
|
||||
|
||||
.featured-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 1px solid var(--accent-b);
|
||||
padding: 3px 10px;
|
||||
border-radius: 100px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.app-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.app-category { font-size: 12px; color: var(--text3); margin-top: 2px; }
|
||||
|
||||
.app-desc {
|
||||
font-size: 14px;
|
||||
color: var(--text2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.feat-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.feat-list li {
|
||||
font-size: 13px;
|
||||
color: var(--text2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.feat-list li svg { color: var(--accent); flex-shrink: 0; }
|
||||
|
||||
.featured-pricing {
|
||||
background: var(--bg2);
|
||||
border-left: 1px solid var(--border);
|
||||
padding: 40px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.featured-pricing { border-left: none; border-top: 1px solid var(--border); padding: 28px 24px; }
|
||||
}
|
||||
|
||||
.plan {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.plan.paid { border-color: var(--accent-b); background: var(--accent-bg); }
|
||||
|
||||
.plan-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
.plan.paid .plan-label { color: var(--accent); }
|
||||
|
||||
.plan-price {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.plan-price sup { font-size: 14px; font-weight: 500; vertical-align: super; }
|
||||
|
||||
.plan-note { font-size: 12px; color: var(--text3); }
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
padding: 10px 18px;
|
||||
border-radius: var(--r-md);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary { background: var(--accent); color: #fff; }
|
||||
.btn-primary:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(5,150,105,0.24); }
|
||||
|
||||
.btn-default { background: var(--surface); color: var(--text2); border: 1px solid var(--border); }
|
||||
.btn-default:hover { border-color: rgba(0,0,0,0.16); color: var(--text); }
|
||||
|
||||
/* ── App grid ── */
|
||||
.app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) { .app-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
@media (max-width: 480px) { .app-grid { grid-template-columns: 1fr; } }
|
||||
|
||||
.app-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
transition: box-shadow 0.18s, transform 0.18s;
|
||||
}
|
||||
|
||||
.app-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.07); transform: translateY(-2px); }
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 3px 9px;
|
||||
border-radius: 100px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.price-tag.free { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-b); }
|
||||
.price-tag.paid { background: var(--bg2); color: var(--text2); border: 1px solid var(--border); }
|
||||
.price-tag.soon { background: var(--bg2); color: var(--text3); border: 1px solid var(--border); }
|
||||
|
||||
.card-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
|
||||
.card-cat { font-size: 11px; color: var(--text3); margin-top: 1px; }
|
||||
.card-desc { font-size: 13px; color: var(--text2); line-height: 1.65; flex: 1; }
|
||||
|
||||
.card-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--accent);
|
||||
padding: 8px 14px;
|
||||
border-radius: var(--r-sm);
|
||||
border: 1px solid var(--accent-b);
|
||||
background: var(--accent-bg);
|
||||
transition: all 0.15s;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.card-cta:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
|
||||
.card-cta.disabled {
|
||||
color: var(--text3);
|
||||
background: var(--bg2);
|
||||
border-color: var(--border);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Promise section ── */
|
||||
.promise {
|
||||
background: var(--text);
|
||||
border-radius: var(--r-xl);
|
||||
padding: 56px 48px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto 80px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 48px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.promise { grid-template-columns: 1fr; padding: 40px 28px; margin: 0 20px 64px; gap: 28px; }
|
||||
}
|
||||
|
||||
.promise-heading {
|
||||
font-size: clamp(22px, 3vw, 30px);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.25;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.promise-heading .hl { color: var(--accent); }
|
||||
|
||||
.promise-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.promise-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.promise-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.promise-item-title { font-size: 14px; font-weight: 600; color: #fff; }
|
||||
.promise-item-desc { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 2px; line-height: 1.6; }
|
||||
|
||||
/* ── Footer ── */
|
||||
footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
background: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
|
||||
.footer-links a { font-size: 12px; color: var(--text3); transition: color 0.15s; }
|
||||
.footer-links a:hover { color: var(--text2); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav>
|
||||
<div class="nav-brand">
|
||||
<div class="nav-logo">
|
||||
<i data-lucide="layout-grid" style="width:13px;height:13px;"></i>
|
||||
</div>
|
||||
Posimai Store
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="#apps">アプリ一覧</a>
|
||||
<a href="#promise">Posimaiとは</a>
|
||||
<a class="btn-nav" href="#apps">アプリを見る</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="hero-tag">
|
||||
<i data-lucide="package" style="width:11px;height:11px;"></i>
|
||||
Posimai Apps
|
||||
</div>
|
||||
<h1>暮らしの中に、<br><span class="muted">ちょうどいいアプリを。</span></h1>
|
||||
<p class="hero-sub">広告なし、サブスクなし。使いたいときだけ開ける、シンプルなアプリを作っています。</p>
|
||||
<div class="hero-trust">
|
||||
<div class="trust-pill">
|
||||
<i data-lucide="shield-check" style="width:13px;height:13px;"></i>
|
||||
データは自分だけのもの
|
||||
</div>
|
||||
<div class="trust-sep"></div>
|
||||
<div class="trust-pill">
|
||||
<i data-lucide="ban" style="width:13px;height:13px;"></i>
|
||||
広告なし
|
||||
</div>
|
||||
<div class="trust-sep"></div>
|
||||
<div class="trust-pill">
|
||||
<i data-lucide="infinity" style="width:13px;height:13px;"></i>
|
||||
買い切り・月額なし
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured app -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">注目アプリ</div>
|
||||
<div class="section-meta">Ponshu Room</div>
|
||||
</div>
|
||||
|
||||
<div class="featured">
|
||||
<div class="featured-body">
|
||||
<div class="featured-badge">
|
||||
<i data-lucide="star" style="width:10px;height:10px;"></i>
|
||||
New Release
|
||||
</div>
|
||||
|
||||
<div class="app-header">
|
||||
<div class="app-icon" style="background:linear-gradient(135deg,#FEF3E8,#FDDCB5);">
|
||||
<i data-lucide="wine" style="width:22px;height:22px;color:#C2692A;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="app-name">Ponshu Room</div>
|
||||
<div class="app-category">日本酒記録 · iOS / Android</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="app-desc">ラベルを撮るだけで名前・産地・味を自動記録。AIが好みを学習して、次の一本を提案します。</p>
|
||||
|
||||
<ul class="feat-list">
|
||||
<li><i data-lucide="check" style="width:14px;height:14px;"></i> カメラで自動入力</li>
|
||||
<li><i data-lucide="check" style="width:14px;height:14px;"></i> 47都道府県の産地マップ</li>
|
||||
<li><i data-lucide="check" style="width:14px;height:14px;"></i> 味の傾向グラフ</li>
|
||||
<li><i data-lucide="check" style="width:14px;height:14px;"></i> 広告なし・買い切り</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="featured-pricing">
|
||||
<div class="plan">
|
||||
<div class="plan-label">無料</div>
|
||||
<div class="plan-price">¥0</div>
|
||||
<div class="plan-note">10件まで記録、全機能を試せます</div>
|
||||
<a href="#" class="btn btn-default">
|
||||
<i data-lucide="smartphone" style="width:13px;height:13px;"></i>
|
||||
無料で始める
|
||||
</a>
|
||||
</div>
|
||||
<div class="plan paid">
|
||||
<div class="plan-label">フルアクセス</div>
|
||||
<div class="plan-price"><sup>¥</sup>500</div>
|
||||
<div class="plan-note">記録無制限・AI機能・買い切り</div>
|
||||
<a href="https://buy.stripe.com/test_9B67sEbN3fowfMW4jwenS00" class="btn btn-primary" target="_blank" rel="noopener">
|
||||
<i data-lucide="credit-card" style="width:13px;height:13px;"></i>
|
||||
購入する
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- App grid -->
|
||||
<section class="section" id="apps">
|
||||
<div class="section-header">
|
||||
<div class="section-title">すべてのアプリ</div>
|
||||
<div class="section-meta">6 apps</div>
|
||||
</div>
|
||||
|
||||
<div class="app-grid">
|
||||
|
||||
<div class="app-card">
|
||||
<div class="card-top">
|
||||
<div class="card-icon" style="background:linear-gradient(135deg,#FEF3E8,#FDDCB5);">
|
||||
<i data-lucide="wine" style="width:20px;height:20px;color:#C2692A;"></i>
|
||||
</div>
|
||||
<span class="price-tag paid">¥500</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-name">Ponshu Room</div>
|
||||
<div class="card-cat">日本酒記録</div>
|
||||
</div>
|
||||
<p class="card-desc">飲んだ日本酒をラベル撮影で自動記録。AIが好みを学んで次の一本を提案します。</p>
|
||||
<a href="#" class="card-cta">
|
||||
<i data-lucide="arrow-right" style="width:13px;height:13px;"></i>
|
||||
詳しく見る
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="app-card">
|
||||
<div class="card-top">
|
||||
<div class="card-icon" style="background:linear-gradient(135deg,#EFF6FF,#DBEAFE);">
|
||||
<i data-lucide="brain" style="width:20px;height:20px;color:#3B82F6;"></i>
|
||||
</div>
|
||||
<span class="price-tag soon">準備中</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-name">Brain</div>
|
||||
<div class="card-cat">記事管理</div>
|
||||
</div>
|
||||
<p class="card-desc">気になった記事をURLで保存するだけ。AIが自動で要約・タグ付けして整理します。</p>
|
||||
<a class="card-cta disabled">
|
||||
<i data-lucide="clock" style="width:13px;height:13px;"></i>
|
||||
準備中
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="app-card">
|
||||
<div class="card-top">
|
||||
<div class="card-icon" style="background:linear-gradient(135deg,#F0FDF4,#DCFCE7);">
|
||||
<i data-lucide="check-square" style="width:20px;height:20px;color:#22C55E;"></i>
|
||||
</div>
|
||||
<span class="price-tag soon">準備中</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-name">Habit</div>
|
||||
<div class="card-cat">習慣管理</div>
|
||||
</div>
|
||||
<p class="card-desc">毎日の習慣をシンプルにチェックするだけ。続けることだけに集中できる設計。</p>
|
||||
<a class="card-cta disabled">
|
||||
<i data-lucide="clock" style="width:13px;height:13px;"></i>
|
||||
準備中
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="app-card">
|
||||
<div class="card-top">
|
||||
<div class="card-icon" style="background:linear-gradient(135deg,#FDF4FF,#FAE8FF);">
|
||||
<i data-lucide="activity" style="width:20px;height:20px;color:#A855F7;"></i>
|
||||
</div>
|
||||
<span class="price-tag soon">準備中</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-name">Pulse</div>
|
||||
<div class="card-cat">気分記録</div>
|
||||
</div>
|
||||
<p class="card-desc">今日の気分・エネルギー・集中度を記録。積み重なると自分のリズムが見えてきます。</p>
|
||||
<a class="card-cta disabled">
|
||||
<i data-lucide="clock" style="width:13px;height:13px;"></i>
|
||||
準備中
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="app-card">
|
||||
<div class="card-top">
|
||||
<div class="card-icon" style="background:linear-gradient(135deg,#FFF7ED,#FED7AA);">
|
||||
<i data-lucide="book-open" style="width:20px;height:20px;color:#F97316;"></i>
|
||||
</div>
|
||||
<span class="price-tag soon">準備中</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-name">Journal</div>
|
||||
<div class="card-cat">日記・メモ</div>
|
||||
</div>
|
||||
<p class="card-desc">シンプルなマークダウン日記。書き続けるほど、自分の思考の変化が記録されます。</p>
|
||||
<a class="card-cta disabled">
|
||||
<i data-lucide="clock" style="width:13px;height:13px;"></i>
|
||||
準備中
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="app-card">
|
||||
<div class="card-top">
|
||||
<div class="card-icon" style="background:linear-gradient(135deg,#F8FAFC,#E2E8F0);">
|
||||
<i data-lucide="more-horizontal" style="width:20px;height:20px;color:#94A3B8;"></i>
|
||||
</div>
|
||||
<span class="price-tag soon">検討中</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-name">Next App</div>
|
||||
<div class="card-cat">開発中</div>
|
||||
</div>
|
||||
<p class="card-desc">次に作るアプリを検討中です。ご意見・ご要望があればお気軽にお送りください。</p>
|
||||
<a href="mailto:noreply@soar-enrich.com" class="card-cta">
|
||||
<i data-lucide="mail" style="width:13px;height:13px;"></i>
|
||||
意見を送る
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Promise -->
|
||||
<div class="promise" id="promise">
|
||||
<div class="promise-heading">
|
||||
Posimaiが<br><span class="hl">大切にしていること</span>
|
||||
</div>
|
||||
<div class="promise-items">
|
||||
<div class="promise-item">
|
||||
<div class="promise-icon">
|
||||
<i data-lucide="shield-check" style="width:15px;height:15px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="promise-item-title">データはあなただけのもの</div>
|
||||
<div class="promise-item-desc">第三者に売ったり、広告に使うことはしません。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="promise-item">
|
||||
<div class="promise-icon">
|
||||
<i data-lucide="minus-circle" style="width:15px;height:15px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="promise-item-title">通知で呼び戻す仕掛けなし</div>
|
||||
<div class="promise-item-desc">使いたいときだけ開けばいい。それだけでいい。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="promise-item">
|
||||
<div class="promise-icon">
|
||||
<i data-lucide="tag" style="width:15px;height:15px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="promise-item-title">買い切り、追加料金なし</div>
|
||||
<div class="promise-item-desc">一度の支払いで、今後の機能追加もすべて含みます。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="footer-inner">
|
||||
<div class="footer-brand">
|
||||
<div class="footer-logo">
|
||||
<i data-lucide="layout-grid" style="width:11px;height:11px;"></i>
|
||||
</div>
|
||||
Posimai
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="https://posimai.soar-enrich.com/legal/privacy" target="_blank" rel="noopener">プライバシーポリシー</a>
|
||||
<a href="https://posimai.soar-enrich.com/legal/terms" target="_blank" rel="noopener">利用規約</a>
|
||||
<a href="https://posimai.soar-enrich.com/legal/tokusho" target="_blank" rel="noopener">特定商取引法</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
if (window.lucide) lucide.createIcons();
|
||||
</script>
|
||||
|
||||
<!-- Dev toggle — visible only when ?dev=1 -->
|
||||
<script>
|
||||
(function(){
|
||||
if(!location.search.includes('dev=1')) return;
|
||||
const wrap = document.createElement('div');
|
||||
wrap.style.cssText = 'position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:6px;';
|
||||
['A:/', 'B:/index-b.html', 'C:/index-c.html'].forEach(function(s){
|
||||
const [label, href] = s.split(':');
|
||||
const a = document.createElement('a');
|
||||
a.href = href + '?dev=1';
|
||||
a.textContent = label;
|
||||
const isCurrent = location.pathname.replace(/index-([abc])\.html/, '$1').toUpperCase().includes(label) || (label==='A' && (location.pathname==='/' || location.pathname==='/index.html'));
|
||||
a.style.cssText = 'font-family:monospace;font-size:11px;padding:6px 12px;border-radius:6px;text-decoration:none;transition:all 0.15s;' + (isCurrent ? 'background:#059669;color:#fff;border:1px solid #059669;' : 'background:rgba(250,250,248,0.95);color:#059669;border:1px solid #059669;');
|
||||
wrap.appendChild(a);
|
||||
});
|
||||
document.body.appendChild(wrap);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue