Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Computer Vision | Webashlar</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="canvas-container"></div> | |
| <div class="grain-overlay"></div> | |
| <section class="hero-content"> | |
| <p class="made-by top">AI</p> | |
| <h1 class="landing-title"> | |
| Computer<br>Vision</h1> | |
| <p class="landing-subtitle"> | |
| Next-gen traffic safety with high-precision RF-DETR analytics. | |
| Real-time helmet detection and smart mobile nodes. | |
| </p> | |
| <a href="/dashboard" class="enter-btn">ENTER DASHBOARD</a> | |
| <div class="made-by bottom">MADE BY | |
| WEBASHLAR</div> | |
| </section> | |
| <script> | |
| // Simple Three.js Liquid Gradient Shader | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); | |
| const renderer = new THREE.WebGLRenderer({ alpha: true }); | |
| document.getElementById('canvas-container').appendChild(renderer.domElement); | |
| const uniforms = { | |
| u_time: { value: 0 }, | |
| u_resolution: { value: new THREE.Vector2() } | |
| }; | |
| const geometry = new THREE.PlaneGeometry(2, 2); | |
| const material = new THREE.ShaderMaterial({ | |
| uniforms: uniforms, | |
| vertexShader: ` | |
| varying vec2 vUv; | |
| void main() { | |
| vUv = uv; | |
| gl_Position = vec4(position, 1.0); | |
| } | |
| `, | |
| fragmentShader: ` | |
| uniform float u_time; | |
| uniform vec2 u_resolution; | |
| varying vec2 vUv; | |
| void main() { | |
| vec2 p = vUv * 2.0 - 1.0; | |
| p.x *= u_resolution.x / u_resolution.y; | |
| float t = u_time * 0.2; | |
| vec3 col1 = vec3(0.54, 0.36, 0.96); // #8b5cf6 | |
| vec3 col2 = vec3(0.93, 0.28, 0.60); // #ec4899 | |
| vec3 col3 = vec3(0.96, 0.25, 0.37); // #f43f5e | |
| vec3 col4 = vec3(0.98, 0.45, 0.09); // #f97316 | |
| float d1 = length(p - vec2(sin(t)*0.7, cos(t*0.7)*0.5)); | |
| float d2 = length(p - vec2(cos(t*0.8)*0.8, sin(t*0.6)*0.6)); | |
| float d3 = length(p - vec2(sin(t*1.2)*0.5, cos(t*0.4*0.8))); | |
| float v = 0.0; | |
| v += 1.0 / (1.0 + d1 * 2.0); | |
| v += 1.0 / (1.0 + d2 * 1.5); | |
| v += 1.0 / (1.0 + d3 * 2.0); | |
| vec3 color = mix(col1, col2, sin(d1 + t) * 0.5 + 0.5); | |
| color = mix(color, col3, sin(d2 - t*0.5) * 0.5 + 0.5); | |
| color = mix(color, col4, 1.0 / (1.0 + length(p) * 2.0)); | |
| gl_FragColor = vec4(color * (v * 0.5 + 0.5), 1.0); | |
| } | |
| ` | |
| }); | |
| const mesh = new THREE.Mesh(geometry, material); | |
| scene.add(mesh); | |
| function resize() { | |
| const w = window.innerWidth; | |
| const h = window.innerHeight; | |
| renderer.setSize(w, h); | |
| uniforms.u_resolution.value.set(w, h); | |
| } | |
| window.addEventListener('resize', resize); | |
| resize(); | |
| function animate(t) { | |
| uniforms.u_time.value = t * 0.001; | |
| renderer.render(scene, camera); | |
| requestAnimationFrame(animate); | |
| } | |
| requestAnimationFrame(animate); | |
| </script> | |
| </body> | |
| </html> |