Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Your Trusted Food Testing Partner</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=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Modal styles */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0,0,0,0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: 15px; | |
| text-align: center; | |
| max-width: 400px; | |
| width: 90%; | |
| animation: modalFadeIn 0.5s ease-out; | |
| } | |
| .modal-content img { | |
| max-width: 200px; | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-content p { | |
| color: var(--primary-blue); | |
| font-size: 1.2rem; | |
| margin-top: 1rem; | |
| } | |
| @keyframes modalFadeIn { | |
| from { opacity: 0; transform: translateY(-20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| :root { | |
| --primary-blue: #104d02; | |
| --secondary-blue: #1a7a0a; | |
| --light-blue: #e6f7e3; | |
| --accent-green: #5cb85c; | |
| --white: #ffffff; | |
| --glass-white: rgba(255, 255, 255, 0.85); | |
| --glass-border: rgba(255, 255, 255, 0.3); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%235cb85c' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3Ccircle cx='12' cy='12' r='4' fill='%235cb85c'/%3E%3C/svg%3E") 12 12, auto; | |
| } | |
| a, button, input, textarea { | |
| cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%235cb85c' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3Ccircle cx='12' cy='12' r='4' fill='%235cb85c'/%3E%3C/svg%3E") 12 12, pointer; | |
| } | |
| html { | |
| position: relative; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Roboto Condensed', sans-serif; | |
| color: #333; | |
| background-color: var(--light-blue); | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| #particles-js { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| background: | |
| linear-gradient(rgba(10, 40, 90, 0.85), rgba(20, 80, 150, 0.85)), | |
| url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-attachment: fixed; | |
| } | |
| #particles-js::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| background: rgba(92, 184, 92, 0.3); | |
| animation: ripple 1.5s ease-out; | |
| pointer-events: none; | |
| opacity: 0; | |
| z-index: -1; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| z-index: 10; | |
| padding: 1rem; | |
| position: relative; | |
| } | |
| .hero { | |
| text-align: center; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| background: var(--glass-white); | |
| backdrop-filter: blur(10px); | |
| border-radius: 15px; | |
| border: 1px solid var(--glass-border); | |
| box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 1; | |
| z-index: 10; | |
| animation: float 2s ease-in-out infinite; | |
| } | |
| .hero-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| flex: 1; | |
| min-width: 200px; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(2deg); } | |
| 100% { transform: translateY(0px) rotate(0deg); } | |
| } | |
| .logo { | |
| max-width: 300px; | |
| height: auto; | |
| margin-bottom: 1.5rem; | |
| } | |
| .tagline { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| color: #555; | |
| display: inline-block; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| animation: typing 3s steps(40, end); | |
| } | |
| .subtagline { | |
| font-size: 1rem; | |
| font-weight: 400; | |
| color: #666; | |
| margin-bottom: 1.5rem; | |
| letter-spacing: 1px; | |
| } | |
| .button-group { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 2rem auto; | |
| padding: 0 1rem; | |
| } | |
| .dashboard-card { | |
| background: var(--glass-white); | |
| backdrop-filter: blur(10px); | |
| border-radius: 15px; | |
| border: 1px solid var(--glass-border); | |
| box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1); | |
| padding: 1.6rem; | |
| text-align: center; | |
| transition: transform 0.3s ease; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-between; | |
| min-height: 200px; | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| .dashboard-card:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .dashboard-card:nth-child(2) { | |
| animation-delay: 0.5s; | |
| } | |
| .dashboard-card:nth-child(3) { | |
| animation-delay: 1s; | |
| } | |
| .dashboard-card:nth-child(4) { | |
| animation-delay: 1.5s; | |
| } | |
| .dashboard-card:nth-child(5) { | |
| animation-delay: 0.25s; | |
| } | |
| .dashboard-card:nth-child(6) { | |
| animation-delay: 0.75s; | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| animation-play-state: paused; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(2deg); } | |
| 100% { transform: translateY(0px) rotate(0deg); } | |
| } | |
| .dashboard-card h3 { | |
| font-size: 1.5rem; | |
| color: var(--primary-blue); | |
| margin-bottom: 1rem; | |
| } | |
| .dashboard-card p { | |
| color: #666; | |
| margin-bottom: 1.5rem; | |
| } | |
| .accreditation-title { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| text-align: center; | |
| margin: 1.5rem auto; | |
| max-width: 800px; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.3); | |
| animation: typing 3s steps(40, end), shineText 5s infinite; | |
| opacity: 1; | |
| z-index: 10; | |
| background: linear-gradient(90deg, #ffffff, #5cb85c, #ffffff); | |
| background-size: 200% auto; | |
| color: transparent; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| } | |
| @keyframes shineText { | |
| 0% { background-position: 0% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| padding: 1rem 2.5rem; | |
| background-color: var(--primary-blue); | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 50px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| border: none; | |
| box-shadow: 0 4px 15px rgba(42, 127, 186, 0.3); | |
| width: 200px; | |
| text-align: center; | |
| } | |
| .cta-button:hover { | |
| background-color: var(--accent-green); | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 20px rgba(42, 127, 186, 0.4); | |
| } | |
| .cta-button:active { | |
| transform: translateY(1px); | |
| } | |
| .cta-button::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.2) 50%, transparent 75%); | |
| background-size: 400% 400%; | |
| animation: shine 3s infinite linear; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .cta-button:hover::after { | |
| opacity: 1; | |
| } | |
| .contact-section { | |
| width: 100%; | |
| max-width: 1000px; | |
| margin: 5rem auto; | |
| padding: 2rem; | |
| background: var(--glass-white); | |
| backdrop-filter: blur(10px); | |
| border-radius: 15px; | |
| border: 1px solid var(--glass-border); | |
| box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1); | |
| opacity: 1; | |
| z-index: 10; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| color: var(--primary-blue); | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| display: block; | |
| width: 80px; | |
| height: 3px; | |
| background-color: var(--accent-green); | |
| margin: 0.5rem auto; | |
| } | |
| .contact-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .contact-method { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .contact-icon { | |
| width: 50px; | |
| height: 50px; | |
| background-color: var(--primary-blue); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-right: 1rem; | |
| font-size: 1.2rem; | |
| transition: transform 0.3s ease; | |
| } | |
| .contact-icon:hover { | |
| transform: scale(1.1) rotate(12deg); | |
| } | |
| .contact-info h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.3rem; | |
| color: #444; | |
| } | |
| .contact-info p, .contact-info a { | |
| color: #666; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .contact-info a:hover { | |
| color: var(--primary-blue); | |
| } | |
| .contact-form { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| color: #555; | |
| font-weight: 400; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-family: 'Roboto Condensed', sans-serif; | |
| transition: all 0.3s; | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-blue); | |
| box-shadow: 0 0 0 2px rgba(42, 127, 186, 0.2); | |
| } | |
| .submit-btn { | |
| align-self: flex-start; | |
| padding: 0.8rem 2rem; | |
| background-color: var(--primary-blue); | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| font-family: 'Roboto Condensed', sans-serif; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s; | |
| } | |
| .submit-btn:hover { | |
| background-color: var(--accent-green); | |
| transform: translateY(-2px); | |
| } | |
| .footer { | |
| width: 100%; | |
| max-width: 1000px; | |
| margin: 2rem auto; | |
| padding: 1rem; | |
| background: var(--glass-white); | |
| backdrop-filter: blur(10px); | |
| border-radius: 10px; | |
| border: 1px solid var(--glass-border); | |
| box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1); | |
| text-align: center; | |
| opacity: 1; | |
| z-index: 10; | |
| animation: fadeIn 1.5s ease-out; | |
| } | |
| .footer p { | |
| font-size: 1rem; | |
| color: var(--primary-blue); | |
| font-weight: 400; | |
| display: inline-block; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| animation: typing 3s steps(40, end); | |
| } | |
| .footer p::before { | |
| content: '🔬 '; | |
| color: var(--accent-green); | |
| } | |
| .fullscreen-float { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 20px; | |
| width: 60px; | |
| height: 60px; | |
| background: var(--glass-white); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 100; | |
| box-shadow: 0 4px 16px rgba(31, 38, 135, 0.2); | |
| animation: pulse 2s infinite ease-in-out; | |
| } | |
| .fullscreen-float a { | |
| color: var(--primary-blue); | |
| font-size: 1.5rem; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .fullscreen-float:hover a { | |
| color: var(--accent-green); | |
| } | |
| .fullscreen-float:hover { | |
| transform: scale(1.1); | |
| } | |
| .whatsapp-float { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 60px; | |
| height: 60px; | |
| background: var(--glass-white); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 100; | |
| box-shadow: 0 4px 16px rgba(31, 38, 135, 0.2); | |
| animation: pulse 2s infinite ease-in-out; | |
| } | |
| .whatsapp-float a { | |
| color: var(--primary-blue); | |
| font-size: 2rem; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .whatsapp-float:hover a { | |
| color: var(--accent-green); | |
| } | |
| .whatsapp-float:hover { | |
| transform: scale(1.1); | |
| } | |
| .lab-elements { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| z-index: -10; | |
| } | |
| .lab-icon { | |
| position: absolute; | |
| opacity: 0.1; | |
| color: var(--primary-blue); | |
| } | |
| @keyframes shine { | |
| 0% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes typing { | |
| from { width: 0; } | |
| to { width: 100%; } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| @keyframes ripple { | |
| 0% { transform: scale(0); opacity: 0.5; } | |
| 100% { transform: scale(2); opacity: 0; } | |
| } | |
| @media (max-width: 768px) { | |
| .hero { padding: 1.5rem; } | |
| .logo { max-width: 200px; } | |
| .tagline, .accreditation-title { font-size: 1.2rem; } | |
| .contact-grid { grid-template-columns: 1fr; } | |
| .cta-button { width: 180px; } | |
| .whatsapp-float { width: 50px; height: 50px; } | |
| .whatsapp-float a { font-size: 1.8rem; } | |
| } | |
| @media (max-width: 480px) { | |
| .logo { max-width: 150px; } | |
| .tagline, .accreditation-title { font-size: 1rem; } | |
| .subtagline { font-size: 0.9rem; } | |
| .cta-button { padding: 0.8rem 1.5rem; font-size: 0.9rem; width: 150px; } | |
| .footer p { font-size: 0.9rem; } | |
| .whatsapp-float { width: 45px; height: 45px; } | |
| .whatsapp-float a { font-size: 1.5rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="particles-js"></div> | |
| <div class="container"> | |
| <div class="hero"> | |
| <div class="hero-content"> | |
| <img src="https://www.polucon.com/assets/front/img/65dec82909519.png" alt="Polucon Logo" class="logo"> | |
| <h2 class="tagline">Digital Boardroom Dashboard</h2> | |
| <p class="subtagline">Real-time insights at your fingertips</p> | |
| </div> | |
| </div> | |
| <div class="dashboard-grid"> | |
| <div class="dashboard-card"> | |
| <h3>Our Services</h3> | |
| <p>Explore our comprehensive services</p> | |
| <a href="#" class="cta-button">Explore</a> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3>Brochure</h3> | |
| <p>Download our company brochure</p> | |
| <a href="#" class="cta-button">Explore</a> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3>Website</h3> | |
| <p>Visit our official website</p> | |
| <a href="#" class="cta-button">Explore</a> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3>Video Presentation</h3> | |
| <p>Watch our company video</p> | |
| <a href="#" class="cta-button">Explore</a> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3>Presentation (PPT)</h3> | |
| <p>Download our company presentation</p> | |
| <a href="#" class="cta-button">Explore</a> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3>Organogram</h3> | |
| <p>View our company structure</p> | |
| <a href="#" class="cta-button">Explore</a> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="footer" style="animation: float 2s ease-in-out infinite;"> | |
| <p> © 2025 Polucon Services. All rights reserved.</p> | |
| </footer> | |
| <div class="fullscreen-float"> | |
| <a href="#" id="fullscreen-btn"> | |
| <i class="fas fa-expand"></i> | |
| </a> | |
| </div> | |
| <div class="whatsapp-float"> | |
| <a href="https://wa.me/+254700011384" target="_blank"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| <div class="lab-elements"> | |
| <!-- Lab icons will be positioned here by JavaScript --> | |
| </div> | |
| <!-- Modal Structure --> | |
| <div class="modal-overlay" id="website-modal"> | |
| <div class="modal-content"> | |
| <img src="https://www.polucon.com/assets/front/img/65dec82909519.png" alt="Polucon Logo"> | |
| <p>Redirecting to polucon.com...</p> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| particlesJS('particles-js', { | |
| "particles": { | |
| "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, | |
| "color": { "value": "#ffffff" }, | |
| "shape": { | |
| "type": ["circle", "triangle", "polygon"], | |
| "stroke": { "width": 0, "color": "#000000" }, | |
| "polygon": { "nb_sides": 6 } | |
| }, | |
| "opacity": { | |
| "value": 0.3, | |
| "random": true, | |
| "anim": { "enable": true, "speed": 1, "opacity_min": 0.1, "sync": false } | |
| }, | |
| "size": { | |
| "value": 5, | |
| "random": true, | |
| "anim": { "enable": true, "speed": 2, "size_min": 1, "sync": false } | |
| }, | |
| "line_linked": { | |
| "enable": true, | |
| "distance": 150, | |
| "color": "#ffffff", | |
| "opacity": 0.2, | |
| "width": 1 | |
| }, | |
| "move": { | |
| "enable": true, | |
| "speed": 1, | |
| "direction": "none", | |
| "random": true, | |
| "straight": false, | |
| "out_mode": "out", | |
| "bounce": false, | |
| "attract": { "enable": true, "rotateX": 600, "rotateY": 1200 } | |
| } | |
| }, | |
| "interactivity": { | |
| "detect_on": "canvas", | |
| "events": { | |
| "onhover": { "enable": true, "mode": "grab" }, | |
| "onclick": { "enable": true, "mode": "push" }, | |
| "resize": true | |
| }, | |
| "modes": { | |
| "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, | |
| "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, | |
| "repulse": { "distance": 200, "duration": 0.4 }, | |
| "push": { "particles_nb": 4 }, | |
| "remove": { "particles_nb": 2 } | |
| } | |
| }, | |
| "retina_detect": true | |
| }); | |
| const labIcons = [ | |
| 'flask', 'microscope', 'atom', 'vial', 'prescription-bottle', | |
| 'mortar-pestle', 'temperature-low', 'weight', 'chart-line' | |
| ]; | |
| const labElements = document.querySelector('.lab-elements'); | |
| for (let i = 0; i < 15; i++) { | |
| const icon = document.createElement('i'); | |
| icon.className = `fas fa-${labIcons[Math.floor(Math.random() * labIcons.length)]} lab-icon`; | |
| icon.style.left = `${Math.random() * 100}%`; | |
| icon.style.top = `${Math.random() * 100}%`; | |
| icon.style.fontSize = `${Math.random() * 30 + 20}px`; | |
| icon.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| labElements.appendChild(icon); | |
| } | |
| const particlesJs = document.getElementById('particles-js'); | |
| document.addEventListener('mousemove', function(e) { | |
| const ripple = document.createElement('div'); | |
| ripple.className = 'ripple'; | |
| ripple.style.left = `${e.pageX - 50}px`; | |
| ripple.style.top = `${e.pageY - 50}px`; | |
| ripple.style.position = 'absolute'; | |
| ripple.style.width = '100px'; | |
| ripple.style.height = '100px'; | |
| ripple.style.borderRadius = '50%'; | |
| ripple.style.background = 'rgba(92, 184, 92, 0.3)'; | |
| ripple.style.animation = 'ripple 1.5s ease-out'; | |
| ripple.style.pointerEvents = 'none'; | |
| particlesJs.appendChild(ripple); | |
| setTimeout(() => ripple.remove(), 1500); | |
| }); | |
| // Fullscreen functionality | |
| const fullscreenBtn = document.getElementById('fullscreen-btn'); | |
| fullscreenBtn.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| if (!document.fullscreenElement) { | |
| document.documentElement.requestFullscreen().catch(err => { | |
| console.error(`Error attempting to enable fullscreen: ${err.message}`); | |
| }); | |
| } else { | |
| if (document.exitFullscreen) { | |
| document.exitFullscreen(); | |
| } | |
| } | |
| }); | |
| // Handle website explore button click | |
| const websiteExploreBtn = document.querySelectorAll('.dashboard-card:nth-child(3) .cta-button'); | |
| const websiteModal = document.getElementById('website-modal'); | |
| websiteExploreBtn.forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Show modal immediately | |
| websiteModal.classList.add('active'); | |
| // Open in new tab after showing modal for 2 seconds | |
| setTimeout(() => { | |
| window.open('https://www.polucon.com', '_blank'); | |
| websiteModal.classList.remove('active'); | |
| }, 2000); | |
| }); | |
| }); | |
| }); | |
| </script> |