Hugging Face's logo

Spaces:
minato981
/
instashield-defender
Running

App Files Community
minato981 commited on
Commit
26ecfb1
·
verified ·
1 Parent(s): 8557032

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InstaCrack | Ethical Hacking Toolkit</title>
<link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/69">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8338ec',
secondary: '#3a86ff',
dark: '#1a1a2e',
}
}
}
}
</script>
<style>
body {
overflow-x: hidden;
}
.hacker-text {
font-family: 'Courier New', monospace;
}
.glow {
text-shadow: 0 0 10px rgba(131, 56, 236, 0.7);
}
.terminal {
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid #3a86ff;
border-radius: 5px;
box-shadow: 0 0 20px rgba(58, 134, 255, 0.5);
}
.scanline {
position: relative;
overflow: hidden;
}
.scanline:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: rgba(58, 134, 255, 0.3);
animation: scan 5s linear infinite;
}
@keyframes scan {
0% { top: 0; }
100% { top: 100%; }
}
.typewriter {
border-right: 3px solid #3a86ff;
white-space: nowrap;
overflow: hidden;
animation: blink-caret 0.75s step-end infinite;
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #3a86ff; }
}
</style>
</head>
<body class="bg-dark text-white min-h-screen" id="vanta-bg">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex flex-col items-center justify-center mb-12">
<div class="flex items-center gap-4 mb-6">
<i data-feather="lock" class="text-primary w-12 h-12"></i>
<h1 class="text-4xl md:text-5xl font-bold hacker-text glow text-primary">InstaCrack</h1>
</div>
<p class="text-secondary text-lg md:text-xl text-center max-w-2xl hacker-text">
Ethical Toolkit for Security Research & Penetration Testing
</p>
</header>

<!-- Main Content -->
<main>
<!-- Warning Box -->
<div class="terminal p-6 mb-12 scanline">
<div class="flex items-start gap-2">
<i data-feather="alert-triangle" class="text-yellow-500 mt-1"></i>
<div>
<h3 class="text-lg font-bold hacker-text text-yellow-500">LEGAL DISCLAIMER</h3>
<p class="hacker-text mb-2">
This tool is for educational purposes only. Unauthorized access to computer systems is illegal.
</p>
<p class="hacker-text text-sm opacity-80">
By using this tool, you agree that you will only test systems you own or have permission to test.
</p>
</div>
</div>
</div>

<!-- Tool Selection -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
<!-- Tool 1 -->
<div class="terminal p-6 hover:shadow-lg hover:shadow-primary/30 transition-all">
<div class="flex items-center gap-3 mb-4">
<div class="bg-primary/20 p-2 rounded-full">
<i data-feather="key" class="text-primary"></i>
</div>
<h3 class="text-xl font-bold hacker-text">Password Analyzer</h3>
</div>
<p class="hacker-text text-sm mb-4">
Test password strength against common Instagram cracking techniques.
</p>
<button class="bg-primary hover:bg-primary/80 text-white hacker-text px-4 py-2 rounded transition-all">
Launch Tool
</button>
</div>

<!-- Tool 2 -->
<div class="terminal p-6 hover:shadow-lg hover:shadow-primary/30 transition-all">
<div class="flex items-center gap-3 mb-4">
<div class="bg-primary/20 p-2 rounded-full">
<i data-feather="shield" class="text-primary"></i>
</div>
<h3 class="text-xl font-bold hacker-text">Security Auditor</h3>
</div>
<p class="hacker-text text-sm mb-4">
Check your account's vulnerability to common attack vectors.
</p>
<button class="bg-primary hover:bg-primary/80 text-white hacker-text px-4 py-2 rounded transition-all">
Run Analysis
</button>
</div>

<!-- Tool 3 -->
<div class="terminal p-6 hover:shadow-lg hover:shadow-primary/30 transition-all">
<div class="flex items-center gap-3 mb-4">
<div class="bg-primary/20 p-2 rounded-full">
<i data-feather="eye" class="text-primary"></i>
</div>
<h3 class="text-xl font-bold hacker-text">Metadata Inspector</h3>
</div>
<p class="hacker-text text-sm mb-4">
Analyze public posts for hidden metadata and geolocation data.
</p>
<button class="bg-primary hover:bg-primary/80 text-white hacker-text px-4 py-2 rounded transition-all">
Inspect Now
</button>
</div>
</div>

<!-- Fake Terminal -->
<div class="terminal p-6 mb-12 scanline">
<div class="flex items-center gap-2 mb-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="hacker-text ml-2">root@instacrack:~</span>
</div>
<div class="hacker-text mb-2">
<span class="text-green-500">user@instacrack</span>:<span class="text-blue-500">~</span>$ loading security protocols...
</div>
<div class="hacker-text mb-2 typewriter" style="width: 24ch;">
scanning for vulnerabilities...
</div>
<div class="hacker-text mb-2" id="terminal-output">
> This is a simulated terminal for demonstration purposes only.
</div>
<div class="flex items-center">
<span class="text-green-500 mr-2">></span>
<input type="text" class="bg-transparent border-none outline-none hacker-text flex-grow" placeholder="try 'help' for commands" disabled>
</div>
</div>

