Hugging Face's logo

Spaces:
humza7656
/
Email_GUARD
Running

App Files Community
humza7656 commited on
Commit
69836c2
·
verified ·
1 Parent(s): a0c2d6d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +169 -19
index.html CHANGED
@@ -1,19 +1,169 @@
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>EmailGuard | AI Spam Detection</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Bricolage Grotesque', sans-serif;
12
+ background-color: #050505;
13
+ background-image:
14
+ radial-gradient(circle at 50% -20%, #1e293b 0%, transparent 50%),
15
+ radial-gradient(circle at 0% 100%, #0f172a 0%, transparent 40%);
16
+ min-height: 100vh;
17
+ color: #e2e8f0;
18
+ }
19
+
20
+ .glass-card {
21
+ background: rgba(15, 23, 42, 0.4);
22
+ backdrop-filter: blur(20px);
23
+ border: 1px solid rgba(255, 255, 255, 0.08);
24
+ box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
25
+ }
26
+
27
+ .input-glow:focus {
28
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
29
+ border-color: #3b82f6;
30
+ }
31
+
32
+ .btn-gradient {
33
+ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
34
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
35
+ }
36
+
37
+ .btn-gradient:hover:not(:disabled) {
38
+ transform: translateY(-1px);
39
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
40
+ filter: brightness(1.05);
41
+ }
42
+
43
+ .loader {
44
+ border: 2px solid rgba(255, 255, 255, 0.2);
45
+ border-top: 2px solid #fff;
46
+ border-radius: 50%;
47
+ width: 16px;
48
+ height: 16px;
49
+ animation: spin 0.8s linear infinite;
50
+ }
51
+
52
+ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
53
+
54
+ .developer-badge {
55
+ background: rgba(255, 255, 255, 0.02);
56
+ border: 1px solid rgba(255, 255, 255, 0.05);
57
+ backdrop-filter: blur(5px);
58
+ }
59
+
60
+ #emailInput {
61
+ font-weight: 300;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="flex flex-col items-center justify-center p-6">
66
+
67
+ <div class="w-full max-w-lg">
68
+ <!-- Brand -->
69
+ <div class="text-center mb-8">
70
+ <div class="inline-block p-3 rounded-2xl bg-blue-600/10 border border-blue-500/20 mb-4 shadow-xl shadow-blue-500/5">
71
+ <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
72
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
73
+ </svg>
74
+ </div>
75
+ <h1 class="text-4xl font-extrabold text-white mb-1 tracking-tight">EmailGuard</h1>
76
+ <p class="text-slate-500 font-semibold tracking-widest uppercase text-[10px]">AI Forensic Analysis</p>
77
+ </div>
78
+
79
+ <!-- Main Card -->
80
+ <div class="glass-card rounded-[2.5rem] p-8 md:p-10 mb-8">
81
+ <div class="space-y-6">
82
+ <div class="relative">
83
+ <label class="text-[10px] font-bold uppercase tracking-[0.15em] text-slate-500 ml-1 mb-3 block">Email Content</label>
84
+ <textarea
85
+ id="emailInput"
86
+ class="w-full h-48 bg-slate-900/40 border border-slate-800/50 rounded-3xl p-6 text-slate-100 placeholder:text-slate-700 focus:outline-none input-glow transition-all resize-none text-base leading-relaxed"
87
+ placeholder="Paste text here..."></textarea>
88
+ </div>
89
+
90
+ <button
91
+ onclick="handleCheck()"
92
+ id="checkBtn"
93
+ class="btn-gradient w-full text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-3 disabled:opacity-50 text-base">
94
+ <span id="btnLabel">Execute Analysis</span>
95
+ <div id="btnLoader" class="loader hidden"></div>
96
+ </button>
97
+ </div>
98
+
99
+ <!-- Result Area -->
100
+ <div id="resultBox" class="hidden mt-8 p-6 rounded-3xl border animate-in fade-in slide-in-from-top-4 duration-500">
101
+ <div class="flex items-center gap-4">
102
+ <div id="resultIndicator" class="w-3 h-3 rounded-full"></div>
103
+ <div>
104
+ <p class="text-[9px] uppercase font-bold tracking-widest opacity-50 mb-0.5">Classification</p>
105
+ <p id="resultText" class="text-lg font-bold"></p>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Developer Signature - Space Fixed -->
112
+ <div class="flex justify-center">
113
+ <div class="developer-badge px-5 py-2.5 rounded-2xl flex items-center gap-1.5 group hover:border-blue-500/20 transition-all cursor-default">
114
+ <span class="text-slate-500 text-[10px] font-semibold uppercase tracking-tight">Designed & Developed By</span>
115
+ <span class="text-white font-bold text-base tracking-tight group-hover:text-blue-400 transition-colors">Hamza</span>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <script>
121
+ const API_URL = 'https://humza7656-email-backend.hf.space/email_checker';
122
+
123
+ async function handleCheck() {
124
+ const input = document.getElementById('emailInput');
125
+ const btn = document.getElementById('checkBtn');
126
+ const btnLabel = document.getElementById('btnLabel');
127
+ const btnLoader = document.getElementById('btnLoader');
128
+ const resultBox = document.getElementById('resultBox');
129
+ const resultText = document.getElementById('resultText');
130
+ const resultIndicator = document.getElementById('resultIndicator');
131
+
132
+ const textValue = input.value.trim();
133
+ if (!textValue) return;
134
+
135
+ btn.disabled = true;
136
+ btnLabel.textContent = "Processing...";
137
+ btnLoader.classList.remove('hidden');
138
+ resultBox.classList.add('hidden');
139
+
140
+ try {
141
+ const response = await fetch(API_URL, {
142
+ method: 'POST',
143
+ headers: { 'Content-Type': 'application/json' },
144
+ body: JSON.stringify({ text: textValue })
145
+ });
146
+
147
+ const data = await response.json();
148
+ const msg = data["Email Checker"];
149
+ const isHam = msg.includes('HAM');
150
+
151
+ resultBox.className = `mt-8 p-6 rounded-3xl border animate-in fade-in slide-in-from-top-4 duration-500 ${isHam ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-rose-500/10 border-rose-500/20 text-rose-400'}`;
152
+ resultIndicator.className = `w-3 h-3 rounded-full ${isHam ? 'bg-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.3)]' : 'bg-rose-500 shadow-[0_0_15px_rgba(244,63,94,0.3)]'}`;
153
+
154
+ resultText.textContent = msg;
155
+ resultBox.classList.remove('hidden');
156
+
157
+ } catch (e) {
158
+ resultBox.className = "mt-8 p-6 rounded-3xl border bg-slate-800 border-slate-700 text-slate-300";
159
+ resultText.textContent = "Backend unreachable.";
160
+ resultBox.classList.remove('hidden');
161
+ } finally {
162
+ btn.disabled = false;
163
+ btnLabel.textContent = "Execute Analysis";
164
+ btnLoader.classList.add('hidden');
165
+ }
166
+ }
167
+ </script>
168
+ </body>
169
+ </html>