diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..9c0e4b5 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,74 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background-color: #F8F9FA; + color: #212529; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Georgia", serif; + font-weight: 700; +} + +.navbar { + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.hero { + height: 100vh; + background-image: linear-gradient(to right, #6DD5FA, #2980B9); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: white; +} + +.hero-overlay { + background-color: rgba(0, 0, 0, 0.2); + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.hero h1 { + font-size: 4.5rem; + font-weight: 700; +} + +.hero p { + font-size: 1.5rem; + max-width: 600px; +} + +.btn-primary { + background-image: linear-gradient(to right, #6DD5FA, #2980B9); + border: none; + border-radius: 999px; + padding: 1rem 2rem; + font-weight: 600; + transition: transform 0.2s; +} + +.btn-primary:hover { + transform: scale(1.05); +} + +section { + padding: 80px 0; +} + +.card { + border: none; + border-radius: 0.5rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.2s; +} + +.card:hover { + transform: translateY(-5px); +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..db891a8 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,42 @@ + +document.addEventListener("DOMContentLoaded", function() { + // Smooth scrolling for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Fade-in animations on scroll + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('fade-in'); + } + }); + }, { threshold: 0.1 }); + + document.querySelectorAll('section').forEach(section => { + section.classList.add('fade-in-hidden'); + observer.observe(section); + }); +}); + +// Add fade-in CSS +const style = document.createElement('style'); +style.innerHTML = ` +.fade-in-hidden { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} +.fade-in { + opacity: 1; + transform: translateY(0); +} +`; +document.head.appendChild(style); diff --git a/index.php b/index.php index 7205f3d..409f0f0 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,99 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + faceAware - Real-Time Mask Detection + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+

Real-Time Mask Detection.

+

Ensuring safety and compliance with cutting-edge AI. Fast, accurate, and seamless.

+ Launch Detector +
+
+ +
+ +
+
+
+

About faceAware

+

faceAware is a smart solution designed to promote public health and safety. Using a standard webcam, our system employs advanced computer vision and a lightweight machine learning model to instantly detect whether a person is wearing a face mask.

+

Our goal is to provide a reliable, low-cost, and scalable tool for businesses, public services, and organizations to ensure compliance with health guidelines without compromising on user experience.

+
+
+
+ + +
+
+

How It Works

+
+
+
+

1. Capture

+

The system captures a real-time video stream from any standard webcam.

+
+
+
+
+

2. Analyze

+

Our AI model, powered by OpenCV and a Convolutional Neural Network (CNN), detects faces and analyzes them for the presence of a mask.

+
+
+
+
+

3. Result

+

A clear, single result ("Mask" or "No Mask") is displayed instantly. The system then resets for the next person.

+
+
+
+
+
+
+ + + + + + + +