<!-- Educational Section -->
<div class="terminal p-6">
<h2 class="text-2xl font-bold hacker-text text-primary mb-4">Security Best Practices</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-bold hacker-text text-secondary mb-2 flex items-center gap-2">
<i data-feather="check-circle" class="w-5 h-5"></i> Strong Passwords
</h3>
<p class="hacker-text text-sm">
Use a combination of uppercase, lowercase, numbers, and special characters. Avoid common words.
</p>
</div>
<div>
<h3 class="text-lg font-bold hacker-text text-secondary mb-2 flex items-center gap-2">
<i data-feather="check-circle" class="w-5 h-5"></i> Two-Factor Auth
</h3>
<p class="hacker-text text-sm">
Always enable 2FA using an authenticator app for an extra layer of security.
</p>
</div>
<div>
<h3 class="text-lg font-bold hacker-text text-secondary mb-2 flex items-center gap-2">
<i data-feather="check-circle" class="w-5 h-5"></i> Phishing Awareness
</h3>
<p class="hacker-text text-sm">
Never enter credentials on suspicious links. Check URLs carefully.
</p>
</div>
<div>
<h3 class="text-lg font-bold hacker-text text-secondary mb-2 flex items-center gap-2">
<i data-feather="check-circle" class="w-5 h-5"></i> Regular Audits
</h3>
<p class="hacker-text text-sm">
Periodically review connected apps and active sessions in your settings.
</p>
</div>
</div>
</div>
</main>

