Spaces:
Running
Running
### 🖥️ 実際の操作画面はこちら Magicカルテは、診療中の録音からカルテ作成、飼い主メッセージ送信まで、すべてこの画面上で完結します。 📍 Step 1：診療ダッシュボードから「診療開始」を押す 患者一覧と主訴が並び、来院順にボタンひとつで診療を開始できます。  📍 Step 2：録音を開始すると、SOAP形式のカルテと診療要約が自動生成 録音を止めた瞬間にカルテが構造化され、要約とともに飼い主メッセージも生成されます。  📬 飼い主には1クリックで診療要約を送信可能。 **操作は直感的で、誰でもすぐに使いこなせます。** 📍 推奨挿入位置 「たった3ステップで診療業務が劇的に変わります」セクションの直後 または Step①「ワンタップ録音」の真下 📎 使用画像CDN（Imgur直リンク） https://i.imgur.com/OWA3XXN.png （診療ダッシュボード） https://i.imgur.com/YhIjNML.png （録音中カルテ画面） - Follow Up Deployment
d723a0b verified | <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>マジックカルテ｜動物病院向け音声AIカルテシステム</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%); | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .cta-button { | |
| transition: all 0.3s ease; | |
| } | |
| .cta-button:hover { | |
| transform: scale(1.05); | |
| } | |
| .comparison-table th, .comparison-table td { | |
| padding: 1rem; | |
| text-align: center; | |
| } | |
| .comparison-table tr:nth-child(even) { | |
| background-color: #f8fafc; | |
| } | |
| .faq-item { | |
| transition: all 0.2s ease; | |
| } | |
| .faq-item:hover { | |
| background-color: #f8fafc; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans text-gray-800"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-blue-600">PawLoop マジックカルテ</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#features" class="text-gray-600 hover:text-blue-600">特徴</a> | |
| <a href="#solution" class="text-gray-600 hover:text-blue-600">解決策</a> | |
| <a href="#testimonial" class="text-gray-600 hover:text-blue-600">導入事例</a> | |
| <a href="#faq" class="text-gray-600 hover:text-blue-600">よくある質問</a> | |
| </nav> | |
| <a href="#register" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition duration-300 md:ml-4">事前登録する</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight mb-6">飼い主と向き合う時間を、<br>魔法のように増やそう。</h1> | |
| <h2 class="text-lg md:text-xl mb-8 opacity-90 leading-relaxed"> | |
| 「マジックカルテ」は録音ボタンを押すだけでカルテと診療サマリーを自動生成。飼い主へのメッセージ送付にも対応。作業時間を劇的に減らし、飼い主の満足度も同時に高めます。 | |
| </h2> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#register" class="cta-button bg-white text-blue-600 hover:bg-gray-100 font-bold py-4 px-8 rounded-lg text-center text-lg shadow-lg transition duration-300">無料でお試しする（1分で完了）</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-blue-300 rounded-full opacity-20"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-blue-400 rounded-full opacity-20"></div> | |
| <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="獣医師とペット" class="rounded-xl shadow-2xl relative z-10"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Now Section --> | |
| <section id="features" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">多くの獣医師が抱える、<br class="md:hidden">診療外の負担</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto"> | |
| 日々の診療準備から記録、再来促進まで手作業が前提の診療現場。<br>飼い主の満足度を上げるための時間が使えないのが心苦しいとお感じでは無いですか？ | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-file-alt text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">積み重ねられた作業時間</h3> | |
| <p class="text-gray-600">カルテの準備・読み込み・記入の作業は診療毎に発生、蓄積で多くの時間が奪われています。</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-people-arrows text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">看護師・受付との連携不足</h3> | |
| <p class="text-gray-600">診察内容を元にした指示は属人的で、多くの手間と避けられない抜け漏れが発生します。</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-heart text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">飼い主ニーズへの対応</h3> | |
| <p class="text-gray-600">動物の高齢化や、ネットの発達により飼い主が求める質が向上。それに対応する時間がとれない。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solution Section --> | |
| <section id="solution" class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4 text-gray-800">たった3ステップで、診療業務が劇的に変わります</h2> | |
| <p class="text-gray-400 max-w-3xl mx-auto text-lg">マジックカルテは診療記録と、飼い主フォローアップを完全自動化します。</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> | |
| <div class="flex flex-col items-center text-center bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6 border-4 border-blue-200"> | |
| <span class="text-blue-600 text-3xl font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-blue-800">ワンタップ録音</h3> | |
| <p class="text-gray-700">診療中の会話を録音しリアルタイムで書き起こし。</p> | |
| </div> | |
| <div class="flex flex-col items-center text-center bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6 border-4 border-blue-200"> | |
| <span class="text-blue-600 text-3xl font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-blue-800">自動カルテ生成</h3> | |
| <p class="text-gray-700">獣医療用語対応AIがSOAP形式カルテと診療サマリーを自動作成。</p> | |
| </div> | |
| <div class="flex flex-col items-center text-center bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6 border-4 border-blue-200"> | |
| <span class="text-blue-600 text-3xl font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-blue-800">自動メッセージ送信</h3> | |
| <p class="text-gray-700">SMS/LINEで飼い主に診療サマリーを自動で送信。</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-8"> | |
| <a href="#register" class="cta-button bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-10 rounded-lg text-lg shadow-xl hover:shadow-2xl transition-all transform hover:scale-105"> | |
| <i class="fas fa-arrow-right mr-2"></i>無料で事前登録する | |
| </a> | |
| </div> | |
| <!-- Operation Screens Section --> | |
| <div class="mt-20 max-w-6xl mx-auto px-4"> | |
| <h3 class="text-2xl font-bold text-center mb-8">🖥️ 実際の開発中画面</h3> | |
| <p class="text-center text-gray-600 mb-10"> | |
| カルテとサマリー作成、メッセージ送信まで、非常にシンプルな操作で完結します。 | |
| </p> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <h4 class="font-bold text-lg mb-4">📍 患者ダッシュボード</h4> | |
| <p class="text-gray-600 mb-4"> | |
| 本日の予約一覧と、患者検索画面で構成され、タップひとつで診療を開始できます。 | |
| </p> | |
| <img src="https://i.imgur.com/XVQ5VzU.png" alt="診療ダッシュボード" class="rounded-lg border border-gray-200"> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <h4 class="font-bold text-lg mb-4">📍 診療画面</h4> | |
| <p class="text-gray-600 mb-4"> | |
| 録音ボタンをタップするだけでリアルタイムにカルテ生成が開始。要約とともに飼い主へ送るサマリーも生成されます。 | |
| </p> | |
| <img src="https://i.imgur.com/lyVlreq.png" alt="録音中カルテ画面" class="rounded-lg border border-gray-200"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonial Section --> | |
| <section id="testimonial" class="py-16 bg-blue-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">導入病院の声</h2> | |
| </div> | |
| <div class="max-w-4xl mx-auto bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/4 mb-6 md:mb-0 flex justify-center"> | |
| <div class="w-32 h-32 rounded-full overflow-hidden border-4 border-blue-200"> | |
| <img src="https://anges-vet.net/images/docter.jpg" alt="朝岡院長" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="md:w-3/4 md:pl-8"> | |
| <blockquote class="text-lg italic mb-4"> | |
| "現場の課題を理解し丁寧に開発されてきたのが印象的でした。診療フローを変えずに使えて、マニュアル作業が大幅に減るだけではなく、飼い主の満足度に直結する事に感銘を受けました。" | |
| </blockquote> | |
| <div class="text-right"> | |
| <p class="font-semibold">株式会社アンジェス 代表取締役／アンジェス動物病院 院長</p> | |
| <p class="text-gray-600">朝岡 紀行</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Comparison Section --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4 text-graytext-gray-500">他社システムとの比較</h2> | |
| <p class="text-gray-500 max-w-3xl mx-auto">マジックカルテは既存の業務フローを崩さず、高いコストパフォーマンスを実現します</p> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="comparison-table w-full border-collapse"> | |
| <thead> | |
| <tr class="bg-gray-100"> | |
| <th class="text-left font-semibold py-4 px-6">比較項目</th> | |
| <th class="font-semibold py-4 px-6">マジックカルテ</th> | |
| <th class="font-semibold py-4 px-6">A社システム</th> | |
| <th class="font-semibold py-4 px-6">B社システム</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="text-left font-medium py-4 px-6">音声入力</td> | |
| <td class="text-blue-600 font-bold"><i class="fas fa-check-circle"></i> 対応</td> | |
| <td class="text-gray-400"><i class="fas fa-check-circle""></i> 対応</td> | |
| <td class="text-gray-400"><i class="fas fa-times-circle"></i> 非対応</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-medium py-4 px-6">サマリー送信</td> | |
| <td class="text-blue-600 font-bold"><i class="fas fa-check-circle"></i> 自動</td> | |
| <td class="text-gray-500"><i class="fas fa-times-circle"></i> 不可</td> | |
| <td class="text-gray-400"><i class="fas fa-check-circle"></i> 不可</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-medium py-4 px-6">導入コスト</td> | |
| <td class="text-blue-600 font-bold">初期費用無料、月額1万円以下</td> | |
| <td class="text-gray-400">初期費用10万円、月額5万円~</td> | |
| <td class="text-gray-400">初期費用20万円、月額3万円~</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-medium py-4 px-6">操作性</td> | |
| <td class="text-blue-600 font-bold"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></td> | |
| <td class="text-gray-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></td> | |
| <td class="text-gray-500"><i class="fas fa-star"></i><i class="fas fa-star"></i></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Register Section --> | |
| <section id="register" class="py-16 gradient-bg text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6">マジックカルテに興味をお持ちの病院様へ</h2> | |
| <p class="text-xl mb-8 opacity-90"> | |
| マジックカルテはすべての動物病院様がご利用いただけます。 | |
| ご興味をお持ちの方は以下のフォームからお申し込みください。 | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-6 mb-12"> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> | |
| <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-desktop text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">無料デモの優先案内</h3> | |
| <p class="opacity-80">サービス公開前にいち早く体験</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> | |
| <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-tag text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">初期費用無料</h3> | |
| <p class="opacity-80">先着15院限定</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> | |
| <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-headset text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">導入サポート無料</h3> | |
| <p class="opacity-80">専任スタッフが丁寧にサポート</p> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-8 rounded-xl max-w-2xl mx-auto"> | |
| <h3 class="text-2xl font-bold mb-6">事前登録フォーム</h3> | |
| <form class="space-y-4 text-left"> | |
| <div> | |
| <label for="name" class="block mb-2">動物病院名</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-white placeholder-opacity-60 focus:outline-none focus:ring-2 focus:ring-white"> | |
| </div> | |
| <div> | |
| <label for="doctor" class="block mb-2">獣医師数</label> | |
| <select id="doctor" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white focus:outline-none focus:ring-2 focus:ring-white"> | |
| <option value="" class="text-gray-800">選択してください</option> | |
| <option value="1" class="text-gray-800">1名</option> | |
| <option value="2" class="text-gray-800">2名</option> | |
| <option value="3" class="text-gray-800">3名</option> | |
| <option value="4" class="text-gray-800">4名以上</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2">メールアドレス</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-white placeholder-opacity-60 focus:outline-none focus:ring-2 focus:ring-white"> | |
| </div> | |
| <div class="pt-4"> | |
| <button type="submit" class="cta-button w-full bg-white text-blue-600 hover:bg-gray-100 font-bold py-4 px-8 rounded-lg text-lg shadow-lg transition duration-300">今すぐ事前登録する（無料・1分で完了）</button> | |
| </div> | |
| </form> | |
| <p class="text-sm opacity-80 mt-4">※フォーム入力必須。詳細案内は後日メールでご連絡します</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">よくある質問</h2> | |
| </div> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <div class="faq-item bg-white p-6 rounded-lg shadow-md cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">紙カルテ/他社システムからの移行は可能ですか？</h3> | |
| <i class="fas fa-chevron-down text-blue-600"></i> | |
| </div> | |
| <p class="mt-3 text-gray-600 hidden">はい、可能です。マジックカルテは既存のシステムや紙カルテからの移行をサポートしています。専任スタッフが移行プロセスを丁寧にサポートいたしますので、ご安心ください。</p> | |
| </div> | |
| <div class="faq-item bg-white p-6 rounded-lg shadow-md cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">獣医学用語の音声認識精度はどの程度ですか？</h3> | |
| <i class="fas fa-chevron-down text-blue-600"></i> | |
| </div> | |
| <p class="mt-3 text-gray-600 hidden">獣医学専門用語に特化した音声認識エンジンを採用しており、高い精度を実現しています。認識結果は常に確認・編集可能です。</p> | |
| </div> | |
| <div class="faq-item bg-white p-6 rounded-lg shadow-md cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">どのデバイスで使用できますか？</h3> | |
| <i class="fas fa-chevron-down text-blue-600"></i> | |
| </div> | |
| <p class="mt-3 text-gray-600 hidden">PCやタブレットでの使用を想定した設計となっておりますが、Webベースのためスマートフォンでの利用も可能です。シーンに応じて最適なデバイスでご利用ください。</p> | |
| </div> | |
| <div class="faq-item bg-white p-6 rounded-lg shadow-md cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">料金体系を教えてください</h3> | |
| <i class="fas fa-chevron-down text-blue-600"></i> | |
| </div> | |
| <p class="mt-3 text-gray-600 hidden">月額制となっており、病院規模や利用機能に応じて柔軟にプランをご選択いただけます。事前登録いただいた動物病院様には個別に最適なプランをご提案させていただきます。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Closing Section --> | |
| <section class="py-16 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">選ばれる動物病院への第一歩を、ご一緒に</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto opacity-90"> | |
| 日々の記録作業や診療準備に追われ、大切な「飼い主との信頼構築」や「再来につながる体験」に手が回らない──そんな悩みを抱える現場は少なくありません。マジックカルテは、カルテ作成と説明フォローを自動化することで、先生が“選ばれる動物病院”になるための時間と余裕を生み出します。 | |
| </p> | |
| <a href="#register" class="cta-button inline-block bg-white text-blue-600 hover:bg-gray-100 font-bold py-4 px-8 rounded-lg text-lg shadow-lg transition duration-300">マジックカルテのお申し込みはこちら</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="mb-4"> | |
| <span class="text-xl font-bold">PawLoop マジックカルテ</span> | |
| </div> | |
| <p class="text-gray-400">選ばれる動物病院に変革するAIソリューション</p> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="font-semibold mb-2">PawLoop</p> | |
| <p class="text-gray-400 mb-2">お問い合わせ: a-shintaku@pawloop.net</p> | |
| <p class="text-gray-400 text-sm">© 2025 PawLoop Inc. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // FAQ toggle functionality | |
| document.querySelectorAll('.faq-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| const answer = item.querySelector('p'); | |
| const icon = item.querySelector('i'); | |
| if (answer.classList.contains('hidden')) { | |
| answer.classList.remove('hidden'); | |
| icon.classList.remove('fa-chevron-down'); | |
| icon.classList.add('fa-chevron-up'); | |
| } else { | |
| answer.classList.add('hidden'); | |
| icon.classList.remove('fa-chevron-up'); | |
| icon.classList.add('fa-chevron-down'); | |
| } | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Form submission handling | |
| const form = document.querySelector('form'); | |
| if (form) { | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('事前登録ありがとうございます！後日詳細をご連絡いたします。'); | |
| form.reset(); | |
| window.location.href = '#register'; | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AkiraShintaku/pawloop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |