-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (143 loc) · 10.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signature Generator</title>
<!-- Tambahkan Tailwind CSS dari CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
<!-- Google Fonts untuk semua font -->
<link href="https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allura&family=Amatic+SC&family=Bad+Script&family=Bilbo&family=Cookie&family=Courgette&family=Dancing+Script:wght@400;700&family=Great+Vibes&family=Kaushan+Script&family=Marck+Script&family=Mr+Dafoe&family=Pacifico&family=Pangolin&family=Parisienne&family=Patrick+Hand&family=Satisfy&family=Shadows+Into+Light&family=Yellowtail&family=Zeyada&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto p-5">
<h1 class="text-3xl font-bold text-center mb-5">Signature Generator</h1>
<!-- Input untuk nama -->
<div class="flex flex-col items-center mb-8">
<input type="text" id="nameInput" placeholder="Masukkan nama Anda" oninput="generateSignatures()" class="w-full max-w-md p-3 border border-gray-300 rounded shadow-sm focus:outline-none focus:ring focus:border-blue-300 mb-4">
<p class="text-sm text-gray-500">Nama yang Anda ketik akan muncul di bawah dengan berbagai font tanda tangan.</p>
</div>
<!-- Div untuk menampilkan semua jenis font -->
<div id="signatures" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Semua jenis font akan ditampilkan di sini -->
<div class="signature p-4 border-2 rounded shadow-2xl" id="DancingScript">Dancing Script</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="GreatVibes">Great Vibes</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Pacifico">Pacifico</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Satisfy">Satisfy</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="ShadowsIntoLight">Shadows Into Light</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="KaushanScript">Kaushan Script</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="AlexBrush">Alex Brush</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Allura">Allura</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="AmaticSC">Amatic SC</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="BadScript">Bad Script</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Bilbo">Bilbo</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Cookie">Cookie</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Courgette">Courgette</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="MarckScript">Marck Script</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="MrDafoe">Mr Dafoe</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Pangolin">Pangolin</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Parisienne">Parisienne</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="PatrickHand">Patrick Hand</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Yellowtail">Yellowtail</div>
<div class="signature p-4 border-2 rounded shadow-2xl" id="Zeyada">Zeyada</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-6 mt-10">
<div class=" mx-auto text-center">
<p class="text-sm mb-4">© 2024 Signature Generator. All rights reserved.</p>
<!-- Social Media Links -->
<div class="flex justify-center space-x-6 mb-4">
<ul class="example-2">
<li class="icon-content">
<a
href="https://facebook.com/bima.jovanta.7"
aria-label="Facebook"
data-social="facebook"
>
<div class="filled"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
class="bi bi-facebook w-6 h-6"
viewBox="0 0 24 24"
xml:space="preserve"
>
<path fill-rule="evenodd" d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z" clip-rule="evenodd"/>
</svg>
</a>
<div class="tooltip">Facebook</div>
</li>
<li class="icon-content">
<a href="https://www.github.com/bimadevs" aria-label="GitHub" data-social="github">
<div class="filled"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-github"
viewBox="0 0 16 16"
xml:space="preserve"
>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
fill="currentColor"
></path>
</svg>
</a>
<div class="tooltip">GitHub</div>
</li>
<li class="icon-content">
<a
href="https://www.instagram.com/biimaa_jo"
aria-label="Instagram"
data-social="instagram"
>
<div class="filled"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-instagram"
viewBox="0 0 16 16"
xml:space="preserve"
>
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"
fill="currentColor"
></path>
</svg>
</a>
<div class="tooltip">Instagram</div>
</li>
<li class="icon-content">
<a href="https://wa.me/6282254044783" aria-label="Whatsapp" data-social="whatsapp">
<div class="filled"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-whatsapp"
viewBox="0 0 24 24"
xml:space="preserve"
>
<path fill="currentColor" fill-rule="evenodd" d="M12 4a8 8 0 0 0-6.895 12.06l.569.718-.697 2.359 2.32-.648.379.243A8 8 0 1 0 12 4ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.96 9.96 0 0 1-5.016-1.347l-4.948 1.382 1.426-4.829-.006-.007-.033-.055A9.958 9.958 0 0 1 2 12Z" clip-rule="evenodd"/>
<path fill="currentColor" d="M16.735 13.492c-.038-.018-1.497-.736-1.756-.83a1.008 1.008 0 0 0-.34-.075c-.196 0-.362.098-.49.291-.146.217-.587.732-.723.886-.018.02-.042.045-.057.045-.013 0-.239-.093-.307-.123-1.564-.68-2.751-2.313-2.914-2.589-.023-.04-.024-.057-.024-.057.005-.021.058-.074.085-.101.08-.079.166-.182.249-.283l.117-.14c.121-.14.175-.25.237-.375l.033-.066a.68.68 0 0 0-.02-.64c-.034-.069-.65-1.555-.715-1.711-.158-.377-.366-.552-.655-.552-.027 0 0 0-.112.005-.137.005-.883.104-1.213.311-.35.22-.94.924-.94 2.16 0 1.112.705 2.162 1.008 2.561l.041.06c1.161 1.695 2.608 2.951 4.074 3.537 1.412.564 2.081.63 2.461.63.16 0 .288-.013.4-.024l.072-.007c.488-.043 1.56-.599 1.804-1.276.192-.534.243-1.117.115-1.329-.088-.144-.239-.216-.43-.308Z"/>
</svg>
</a>
<div class="tooltip">Whatsapp</div>
</li>
</ul>
</div>
<p class="text-xs text-gray-400">Designed by BimaDev</p>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>