-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (76 loc) · 4.44 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://google.com/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="https://astracss-cdn.vercel.app/0.1.0.js"></script>
<title>Google</title>
</head>
<body
class="transition-all overflow-hidden bg-[#1f1f1f] text-white flex flex-col justify-center items-center align-middle">
<div class="flex h-screen align-middle flex-col justify-center items-center">
<img src="./assets/logo-white.png" alt="logo" class="flex justify-center items-center" />
<div
class="md:w-[584px] mx-auto mt-4 flex w-[92%] items-center rounded-full border border-[#303134] hover:shadow-md hover:bg-[#303134]">
<div class="pl-5">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input type="text" class="w-full bg-transparent rounded-full py-[10px] pl-4 outline-none text-sm"
name="searchBar" id="searchBar" placeholder="Search or type an URL" value="" onchange="search()" />
<div class="pr-5">
<svg class="h-[24px] w-[24px] align-middle cursor-pointer" focusable="false" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path fill="#4285f4"
d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z">
</path>
<path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
<path fill="#fbbc04"
d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z">
</path>
<path fill="#ea4335"
d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z">
</path>
</svg>
</div>
<div class="pr-5">
<svg class="h-[24px] w-[24px] align-middle cursor-pointer" focusable="false" viewBox="0 0 192 192"
xmlns="http://www.w3.org/2000/svg">
<rect fill="none" height="192" width="192"></rect>
<g>
<circle fill="#34a853" cx="144.07" cy="144" r="16"></circle>
<circle fill="#4285f4" cx="96.07" cy="104" r="24"></circle>
<path fill="#ea4335"
d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z">
</path>
<path fill="#fbbc04"
d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.8,0,16,8.29,16,18v30h16V72.8z"></path>
<path fill="#4285f4"
d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z">
</path>
</g>
</svg>
</div>
</div>
<div class="px-auto mx-auto flex items-center gap-2 justify-evenly w-auto pt-4">
<button
class="relative block w-auto px-2 py-[5px] overflow-hidden text-[14px] bg-[#303134] text-center text-[#e8eaed] rounded-[4px] transition border border-[#303134] hover:border hover:border-[#5f6368]">
Google Search
</button>
<button onclick='go("github.com/devsujay19/google-search-clone", "blank")'
class="relative block w-auto px-2 py-[5px] overflow-hidden text-[14px] bg-[#303134] text-center text-[#e8eaed] rounded-[4px] transition border border-[#303134] hover:border hover:border-[#5f6368]">
I'm Feeling Lucky
</button>
</div>
<div class="pt-4 flex flex-row text-[10px] md:flex-row sm:flex-col">
<span class="text-[#a3a3a3] font-sans">Search for "see code" to see the code behind.</span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>