Skip to content

Commit e5ba081

Browse files
canbaxcanbax
committed
better UI with chatgpt help
1 parent 583eee8 commit e5ba081

File tree

1 file changed

+169
-139
lines changed

1 file changed

+169
-139
lines changed

‎public/index.html‎

Lines changed: 169 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,136 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Namaz Vakti API (1.1.0)</title>
5-
<link rel="icon" href="favicon.ico" />
6-
<script>
7-
function copyToClipboard(text) {
8-
navigator.clipboard.writeText(text).then(
9-
() => {
10-
showToast(`"${text}" kopyalandı`);
11-
},
12-
(err) => {
13-
showToast('Hata! Kopyalanamadı.', true);
14-
}
15-
);
16-
}
17-
18-
function showToast(message, isError = false) {
19-
const toast = document.createElement('div');
20-
toast.className = `toast ${isError ? 'error' : 'success'}`;
21-
toast.textContent = message;
22-
23-
document.body.appendChild(toast);
24-
25-
setTimeout(() => {
26-
toast.classList.add('show');
27-
}, 100); // Slight delay to trigger animation
28-
29-
setTimeout(() => {
30-
toast.classList.remove('show');
31-
setTimeout(() => document.body.removeChild(toast), 300); // Remove after animation
32-
}, 3000); // Toast stays visible for 3 seconds
33-
}
34-
</script>
35-
<style>
36-
h3 {
37-
display: inline;
38-
}
39-
40-
.footer {
41-
position: absolute;
42-
bottom: 0;
43-
}
44-
45-
.copy-container {
46-
display: flex;
47-
align-items: center;
48-
margin: 5px 0;
49-
}
50-
51-
.copy-button {
52-
margin-left: 10px;
53-
padding: 5px 10px;
54-
font-size: 14px;
55-
cursor: pointer;
56-
background-color: #4caf50;
57-
color: white;
58-
border: none;
59-
border-radius: 4px;
60-
transition: background-color 0.3s;
61-
}
62-
63-
.copy-button:hover {
64-
background-color: #45a049;
65-
}
66-
67-
/* Toast styles */
68-
.toast {
69-
position: fixed;
70-
bottom: 20px;
71-
left: 50%;
72-
transform: translateX(-50%);
73-
min-width: 250px;
74-
padding: 15px;
75-
background-color: #4caf50;
76-
color: white;
77-
border-radius: 5px;
78-
text-align: center;
79-
opacity: 0;
80-
visibility: hidden;
81-
transition: opacity 0.3s, visibility 0.3s;
82-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
83-
z-index: 1000;
84-
}
85-
86-
.toast.error {
87-
background-color: #f44336;
88-
}
89-
90-
.toast.show {
91-
opacity: 1;
92-
visibility: visible;
93-
}
94-
</style>
95-
</head>
96-
97-
<body>
98-
<h1>Namaz Vakti API (1.1.0)</h1>
99-
<span> Diyanetin yöntemini kullanarak namaz vakti verileri sunar. </span>
100-
<br />
101-
<br />
102-
<b>
103-
Ücretsiz, reklamsız,
104-
<a target="_blank" href="https://github.com/canbax/namaz-vakti-api">
105-
açık kaynak kodlu
106-
</a>
107-
</b>
108-
<br />
109-
<br />
110-
<a target="_blank" href="https://github.com/canbax/namaz-vakti">
111-
<h3>namaz-vakti</h3>
112-
</a>
113-
uygulaması için oluşturulmuştur
114-
115-
<br />
116-
<a
117-
target="_blank"
118-
href="https://www.postman.com/canbax/workspace/namaz-vakti-api/api/bf039fea-6768-490b-b11d-11bb031bdd8a"
119-
>
120-
<h2>Postman API tanımı</h2>
121-
</a>
122-
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Namaz Vakti API (1.1.0)</title>
7+
<link rel="icon" href="favicon.ico" />
8+
<style>
9+
/* General Styles */
10+
body {
11+
font-family: Arial, sans-serif;
12+
margin: 0;
13+
padding: 20px;
14+
line-height: 1.6;
15+
background: #f9f9f9;
16+
color: #333;
17+
}
18+
19+
a {
20+
color: #007bff;
21+
text-decoration: none;
22+
}
23+
24+
a:hover {
25+
text-decoration: underline;
26+
}
27+
28+
h1 {
29+
text-align: center;
30+
font-size: 2.5rem;
31+
color: #333;
32+
}
33+
34+
h2 {
35+
color: #444;
36+
margin-top: 30px;
37+
}
38+
39+
h3 {
40+
color: #555;
41+
display: inline;
42+
}
43+
44+
.section {
45+
margin-bottom: 20px;
46+
padding: 20px;
47+
background: #fff;
48+
border-radius: 8px;
49+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
50+
}
51+
52+
.copy-container {
53+
display: flex;
54+
align-items: center;
55+
justify-content: space-between;
56+
background: #f8f9fa;
57+
padding: 10px 15px;
58+
margin: 10px 0;
59+
border-radius: 6px;
60+
border: 1px solid #ddd;
61+
}
62+
63+
.copy-button {
64+
padding: 8px 12px;
65+
font-size: 14px;
66+
cursor: pointer;
67+
background-color: #4caf50;
68+
color: white;
69+
border: none;
70+
border-radius: 4px;
71+
transition: background-color 0.3s;
72+
}
73+
74+
.copy-button:hover {
75+
background-color: #45a049;
76+
}
77+
78+
.footer {
79+
margin-top: 40px;
80+
text-align: center;
81+
font-size: 0.9rem;
82+
color: #666;
83+
}
84+
85+
.footer a {
86+
color: #007bff;
87+
}
88+
89+
/* Toast styles */
90+
.toast {
91+
position: fixed;
92+
bottom: 20px;
93+
left: 50%;
94+
transform: translateX(-50%);
95+
min-width: 250px;
96+
padding: 15px;
97+
background-color: #4caf50;
98+
color: white;
99+
border-radius: 5px;
100+
text-align: center;
101+
opacity: 0;
102+
visibility: hidden;
103+
transition: opacity 0.3s, visibility 0.3s;
104+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
105+
z-index: 1000;
106+
}
107+
108+
.toast.error {
109+
background-color: #f44336;
110+
}
111+
112+
.toast.show {
113+
opacity: 1;
114+
visibility: visible;
115+
}
116+
</style>
117+
</head>
118+
<body>
119+
<h1>Namaz Vakti API (1.1.0)</h1>
120+
<div class="section">
121+
<p>
122+
Vakit ve konum verileri sunar sunar.
123+
<strong>
124+
Ücretsiz, reklamsız,
125+
<a target="_blank" href="https://github.com/canbax/namaz-vakti-api">açık kaynak kodlu</a>
126+
</strong>.
127+
</p>
128+
<p>Uygulama için daha fazla bilgi:
129+
<a target="_blank" href="https://github.com/canbax/namaz-vakti"><strong>namaz-vakti</strong></a>.
130+
</p>
131+
</div>
132+
133+
<div class="section">
123134
<h2>Kullanım</h2>
124135
<br />
125136
<span>Koordinatlardan vakit verileri: </span>
@@ -168,32 +179,51 @@ <h2>Kullanım</h2>
168179
<a target="_blank" href="/api/ip"> /api/ip </a>
169180

