Spaces:
Running
Running
| <html lang="en" data-mode="dark"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>RECOVER Lab — Computational Design & Resource Recovery</title> | |
| <meta name="description" content="RECOVER Lab develops computational methods to maximize resource efficiency and enable sustainable material cycles." /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <!-- LOADER --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-inner"> | |
| <div class="loader-logo">RECOVER<span>Lab</span></div> | |
| <div class="loader-bar"><div class="loader-fill" id="loaderFill"></div></div> | |
| </div> | |
| </div> | |
| <!-- NAV --> | |
| <nav id="nav"> | |
| <a href="#hero" class="nav-logo">RECOVER<span>Lab</span></a> | |
| <button class="nav-hamburger" id="hamburger" aria-label="Menu"> | |
| <span></span><span></span><span></span> | |
| </button> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#about" class="nav-link">About</a></li> | |
| <li><a href="research.html" class="nav-link">Research</a></li> | |
| <li><a href="team.html" class="nav-link">Team</a></li> | |
| <li><a href="publications.html" class="nav-link">Publications</a></li> | |
| <li><a href="news.html" class="nav-link">News</a></li> | |
| <li><a href="#contact" class="nav-link">Contact</a></li> | |
| <li><a href="#contact" class="nav-cta">Join Us</a></li> | |
| </ul> | |
| </nav> | |
| <main> | |
| <!-- HERO --> | |
| <section id="hero"> | |
| <canvas id="heroCanvas"></canvas> | |
| <div class="hero-content"> | |
| <h1 class="hero-title reveal-up delay-1"> | |
| Engineering a<br/> | |
| <span class="gradient-text">circular future</span><br/> | |
| through computation | |
| </h1> | |
| <p class="hero-sub reveal-up delay-2"> | |
| RECOVER Lab develops computational design frameworks and optimization methods to maximize resource efficiency, minimize waste, and enable sustainable material cycles at scale. | |
| </p> | |
| <div class="hero-actions reveal-up delay-3"> | |
| <a href="research.html" class="btn-glow">Explore Research</a> | |
| <a href="publications.html" class="btn-ghost">View Publications</a> | |
| </div> | |
| <div class="hero-stats reveal-up delay-4"> | |
| <div class="hero-stat" data-count="6" data-suffix=""> | |
| <span class="stat-n">0</span> | |
| <span class="stat-l">Active Projects</span> | |
| </div> | |
| <div class="hero-stat-divider"></div> | |
| <div class="hero-stat" data-count="15" data-suffix="+"> | |
| <span class="stat-n">0</span> | |
| <span class="stat-l">Publications</span> | |
| </div> | |
| <div class="hero-stat-divider"></div> | |
| <div class="hero-stat" data-count="4" data-suffix="+"> | |
| <span class="stat-n">0</span> | |
| <span class="stat-l">Core Research Areas</span> | |
| </div> | |
| <div class="hero-stat-divider"></div> | |
| <div class="hero-stat" data-count="4" data-suffix=""> | |
| <span class="stat-n">0</span> | |
| <span class="stat-l">Team Members</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero-scroll-hint"> | |
| <span>Scroll</span> | |
| <div class="scroll-line"></div> | |
| </div> | |
| </section> | |
| <section id="gallery"> | |
| <div class="container"> | |
| <div class="section-header centered"> | |
| <div class="section-eyebrow reveal-up">Lab Gallery</div> | |
| <h2 class="section-title reveal-up delay-1">Snapshots from the Lab</h2> | |
| </div> | |
| <div class="carousel js-carousel reveal-up delay-2" id="labCarousel" data-interval="5000"> | |
| <button class="carousel-btn carousel-prev" type="button" aria-label="Previous slide">←</button> | |
| <div class="carousel-viewport"> | |
| <div class="carousel-track"> | |
| <article class="carousel-slide"> | |
| <div class="carousel-media"> | |
| <img src="images/carosal/slide-1.jpg" alt="RECOVER Lab research activity" class="carousel-image" /> | |
| <div class="carousel-fallback">Add `images/carosal/slide-1.jpg`</div> | |
| </div> | |
| </article> | |
| <article class="carousel-slide"> | |
| <div class="carousel-media"> | |
| <img src="images/carosal/slide-2.jpg" alt="RECOVER Lab team or equipment" class="carousel-image" /> | |
| <div class="carousel-fallback">Add `images/carosal/slide-2.jpg`</div> | |
| </div> | |
| </article> | |
| <article class="carousel-slide"> | |
| <div class="carousel-media"> | |
| <img src="images/carosal/slide-3.jpg" alt="RECOVER Lab results or outreach" class="carousel-image" /> | |
| <div class="carousel-fallback">Add `images/carosal/slide-3.jpg`</div> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| <button class="carousel-btn carousel-next" type="button" aria-label="Next slide">→</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ABOUT --> | |
| <section id="about"> | |
| <div class="container"> | |
| <div class="about-grid"> | |
| <div class="about-left"> | |
| <div class="section-eyebrow reveal-left">About the Lab</div> | |
| <h2 class="section-title reveal-left delay-1"> | |
| Where computation<br/>meets sustainability | |
| </h2> | |
| <p class="about-text reveal-left delay-2"> | |
| RECOVER Lab sits at the intersection of computational design, systems engineering, and sustainable resource management. We develop advanced methods — including optimization, machine learning, and physics-informed simulation — to design systems that recover, reuse, and regenerate materials and energy. | |
| </p> | |
| <p class="about-text reveal-left delay-3"> | |
| Our work spans the full lifecycle: from material characterization and process modeling to system-level optimization and policy analysis. We partner with industry, national labs, and government agencies to translate research into real-world impact. | |
| </p> | |
| <a href="#contact" class="btn-outline-accent reveal-left delay-4">Work with us →</a> | |
| </div> | |
| <div class="about-right"> | |
| <div class="pillars-stack"> | |
| <div class="pillar-card reveal-right delay-1"> | |
| <div class="pillar-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg> | |
| </div> | |
| <div> | |
| <div class="pillar-title">Computational Design</div> | |
| <div class="pillar-desc">Physics-informed models, topology optimization, and data-driven design of recovery systems</div> | |
| </div> | |
| </div> | |
| <div class="pillar-card reveal-right delay-2"> | |
| <div class="pillar-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg> | |
| </div> | |
| <div> | |
| <div class="pillar-title">Resource Recovery</div> | |
| <div class="pillar-desc">Critical materials, waste valorization, and circular economy strategies at industrial scale</div> | |
| </div> | |
| </div> | |
| <div class="pillar-card reveal-right delay-3"> | |
| <div class="pillar-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14M15.54 8.46a5 5 0 010 7.07M8.46 8.46a5 5 0 000 7.07"/></svg> | |
| </div> | |
| <div> | |
| <div class="pillar-title">Systems Optimization</div> | |
| <div class="pillar-desc">Multi-objective optimization of complex engineering systems under real-world uncertainty</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CONTACT --> | |
| <section id="contact"> | |
| <div class="container"> | |
| <div class="contact-grid"> | |
| <div class="contact-left"> | |
| <div class="section-eyebrow reveal-left">Let's Connect</div> | |
| <h2 class="section-title reveal-left delay-1">Get in Touch</h2> | |
| <p class="section-sub reveal-left delay-2">We welcome inquiries from prospective students, collaborators, and industry partners looking to advance sustainable systems engineering.</p> | |
| <div class="contact-details reveal-left delay-3"> | |
| <div class="cd-item"> | |
| <div class="cd-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg> | |
| </div> | |
| <div> | |
| <div class="cd-label">Location</div> | |
| <div class="cd-value">RECOVER Lab<br/>Computational Design & Resource Recovery</div> | |
| </div> | |
| </div> | |
| <div class="cd-item"> | |
| <div class="cd-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> | |
| </div> | |
| <div> | |
| <div class="cd-label">Email</div> | |
| <div class="cd-value"><a href="mailto:arunrajtpr19@gmail.com">arunrajtpr19@gmail.com</a></div> | |
| </div> | |
| </div> | |
| <div class="cd-item"> | |
| <div class="cd-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.67A2 2 0 012.18 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 8.15a16 16 0 006.94 6.94l1.52-1.52a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg> | |
| </div> | |
| <div> | |
| <div class="cd-label">Prospective Students</div> | |
| <div class="cd-value">Include your CV and a brief research statement with your inquiry</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-right reveal-right delay-2"> | |
| <form class="contact-form" id="contactForm"> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="firstName">First Name</label> | |
| <input id="firstName" name="firstName" type="text" placeholder="Jane" autocomplete="given-name" /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="lastName">Last Name</label> | |
| <input id="lastName" name="lastName" type="text" placeholder="Smith" autocomplete="family-name" /> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input id="email" name="email" type="email" placeholder="jane@university.edu" autocomplete="email" /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="inquiryType">Inquiry Type</label> | |
| <select id="inquiryType" name="inquiryType"> | |
| <option value="">Select one…</option> | |
| <option>PhD Application</option> | |
| <option>Postdoc Inquiry</option> | |
| <option>Research Collaboration</option> | |
| <option>Industry Partnership</option> | |
| <option>General Question</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Message</label> | |
| <textarea id="message" name="message" rows="5" placeholder="Tell us about yourself and your interest in RECOVER Lab…"></textarea> | |
| </div> | |
| <button type="submit" class="btn-glow full-width">Open Email Draft</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- FOOTER --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-top"> | |
| <div class="footer-brand"> | |
| <div class="footer-logo">RECOVER<span>Lab</span></div> | |
| <p class="footer-tagline">Computational Design & Resource Recovery</p> | |
| <p class="footer-affil">Circular Systems Research Initiative</p> | |
| </div> | |
| <div class="footer-nav"> | |
| <div class="fnav-col"> | |
| <div class="fnav-label">Research</div> | |
| <a href="research.html">Projects</a> | |
| <a href="publications.html">Publications</a> | |
| <a href="news.html">News</a> | |
| </div> | |
| <div class="fnav-col"> | |
| <div class="fnav-label">Lab</div> | |
| <a href="#about">About</a> | |
| <a href="team.html">Team</a> | |
| <a href="#contact">Contact</a> | |
| </div> | |
| <div class="fnav-col"> | |
| <div class="fnav-label">Connect</div> | |
| <a href="mailto:arunrajtpr19@gmail.com">Email</a> | |
| <a href="team.html">Meet the Team</a> | |
| <a href="news.html">Latest Updates</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="footer-copy">© 2026 RECOVER Lab · All rights reserved</div> | |
| <a href="#hero" class="back-top">Back to top ↑</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> | |