-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
404 lines (387 loc) · 27.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>プライバシーポリシー生成</title>
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<!-- Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- tailwind-->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
gridTemplateColumns: {
'main-side': '1fr auto',
},
},
},
};
</script>
<!-- Alpine.js キャッシュプラグイン -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<!-- Alpine.js -->
<script src="https://unpkg.com/alpinejs" defer></script>
<style>
[x-cloak] { display: none !important; }
</style>
</head>
<body
class="grid lg:grid-cols-main-side gap-4 max-w-screen-2xl mx-auto h-screen font-mono bg-gray-50 p-4 dark:bg-gray-700"
x-cloak
x-data="{
message: false,
get isCopied(){
return this.message;
},
facility_name: $persist('').using(sessionStorage),
facilyty_title: $persist('').using(sessionStorage),
address: $persist('').using(sessionStorage),
tel: $persist('').using(sessionStorage),
email: $persist('').using(sessionStorage),
show_ga4: $persist(false).using(sessionStorage),
show_class: $persist(false).using(sessionStorage),
set_style: $persist(false).using(sessionStorage),
makeClass(class_name){
return ' class="' + class_name + '"';
},
hasInput(){
return (this.facility_name || this.facilyty_title || this.address || this.tel || this.email) ? true : false;
},
resetInput(){
this.facility_name = '';
this.facilyty_title = '';
this.address = '';
this.tel = '';
this.email = '';
this.show_ga4 = false;
this.show_class = false;
this.set_style = false;
},
}"
>
<template x-if="isCopied">
<div role="alert" x-init="setTimeout(() => message = false, 2000)" class="fixed top-0 inset-x-0 mx-auto w-fit bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md opacity-75">
<p class="font-bold cursor-default select-none">クリップボードにコピーしました</p>
</div>
</template>
<main
class="bg-white overflow-auto p-8 rounded-lg shadow-lg text-gray-800 dark:bg-gray-600 dark:text-gray-200"
x-ref="terms"
>
<code>
<pre class="whitespace-pre-wrap">
<article<template x-if="show_class"><span x-text="makeClass('pp')"></span></template>>
<h1<template x-if="show_class"><span x-text="makeClass('pp-title')"></span></template>>プライバシーポリシー</h1>
</pre>
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>基本方針</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
<span x-text="facility_name"></span>（以下、「当<span x-text="facilyty_title"></span>」といいます。）は、個人情報の重要性を認識し、個人情報を保護することが社会的責務であると考え、個人情報に関する法令及び社内規程等を遵守し、当<span x-text="facilyty_title"></span>で取扱う個人情報の取得、利用、管理を適正に行います。
</p>
</div>
</section>
</pre>
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>法令等の遵守</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
当<span x-text="facilyty_title"></span>は、当<span x-text="facilyty_title"></span>が取得した個人情報の取扱いに関し、個人情報の保護に関する法律、個人情報保護に関するガイドライン等の指針、その他個人情報保護に関する関係法令を遵守します。
</p>
</div>
</section>
</pre>
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>個人情報の取得</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
個人情報保護法その他関係法令に則り、偽りその他不正の手段なくお客様の個人情報を取得いたします。
</p>
</div>
</section>
</pre>
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>個人情報の利用目的</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
当<span x-text="facilyty_title"></span>は、当<span x-text="facilyty_title"></span>が取得した個人情報について、法令に定める場合又は本人の同意を得た場合を除き、以下に定める利用目的の達成に必要な範囲を超えて利用することはありません。
</p>
<ul<template x-if="show_class"><span x-text="makeClass('pp-section__list')"></span></template>>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>本サイトの運営、維持、管理</li>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>本サイトを通じたサービスの提供及び紹介</li>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>その他、上記目的に付随・関連する業務、お問い合わせへの対応</li>
</ul>
</div>
</section>
</pre>
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>第三者提供の制限</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
当<span x-text="facilyty_title"></span>が保有する個人情報は、予めお客様からのご承諾を頂いている場合、もしくは下記の場合を除いて、第三者に開示、提供いたしません。
</p>
<ul<template x-if="show_class"><span x-text="makeClass('pp-section__list')"></span></template>>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>法令に基づく場合</li>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>お客様または他の個人の生命、身体または財産の保護のために必要がある場合で、本人の同意を得ることが困難な場合</li>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>国の機関もしくは地方公共団体またはその委託を受けた者が法令の定める事務を遂行することに対して協力する必要がある場合、本人の同意を得ることにより当該事務の遂行に支障を及ぼすおそれがある場合</li>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>公衆衛生の向上又は児童の健全な育成の推進のために特に必要がある場合であって、本人の同意を得ることが困難な場合</li>
</ul>
</div>
</section>
</pre>
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>お客様が保有する権利</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
お客様は、お客様自身の個人情報について以下の権利を持ちます。
</p>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
ただし、お客様が以下のいずれかの権利を行使された場合であっても、当<span x-text="facilyty_title"></span>は、法令等が認める範囲において、引き続きお客様の個人情報の処理をすることができます。
</p>
<ul<template x-if="show_class"><span x-text="makeClass('pp-section__list')"></span></template>>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>当<span x-text="facilyty_title"></span>が保有するお客様の個人情報及び関連データに関する説明、当該個人情報の使用方法に関する説明を求める権利</li>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>お客様に関する不正確な個人情報について、不当に遅滞することなく訂正させる権利</li>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>お客様に関する個人情報について、不当に遅滞することなく消去を求める権利</li>
<li<template x-if="show_class"><span x-text="makeClass('pp-section__listItem')"></span></template>>お客様に関する個人情報について、取扱いを制限させる権利</li>
</ul>
</div>
</section>
</pre>
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>個人情報の安全管理</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
当<span x-text="facilyty_title"></span>は、個人情報の保護に関して、保有する個人情報について適切かつ合理的なレベルの技術的・物理的・組織的・人的安全管理対策を実施することにより個人情報への不正な侵入、個人情報の紛失、改ざん、漏洩などの危険防止に努めます。
</p>
</div>
</section>
</pre>
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>個人情報の取扱いの改善・見直し</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
当<span x-text="facilyty_title"></span>は、個人情報の取扱い、管理体制及び取組みに関する点検を実施し、継続的に改善・見直しを行います。
</p>
</div>
</section>
</pre>
<template x-if="show_ga4">
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>Googleアナリティクスの利用</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を使用しています。このGoogleアナリティクスはデータの収集のためにCookieを使用しています。このデータは匿名で収集されており、個人を特定するものではありません。
</p>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。この規約に関しての詳細は<a href="https://marketingplatform.google.com/about/analytics/terms/jp/" target="_blank">Googleアナリティクスサービス利用規約のページ</a>や、<a href="https://policies.google.com/technologies/ads?hl=ja" target="_blank">Googleポリシーと規約ページ</a>をご覧ください。
</p>
</div>
</section>
</pre>
</template>
<pre class="whitespace-pre-wrap">
<section<template x-if="show_class"><span x-text="makeClass('pp-section')"></span></template>>
<h2<template x-if="show_class"><span x-text="makeClass('pp-section__heading')"></span></template>>個人情報お問い合わせ窓口</h2>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__body')"></span></template>>
<p<template x-if="show_class"><span x-text="makeClass('pp-section__paragraph')"></span></template>>
本ポリシーに関するお問い合わせは、下記の窓口までお願いいたします。
</p>
<address<template x-if="show_class"><span x-text="makeClass('pp-section__inquiry')"></span></template>>
<dl<template x-if="show_class"><span x-text="makeClass('pp-section__list pp-section__defList')"></span></template>>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__defListPair')"></span></template>>
<dt<template x-if="show_class"><span x-text="makeClass('pp-section__defListTerm')"></span></template>>施設名</dt>
<dd<template x-if="show_class"><span x-text="makeClass('pp-section__defListDesc')"></span></template>><span x-text="facility_name"></span></dd>
</div>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__defListPair')"></span></template>>
<dt<template x-if="show_class"><span x-text="makeClass('pp-section__defListTerm')"></span></template>>住所</dt>
<dd<template x-if="show_class"><span x-text="makeClass('pp-section__defListDesc')"></span></template>><span x-text="address"></span></dd>
</div>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__defListPair')"></span></template>>
<dt<template x-if="show_class"><span x-text="makeClass('pp-section__defListTerm')"></span></template>>電話番号</dt>
<dd<template x-if="show_class"><span x-text="makeClass('pp-section__defListDesc')"></span></template>><span x-text="tel"></span></dd>
</div>
<div<template x-if="show_class"><span x-text="makeClass('pp-section__defListPair')"></span></template>>
<dt<template x-if="show_class"><span x-text="makeClass('pp-section__defListTerm')"></span></template>>メールアドレス</dt>
<dd<template x-if="show_class"><span x-text="makeClass('pp-section__defListDesc')"></span></template>><span x-text="email"></span></dd>
</div>
</dl>
</address>
</div>
</section>
</pre>
<pre class="whitespace-pre-wrap">
</article>
</pre>
<template x-if="show_class">
<pre class="whitespace-pre-wrap">
<style>
.pp{
<template x-if="set_style">
<span></span>
</template>
}
.pp-title{
<template x-if="set_style">
<span>font-size: 2rem;</span>
</template>
}
.pp-section{
<template x-if="set_style">
<span>margin-bottom: 4rem;</span>
</template>
}
.pp-section__heading{
<template x-if="set_style">
<span>font-size: 1.5rem;</span>
</template>
}
.pp-section__body{
<template x-if="set_style">
<span>line-height: 2;</span>
</template>
}
.pp-section__paragraph{
<template x-if="set_style">
<span></span>
</template>
}
.pp-section__list{
<template x-if="set_style">
<span></span>
</template>
}
.pp-section__listItem{
<template x-if="set_style">
<span></span>
</template>
}
.pp-section__defList{
<template x-if="set_style">
<span></span>
</template>
}
.pp-section__defListPair{
<template x-if="set_style">
<span>display: flex;</span>
</template>
}
.pp-section__defListTerm{
<template x-if="set_style">
<span></span>
</template>
}
.pp-section__defListDesc{
<template x-if="set_style">
<span>margin-left: 0;</span>
</template>
}
.pp-section__inquiry{
<template x-if="set_style">
<span>font-style: normal;</span>
</template>
}
</style>
</pre>
</template>
</code>
</main>
<!-- <aside class="flex justify-between flex-wrap gap-4 overflow-auto bg-white p-8 rounded-lg shadow-lg text-gray-800 dark:bg-gray-600 dark:text-gray-200"> -->
<aside class="absolute right-0 lg:relative flex justify-between flex-wrap gap-4 overflow-auto bg-white p-8 rounded-lg shadow-lg text-gray-800 dark:bg-gray-600 dark:text-gray-200">
<div class="flex flex-col justify-between gap-y-16">
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-4">
<input type="text" placeholder="施設名" class="placeholder:text-gray-400 border-2 border-solid border-gray-300 rounded-lg outline-teal-500 p-2 dark:bg-black" x-model="facility_name">
<input type="text" placeholder="当〇〇" class="placeholder:text-gray-400 border-2 border-solid border-gray-300 rounded-lg outline-teal-500 p-2 dark:bg-black" x-model="facilyty_title">
<input type="text" placeholder="住所" class="placeholder:text-gray-400 border-2 border-solid border-gray-300 rounded-lg outline-teal-500 p-2 dark:bg-black" x-model="address">
<input type="tel" placeholder="電話番号" class="placeholder:text-gray-400 border-2 border-solid border-gray-300 rounded-lg outline-teal-500 p-2 dark:bg-black" x-model="tel">
<input type="email" placeholder="メールアドレス" class="placeholder:text-gray-400 border-2 border-solid border-gray-300 rounded-lg outline-teal-500 p-2 dark:bg-black" x-model="email">
</div>
<div class="flex flex-col gap-4">
<label class="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
value=""
class="sr-only peer"
x-model="show_ga4"
>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300 select-none">Googleアナリティクスを使う</span>
</label>
<label class="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
value=""
class="sr-only peer"
x-model="show_class"
x-ref="checkbox_class"
@change="
if($el.checked){
$refs.checkbox_style.disabled = false;
}
else{
$refs.checkbox_style.disabled = true;
$refs.checkbox_style.checked = false;
set_style = false;
}
"
>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300 select-none">class(ECSS)を追加する</span>
</label>
<label class="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
value=""
class="sr-only peer"
x-model="set_style"
x-ref="checkbox_style"
:disabled="$refs.checkbox_class.checked ? false : true"
>
<div class="w-11 h-6 bg-gray-200 peer-disabled:cursor-not-allowed peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300 select-none peer-disabled:cursor-not-allowed peer-disabled:text-gray-400">styleの初期値を設定する</span>
</label>
</div>
</div>
<div class="flex flex-col gap-4">
<button type="button"
class="border-2 border-solid border-green-300 rounded-lg px-12 py-2 bg-green-500 text-white shadow hover:bg-green-400 active:bg-green-300 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:border-gray-300 disabled:shadow-none transition-all select-none"
:disabled="!hasInput()"
@click="navigator.clipboard.writeText($refs.terms.textContent).then(message=true);"
>
クリップボードにコピー
<i class="fa-solid fa-copy"></i>
</button>
<button type="button"
class="border-2 border-solid border-red-300 rounded-lg px-12 py-2 bg-red-500 text-white shadow hover:bg-red-400 active:bg-red-300 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:border-gray-300 disabled:shadow-none transition-all select-none"
:disabled="!hasInput() && !show_ga4 && !show_class && !set_style"
@click="
if(confirm('入力内容をリセットしてもいいですか？')){
resetInput();
$refs.checkbox_style.disabled = true;
$refs.checkbox_style.checked = false;
}
"
>
入力内容をリセット
<i class="fa-solid fa-trash"></i>
</button>
</div>
</div>
</aside>
</body>
</html>