Spam Classifier

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Spam Classifier

<!DOCTYPE html> 3D Spam Classifier

body { margin: 0; overflow: hidden; height: 100vh; width: 100vw; font-family: 'Segoe UI', sans-serif; } #overlay { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10; background: rgba(0,0,0,0.6); padding: 20px; border-radius: 12px; color: #fff; text-align: center; width: 400px; } textarea { width: 100%; height: 100px; border-radius: 8px; border: none; padding: 10px; resize: none; font-size: 14px; background: rgba(255,255,255,0.1); color: #fff; outline: none; } button { margin-top: 10px; width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; background: linear-gradient(90deg,#00ffe7,#764ba2); color: #fff; } #result { margin-top: 15px; padding: 12px; border-radius: 8px; font-weight: bold; } .spam { background: rgba(255,0,80,0.7); } .ham { background: rgba(0,200,100,0.7); }

📧 Spam Classifier

Check Email // === Spam Detection Logic === function classifyEmail() { const input = document.getElementById('emailInput').value.toLowerCase(); const spamWords = ['win','free','prize','credit','urgent','money','offer','cash','reward']; const resultDiv = document.getElementById('result'); if (input.trim() === '') { resultDiv.textContent = 'Please enter a message!'; resultDiv.className = ''; return; } let isSpam = spamWords.some(word => input.includes(word)); if (isSpam) { resultDiv.textContent = '⚠️ This is SPAM!'; resultDiv.className = 'spam'; cube.material.color.set(0xff1744); } else { resultDiv.textContent = '✅ This is NOT SPAM (HAM)'; resultDiv.className = 'ham'; cube.material.color.set(0x00ff99); } } // === Three.js Scene === const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias:true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Cube indicator (changes color with spam/ham) const geometry = new THREE.BoxGeometry(1,1,1); const material = new THREE.MeshStandardMaterial({ color:0x00ffe7, metalness:0.6, roughness:0.3 }); const cube = new THREE.Mesh(geometry, material); cube.position.z = -5; scene.add(cube); // Lights const ambient = new THREE.AmbientLight(0xffffff,0.6); scene.add(ambient); const point = new THREE.PointLight(0x00ffe7, 2, 50); point.position.set(5,5,5); scene.add(point); // Floating particles background const particlesGeometry = new THREE.BufferGeometry(); const particlesCount = 500; const posArray = new Float32Array(particlesCount*3); for(let i=0;i<particlesCount*3;i++){ posArray[i] = (Math.random()-0.5) * 20; } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray,3)); const particlesMaterial = new THREE.PointsMaterial({ size:0.05, color:0x00ffe7 }); const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particlesMesh); camera.position.z = 5; // Animate function animate(){ requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; particlesMesh.rotation.y += 0.001; renderer.render(scene,camera); } animate(); // Resize window.addEventListener('resize',()=>{ camera.aspect = window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });

Built With

• css
• html
• java