カフェのホームページ

atomic.studio/s/3426

📄 index.html コードを直接編集して「適用」でプレビューに反映

<div class="min-h-screen bg-zinc-950 text-white"><header class="relative w-full bg-[#fdf8f0] text-[#3e2c1a] font-sans"><div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-5 md:px-8 lg:px-12"><div class="flex items-center gap-2"><span class="text-2xl md:text-3xl">☕</span><h1 class="text-xl font-bold tracking-wide md:text-2xl">喫茶 ひだまり</h1></div><button class="flex flex-col gap-1 md:hidden" aria-label="カフェ"><span class="block h-0.5 w-6 bg-[#3e2c1a]"></span><span class="block h-0.5 w-6 bg-[#3e2c1a]"></span><span class="block h-0.5 w-6 bg-[#3e2c1a]"></span></button><nav class="hidden gap-8 text-sm font-medium md:flex lg:text-base"><a href="#" class="hover:text-[#a67c52] transition-colors duration-200">メニュー</a><a href="#" class="hover:text-[#a67c52] transition-colors duration-200">店舗案内</a><a href="#" class="hover:text-[#a67c52] transition-colors duration-200">お知らせ</a><a href="#" class="hover:text-[#a67c52] transition-colors duration-200">お問い合わせ</a></nav></div><div class="mx-auto h-px w-11/12 max-w-6xl bg-gradient-to-r from-transparent via-[#d4b48c] to-transparent"></div><h2 class="sr-only">喫茶ひだまりのヘッダー</h2></header><section class="relative w-full min-h-screen flex items-center justify-center overflow-hidden bg-[#f5efe6]"><div class="absolute inset-0 pointer-events-none"><div class="absolute top-0 left-0 w-72 h-72 bg-[#e8d5c4] rounded-full -translate-x-1/2 -translate-y-1/2 opacity-40"></div><div class="absolute bottom-0 right-0 w-96 h-96 bg-[#d9c5b0] rounded-full translate-x-1/3 translate-y-1/3 opacity-30"></div><div class="absolute top-1/3 right-1/4 w-32 h-32 bg-[#c9b39a] rounded-full opacity-20"></div></div><div class="relative z-10 text-center px-6 md:px-12 max-w-4xl mx-auto"><h2 class="text-5xl md:text-7xl lg:text-8xl font-serif tracking-widest text-[#4a3728] mb-6 leading-tight">珈琲<span class="block text-3xl md:text-4xl lg:text-5xl font-light tracking-[0.3em] mt-2 text-[#6b4f3a]">木洩れ日</span></h2><p class="text-base md:text-lg lg:text-xl text-[#7a5f48] font-light tracking-wider mb-10 max-w-xl mx-auto leading-relaxed">静かな時間が流れる、大人の隠れ家。<br/>一杯のコーヒーとともに、特別なひとときを。</p><a href="#menu" class="inline-block px-10 py-4 border-2 border-[#6b4f3a] text-[#6b4f3a] text-sm md:text-base tracking-[0.2em] uppercase hover:bg-[#6b4f3a] hover:text-[#f5efe6] transition-all duration-500 ease-out">メニューを見る</a><div class="mt-12 flex items-center justify-center gap-4"><span class="block w-12 h-px bg-[#c9b39a]"></span><span class="block w-2 h-2 rounded-full bg-[#c9b39a]"></span><span class="block w-12 h-px bg-[#c9b39a]"></span></div></div><div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#f5efe6] to-transparent pointer-events-none"></div></section><div class="w-full max-w-4xl mx-auto bg-[#FDF8F0] rounded-3xl shadow-lg p-6 md:p-8 font-sans"><div class="flex items-center gap-3 mb-6"><span class="text-3xl">🗺️</span><h2 class="text-2xl md:text-3xl font-bold text-[#5C4033] tracking-wide">カフェマップ</h2></div><div class="relative w-full aspect-[4/3] md:aspect-[16/9] bg-[#E8DCC8] rounded-2xl overflow-hidden border-2 border-[#C4A882] shadow-inner"><div class="absolute inset-0 opacity-10 pointer-events-none"><svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="25" x2="100" y2="25" stroke="#5C4033" stroke-width="0.5"></line><line x1="0" y1="50" x2="100" y2="50" stroke="#5C4033" stroke-width="0.5"></line><line x1="0" y1="75" x2="100" y2="75" stroke="#5C4033" stroke-width="0.5"></line><line x1="25" y1="0" x2="25" y2="100" stroke="#5C4033" stroke-width="0.5"></line><line x1="50" y1="0" x2="50" y2="100" stroke="#5C4033" stroke-width="0.5"></line><line x1="75" y1="0" x2="75" y2="100" stroke="#5C4033" stroke-width="0.5"></line></svg></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 group cursor-pointer" style="left:99.24999999999926%;top:100%;z-index:10"><div class="w-5 h-5 md:w-6 md:h-6 rounded-full border-2 border-white shadow-md transition-transform duration-200 group-hover:scale-125" style="background-color:#8B6F47"></div><div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"><div class="bg-white/95 backdrop-blur-sm rounded-xl px-3 py-2 shadow-lg border border-[#D2B48C]"><p class="text-sm font-semibold text-[#5C4033]">森の珈琲店</p><p class="text-xs text-[#8B7355]">東京都世田谷区桜丘1-2-3</p></div><div class="w-3 h-3 bg-white/95 rotate-45 mx-auto -mt-1.5 border-l border-b border-[#D2B48C]"></div></div></div><div class="absolute top-3 right-3 md:top-4 md:right-4 w-10 h-10 md:w-12 md:h-12 bg-white/80 rounded-full flex items-center justify-center shadow-sm border border-[#D2B48C]"><span class="text-lg md:text-xl font-bold text-[#5C4033]">N</span></div><div class="absolute bottom-3 left-3 md:bottom-4 md:left-4 flex items-center gap-2 bg-white/70 backdrop-blur-sm rounded-lg px-3 py-1.5 shadow-sm border border-[#D2B48C]"><div class="w-8 md:w-12 h-1 bg-[#5C4033] rounded-full"></div><span class="text-[10px] md:text-xs text-[#5C4033] font-medium">約500m</span></div></div><div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3"><div class="flex items-center gap-3 bg-white/60 rounded-xl px-4 py-3 border border-[#E8DCC8] hover:border-[#C4A882] transition-colors"><div class="w-4 h-4 rounded-full flex-shrink-0 border border-white shadow-sm" style="background-color:#8B6F47"></div><div class="min-w-0"><p class="text-sm font-semibold text-[#5C4033] truncate">森の珈琲店</p><p class="text-xs text-[#8B7355] truncate">東京都世田谷区桜丘1-2-3</p></div></div><div class="flex items-center gap-3 bg-white/60 rounded-xl px-4 py-3 border border-[#E8DCC8] hover:border-[#C4A882] transition-colors"><div class="w-4 h-4 rounded-full flex-shrink-0 border border-white shadow-sm" style="background-color:#A0522D"></div><div class="min-w-0"><p class="text-sm font-semibold text-[#5C4033] truncate">猫と本のカフェ</p><p class="text-xs text-[#8B7355] truncate">東京都渋谷区神宮前4-5-6</p></div></div><div class="flex items-center gap-3 bg-white/60 rounded-xl px-4 py-3 border border-[#E8DCC8] hover:border-[#C4A882] transition-colors"><div class="w-4 h-4 rounded-full flex-shrink-0 border border-white shadow-sm" style="background-color:#D2B48C"></div><div class="min-w-0"><p class="text-sm font-semibold text-[#5C4033] truncate">陽だまりベーカリー</p><p class="text-xs text-[#8B7355] truncate">東京都目黒区自由が丘2-3-4</p></div></div><div class="flex items-center gap-3 bg-white/60 rounded-xl px-4 py-3 border border-[#E8DCC8] hover:border-[#C4A882] transition-colors"><div class="w-4 h-4 rounded-full flex-shrink-0 border border-white shadow-sm" style="background-color:#C4A882"></div><div class="min-w-0"><p class="text-sm font-semibold text-[#5C4033] truncate">夜明けの紅茶店</p><p class="text-xs text-[#8B7355] truncate">東京都港区南青山3-5-7</p></div></div></div></div><section class="w-full max-w-4xl mx-auto px-4 py-12 md:py-20"><div class="text-center mb-10 md:mb-14"><h2 class="text-3xl md:text-4xl font-serif tracking-wide text-[#3e2c1b] mb-2">お問い合わせ</h2><p class="text-[#6b4f32] text-sm md:text-base leading-relaxed">ご予約・ご質問はこちらから</p></div><form class="bg-[#faf6f0] rounded-2xl shadow-lg p-6 md:p-10 space-y-6 border border-[#e5d9cc]"><div><label for="name" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お名前 <span class="text-[#b87c4b]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-xl border border-[#d9cbb8] bg-white text-[#3e2c1b] placeholder-[#b09a82] focus:outline-none focus:ring-2 focus:ring-[#b87c4b] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">メールアドレス <span class="text-[#b87c4b]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example.com" class="w-full px-4 py-3 rounded-xl border border-[#d9cbb8] bg-white text-[#3e2c1b] placeholder-[#b09a82] focus:outline-none focus:ring-2 focus:ring-[#b87c4b] focus:border-transparent transition"/></div><div><label for="phone" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">電話番号</label><input id="phone" type="tel" placeholder="例：090-1234-5678" class="w-full px-4 py-3 rounded-xl border border-[#d9cbb8] bg-white text-[#3e2c1b] placeholder-[#b09a82] focus:outline-none focus:ring-2 focus:ring-[#b87c4b] focus:border-transparent transition"/></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お問い合わせ内容 <span class="text-[#b87c4b]">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時、ご質問などをお書きください" class="w-full px-4 py-3 rounded-xl border border-[#d9cbb8] bg-white text-[#3e2c1b] placeholder-[#b09a82] focus:outline-none focus:ring-2 focus:ring-[#b87c4b] focus:border-transparent transition resize-y"></textarea></div><div class="pt-2"><button type="submit" class="w-full md:w-auto px-10 py-3.5 bg-[#b87c4b] hover:bg-[#9e6a3e] active:bg-[#8a5c34] text-white font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 tracking-wide">送信する</button></div><p class="text-xs text-[#8b735a] text-center md:text-left pt-2 border-t border-[#e5d9cc]"><span class="text-[#b87c4b]">*</span> は必須項目です。 ご送信いただいた内容は、お問い合わせ対応以外には使用いたしません。</p></form></section><div class="w-full max-w-3xl mx-auto px-4 py-8 md:py-12"><h2 class="text-2xl md:text-3xl font-serif text-[#4a3728] text-center mb-8 tracking-wide">メニュー</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6"><div class="bg-[#faf6f0] border border-[#e8dccc] rounded-lg p-4 md:p-5 shadow-sm hover:shadow-md transition-shadow duration-200"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#4a3728]">ブレンドコーヒー</h3><span class="text-[#8b6f47] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥450</span></div><p class="text-sm md:text-base text-[#7a6b5a] leading-relaxed">深煎りのオリジナルブレンド</p></div><div class="bg-[#faf6f0] border border-[#e8dccc] rounded-lg p-4 md:p-5 shadow-sm hover:shadow-md transition-shadow duration-200"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#4a3728]">カフェラテ</h3><span class="text-[#8b6f47] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥500</span></div><p class="text-sm md:text-base text-[#7a6b5a] leading-relaxed">エスプレッソとスチームミルク</p></div><div class="bg-[#faf6f0] border border-[#e8dccc] rounded-lg p-4 md:p-5 shadow-sm hover:shadow-md transition-shadow duration-200"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#4a3728]">抹茶ラテ</h3><span class="text-[#8b6f47] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥550</span></div><p class="text-sm md:text-base text-[#7a6b5a] leading-relaxed">京都宇治抹茶使用</p></div><div class="bg-[#faf6f0] border border-[#e8dccc] rounded-lg p-4 md:p-5 shadow-sm hover:shadow-md transition-shadow duration-200"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#4a3728]">季節のフルーツタルト</h3><span class="text-[#8b6f47] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥650</span></div><p class="text-sm md:text-base text-[#7a6b5a] leading-relaxed">旬の果実を贅沢に</p></div><div class="bg-[#faf6f0] border border-[#e8dccc] rounded-lg p-4 md:p-5 shadow-sm hover:shadow-md transition-shadow duration-200"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#4a3728]">ガトーショコラ</h3><span class="text-[#8b6f47] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥600</span></div><p class="text-sm md:text-base text-[#7a6b5a] leading-relaxed">濃厚なチョコレートケーキ</p></div><div class="bg-[#faf6f0] border border-[#e8dccc] rounded-lg p-4 md:p-5 shadow-sm hover:shadow-md transition-shadow duration-200"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#4a3728]">クロックムッシュ</h3><span class="text-[#8b6f47] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥700</span></div><p class="text-sm md:text-base text-[#7a6b5a] leading-relaxed">とろけるチーズとハム</p></div></div></div><footer class="bg-[#2c1810] text-[#f5e6d3] py-8 md:py-12 px-4"><div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6"><div class="text-center md:text-left"><h2 class="text-lg md:text-xl font-serif tracking-wider">喫茶 木もれ陽</h2><p class="text-sm text-[#c9a96e] mt-1">Komorebi Coffee</p></div><div class="text-center md:text-right text-sm space-y-1"><p>〒150-0001 東京都渋谷区神宮前1-2-3</p><p>03-1234-5678</p><p>月〜土 8:00〜18:00 / 日祝 10:00〜17:00</p></div></div><div class="border-t border-[#4a3728] mt-6 pt-4 text-center text-xs text-[#a08060]"><p>© 2026 喫茶 木もれ陽. All rights reserved.</p></div></footer></div>