-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.html
156 lines (156 loc) · 6.08 KB
/
search.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
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
TruthWeb Browser
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Roboto', sans-serif;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
.fade-in {
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.slide-in {
animation: slideIn 0.5s ease-in-out;
}
@keyframes slideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body class="bg-black text-white">
<div class="flex flex-col h-screen">
<!-- Top Bar -->
<div class="flex items-center justify-between bg-black p-2 border-b border-gray-700 fade-in">
<div class="flex items-center space-x-2">
<button class="p-2 hover:bg-gray-800 rounded" onclick="alert('Menu button clicked!')">
<i class="fas fa-bars">
</i>
</button>
<span class="text-lg font-medium truncate">
TruthWeb Browser
</span>
</div>
<div class="hidden md:flex items-center space-x-2 flex-grow mx-2">
<button class="p-2 hover:bg-gray-800 rounded" onclick="history.back()">
<i class="fas fa-arrow-left">
</i>
</button>
<button class="p-2 hover:bg-gray-800 rounded" onclick="history.forward()">
<i class="fas fa-arrow-right">
</i>
</button>
<button class="p-2 hover:bg-gray-800 rounded" onclick="location.reload()">
<i class="fas fa-redo">
</i>
</button>
<form class="flex items-center bg-gray-900 rounded-full flex-grow overflow-hidden" action="https://www.google.com/search" method="GET">
<img alt="Magnifying glass icon representing search" class="w-4 h-4 ml-2" height="16" src="https://storage.googleapis.com/a1aa/image/mUUIBrCUim59HFywC3Kgi0tNrHyTyyB2ZHvMRxo7PEpB35eJA.jpg" width="16"/>
<input class="flex-grow p-2 outline-none bg-gray-900 text-white rounded-full" name="q" placeholder="Search Google or type a URL" type="text"/>
<button class="p-2" type="submit">
<i class="fas fa-microphone">
</i>
</button>
</form>
</div>
<div class="flex items-center space-x-2">
<button class="p-2 hover:bg-gray-800 rounded" onclick="alert('User profile button clicked!')">
<i class="fas fa-user-circle">
</i>
</button>
<button class="p-2 hover:bg-gray-800 rounded" onclick="alert('More options button clicked!')">
<i class="fas fa-ellipsis-v">
</i>
</button>
</div>
</div>
<!-- Search Bar for Mobile -->
<div class="md:hidden p-2 bg-black border-b border-gray-700 slide-in">
<form class="flex items-center bg-gray-900 rounded-full overflow-hidden" action="https://www.google.com/search" method="GET">
<img alt="Magnifying glass icon representing search" class="w-4 h-4 ml-2" height="16" src="https://storage.googleapis.com/a1aa/image/mUUIBrCUim59HFywC3Kgi0tNrHyTyyB2ZHvMRxo7PEpB35eJA.jpg" width="16"/>
<input class="flex-grow p-2 outline-none bg-gray-900 text-white rounded-full" name="q" placeholder="Search Google or type a URL" type="text"/>
<button class="p-2" type="submit">
<i class="fas fa-microphone">
</i>
</button>
</form>
</div>
<!-- Main Content -->
<div class="flex-grow flex flex-col items-center justify-center fade-in">
<div class="max-w-4xl w-full p-4">
<h1 class="text-2xl font-bold mb-4">Welcome to TruthWeb Browser</h1>
<p class="mb-4">Experience the web like never before with our fast and secure browser. Here are some of the features you can enjoy:</p>
<ul class="list-disc list-inside mb-4">
<li>Fast browsing speed</li>
<li>Enhanced security</li>
<li>Customizable interface</li>
<li>Built-in ad blocker</li>
<li>Privacy protection</li>
</ul>
<h2 class="text-xl font-semibold mb-2">Latest News</h2>
<div class="space-y-4">
<div class="bg-gray-800 p-4 rounded">
<h3 class="text-lg font-semibold">News Item 1</h3>
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
</div>
<div class="bg-gray-800 p-4 rounded">
<h3 class="text-lg font-semibold">News Item 2</h3>
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
</div>
<div class="bg-gray-800 p-4 rounded">
<h3 class="text-lg font-semibold">News Item 3</h3>
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="bg-black p-2 text-center border-t border-gray-700 fade-in">
<p class="text-sm">
© 2024 TruthWeb Browser
</p>
</div>
<!-- Menu Bar -->
<div class="fixed bottom-0 left-0 right-0 bg-black p-2 border-t border-gray-700 flex justify-around md:hidden">
<button class="p-2 hover:bg-gray-800 rounded" onclick="alert('Home button clicked!')">
<i class="fas fa-home">
</i>
</button>
<button class="p-2 hover:bg-gray-800 rounded" onclick="alert('Search button clicked!')">
<i class="fas fa-search">
</i>
</button>
<button class="p-2 hover:bg-gray-800 rounded" onclick="alert('Bookmarks button clicked!')">
<i class="fas fa-bookmark">
</i>
</button>
<button class="p-2 hover:bg-gray-800 rounded" onclick="alert('Settings button clicked!')">
<i class="fas fa-cog">
</i>
</button>
</div>
</div>
</body>
</html>