Skip to content

Commit e0228f3

Browse files
hari369-cmdhari369-cmd
committed
contact page
1 parent 4ba3388 commit e0228f3

File tree

4 files changed

+324
-5
lines changed

4 files changed

+324
-5
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -514,7 +514,7 @@ <h3 class="text-lg font-semibold mb-2">支払い情報は安全ですか？</h3>
514514
<div>
515515
<h4 class="text-lg font-semibold mb-4">サポート</h4>
516516
<ul class="space-y-2">
517-
<li><a href="#" class="text-black hover:text-white">ヘルプセンター</a></li>
517+
<li><a href="./pages/contact.html" class="text-black hover:text-white">お問い合わせ</a></li>
518518
<li><a href="./pages/privacy.html" class="text-black hover:text-white">プライバシーポリシー</a></li>
519519
<li><a href="./pages/tos.html" class="text-black hover:text-white">利用規約</a></li>
520520
</ul>

‎pages/contact.html

+317
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
<head>
2+
<meta charset="UTF-8">
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
<title>Locomi - 位置情報を活用して目標達成をサポート | iOS アプリ</title>
5+
<meta name="description" content="Locomiは位置情報を活用してあなたの習慣作りをサポートします。目標を設定し、実行し、美しい花のバッジを集めながら、より良い習慣を築きましょう。iOS でダウンロード可能。">
6+
<meta name="keywords" content="位置情報 アカウンタビリティ, 習慣形成アプリ, 目標管理, 生産性アプリ, iOSアプリ, 日本語アプリ, フラワーバッジ, モチベーションアプリ">
7+
8+
<!-- Open Graph tags -->
9+
<meta property="og:title" content="Locomi - 位置情報を活用したアカウンタビリティアプリ">
10+
<meta property="og:description" content="位置情報を活用して目標を現実に。iOS でダウンロード可能。">
11+
<meta property="og:image" content="/api/placeholder/1200/630">
12+
<meta property="og:url" content="https://jp.locomiapp.com">
13+
14+
<!-- Twitter Card tags -->
15+
<meta name="twitter:card" content="summary_large_image">
16+
<meta name="twitter:title" content="Locomi - 位置情報を活用したアカウンタビリティアプリ">
17+
<meta name="twitter:description" content="位置情報であなたのモチベーションを高めましょう。iOS でダウンロード可能。">
18+
<meta name="twitter:image" content="/api/placeholder/1200/630">
19+
20+
<script src="https://cdn.tailwindcss.com"></script>
21+
<style>
22+
:root {
23+
--primary-color: #36b6ff;
24+
--secondary-color: #7ED321;
25+
}
26+
27+
.gradient-bg {
28+
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
29+
}
30+
31+
.gradient-text {
32+
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
33+
-webkit-background-clip: text;
34+
background-clip: text;
35+
color: transparent;
36+
-webkit-text-fill-color: transparent;
37+
}
38+
39+
.gradient-background {
40+
position: relative;
41+
width: 100%;
42+
background-color: transparent;
43+
}
44+
45+
.gradient-background::before {
46+
content: '';
47+
position: relative;
48+
top: 0;
49+
left: 0;
50+
right: 0;
51+
bottom: 0;
52+
}
53+
54+
.gradient-circle {
55+
position: absolute;
56+
border-radius: 50%;
57+
background: radial-gradient(circle at center, rgba(56, 182, 255, 0.2), rgba(193, 255, 114, 0.1));
58+
pointer-events: none;
59+
overflow: visible;
60+
}
61+
62+
.circle-1 {
63+
width: 250px;
64+
height: 250px;
65+
top: 100px;
66+
left: -150px;
67+
}
68+
69+
.circle-2 {
70+
width: 150px;
71+
height: 150px;
72+
top: 50px;
73+
left: 100px;
74+
}
75+
76+
.circle-3 {
77+
width: 180px;
78+
height: 180px;
79+
top: 300px;
80+
left: -50px;
81+
}
82+
83+
.circle-4 {
84+
width: 300px;
85+
height: 300px;
86+
top: 400px;
87+
left: 200px;
88+
}
89+
90+
.circle-5 {
91+
width: 100px;
92+
height: 100px;
93+
top: 500px;
94+
left: -100px;
95+
filter: blur(30px);
96+
}
97+
98+
.container {
99+
max-width: 800px;
100+
margin: auto;
101+
padding: 40px;
102+
background: transparent;
103+
border-radius: 8px;
104+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
105+
}
106+
107+
.contact-section {
108+
margin-bottom: 2rem;
109+
padding-bottom: 1rem;
110+
justify-items: center;
111+
}
112+
113+
.contact-section h2 {
114+
font-size: 1.25rem;
115+
font-weight: 600;
116+
color: #1a1a1a;
117+
margin-top: 1.5rem;
118+
margin-bottom: 1rem;
119+
}
120+
121+
.contact-section p {
122+
margin-bottom: 1rem;
123+
line-height: 1.6;
124+
}
125+
126+
.contact-section ul,
127+
.contact-section ol {
128+
margin: 1rem 0;
129+
padding-left: 2rem;
130+
}
131+
132+
.contact-section ul {
133+
list-style-type: disc;
134+
}
135+
136+
.contact-section ol {
137+
list-style-type: decimal;
138+
}
139+
140+
.contact-section li {
141+
margin-bottom: 0.5rem;
142+
line-height: 1.5;
143+
}
144+
145+
.contact-note {
146+
background-color: #f8f9fa;
147+
padding: 1rem;
148+
border-radius: 6px;
149+
margin: 1rem 0;
150+
font-size: 0.875rem;
151+
}
152+
153+
.contact-email {
154+
color: #666;
155+
font-style: italic;
156+
justify-items: center;
157+
padding: 5rem;
158+
}
159+
</style>
160+
161+
<script>
162+
document.addEventListener('DOMContentLoaded', () => {
163+
const langSelect = document.querySelector('.lang-select');
164+
const container = document.querySelector('.lang-selector-container');
165+
166+
if (langSelect && container) {
167+
// Set initial value based on data attribute
168+
const currentLang = container.dataset.currentLang;
169+
langSelect.value = currentLang;
170+
171+
langSelect.addEventListener('change', () => {
172+
if (langSelect.value === 'jp') {
173+
window.location.href = 'https://jp.locomiapp.com/pages/contact.html';
174+
} else {
175+
window.location.href = 'https://locomiapp.com/pages/contact.html';
176+
}
177+
});
178+
}
179+
});
180+
181+
function createGradientBackground(containerElement) {
182+
const circles = [
183+
{ width: "250px", height: "250px", top: "10%", left: "-10%" },
184+
{ width: "150px", height: "150px", top: "20%", left: "30%" },
185+
{ width: "180px", height: "180px", top: "50%", left: "5%" },
186+
{ width: "300px", height: "300px", top: "70%", left: "60%" },
187+
{ width: "100px", height: "100px", top: "80%", left: "10%", blur: true }
188+
];
189+
190+
// Create a container for circles that takes up the full space but doesn't affect layout
191+
const circlesContainer = document.createElement('div');
192+
circlesContainer.style.position = 'absolute';
193+
circlesContainer.style.top = '0';
194+
circlesContainer.style.left = '0';
195+
circlesContainer.style.width = '100%';
196+
circlesContainer.style.height = '100%';
197+
circlesContainer.style.zIndex = -1;
198+
199+
circles.forEach((circle, index) => {
200+
const div = document.createElement('div');
201+
div.classList.add('gradient-circle', `circle-${index + 1}`);
202+
div.style.width = circle.width;
203+
div.style.height = circle.height;
204+
div.style.top = circle.top;
205+
div.style.left = circle.left;
206+
if (circle.blur) {
207+
div.style.filter = 'blur(30px)';
208+
}
209+
circlesContainer.appendChild(div);
210+
});
211+
212+
containerElement.classList.add('gradient-background');
213+
containerElement.appendChild(circlesContainer);
214+
}
215+
216+
document.addEventListener('DOMContentLoaded', () => {
217+
createGradientBackground(document.getElementById('contact-section'));
218+
});
219+
</script>
220+
</head>
221+
222+
<body class="bg-gray-50">
223+
<!-- Navigation -->
224+
<nav class="bg-white shadow-lg fixed w-full z-50">
225+
<div class="max-w-6xl mx-auto px-4">
226+
<div class="flex justify-between items-center h-16">
227+
<div class="flex items-center space-x-8">
228+
<div class="gradient-text text-2xl font-bold flex items-center space-x-2">
229+
<a href="../index.html" class="flex items-center space-x-2">
230+
<img src="../assets/images/logo_color.png" alt="Locomi Logo" class="w-8 h-8"/>
231+
<span>Locomi</span>
232+
</a>
233+
</div>
234+
<div class="hidden md:flex space-x-8">
235+
<a href="../index.html#features" class="text-gray-700 hover:text-[#4A90E2]">特徴</a>
236+
<a href="../index.html#habit-formation" class="text-gray-700 hover:text-[#4A90E2]">習慣を築く</a>
237+
<a href="../index.html#how-it-works" class="text-gray-700 hover:text-[#4A90E2]">しくみ</a>
238+
<a href="../index.html#use-cases" class="text-gray-700 hover:text-[#4A90E2]">使用例</a>
239+
<a href="../index.html#faq" class="text-gray-700 hover:text-[#4A90E2]">よくある質問</a>
240+
</div>
241+
</div>
242+
<div class="flex items-center space-x-4">
243+
<!-- <button class="px-4 py-2 rounded-lg" style="color: #4A90E2; border: 1px solid #4A90E2;">Login</button> -->
244+
<a href="https://x.com" target="_blank">
245+
<svg class="hover:opacity-50 transition-opacity" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 50 50">
246+
<path d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"></path>
247+
</svg>
248+
</a>
249+
<a href="https://instagram.com" target="_blank">
250+
<svg class="hover:opacity-50 transition-opacity" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 50 50">
251+
<path d="M 16 3 C 8.83 3 3 8.83 3 16 L 3 34 C 3 41.17 8.83 47 16 47 L 34 47 C 41.17 47 47 41.17 47 34 L 47 16 C 47 8.83 41.17 3 34 3 L 16 3 z M 37 11 C 38.1 11 39 11.9 39 13 C 39 14.1 38.1 15 37 15 C 35.9 15 35 14.1 35 13 C 35 11.9 35.9 11 37 11 z M 25 14 C 31.07 14 36 18.93 36 25 C 36 31.07 31.07 36 25 36 C 18.93 36 14 31.07 14 25 C 14 18.93 18.93 14 25 14 z M 25 16 C 20.04 16 16 20.04 16 25 C 16 29.96 20.04 34 25 34 C 29.96 34 34 29.96 34 25 C 34 20.04 29.96 16 25 16 z"></path>
252+
</svg>
253+
</a>
254+
<div class="lang-selector-container" data-current-lang="jp">
255+
<select class="bg-transparent text-gray-700 lang-select">
256+
<option value="en">ENG</option>
257+
<option value="jp">日本語</option>
258+
</select>
259+
</div>
260+
</div>
261+
</div>
262+
</div>
263+
</nav>
264+
265+
<div class="pt-40 pb-40 bg-gray-100">
266+
<div id="contact" class="container bg-white">
267+
<h1 class="text-3xl font-bold text-center mb-4">お問い合わせ</h1>
268+
269+
<section class="contact-section">
270+
<h2>いつもLocomiをご利用いただき誠にありがとうございます</h2>
271+
<p>
272+
ご質問がございましたら、下記までお問い合わせください。<br>
273+
<span class="contact-email">info at locomiapp dot com</span><br>
274+
「at」を「@」記号に、「dot」を「.」に置き換えてください。
275+
</p>
276+
</section>
277+
</div>
278+
</div>
279+
280+
<!-- Footer -->
281+
<footer class="gradient-bg text-white py-12">
282+
<div class="max-w-6xl mx-auto px-4">
283+
<div class="grid md:grid-cols-3 gap-8">
284+
<div>
285+
<div class="text-2xl font-bold flex items-center space-x-2">
286+
<img src="../assets/images/logo_white_full.png" alt="Locomi Logo" class="w-8 h-8"/>
287+
<span>Locomi</span>
288+
</div>
289+
<p class="text-white mb-4">位置情報を活用して目標達成をサポートし、美しい報酬を提供するあなたのパートナー。</p>
290+
<div class="flex items-center space-x-2">
291+
<a href="https://x.com" target="_blank">
292+
<svg class="hover:opacity-50 transition-opacity" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 50 50">
293+
<path d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"></path>
294+
</svg>
295+
</a>
296+
<a href="https://instagram.com" target="_blank">
297+
<svg class="hover:opacity-50 transition-opacity" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 50 50">
298+
<path d="M 16 3 C 8.83 3 3 8.83 3 16 L 3 34 C 3 41.17 8.83 47 16 47 L 34 47 C 41.17 47 47 41.17 47 34 L 47 16 C 47 8.83 41.17 3 34 3 L 16 3 z M 37 11 C 38.1 11 39 11.9 39 13 C 39 14.1 38.1 15 37 15 C 35.9 15 35 14.1 35 13 C 35 11.9 35.9 11 37 11 z M 25 14 C 31.07 14 36 18.93 36 25 C 36 31.07 31.07 36 25 36 C 18.93 36 14 31.07 14 25 C 14 18.93 18.93 14 25 14 z M 25 16 C 20.04 16 16 20.04 16 25 C 16 29.96 20.04 34 25 34 C 29.96 34 34 29.96 34 25 C 34 20.04 29.96 16 25 16 z"></path>
299+
</svg>
300+
</a>
301+
</div>
302+
</div>
303+
<div>
304+
<!-- Empty middle column -->
305+
</div>
306+
<div>
307+
<h4 class="text-lg font-semibold mb-4">サポート</h4>
308+
<ul class="space-y-2">
309+
<li><a href="#" class="text-black hover:text-white">お問い合わせ</a></li>
310+
<li><a href="privacy.html" class="text-black hover:text-white">プライバシーポリシー</a></li>
311+
<li><a href="tos.html" class="text-black hover:text-white">利用規約</a></li>
312+
</ul>
313+
</div>
314+
</div>
315+
</div>
316+
</footer>
317+
</body>

