-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (132 loc) · 9.76 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google fonts downloader</title>
<meta name="description" content="A service to download web-optimized Google fonts"/>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/assets/images/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/assets/images/favicon-180.png">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="preload" href="/assets/fonts/CabinetGrotesk.woff2" as="font" type="font/woff2" crossorigin/>
<link rel="stylesheet" type="text/css" href="/assets/styles.css"/>
<script type="module" src="/assets/app.js"></script>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@vovayatsyuk">
<meta name="twitter:title" content="Getfonts - Google fonts downloader">
<meta name="twitter:description" content="A service to download web-optimized Google fonts">
<meta name="twitter:image" content="https://getfonts.vercel.app/assets/images/og-default.webp">
<meta name="twitter:creator" content="@vovayatsyuk">
<meta property="og:url" content="https://getfonts.vercel.app">
<meta property="og:type" content="article">
<meta property="og:title" content="Getfonts - Google fonts downloader">
<meta property="og:description" content="A service to download web-optimized Google fonts">
<meta property="og:image" content="https://getfonts.vercel.app/assets/images/og-default.webp">
<meta property="description" content="A service to download web-optimized Google fonts">
</head>
<body class="text-slate-800 p-5">
<main class="min-h-[60vh] 2xl:min-h-[70vh] flex items-center">
<div class="relative py-12 px-10 pb-56 sm:p-16 sm:pb-48 md:pb-16 mx-auto max-w-5xl 2xl:max-w-6xl rounded-[4rem] text-white bg-blue-500 bg-gradient-to-tr from-blue-600/50 via-blue-700/50 to-blue-700/50">
<div class="md:flex relative z-10">
<h1 class="font-grotesk text-3xl leading-[2.5rem] sm:text-5xl sm:leading-[3.5rem] 2xl:text-6xl 2xl:leading-[4rem] md:w-1/2">Get the complete font package in a single click</h1>
<form class="bg-white text-slate-800 p-8 2xl:p-10 rounded-xl shadow-xl absolute -left-6 -right-6 md:left-[52%] md:right-4 mt-6 md:mt-0 2xl:-mt-2 flex flex-col" id="form">
<div class="relative">
<input class="w-full border border-slate-200 rounded-lg p-4 pr-11 shadow-[0_3px_10px_0px_rgb(0_0_0_/_5%)]" required autocomplete="off" type="url" id="url" placeholder="Paste your URL here..."/>
<button class="text-slate-400 !absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer focus:outline-none focus:ring-2 ring-blue-600 rounded-full bg-white" type="button" aria-label="Link to the CSS file or Google's share link." data-microtip-position="top-left" role="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" title="">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
</svg>
</button>
</div>
<p id="error" class="mt-3 text-red-600 text-sm flex gap-1 items-start" style="display: none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>
<span id="errorText"></span>
<button class="ml-auto" type="button" onclick="this.parentNode.style.display = 'none'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</p>
<button class="relative bg-blue-600 hover:bg-blue-700 text-white text-sm leading-6 font-semibold uppercase w-full rounded-lg p-4 mt-5 transition focus:outline-none focus:ring-2 ring-blue-600 ring-offset-2" type="submit">
<span class="transition">Download</span>
<svg id="loader" class="absolute w-6 h-6 top-1/2 left-1/2 -ml-3 -mt-3 animate-spin pointer-events-none opacity-0 transition" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<p class="text-slate-500 my-3">Or, try one of the examples:</p>
<ul class="flex gap-2 flex-wrap">
<li><button class="py-1 px-3 border rounded text-slate-700 hover:bg-slate-50" type="button" data-font-url="https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700;800">Inter</button></li>
<li><button class="py-1 px-3 border rounded text-slate-700 hover:bg-slate-50" type="button" data-font-url="https://fonts.google.com/share?selection.family=Barlow%20Semi%20Condensed:wght@400;500;600;700%7CMukta:wght@400;600;700">Barlow and Mukta</button></li>
</ul>
</form>
</div>
<svg class="2xl:hidden absolute inset-0 w-full h-full text-white/10" aria-hidden="true"><defs><pattern id=":R196:" width="112" height="112" patternUnits="userSpaceOnUse" x="0" y="0" patternTransform="translate(65 106)"><path d="M0 128V.5H128" fill="none" stroke="currentColor"></path></pattern></defs><rect width="100%" height="100%" fill="url(#:R196:)"></rect></svg>
<svg class="hidden 2xl:block absolute inset-0 w-full h-full text-white/10" aria-hidden="true"><defs><pattern id=":R197:" width="128" height="128" patternUnits="userSpaceOnUse" x="0" y="0" patternTransform="translate(65 113)"><path d="M0 128V.5H128" fill="none" stroke="currentColor"></path></pattern></defs><rect width="100%" height="100%" fill="url(#:R197:)"></rect></svg>
</div>
</main>
<section class="mx-auto max-w-5xl mt-44 md:mt-28">
<h2 class="text-center font-grotesk text-6xl leading-[3.5rem]">How use this site?</h2>
<div class="mt-16 grid md:grid-cols-3 gap-8 text-center md:text-left">
<div class="rounded-[3rem] bg-amber-200 p-10 pt-20 relative overflow-hidden text-lg bg-gradient-to-br from-amber-200 to-amber-300/80">
<p class="text-amber-800/90">Find the fonts for your site at <a href="https://fonts.google.com/" class="hover:underline" target="_blank" rel="noopener">fonts.google.com</a></p>
<a href="https://fonts.google.com/" target="_blank" rel="noopener" class="block mt-4">
<img class="rounded-md mx-auto overflow-hidden"
src="./assets/images/google-logo.png"
loading="lazy"
alt="Google fonts logo"
width="303" height="270"/>
</a>
<div class="absolute top-4 left-1/2 -translate-x-1/2 font-grotesk text-6xl font-bold text-white/30">#1</div>
</div>
<div class="rounded-[3rem] bg-green-200 p-10 pt-20 relative overflow-hidden text-lg bg-gradient-to-br from-green-200 to-green-300/80">
<p class="text-green-800/90">Collect all the styles you need.</p>
<div class="mt-4">
<img class="rounded-md mx-auto overflow-hidden"
src="./assets/images/google-collection.png"
loading="lazy"
alt="Google fonts collection"
width="303" height="270"/>
</div>
<div class="absolute top-4 left-1/2 -translate-x-1/2 font-grotesk text-6xl font-bold text-white/30">#2</div>
</div>
<div class="rounded-[3rem] bg-blue-200 p-10 pt-20 relative overflow-hidden text-lg bg-gradient-to-br from-blue-200 to-blue-300/80">
<p class="text-blue-800/90">Copy the "share" link and use it here!</p>
<div class="mt-4">
<img class="rounded-md mx-auto overflow-hidden"
src="./assets/images/google-link.png"
loading="lazy"
alt="Google fonts link"
width="303" height="270"/>
</div>
<div class="absolute top-4 left-1/2 -translate-x-1/2 font-grotesk text-6xl font-bold text-white/30">#3</div>
</div>
</div>
</section>
<section class="mx-auto max-w-5xl mt-44">
<h2 class="text-center font-grotesk text-6xl leading-[3.5rem]">Why?</h2>
<div class="mt-8 text-xl max-w-2xl mx-auto">
<p>
Because you can't simply download
<a class="text-blue-500 hover:underline" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range">web-optimized</a>
fonts and their stelysheet from
<a class="text-blue-500 hover:underline" href="https://fonts.google.com/">fonts.google.com</a>.
</p>
<p class="mt-2">This site can.</p>
</div>
</section>
<footer class="text-center mt-24 text-slate-400">
<p>Made by <a class="text-blue-500 hover:underline" href="https://twitter.com/vovayatsyuk" target="_blank" rel="noopener">@vovayatsyuk</a></p>
<p class="mt-0.5 hover:underline"><a href="https://github.com/vovayatsyuk/getfonts">View source code</a></p>
</footer>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KRQYXM82X8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-KRQYXM82X8');
</script>
</body>
</html>