-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
218 lines (203 loc) · 12.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Favicon.ico Generator GISDEV</title>
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="assets/manifest.json">
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-lg-5">
<a class="navbar-brand" href="#!">Favicon.ico Generator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page"
href="https://ahmetaraci.github.io">Blogum</a></li>
<li class="nav-item"><a class="nav-link" href="https://ahmetaraci.github.io/about/">Hakkımda</a>
</li>
<li class="nav-item"><a class="nav-link" href="https://ahmetaraci.github.io/contact/">İletişim</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header-->
<header class="py-5">
<div class="container px-lg-5">
<div class="p-4 p-lg-5 bg-light rounded-3 text-center">
<div class="m-4 m-lg-5">
<h1 class="display-6 fw-bold">Projeleriniz için favicon üretin</h1>
<p class="fs-5">Bu uygulama, verilen bir görselin arka planını silerek çeşitli çözünürlüklerde
faviconlar üretir. Oluşturduğu ikonlar arasında 192x192 ve 512x512 piksel Android Chrome
ikonları, 180x180 piksel Apple dokunmatik ikonu, 32x32 piksel favicon.ico, 16x16 ve 32x32 piksel
faviconlar ve 150x150 piksel Microsoft tile ikonu bulunur. Bu sayede, kullanıcılar çeşitli
platformlarda kullanıma hazır ikonlara sahip olur. Uygulama Apple için üretilen ikonlar
dışındaki diğer üretilen dosyaların arkaplanlarını siler!</p>
<div class="mb-3">
<input class="form-control form-control" type="file" id="imageFile" accept="image/*" required>
</div>
<div class="container">
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="faviconOptions" id="option1"
value="multiple" checked>
<label class="form-check-label h6" for="option1">
Web, Android, Microsoft ve iOS (iPhone ve iPad) Uygulamaları için simgeler oluşturun.
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="faviconOptions" id="option2"
value="single">
<label class="form-check-label h6" for="option2">
Sadece 16x16 favicon.ico oluşturun.
</label>
</div>
</div>
<div class="mb-3"><button class="btn btn-success btn-lg" onclick="generateFavicons()">Generate
Favicons</button>
</div>
</div>
</div>
</div>
</header>
<div class="py-1" id="whatsNext" hidden>
<div class="container px-lg-5">
<div class="p-4 p-lg-5 bg-light rounded-3 text-center">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="p-3 bg-light rounded-3 text-center" id="installMetin">
<div class="m-3">
<h3 class="display-6 fw-bold">Yükleme</h3>
<p class="fs-5">
İlk olarak, aşağıda listelenen dosyaları indirmek için indirme düğmesini kullanın.
Dosyaları web sitenizin kök dizinine yerleştirin.
</p>
<ul class="list-unstyled fs-5">
<li>android-chrome-192x192.png</li>
<li>android-chrome-512x512.png</li>
<li>apple-touch-icon.png</li>
<li>favicon-16x16.png</li>
<li>favicon-32x32.png</li>
<li>favicon.ico</li>
<li>site.webmanifest</li>
</ul>
<p class="fs-5">
Ardından, aşağıdaki bağlantı etiketlerini kopyalayın ve HTML'nizin head tag'ı
içerisine yapıştırın.
</p>
<pre class="bg-light p-2 rounded-3 code-container">
<code id="codeContent" class="border border-primary">
<<span class="text-primary">link</span> <span class="text-secondary">rel</span>=<span class="text-info">"apple-touch-icon"</span> <span class="text-secondary">sizes</span>=<span class="text-info">"180x180"</span> <span class="text-secondary">href</span>=<span class="text-info">"/apple-touch-icon.png"</span>>
<<span class="text-primary">link</span> <span class="text-secondary">rel</span>=<span class="text-info">"icon"</span> <span class="text-secondary">type</span>=<span class="text-info">"image/png"</span> <span class="text-secondary">sizes</span>=<span class="text-info">"32x32"</span> <span class="text-secondary">href</span>=<span class="text-info">"/favicon-32x32.png"</span>>
<<span class="text-primary">link</span> <span class="text-secondary">rel</span>=<span class="text-info">"icon"</span> <span class="text-secondary">type</span>=<span class="text-info">"image/png"</span> <span class="text-secondary">sizes</span>=<span class="text-info">"16x16"</span> <span class="text-secondary">href</span>=<span class="text-info">"/favicon-16x16.png"</span>>
<<span class="text-primary">link</span> <span class="text-secondary">rel</span>=<span class="text-info">"manifest"</span> <span class="text-secondary">href</span>=<span class="text-info">"/site.webmanifest"</span>>
</code>
</pre>
<button class="btn btn-info mt-3" onclick="copyCode()">Copy</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page Content-->
<section class="pt-4" id="resultContainer" hidden>
<div class="container px-lg-5">
<!-- Page Features-->
<div class="row gx-lg-5">
<div class="col-lg-6 col-xxl-4 mb-5">
<div class="card bg-light border-0 h-100">
<div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-4 mt-n4"><i
class="bi bi-cloud-download"></i></div>
<h2 class="fs-4 fw-bold">İndir</h2>
<div id="results"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-xxl-4 mb-5">
<div class="card bg-light border-0 h-100">
<div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-4 mt-n4"><i
class="bi bi-card-heading"></i></div>
<h2 class="fs-4 fw-bold">Takip</h2>
<p class="mb-0">Linklerden beni takip edebilir ve iletişime geçebilirsiniz.</p>
<div class="mt-4">
<a href="https://github.com/ahmetaraci" class="text-dark me-4">
<i class="bi bi-github fs-3"></i>
</a>
<a href="https://www.linkedin.com/in/ahmet-araci" class="text-dark me-4">
<i class="bi bi-linkedin fs-3"></i>
</a>
<a href="mailto:muhammetahmet.araci@gmail.com" class="text-dark me-4">
<i class="bi bi-envelope fs-3"></i>
</a>
<a href="https://ahmetaraci.github.io" class="text-dark">
<i class="bi bi-globe fs-3"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xxl-4 mb-5">
<div class="card bg-light border-0 h-100">
<div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-4 mt-n4"><i
class="bi bi-code"></i></div>
<h2 class="fs-4 fw-bold">Projeler</h2>
<p class="mb-0">Diğer projelerim için linke tıklayabilirsiniz. </p>
<div class="mt-4">
<a href="https://ahmetaraci.github.io/projects/" class="text-dark">
<i class="bi bi-globe fs-3"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Muhammet Ahmet ARACI 2024</p>
<p class="m-0 text-center text-white">All rights reserved.</p>
<p class="m-0 text-center text-white">
Connect with me:
<a href="https://github.com/ahmetaraci" class="text-white">GitHub</a> |
<a href="https://www.linkedin.com/in/ahmet-araci" class="text-white">LinkedIn</a> |
<a href="https://ahmetaraci.github.io" class="text-white">Blog</a>
</p>
<p class="m-0 text-center text-white">Contact: <a href="mailto:youremail@example.com"
class="text-white">muhammetahmet.araci@gmail.com</a></p>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CYNSGLMGTQ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-CYNSGLMGTQ');
</script>
</body>
</html>