Spaces:
Running
Running
Promote version 498c408 to main
Browse filesPromoted commit 498c4087193dfe4177f89e9015614d87eda84a67 to main branch
- index.html +4 -19
- script.js +3 -19
index.html
CHANGED
|
@@ -22,28 +22,13 @@
|
|
| 22 |
pointer-events: none;
|
| 23 |
}
|
| 24 |
.hero-background {
|
| 25 |
-
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4))
|
| 26 |
-
|
| 27 |
-
overflow: hidden;
|
| 28 |
-
}
|
| 29 |
-
.hero-background::before {
|
| 30 |
-
content: '';
|
| 31 |
-
position: absolute;
|
| 32 |
-
top: 0;
|
| 33 |
-
left: 0;
|
| 34 |
-
right: 0;
|
| 35 |
-
bottom: 0;
|
| 36 |
-
background-image: url('https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/the-world-of-the-semiconductor-cleanroom.jpg');
|
| 37 |
background-size: cover;
|
| 38 |
background-position: center;
|
| 39 |
background-attachment: fixed;
|
| 40 |
-
transition: opacity 0.8s ease-in-out;
|
| 41 |
-
opacity: 0;
|
| 42 |
-
}
|
| 43 |
-
.hero-background.loaded::before {
|
| 44 |
-
opacity: 1;
|
| 45 |
}
|
| 46 |
-
.grid-pattern {
|
| 47 |
background-image: linear-gradient(rgba(255,102,0,0.05) 1px, transparent 1px),
|
| 48 |
linear-gradient(90deg, rgba(255,102,0,0.05) 1px, transparent 1px);
|
| 49 |
background-size: 50px 50px;
|
|
@@ -52,7 +37,7 @@
|
|
| 52 |
</head>
|
| 53 |
<body class="bg-white text-gray-800 font-poppins">
|
| 54 |
<custom-navbar></custom-navbar>
|
| 55 |
-
|
| 56 |
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden hero-background">
|
| 57 |
<div class="atom-animation" id="atomCanvas"></div>
|
| 58 |
<div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
|
|
|
|
| 22 |
pointer-events: none;
|
| 23 |
}
|
| 24 |
.hero-background {
|
| 25 |
+
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
| 26 |
+
url('https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/the-world-of-the-semiconductor-cleanroom.jpg');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
background-size: cover;
|
| 28 |
background-position: center;
|
| 29 |
background-attachment: fixed;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 30 |
}
|
| 31 |
+
.grid-pattern {
|
| 32 |
background-image: linear-gradient(rgba(255,102,0,0.05) 1px, transparent 1px),
|
| 33 |
linear-gradient(90deg, rgba(255,102,0,0.05) 1px, transparent 1px);
|
| 34 |
background-size: 50px 50px;
|
|
|
|
| 37 |
</head>
|
| 38 |
<body class="bg-white text-gray-800 font-poppins">
|
| 39 |
<custom-navbar></custom-navbar>
|
| 40 |
+
<!-- Hero Section -->
|
| 41 |
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden hero-background">
|
| 42 |
<div class="atom-animation" id="atomCanvas"></div>
|
| 43 |
<div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
|
script.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
| 1 |
// Main JavaScript file for NanoMatter Technologies
|
|
|
|
| 2 |
document.addEventListener('DOMContentLoaded', function() {
|
| 3 |
// Initialize all components and animations
|
| 4 |
-
initHeroImageLoading();
|
| 5 |
initScrollAnimations();
|
| 6 |
initFormHandling();
|
| 7 |
});
|
|
|
|
| 8 |
function initScrollAnimations() {
|
| 9 |
// Add intersection observer for scroll animations
|
| 10 |
const observerOptions = {
|
|
@@ -54,24 +55,6 @@ function initFormHandling() {
|
|
| 54 |
});
|
| 55 |
}
|
| 56 |
}
|
| 57 |
-
function initHeroImageLoading() {
|
| 58 |
-
const heroSection = document.getElementById('hero');
|
| 59 |
-
if (heroSection) {
|
| 60 |
-
const img = new Image();
|
| 61 |
-
img.src = 'https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/the-world-of-the-semiconductor-cleanroom.jpg';
|
| 62 |
-
|
| 63 |
-
img.onload = function() {
|
| 64 |
-
heroSection.classList.add('loaded');
|
| 65 |
-
};
|
| 66 |
-
|
| 67 |
-
// Fallback in case image fails to load
|
| 68 |
-
setTimeout(() => {
|
| 69 |
-
if (!heroSection.classList.contains('loaded')) {
|
| 70 |
-
heroSection.classList.add('loaded');
|
| 71 |
-
}
|
| 72 |
-
};
|
| 73 |
-
}
|
| 74 |
-
}
|
| 75 |
|
| 76 |
// Smooth scrolling for anchor links
|
| 77 |
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
@@ -86,6 +69,7 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
| 86 |
}
|
| 87 |
});
|
| 88 |
});
|
|
|
|
| 89 |
// Navbar scroll effect
|
| 90 |
window.addEventListener('scroll', function() {
|
| 91 |
const navbar = document.querySelector('custom-navbar');
|
|
|
|
| 1 |
// Main JavaScript file for NanoMatter Technologies
|
| 2 |
+
|
| 3 |
document.addEventListener('DOMContentLoaded', function() {
|
| 4 |
// Initialize all components and animations
|
|
|
|
| 5 |
initScrollAnimations();
|
| 6 |
initFormHandling();
|
| 7 |
});
|
| 8 |
+
|
| 9 |
function initScrollAnimations() {
|
| 10 |
// Add intersection observer for scroll animations
|
| 11 |
const observerOptions = {
|
|
|
|
| 55 |
});
|
| 56 |
}
|
| 57 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 58 |
|
| 59 |
// Smooth scrolling for anchor links
|
| 60 |
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
|
|
| 69 |
}
|
| 70 |
});
|
| 71 |
});
|
| 72 |
+
|
| 73 |
// Navbar scroll effect
|
| 74 |
window.addEventListener('scroll', function() {
|
| 75 |
const navbar = document.querySelector('custom-navbar');
|