‎pages/privacy.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,8 @@ <h2>プライバシーポリシーの変更</h2>
370370
<h2>お問い合わせ</h2>
371371
<p>
372372
本プライバシーポリシーやお客様のデータについてご質問がある場合は、以下までご連絡ください：<br>
373-
<span class="contact-email">[連絡先メールアドレス]</span>
373+
<span class="contact-email">info at locomiapp dot com</span><br>
374+
「at」を「@」記号に、「dot」を「.」に置き換えてください。
374375
</p>
375376
</section>
376377

@@ -412,7 +413,7 @@ <h2>発効日</h2>
412413
<div>
413414
<h4 class="text-lg font-semibold mb-4">サポート</h4>
414415
<ul class="space-y-2">
415-
<li><a href="#" class="text-black hover:text-white">ヘルプセンター</a></li>
416+
<li><a href="contact.html" class="text-black hover:text-white">お問い合わせ</a></li>
416417
<li><a href="#" class="text-black hover:text-white">プライバシーポリシー</a></li>
417418
<li><a href="tos.html" class="text-black hover:text-white">利用規約</a></li>
418419
</ul>

‎pages/tos.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -446,7 +446,8 @@ <h2>第13条（準拠法及び管轄）</h2>
446446
<h2>第14条（お問い合わせ）</h2>
447447
<p>
448448
本規約に関するお問い合わせは、以下のメールアドレスまでお願いいたします：<br>
449-
<span class="contact-email">[連絡先メールアドレス]</span>
449+
<span class="contact-email">info at locomiapp dot com</span><br>
450+
「at」を「@」記号に、「dot」を「.」に置き換えてください。
450451
</p>
451452
</section>
452453

@@ -488,7 +489,7 @@ <h2>発効日</h2>
488489
<div>
489490
<h4 class="text-lg font-semibold mb-4">サポート</h4>
490491
<ul class="space-y-2">
491-
<li><a href="#" class="text-black hover:text-white">ヘルプセンター</a></li>
492+
<li><a href="contact.html" class="text-black hover:text-white">お問い合わせ</a></li>
492493
<li><a href="privacy.html" class="text-black hover:text-white">プライバシーポリシー</a></li>
493494
<li><a href="#" class="text-black hover:text-white">利用規約</a></li>
494495
</ul>

0 commit comments

Comments
 (0)