<!-- Footer -->
<footer class="mt-16 text-center hacker-text text-sm opacity

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +223 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Instashield Defender
3
- emoji: 💻
4
- colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: InstaShield Defender 🛡️
3
+ colorFrom: green
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,224 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>InstaShield | Account Security Toolkit</title>
7
+ <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/69">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#3b82f6',
17
+ secondary: '#10b981',
18
+ light: '#f8fafc',
19
+ dark: '#1e293b'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .hacker-text {
27
+ font-family: 'Courier New', monospace;
28
+ }
29
+ .terminal {
30
+ background-color: white;
31
+ border: 1px solid #e2e8f0;
32
+ border-radius: 0.5rem;
33
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
34
+ }
35
+ .typewriter {
36
+ border-right: 2px solid #3b82f6;
37
+ white-space: nowrap;
38
+ overflow: hidden;
39
+ animation: blink-caret 0.75s step-end infinite;
40
+ }
41
+ @keyframes blink-caret {
42
+ from, to { border-color: transparent }
43
+ 50% { border-color: #3b82f6; }
44
+ }
45
+ .card-hover {
46
+ transition: all 0.3s ease;
47
+ }
48
+ .card-hover:hover {
49
+ transform: translateY(-5px);
50
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-light text-dark">
55
+ <div class="container mx-auto px-4 py-8">
56
+ <!-- Header -->
57
+ <header class="flex flex-col items-center justify-center mb-12 text-center">
58
+ <div class="flex items-center gap-4 mb-6">
59
+ <i data-feather="shield" class="text-primary w-12 h-12"></i>
60
+ <h1 class="text-4xl md:text-5xl font-bold hacker-text">InstaShield</h1>
61
+ </div>
62
+ <p class="text-secondary text-lg md:text-xl max-w-2xl hacker-text">
63
+ Your Instagram Account Security Toolkit
64
+ </p>
65
+ </header>
66
+
67
+ <!-- Main Content -->
68
+ <main>
69
+ <!-- Info Box -->
70
+ <div class="terminal p-6 mb-12 bg-primary/10 border-primary/30">
71
+ <div class="flex items-start gap-4">
72
+ <i data-feather="info" class="text-primary mt-1"></i>
73
+ <div>
74
+ <h3 class="text-lg font-bold hacker-text">SECURITY NOTICE</h3>
75
+ <p class="hacker-text mb-2">
76
+ This toolkit helps you understand and improve your Instagram account security.
77
+ </p>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Tool Selection -->
83
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
84
+ <!-- Tool 1 -->
85
+ <div class="terminal p-6 card-hover">
86
+ <div class="flex items-center gap-3 mb-4">
87
+ <div class="bg-primary/10 p-2 rounded-full">
88
+ <i data-feather="lock" class="text-primary"></i>
89
+ </div>
90
+ <h3 class="text-xl font-bold hacker-text">Password Check</h3>
91
+ </div>
92
+ <p class="hacker-text text-sm mb-4">
93
+ Test how strong your password is against common attacks.
94
+ </p>
95
+ <button class="bg-primary hover:bg-primary/90 text-white hacker-text px-4 py-2 rounded transition-all">
96
+ Test Password
97
+ </button>
98
+ </div>
99
+
100
+ <!-- Tool 2 -->
101
+ <div class="terminal p-6 card-hover">
102
+ <div class="flex items-center gap-3 mb-4">
103
+ <div class="bg-primary/10 p-2 rounded-full">
104
+ <i data-feather="activity" class="text-primary"></i>
105
+ </div>
106
+ <h3 class="text-xl font-bold hacker-text">Account Audit</h3>
107
+ </div>
108
+ <p class="hacker-text text-sm mb-4">
109
+ Check your account settings for security vulnerabilities.
110
+ </p>
111
+ <button class="bg-primary hover:bg-primary/90 text-white hacker-text px-4 py-2 rounded transition-all">
112
+ Run Audit
113
+ </button>
114
+ </div>
115
+
116
+ <!-- Tool 3 -->
117
+ <div class="terminal p-6 card-hover">
118
+ <div class="flex items-center gap-3 mb-4">
119
+ <div class="bg-primary/10 p-2 rounded-full">
120
+ <i data-feather="alert-circle" class="text-primary"></i>
121
+ </div>
122
+ <h3 class="text-xl font-bold hacker-text">Phishing Test</h3>
123
+ </div>
124
+ <p class="hacker-text text-sm mb-4">
125
+ Learn how to spot phishing attempts on Instagram.
126
+ </p>
127
+ <button class="bg-primary hover:bg-primary/90 text-white hacker-text px-4 py-2 rounded transition-all">
128
+ Start Test
129
+ </button>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Security Tips -->
134
+ <div class="terminal p-6 mb-12">
135
+ <h2 class="text-2xl font-bold hacker-text text-primary mb-4">Essential Security Tips</h2>
136
+ <div class="space-y-6">
137
+ <div class="flex items-start gap-4">
138
+ <div class="bg-secondary/10 p-2 rounded-full">
139
+ <i data-feather="check" class="text-secondary"></i>
140
+ </div>
141
+ <div>
142
+ <h3 class="text-lg font-bold hacker-text">Use Strong, Unique Passwords</h3>
143
+ <p class="hacker-text text-sm">
144
+ Create complex passwords and never reuse them across different sites.
145
+ </p>
146
+ </div>
147
+ </div>
148
+ <div class="flex items-start gap-4">
149
+ <div class="bg-secondary/10 p-2 rounded-full">
150
+ <i data-feather="check" class="text-secondary"></i>
151
+ </div>
152
+ <div>
153
+ <h3 class="text-lg font-bold hacker-text">Enable Two-Factor Authentication</h3>
154
+ <p class="hacker-text text-sm">
155
+ Add an extra layer of security to your Instagram account.
156
+ </p>
157
+ </div>
158
+ </div>
159
+ <div class="flex items-start gap-4">
160
+ <div class="bg-secondary/10 p-2 rounded-full">
161
+ <i data-feather="check" class="text-secondary"></i>
162
+ </div>
163
+ <div>
164
+ <h3 class="text-lg font-bold hacker-text">Review Connected Apps</h3>
165
+ <p class="hacker-text text-sm">
166
+ Regularly check and remove third-party apps with access to your account.
167
+ </p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Fake Terminal -->
174
+ <div class="terminal p-6 mb-12">
175
+ <div class="flex items-center gap-2 mb-4">
176
+ <div class="w-3 h-3 rounded-full bg-red-400"></div>
177
+ <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
178
+ <div class="w-3 h-3 rounded-full bg-green-400"></div>
179
+ <span class="hacker-text ml-2">user@instashield:~</span>
180
+ </div>
181
+ <div class="hacker-text mb-2">
182
+ <span class="text-green-600">user@instashield</span>:<span class="text-blue-600">~</span>$ loading security modules...
183
+ </div>
184
+ <div class="hacker-text mb-2 typewriter" style="width: 28ch;">
185
+ analyzing account security...
186
+ </div>
187
+ <div class="hacker-text mb-2 text-sm" id="terminal-output">
188
+ > This is a demonstration of security analysis tools.
189
+ </div>
190
+ </div>
191
+ </main>
192
+
193
+ <!-- Footer -->
194
+ <footer class="mt-16 text-center hacker-text text-sm text-gray-600">
195
+ <p>© 2023 InstaShield | Educational tool for account security</p>
196
+ <p class="mt-2">Not affiliated with Instagram or Meta</p>
197
+ </footer>
198
+ </div>
199
+
200
+ <script>
201
+ // Terminal messages
202
+ const terminalOutput = document.getElementById('terminal-output');
203
+ const messages = [
204
+ "> System check complete. Security status: Good",
205
+ "> Recommendation: Enable two-factor authentication",
206
+ "> Remember to use unique passwords for each account",
207
+ "> Security tip: Be cautious of suspicious DMs"
208
+ ];
209
+
210
+ let currentMessage = 0;
211
+
212
+ function updateTerminal() {
213
+ terminalOutput.textContent = messages[currentMessage];
214
+ currentMessage = (currentMessage + 1) % messages.length;
215
+ }
216
+
217
+ // Change message every 5 seconds
218
+ setInterval(updateTerminal, 5000);
219
+
220
+ // Initialize feather icons
221
+ feather.replace();
222
+ </script>
223
+ </body>
224
  </html>