-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
239 lines (200 loc) · 15.8 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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Protego</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/8a00bfda28.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" href="imgs\protego-favicon.png">
</head>
<body class="font-Poppins bg-[#0F172A] overflow-x-hidden">
<!-- Navigation bar -->
<Header class="bg-gray-900 p-3">
<div class="flex justify-between items-center">
<div class="flex-shrink-0">
<img class="h-8 ml-4" src="./imgs/logo-protego.png" alt="Logo">
</div>
<div class="block lg:hidden" id="bars">
<button id="menu-toggle" class="text-gray-300 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
</button>
</div>
<div class="lg:flex lg:justify-center lg:items-center hidden flex-grow">
<a href="./index.html" class="text-gray-300 hover:bg-gray-700 px-4 py-2 rounded-md text-sm font-Poppins">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 px-4 py-2 rounded-md text-sm ffont-Poppins">Documentation</a>
<a href="./about.html" class="text-gray-300 hover:bg-gray-700 px-4 py-2 rounded-md text-sm font-Poppins">About Us</a>
<a href="./contact.html" class="text-gray-300 hover:bg-gray-700 block px-4 py-2 rounded-md text-base font-Poppins">Contact</a>
</div>
<div class=" ml-auto flex items-center mr-20">
<a href="https://github.com/saibadev"><svg xmlns="http://www.w3.org/2000/svg" class="hover:bg-gray-700 w-6 h-6 mr-4 " fill="white" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </a>
<a href="https://discord.gg/VHza4MhU"><svg xmlns="http://www.w3.org/2000/svg" class="hover:bg-gray-700 w-6 h-6" fill="white" viewBox="0 0 640 512"><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg></a>
</div>
</div>
<div class="hidden lg:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="./index.html" class="text-gray-300 hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-Poppins">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-Poppins">Documentation</a>
<a href="./about.html" class="text-gray-300 hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-Poppins">About Us</a>
<a href="./contact.html" class="text-gray-300 hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-Poppins">Contact</a>
</div>
</div>
</Header>
<!-- Hero section -->
<section class="relative">
<div class="container flex flex-col-reverse lg:flex-row items-center gap-12 mt-14 lg:mt-28">
<div class="flex flex-1 flex-col items-center lg:items-start">
<h2
class="text-bookmark-blue text-3xl md:text-4 lg:text-5xl text-center lg:text-left mb-6 uppercase font-Oswald font-bold">
Your shield against scam and fraud
</h2>
<p class="text-bookmark-grey text-lg text-center lg:text-left mb-6 ">
Protego is a scam and fraud prevention system utilizing Support Vector Machine and Random Forest
Algorithm, Network-Attached Storage and USB cleaning software, a complete fraud and scam protection
system that improves computer system performance, security, and overall efficiency while
guaranteeing a safe and secure user experience.
</p>
<!-- Download button -->
<div class="flex justify-center flex-wrap gap-6">
<a href="Protego-web-extension.zip" download class="btn btn-purple hover:bg-bookmark-white hover:text-black">
Get it on Chrome
</a>
<!-- Download button -->
<a href="Protego-desktop-main.zip" download class= "btn btn-purple hover:bg-bookmark-white hover:text-black">
Get it on Desktop
</a>
</div>
</div>
<!-- Hero image -->
<div class="flex justify-center flex-1 mb-10 md:mb-16 lg:mb-0 z-10">
<img class="w-17/20 h-17/20 sm:w-3/4 sm:h-3/4 md:w-full md:h-full" src="imgs\protego-card1.png" alt="" />
</div>
</div>
</section>
<!-- Features title -->
<section class="bg-bookmark-white py-20 mt-20 lg:mt-60">
<div class="sm:w-3/4 lg:w-5/12 mx-auto px-2">
<h1 class="text-3xl text-center text-bookmark-blue font-semibold md:text-3xl">Features</h1>
<p class="text-center text-bookmark-grey mt-4">
Protego utlizes different technologies in preventing mutiple types of Cyber security attacks.
</p>
</div>
<!-- features 1 -->
<div class="relative mt-20 lg:mt-24">
<div class="container flex flex-col lg:flex-row items-center justify-center gap-x-24">
<div class="flex flex-1 justify-center z-10 mb-10 lg:mb-0">
<img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full rounded-lg"
src="imgs\protegoURLanlyz.png" alt="url analysis" />
</div>
<div class="flex flex-1 flex-col items-cen uppercaseter lg:items-start">
<h1 class="text-3xl text-center text-bookmark-blue font-semibold md:text-3xl">URL analysis browser extension</h1>
<p class="text-bookmark-grey my-4 text-center lg:text-left sm:w-3/4 lg:w-full">
Protego browser extension utilize Support Vector Machine and Random Forest Algorithm to make prediction
whether a URL is potenitally dangerous or not.
</p>
<a href="web extension.html" target="_blank" class="btn btn-purple hover:bg-bookmark-white hover:text-black transition duration-200 ease-out">More Info</a>
</div>
</div>
<div class="hidden lg:block overflow-hidden bg-bookmark-purple rounded-r-full absolute h-80 w-2/4 -bottom-24 -left-36"></div>
</div>
<!-- features 2-->
<div class="relative mt-20 lg:mt-52">
<div class="container flex flex-col lg:flex-row-reverse items-center justify-center gap-x-24">
<div class="flex flex-1 justify-center z-10 mb-10 lg:mb-0">
<img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full"
src="imgs\protegoUSB.png" alt="anti-USBbaiting" />
</div>
<div class="flex flex-1 flex-col items-center lg:items-start">
<h1 class="text-3xl text-center text-bookmark-blue font-semibold md:text-3xl">USB cleaning software</h1>
<p class="text-bookmark-grey my-4 text-center lg:text-left sm:w-3/4 lg:w-full">
Protego is equipped with USB cleaning software that detects and analyze malicious files from flash drives when plugged into the computer.
</p>
<a href="https://github.com/Chrlss/Protego-Desktop" target="_blank" class="btn btn-purple hover:bg-bookmark-white hover:text-black transition duration-200 ease-out">More Info</a>
</div>
</div>
<div class="
hidden lg:block overflow-hidden bg-bookmark-purple rounded-l-full absolute h-80 w-2/4 -bottom-24 -right-36 ">
</div>
</div>
<!-- features 3-->
<div class="relative mt-20 lg:mt-52">
<div class="container flex flex-col lg:flex-row items-center justify-center gap-x-24">
<div class="flex flex-1 justify-center z-10 mb-10 lg:mb-0">
<img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full"
src="imgs\protegoNAS.png" alt="" />
</div>
<div class="flex flex-1 flex-col items-center lg:items-start">
<h1 class="text-3xl text-center text-bookmark-blue font-semibold md:text-3xl ">Data backup using NAS</h1>
<p class="text-bookmark-grey my-4 text-center lg:text-left sm:w-3/4 lg:w-full">
Users can back up their files to safeguard them against ransomware attacks. Protego has developed its own NAS for data backup purposes.
</p>
<a href="protegoNAS.html" target="_blank" class="btn btn-purple hover:bg-bookmark-white hover:text-black transition duration-200 ease-out">More Info</a>
</div>
</div>
<div class="hidden lg:block overflow-hidden bg-bookmark-purple rounded-r-full absolute h-80 w-2/4 -bottom-24 -left-36"></div>
</div>
</section>
<!-- Cards para sa USER education function -->
<!-- TODO: gumawa ng short articles para dito-->
<section>
<div class="flex items-center justify-center min-h-screen container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<!-- card -->
<div class="card ">
<div class="p-5 flex flex-col">
<div class="rounded-xl overflow-hidden">
<img src="imgs\protegocard1.png" alt="protego">
</div>
<h5 class="text-2xl md:text-3x font-medium mt-3">Is this a scam?</h5>
<p class="text-bookmark-grey text-sm mt-3"> Key indicators of potential scam and steps you can take to protect your personal and financial information from being stolen. </p>
<a href="Is this a scam.html" class="text-center bg-blue-600 text-white hover:bg-bookmark-white hover:text-black py-2 rounded-lg mt-4 focus:scale-95 transition-all duration-200 ease-out">More info</a>
</div>
</div>
<!-- card -->
<div class="card ">
<div class="p-5 flex flex-col">
<div class="rounded-xl overflow-hidden">
<img src="imgs\protegocard2.png" alt="protego">
</div>
<h5 class="text-2xl md:text-3x font-medium mt-3">Be aware</h5>
<p class="text-bookmark-grey text-sm mt-3"> Learn about the common cyber attacks, malwares and social engineering attacks to protect yourself from theft.</p>
<a href="Be aware.html" class="text-center bg-blue-600 text-white hover:bg-bookmark-white hover:text-black py-2 rounded-lg mt-4 focus:scale-95 transition-all duration-200 ease-out">More info</a>
</div>
</div>
<!-- card -->
<div class="card ">
<div class="p-5 flex flex-col">
<div class="rounded-xl overflow-hidden">
<img src="imgs\protegocard3.png" alt="protego">
</div>
<h5 class="text-2xl md:text-3x font-medium mt-3">I've been scammed</h5>
<p class="text-bookmark-grey text-sm mt-3">Learn the different steps you can take if you've been scammed to limit the damage and prevent further loss.</p>
<a href="Scammed.html" class="text-center bg-blue-600 text-white hover:bg-bookmark-white hover:text-black py-2 rounded-lg mt-4 focus:scale-95 transition-all duration-200 ease-out">More info</a>
</div>
</div>
</div>
</div>
</section>
<!-- MODAL
<div class="h-screen w-full fixed left-0 top-0 flex justify-center item-center bg-opacity-50">
<div class="bg-white rounded shadow-lg w-1/2 ">
header
<div class="border-b px-4 py-2">
<h2> data backup </h2>
</div>
<div class="p-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. A iure pariatur excepturi eum enim dolorem. Debitis nihil totam enim? Deleniti ea eligendi illum nesciunt perspiciatis minima sed corrupti at doloremque. </div>
<div class="flex justify-self-end items-center w-100 border-t p-3">
<button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white mr-1">Cancel</button>
<button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-white mr-1">Okae</button>
</div>
</div>
</div>
-->
<script>
document.getElementById('menu-toggle').addEventListener('click', function () {
document.getElementById('mobile-menu').classList.toggle('hidden');
});
</script>
</body>
</html>