170181
<br />
182+
</div>
183+
184+
<div class="section">
171185
<h2>Bağış</h2>
172-
Namaz Vakti API ile ücretsiz, reklamsız ancak yüksek kalitede bir hizmet
186+
<p>
187+
Namaz Vakti API ile ücretsiz, reklamsız ancak yüksek kalitede bir hizmet
173188
sunmaya çalışıyoruz. Sunucu masrafları, zaman, emek harcıyoruz. Yapacağınız
174189
1 liralık bir bağış bile aşk, şevk ve motivasyon doğurarak bu
175190
hizmetlerimizin devamlılığına ve daha iyi olmasına katkı sağlayacaktır.
176-
177-
<br /><br />
191+
</p>
178192
<div class="copy-container">
179193
Yusuf Sait Canbaz
180-
<button class="copy-button" onclick="copyToClipboard('Yusuf Sait Canbaz')">
181-
Kopyala
182-
</button>
194+
<button class="copy-button" onclick="copyToClipboard('Yusuf Sait Canbaz')">Kopyala</button>
183195
</div>
184196
<div class="copy-container">
185197
TR49 0020 6001 3401 9074 7100 01
186-
<button
187-
class="copy-button"
188-
onclick="copyToClipboard('TR49 0020 6001 3401 9074 7100 01')"
189-
>
190-
Kopyala
191-
</button>
192-
</div>
193-
194-
<div class="footer">
195-
This site or product includes IP2Location LITE data available from
196-
<a href="https://lite.ip2location.com">https://lite.ip2location.com</a>.
198+
<button class="copy-button" onclick="copyToClipboard('TR49 0020 6001 3401 9074 7100 01')">Kopyala</button>
197199
</div>
198-
</body>
200+
</div>
201+
202+
<div class="footer">
203+
This site or product includes IP2Location LITE data available from
204+
<a href="https://lite.ip2location.com">IP2Location</a>.
205+
</div>
206+
207+
<script>
208+
function copyToClipboard(text) {
209+
navigator.clipboard.writeText(text).then(
210+
() => showToast(`"${text}" kopyalandı`),
211+
() => showToast("Hata! Kopyalanamadı.", true)
212+
);
213+
}
214+
215+
function showToast(message, isError = false) {
216+
const toast = document.createElement("div");
217+
toast.className = `toast ${isError ? "error" : "success"}`;
218+
toast.textContent = message;
219+
220+
document.body.appendChild(toast);
221+
setTimeout(() => toast.classList.add("show"), 100);
222+
setTimeout(() => {
223+
toast.classList.remove("show");
224+
setTimeout(() => document.body.removeChild(toast), 300);
225+
}, 3000);
226+
}
227+
</script>
228+
</body>
199229
</html>

0 commit comments

Comments
 (0)