Skip to content

Commit a81b4e3

Browse files
nothingcommunitynothingcommunity
authored
Update index.html
1 parent 0c1dfdd commit a81b4e3

1 file changed

Lines changed: 224 additions & 36 deletions

File tree

‎index.html‎

Lines changed: 224 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,239 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Nothing Communit</title>
7-
<meta name="google-site-verification" content="ZWidhp29xotLZ2B8B4mHHEtWvixWj6HhA9Uaav06BYA" />
8-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9-
10-
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
11-
<script>
12-
window.OneSignalDeferred = window.OneSignalDeferred || [];
13-
OneSignalDeferred.push(async function(OneSignal) {
14-
await OneSignal.init({
15-
appId: "js",
16-
});
17-
});
18-
</script>
6+
<title>AI Background Remover - Nothing Space</title>
7+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
8+
9+
<script src="https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.2.0/dist/imglyRemoveBackground.umd.js"></script>
1910

2011
<style>
21-
body { font-family: sans-serif; background: #111; color: #fff; padding: 20px; }
22-
.m-head {
23-
display: flex; justify-content: space-between; align-items: center;
24-
background: #222; padding: 15px 20px; border-radius: 10px; border: 1px solid #333;
25-
max-width: 400px;
26-
}
27-
h2 { margin: 0; font-size: 1.5rem; }
28-
#fwBellIcon { cursor: pointer; font-size: 1.5rem; color: #fff; transition: 0.3s; opacity: 0.7; }
29-
#fwBellIcon:hover { opacity: 1; color: #ffcc00; }
12+
:root {
13+
--bg: #000000;
14+
--accent: #ff0000;
15+
--box: #111111;
16+
--border: #333333;
17+
--text: #f1f1f1;
18+
}
19+
20+
body {
21+
font-family: 'DM Sans', sans-serif;
22+
background: var(--bg);
23+
color: var(--text);
24+
margin: 0;
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
padding: 20px;
29+
min-height: 100vh;
30+
}
31+
32+
.header { font-size: 24px; font-weight: bold; margin-bottom: 30px; letter-spacing: 2px; }
33+
34+
.container {
35+
width: 100%;
36+
max-width: 900px;
37+
background: var(--box);
38+
border: 1px solid var(--border);
39+
padding: 30px;
40+
border-radius: 15px;
41+
text-align: center;
42+
box-sizing: border-box;
43+
}
44+
45+
h1 { margin-top: 0; font-size: 36px; }
46+
47+
/* Upload Box */
48+
#drop-area {
49+
border: 2px dashed var(--border);
50+
padding: 50px 20px;
51+
cursor: pointer;
52+
border-radius: 10px;
53+
transition: 0.3s;
54+
margin-bottom: 20px;
55+
}
56+
#drop-area:hover { border-color: var(--accent); }
57+
58+
/* Image Preview Area with Transparent Checkerboard Pattern */
59+
.image-container {
60+
position: relative;
61+
display: none;
62+
margin-top: 20px;
63+
width: 100%;
64+
max-width: 500px;
65+
margin-left: auto;
66+
margin-right: auto;
67+
border-radius: 8px;
68+
border: 1px solid var(--border);
69+
overflow: hidden;
70+
/* Transparent grid effect */
71+
background-image:
72+
repeating-linear-gradient(45deg, #222 25%, transparent 25%, transparent 75%, #222 75%, #222),
73+
repeating-linear-gradient(45deg, #222 25%, #111 25%, #111 75%, #222 75%, #222);
74+
background-position: 0 0, 10px 10px;
75+
background-size: 20px 20px;
76+
}
77+
78+
#preview-img {
79+
width: 100%;
80+
display: block;
81+
object-fit: contain;
82+
}
83+
84+
/* Scanning Red Line Animation */
85+
.scanner-line {
86+
display: none;
87+
position: absolute;
88+
top: 0;
89+
left: 0;
90+
width: 100%;
91+
height: 4px;
92+
background: var(--accent);
93+
box-shadow: 0 0 20px 2px var(--accent);
94+
z-index: 10;
95+
animation: scan 2s infinite ease-in-out;
96+
}
97+
98+
@keyframes scan {
99+
0% { top: 0%; }
100+
50% { top: 98%; }
101+
100% { top: 0%; }
102+
}
103+
104+
.btn {
105+
background: white;
106+
color: black;
107+
border: none;
108+
padding: 15px 35px;
109+
font-size: 16px;
110+
font-weight: bold;
111+
border-radius: 50px;
112+
cursor: pointer;
113+
margin-top: 20px;
114+
display: none;
115+
transition: 0.3s;
116+
}
117+
118+
.btn-red { background: var(--accent); color: white; display: inline-block; }
119+
.btn-red:disabled { background: #555; cursor: not-allowed; }
120+
.btn-download { background: #ffffff; color: #000; }
121+
122+
#status {
123+
margin-top: 15px;
124+
color: #888;
125+
font-size: 14px;
126+
min-height: 20px;
127+
}
128+
129+
.warning-text {
130+
font-size: 12px;
131+
color: #ffaa00;
132+
margin-top: 10px;
133+
}
30134
</style>
31135
</head>
32136
<body>
33137

34-
<div class="m-head">
35-
<h2>SYSTEM UPDATE</h2>
36-
<i class="fa-solid fa-bell" id="fwBellIcon" onclick="toggleFwSubscription()" title="Get Update Alerts"></i>
37-
</div>
138+
<div class="header">NOTHING SPACE / TOOLS</div>
38139

39-
<p style="margin-top: 20px; color: #aaa; font-size: 0.9rem;">
40-
<b>Testing Steps:</b><br><br>
41-
</p>
140+
<div class="container">
141+
<h1>AI BACKGROUND REMOVER</h1>
142+
<p style="color: #888;">Instantly remove backgrounds in high quality. 100% Free & Private.</p>
143+
144+
<div id="drop-area">
145+
<p style="font-size: 20px; margin: 0;">Tap to upload or Drag & Drop photo</p>
146+
<input type="file" id="file-input" hidden accept="image/*">
147+
</div>
148+
149+
<div class="image-container" id="img-wrapper">
150+
<div class="scanner-line" id="scanner"></div>
151+
<img id="preview-img" src="">
152+
</div>
153+
154+
<div id="status"></div>
155+
<p class="warning-text" id="warning-text" style="display: none;">
156+
Note: First time usage downloads the AI model (~40MB). Please wait, it might take 1-2 minutes depending on your internet speed. Subsequent uses will be instant.
157+
</p>
158+
159+
<button class="btn btn-red" id="remove-btn" style="display: none;">REMOVE BACKGROUND</button>
160+
<button class="btn btn-download" id="download-btn">DOWNLOAD HD PNG</button>
161+
</div>
42162

43163
<script>
44-
function toggleFwSubscription() {
45-
// Yeh code
46-
window.OneSignalDeferred.push(function(OneSignal) {
47-
OneSignal.Slidedown.promptPush();
48-
});
49-
}
50-
</script>
164+
const dropArea = document.getElementById('drop-area');
165+
const fileInput = document.getElementById('file-input');
166+
const previewImg = document.getElementById('preview-img');
167+
const imgWrapper = document.getElementById('img-wrapper');
168+
const removeBtn = document.getElementById('remove-btn');
169+
const downloadBtn = document.getElementById('download-btn');
170+
const scanner = document.getElementById('scanner');
171+
const status = document.getElementById('status');
172+
const warningText = document.getElementById('warning-text');
173+
174+
let originalFile = null;
175+
176+
// Click to upload
177+
dropArea.onclick = () => fileInput.click();
178+
179+
// Handle image selection
180+
fileInput.onchange = (e) => {
181+
const file = e.target.files[0];
182+
if (file) {
183+
originalFile = file;
184+
const reader = new FileReader();
185+
reader.onload = (event) => {
186+
previewImg.src = event.target.result;
187+
imgWrapper.style.display = 'block';
188+
dropArea.style.display = 'none';
189+
removeBtn.style.display = 'inline-block';
190+
downloadBtn.style.display = 'none';
191+
status.innerText = "Image Loaded. Ready to process.";
192+
warningText.style.display = 'block'; // Show warning about first time model download
193+
};
194+
reader.readAsDataURL(file);
195+
}
196+
};
51197

198+
// Process Background Removal
199+
removeBtn.onclick = async () => {
200+
if (!originalFile) return;
201+
202+
// UI Updates for processing state
203+
removeBtn.disabled = true;
204+
removeBtn.innerText = "PROCESSING AI...";
205+
scanner.style.display = 'block';
206+
status.innerHTML = "Extracting subject... <br><i>(Please don't close the browser)</i>";
207+
208+
try {
209+
// This is where the magic happens using img.ly library
210+
const imageBlob = await imglyRemoveBackground(originalFile);
211+
212+
// Convert result to URL and show it
213+
const url = URL.createObjectURL(imageBlob);
214+
previewImg.src = url;
215+
216+
// Reset UI for success
217+
scanner.style.display = 'none';
218+
removeBtn.style.display = 'none';
219+
downloadBtn.style.display = 'inline-block';
220+
status.innerText = "Background Removed Successfully!";
221+
warningText.style.display = 'none';
222+
223+
} catch (error) {
224+
console.error("Error removing background:", error);
225+
status.innerText = "Error: Could not process image. Try a different one.";
226+
scanner.style.display = 'none';
227+
removeBtn.disabled = false;
228+
removeBtn.innerText = "TRY AGAIN";
229+
}
230+
};
231+
232+
// Download the processed transparent PNG
233+
downloadBtn.onclick = () => {
234+
const link = document.createElement('a');
235+
link.download = 'NothingSpace-Transparent.png';
236+
link.href = previewImg.src;
237+
link.click();
238+
};
239+
</script>
52240
</body>
53241
</html>

0 commit comments

Comments
 (0)