Hugging Face's logo

Spaces:
AkiraShintaku
/
pawloopweb
Running

App Files Community
AkiraShintaku commited on
Commit
bf85153
·
verified ·
1 Parent(s): 69270a2

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +489 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pawloopweb
3
- emoji: 👀
4
- colorFrom: red
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: pawloopweb
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,489 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PawLoop デジタルカルテ | 音声でカルテ作成</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
12
+ }
13
+ .highlight-badge {
14
+ animation: pulse 2s infinite;
15
+ }
16
+ @keyframes pulse {
17
+ 0% { transform: scale(1); }
18
+ 50% { transform: scale(1.05); }
19
+ 100% { transform: scale(1); }
20
+ }
21
+ .feature-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .transition-all {
26
+ transition: all 0.3s ease;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="font-sans text-gray-800">
31
+ <!-- Navigation -->
32
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
33
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
34
+ <div class="flex justify-between h-16">
35
+ <div class="flex items-center">
36
+ <div class="flex-shrink-0 flex items-center">
37
+ <i class="fas fa-paw text-blue-500 text-2xl mr-2"></i>
38
+ <span class="text-xl font-bold text-blue-600">PawLoop</span>
39
+ </div>
40
+ </div>
41
+ <div class="hidden md:flex items-center space-x-8">
42
+ <a href="#features" class="text-gray-700 hover:text-blue-500 px-3 py-2">特徴</a>
43
+ <a href="#comparison" class="text-gray-700 hover:text-blue-500 px-3 py-2">比較</a>
44
+ <a href="#testimonials" class="text-gray-700 hover:text-blue-500 px-3 py-2">導入事例</a>
45
+ <a href="#faq" class="text-gray-700 hover:text-blue-500 px-3 py-2">よくある質問</a>
46
+ </div>
47
+ <div class="flex items-center">
48
+ <a href="#cta" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md font-medium transition-all">
49
+ 無料トライアル
50
+ </a>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </nav>
55
+
56
+ <!-- Hero Section -->
57
+ <section class="gradient-bg py-16 md:py-24">
58
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
+ <div class="md:flex items-center">
60
+ <div class="md:w-1/2 mb-10 md:mb-0">
61
+ <div class="highlight-badge bg-yellow-100 text-yellow-800 inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4">
62
+ 【今だけキャンペーン中】初期費用5万円 → 0円
63
+ </div>
64
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-4">
65
+ カルテを書いていた時間を、<br>飼い主と向き合う時間に。
66
+ </h1>
67
+ <p class="text-lg text-gray-700 mb-8">
68
+ 音声からSOAP形式のカルテを自動生成。同時に、説明サマリーを要点化し、飼い主へ自動送信。記録に追われない診療が、“また来たい”を生みます。
69
+ </p>
70
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
71
+ <a href="#demo" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium text-center transition-all">
72
+ <i class="fas fa-play-circle mr-2"></i>カルテ自動作成のデモを見る
73
+ </a>
74
+ <a href="#cta" class="bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 px-6 py-3 rounded-md font-medium text-center transition-all">
75
+ <i class="fas fa-calendar-check mr-2"></i>無料トライアルを申し込む
76
+ </a>
77
+ </div>
78
+ </div>
79
+ <div class="md:w-1/2">
80
+ <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80"
81
+ alt="獣医師と飼い主がペットと向き合う様子"
82
+ class="rounded-lg shadow-xl w-full h-auto object-cover">
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Why Now Section -->
89
+ <section class="py-16 bg-white" id="why-now">
90
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
91
+ <div class="text-center mb-12">
92
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">なぜ今、PawLoopが必要なのか？</h2>
93
+ <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
94
+ </div>
95
+
96
+ <div class="md:flex items-center mb-12">
97
+ <div class="md:w-1/2 mb-8 md:mb-0">
98
+ <img src="https://images.unsplash.com/photo-1601758003122-53c40e686a19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
99
+ alt="忙しい動物病院の様子"
100
+ class="rounded-lg shadow-md w-full h-auto object-cover">
101
+ </div>
102
+ <div class="md:w-1/2 md:pl-12">
103
+ <h3 class="text-2xl font-semibold text-gray-900 mb-4">病院数増加／飼育数減少の時代</h3>
104
+ <p class="text-gray-700 mb-4">
105
+ 近年、動物病院の数は増加している一方で、ペットの飼育数は減少傾向にあります。この状況で、病院を選ぶ決め手となるのは「説明の丁寧さ」と「信頼関係」です。
106
+ </p>
107
+ <p class="text-gray-700 mb-6">
108
+ 獣医師1名体制の病院が64%を占める業界構造では、診療後の記録作業が大きな負担になっています。
109
+ </p>
110
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4">
111
+ <p class="text-gray-700 italic">
112
+ 「診療は終わった。でも私はまだカルテを書いている。」
113
+ </p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </section>
119
+
120
+ <!-- Solution Section -->
121
+ <section class="py-16 bg-gray-50" id="features">
122
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
123
+ <div class="text-center mb-12">
124
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">PawLoopのソリューション</h2>
125
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">音声で話すだけで、カルテ作成と飼い主への説明を同時に完了</p>
126
+ <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
127
+ </div>
128
+
129
+ <div class="grid md:grid-cols-2 gap-8 mb-12">
130
+ <div class="feature-card bg-white p-8 rounded-lg shadow-md transition-all">
131
+ <div class="flex items-center mb-4">
132
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
133
+ <i class="fas fa-microphone text-blue-500 text-xl"></i>
134
+ </div>
135
+ <h3 class="text-xl font-semibold">音声録音からSOAP形式のカルテ自動生成</h3>
136
+ </div>
137
+ <p class="text-gray-700">
138
+ 診療中の会話を録音するだけで、SOAP形式のカルテを自動生成。主観的所見・客観的所見・評価・計画が整理されたプロフェッショナルなカルテが完成します。
139
+ </p>
140
+ </div>
141
+
142
+ <div class="feature-card bg-white p-8 rounded-lg shadow-md transition-all">
143
+ <div class="flex items-center mb-4">
144
+ <div class="bg-green-100 p-3 rounded-full mr-4">
145
+ <i class="fas fa-comment-dots text-green-500 text-xl"></i>
146
+ </div>
147
+ <h3 class="text-xl font-semibold">要点サマリーをLINE/SMSで自動送信</h3>
148
+ </div>
149
+ <p class="text-gray-700">
150
+ 診療内容の要点を自動抽出し、飼い主様へLINEやSMSで送信。口頭での説明を補完し、後からも確認できるので信頼関係が深まります。
151
+ </p>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="text-center mt-8">
156
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
157
+ <a href="#demo" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-all">
158
+ <i class="fas fa-play-circle mr-2"></i>デモ動画を見る
159
+ </a>
160
+ <a href="#cta" class="bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 px-6 py-3 rounded-md font-medium transition-all">
161
+ <i class="fas fa-calendar-check mr-2"></i>無料で試してみる
162
+ </a>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </section>
167
+
168
+ <!-- Before/After Section -->
169
+ <section class="py-16 bg-white">
170
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
171
+ <div class="text-center mb-12">
172
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">導入前後の変化</h2>
173
+ <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
174
+ </div>
175
+
176
+ <div class="grid md:grid-cols-2 gap-8">
177
+ <div class="bg-red-50 p-8 rounded-lg border-l-4 border-red-500">
178
+ <h3 class="text-2xl font-semibold text-red-700 mb-6 flex items-center">
179
+ <i class="fas fa-times-circle mr-3"></i> 導入前の課題
180
+ </h3>
181
+ <ul class="space-y-4">
182
+ <li class="flex items-start">
183
+ <i class="fas fa-clock text-red-500 mt-1 mr-3"></i>
184
+ <span>診療後15分 × 30件/日 = <span class="font-bold">7.5時間/月</span>の記録作業</span>
185
+ </li>
186
+ <li class="flex items-start">
187
+ <i class="fas fa-comment-slash text-red-500 mt-1 mr-3"></i>
188
+ <span>飼い主への説明は口頭のみで、再来に結びつかない</span>
189
+ </li>
190
+ <li class="flex items-start">
191
+ <i class="fas fa-tired text-red-500 mt-1 mr-3"></i>
192
+ <span>記録作業で疲弊し、診療の質が低下する悪循環</span>
193
+ </li>
194
+ </ul>
195
+ </div>
196
+
197
+ <div class="bg-green-50 p-8 rounded-lg border-l-4 border-green-500">
198
+ <h3 class="text-2xl font-semibold text-green-700 mb-6 flex items-center">
199
+ <i class="fas fa-check-circle mr-3"></i> 導入後の変化
200
+ </h3>
201
+ <ul class="space-y-4">
202
+ <li class="flex items-start">
203
+ <i class="fas fa-stopwatch text-green-500 mt-1 mr-3"></i>
204
+ <span>カルテ記録時間が<span class="font-bold">ゼロ</span>に</span>
205
+ </li>
206
+ <li class="flex items-start">
207
+ <i class="fas fa-comment-medical text-green-500 mt-1 mr-3"></i>
208
+ <span>サマリー送信で「また来たい」を生む診療へ</span>
209
+ </li>
210
+ <li class="flex items-start">
211
+ <i class="fas fa-smile-beam text-green-500 mt-1 mr-3"></i>
212
+ <span>飼い主満足度とスタッフのモチベーション向上</span>
213
+ </li>
214
+ </ul>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </section>
219
+
220
+ <!-- Testimonial Section -->
221
+ <section class="py-16 bg-gray-50" id="testimonials">
222
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
223
+ <div class="text-center mb-12">
224
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">導入病院の声</h2>
225
+ <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
226
+ </div>
227
+
228
+ <div class="bg-white p-8 md:p-12 rounded-lg shadow-md max-w-4xl mx-auto">
229
+ <div class="flex items-center mb-6">
230
+ <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
231
+ alt="アンジェス動物病院 朝岡俊文先生"
232
+ class="w-16 h-16 rounded-full object-cover mr-4">
233
+ <div>
234
+ <h4 class="font-bold text-lg">アンジェス動物病院 院長</h4>
235
+ <p class="text-gray-600">朝岡 俊文 先生</p>
236
+ </div>
237
+ </div>
238
+ <blockquote class="text-gray-700 text-lg italic mb-6">
239
+ 「診療フローを変えずに導入でき、飼い主さんの反応も良かった。カルテというより"安心をサポートするツール"として役立っている。」
240
+ </blockquote>
241
+ <div class="bg-blue-50 p-4 rounded-md">
242
+ <p class="text-gray-700">
243
+ 導入3ヶ月で再来率が15%向上し、スタッフの負担も大幅に軽減。特に若手スタッフのカルテ作成の負担が減り、診療に集中できるようになったとのことです。
244
+ </p>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="text-center mt-12">
249
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
250
+ <a href="#demo" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-all">
251
+ <i class="fas fa-play-circle mr-2"></i>導入事例を見る
252
+ </a>
253
+ <a href="#cta" class="bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 px-6 py-3 rounded-md font-medium transition-all">
254
+ <i class="fas fa-calendar-check mr-2"></i>お問い合わせ
255
+ </a>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </section>
260
+
261
+ <!-- Comparison Section -->
262
+ <section class="py-16 bg-white" id="comparison">
263
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
264
+ <div class="text-center mb-12">
265
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">
266
+ <i class="fas fa-balance-scale mr-2"></i> 他の電子カルテと、ここが違います。
267
+ </h2>
268
+ <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
269
+ </div>
270
+
271
+ <div class="overflow-x-auto">
272
+ <table class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
273
+ <thead class="bg-gray-100">
274
+ <tr>
275
+ <th class="py-3 px-4 text-left font-semibold text-gray-700">項目</th>
276
+ <th class="py-3 px-4 text-left font-semibold text-gray-700">一般的な電子カルテ</th>
277
+ <th class="py-3 px-4 text-left font-semibold text-blue-600">PawLoop デジタルカルテ</th>
278
+ </tr>
279
+ </thead>
280
+ <tbody class="divide-y divide-gray-200">
281
+ <tr>
282
+ <td class="py-3 px-4 font-medium">入力方法</td>
283
+ <td class="py-3 px-4">キーボードで手入力</td>
284
+ <td class="py-3 px-4 text-blue-600 font-medium">音声で話すだけ</td>
285
+ </tr>
286
+ <tr class="bg-gray-50">
287
+ <td class="py-3 px-4 font-medium">操作感</td>
288
+ <td class="py-3 px-4">システム操作が中心</td>
289
+ <td class="py-3 px-4 text-blue-600 font-medium">録音・確認・送信の3ステップ</td>
290
+ </tr>
291
+ <tr>
292
+ <td class="py-3 px-4 font-medium">導入までの手間</td>
293
+ <td class="py-3 px-4">カスタマイズや研修が必要</td>
294
+ <td class="py-3 px-4 text-blue-600 font-medium">テンプレで約3日／初期サポートあり</td>
295
+ </tr>
296
+ <tr class="bg-gray-50">
297
+ <td class="py-3 px-4 font-medium">既存カルテとの連携</td>
298
+ <td class="py-3 px-4">紙と併用 or 手作業で転記が必要</td>
299
+ <td class="py-3 px-4 text-blue-600 font-medium">紙カルテもOCRで取り込み可</td>
300
+ </tr>
301
+ <tr>
302
+ <td class="py-3 px-4 font-medium">飼い主説明</td>
303
+ <td class="py-3 px-4">口頭か手書きで対応</td>
304
+ <td class="py-3 px-4 text-blue-600 font-medium">要点サマリーを自動送信（SMS/LINE）</td>
305
+ </tr>
306
+ <tr class="bg-blue-50">
307
+ <td class="py-3 px-4 font-medium">月額費用</td>
308
+ <td class="py-3 px-4">2〜5万円＋初期費用</td>
309
+ <td class="py-3 px-4 text-blue-600 font-medium">月額9,800円（初期費用0円キャンペーン中）</td>
310
+ </tr>
311
+ </tbody>
312
+ </table>
313
+ </div>
314
+
315
+ <div class="text-center mt-12">
316
+ <div class="inline-block bg-yellow-100 text-yellow-800 px-6 py-3 rounded-full font-medium mb-6">
317
+ <i class="fas fa-gift mr-2"></i> 今なら初期費用無料キャンペーン実施中！
318
+ </div>
319
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
320
+ <a href="#demo" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-all">
321
+ <i class="fas fa-play-circle mr-2"></i>詳しい比較を見る
322
+ </a>
323
+ <a href="#cta" class="bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 px-6 py-3 rounded-md font-medium transition-all">
324
+ <i class="fas fa-calendar-check mr-2"></i>無料トライアル
325
+ </a>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- FAQ Section -->
332
+ <section class="py-16 bg-gray-50" id="faq">
333
+ <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
334
+ <div class="text-center mb-12">
335
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">よくある質問</h2>
336
+ <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
337
+ </div>
338
+
339
+ <div class="space-y-4">
340
+ <div class="bg-white p-6 rounded-lg shadow-sm">
341
+ <button onclick="toggleFAQ(1)" class="flex justify-between items-center w-full text-left font-medium text-gray-900">
342
+ <span>電子カルテと併用できますか？</span>
343
+ <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-1"></i>
344
+ </button>
345
+ <div id="faq-answer-1" class="mt-3 text-gray-700 hidden">
346
+ はい、紙カルテやPDF出力にも対応しています。既存の電子カルテと併用することも可能です。
347
+ </div>
348
+ </div>
349
+
350
+ <div class="bg-white p-6 rounded-lg shadow-sm">
351
+ <button onclick="toggleFAQ(2)" class="flex justify-between items-center w-full text-left font-medium text-gray-900">
352
+ <span>音声がうまく録れない時は？</span>
353
+ <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-2"></i>
354
+ </button>
355
+ <div id="faq-answer-2" class="mt-3 text-gray-700 hidden">
356
+ スマホでの録音やノイズ除去機能を備えています。また、聞き取りにくい部分は後からテキスト編集も可能です。
357
+ </div>
358
+ </div>
359
+
360
+ <div class="bg-white p-6 rounded-lg shadow-sm">
361
+ <button onclick="toggleFAQ(3)" class="flex justify-between items-center w-full text-left font-medium text-gray-900">
362
+ <span>サマリーの表現は調整できますか？</span>
363
+ <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-3"></i>
364
+ </button>
365
+ <div id="faq-answer-3" class="mt-3 text-gray-700 hidden">
366
+ はい、病院ごとにテンプレートを編集可能です。専門用語の説明や、病院のトーンに合わせた表現にカスタマイズできます。
367
+ </div>
368
+ </div>
369
+
370
+ <div class="bg-white p-6 rounded-lg shadow-sm">
371
+ <button onclick="toggleFAQ(4)" class="flex justify-between items-center w-full text-left font-medium text-gray-900">
372
+ <span>録音データはどこに保存されますか？</span>
373
+ <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-4"></i>
374
+ </button>
375
+ <div id="faq-answer-4" class="mt-3 text-gray-700 hidden">
376
+ すべてのデータは国内サーバーに一時保存され、商用利用されることはありません。カルテ生成後、音声データは自動的に削除されます。
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- Closing CTA Section -->
384
+ <section class="py-16 gradient-bg" id="cta">
385
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
386
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
387
+ 記録で疲れる診療は、もう終わりにしませんか？
388
+ </h2>
389
+ <p class="text-xl text-gray-700 mb-8 max-w-3xl mx-auto">
390
+ 飼い主との信頼が残る診療を、PawLoop デジタルカルテで。<br>
391
+ <span class="font-semibold">初期費用0円キャンペーン中。</span>まずは無料トライアルでご体験ください。
392
+ </p>
393
+
394
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
395
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-md font-medium text-lg transition-all">
396
+ <i class="fas fa-play-circle mr-2"></i>デモを見る
397
+ </a>
398
+ <a href="#" class="bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 px-8 py-4 rounded-md font-medium text-lg transition-all">
399
+ <i class="fas fa-calendar-check mr-2"></i>無料トライアルを申し込む
400
+ </a>
401
+ </div>
402
+
403
+ <div class="mt-8 text-sm text-gray-600">
404
+ <p>※トライアル期間は14日間です。クレジットカード情報は不要です。</p>
405
+ <p>※導入サポートとして、専任スタッフが初期設定をサポートします。</p>
406
+ </div>
407
+ </div>
408
+ </section>
409
+
410
+ <!-- Footer -->
411
+ <footer class="bg-gray-900 text-white py-12">
412
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
413
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
414
+ <div>
415
+ <div class="flex items-center mb-4">
416
+ <i class="fas fa-paw text-blue-400 text-2xl mr-2"></i>
417
+ <span class="text-xl font-bold">PawLoop</span>
418
+ </div>
419
+ <p class="text-gray-400">
420
+ 音声でカルテを作成し、飼い主との信頼を深めるデジタルカルテサービス
421
+ </p>
422
+ </div>
423
+
424
+ <div>
425
+ <h3 class="text-lg font-semibold mb-4">メニュー</h3>
426
+ <ul class="space-y-2">
427
+ <li><a href="#features" class="text-gray-400 hover:text-white">特徴</a></li>
428
+ <li><a href="#comparison" class="text-gray-400 hover:text-white">比較</a></li>
429
+ <li><a href="#testimonials" class="text-gray-400 hover:text-white">導入事例</a></li>
430
+ <li><a href="#faq" class="text-gray-400 hover:text-white">よくある質問</a></li>
431
+ </ul>
432
+ </div>
433
+
434
+ <div>
435
+ <h3 class="text-lg font-semibold mb-4">会社情報</h3>
436
+ <ul class="space-y-2">
437
+ <li class="text-gray-400">運営会社: 株式会社PawLoop</li>
438
+ <li class="text-gray-400">設立: 2020年5月</li>
439
+ <li class="text-gray-400">所在地: 東京都港区</li>
440
+ </ul>
441
+ </div>
442
+
443
+ <div>
444
+ <h3 class="text-lg font-semibold mb-4">お問い合わせ</h3>
445
+ <p class="text-gray-400 mb-4">導入に関するご相談はこちら</p>
446
+ <a href="mailto:contact@pawloop.jp" class="text-blue-400 hover:text-blue-300">contact@pawloop.jp</a>
447
+ </div>
448
+ </div>
449
+
450
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
451
+ <p>© 2023 PawLoop Digital Chart. All rights reserved.</p>
452
+ </div>
453
+ </div>
454
+ </footer>
455
+
456
+ <script>
457
+ // FAQ toggle function
458
+ function toggleFAQ(id) {
459
+ const answer = document.getElementById(`faq-answer-${id}`);
460
+ const icon = document.getElementById(`faq-icon-${id}`);
461
+
462
+ if (answer.classList.contains('hidden')) {
463
+ answer.classList.remove('hidden');
464
+ icon.classList.add('transform', 'rotate-180');
465
+ } else {
466
+ answer.classList.add('hidden');
467
+ icon.classList.remove('transform', 'rotate-180');
468
+ }
469
+ }
470
+
471
+ // Smooth scrolling for anchor links
472
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
473
+ anchor.addEventListener('click', function (e) {
474
+ e.preventDefault();
475
+
476
+ const targetId = this.getAttribute('href');
477
+ if (targetId === '#') return;
478
+
479
+ const targetElement = document.querySelector(targetId);
480
+ if (targetElement) {
481
+ targetElement.scrollIntoView({
482
+ behavior: 'smooth'
483
+ });
484
+ }
485
+ });
486
+ });
487
+ </script>
488
+ <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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=AkiraShintaku/pawloopweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
489
+ </html>
prompts.txt ADDED
File without changes