diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7767245 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +jules-scratch/ diff --git a/index.html b/index.html index 6ddf750..0d15690 100644 --- a/index.html +++ b/index.html @@ -3,20 +3,44 @@ - Green Building Certifications - + GreenBuild Consulting - Accelerate Your Green Building Certification + + -
-

Green Building Certifications

+
+
+ +
-
-
-

Our Certifications

-
-
-
+ +
+
- + +
+
+

© 2024 GreenBuild Consulting. All Rights Reserved.

+
+
+ + + + - \ No newline at end of file + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..3f80884 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,56 @@ +{ + "name": "app", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "playwright": "^1.56.1" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/playwright": { + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz", + "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==", + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.56.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz", + "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==", + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..be5fb7d --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "playwright": "^1.56.1" + } +} diff --git a/pages/about.html b/pages/about.html new file mode 100644 index 0000000..a5486c6 --- /dev/null +++ b/pages/about.html @@ -0,0 +1,35 @@ +
+
+

About Us

+

Driving the future of sustainable infrastructure.

+
+
+ +
+
+
+

Our Mission & Vision

+

Our mission is to empower organizations to design, build, and operate buildings that are environmentally responsible, profitable, and healthy places to live and work. We envision a future where sustainable practices are the industry standard, and every building contributes positively to the planet.

+
+
+

Meet Our Certified Experts

+
+
+ Team Member 1 +

Dr. Evelyn Reed

+

Lead Sustainability Strategist, LEED AP

+
+
+ Team Member 2 +

Ben Carter

+

Senior Energy Analyst, GRIHA CP

+
+
+ Team Member 3 +

Aisha Khan

+

Project Manager, IGBC AP

+
+
+
+
+
diff --git a/pages/contact.html b/pages/contact.html new file mode 100644 index 0000000..b78687d --- /dev/null +++ b/pages/contact.html @@ -0,0 +1,57 @@ +
+
+

Contact Us

+

Start your certification journey today.

+
+
+ +
+
+
+
+

Get a Free Consultation

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

Our Location

+ +
+
+
+
+ +
+
+

Our Accreditations

+
+ USGBC Member Logo + CII Member Logo + TERI Member Logo +
+
+
diff --git a/pages/home.html b/pages/home.html new file mode 100644 index 0000000..2a98a48 --- /dev/null +++ b/pages/home.html @@ -0,0 +1,45 @@ +
+
+
+

Accelerate Your Project to Green Building Certification

+

We help you execute your sustainability goals and achieve globally recognized Green Building Certifications.

+ Get a Project Assessment +
+
+
+ +
+
+

Our Core Services

+
+
+ Consulting Icon +

Project Consulting

+

Expert guidance from project inception to completion, ensuring you meet your sustainability targets.

+
+
+ Documentation Icon +

Documentation & Auditing

+

Meticulous management of all required paperwork and audits for a seamless certification process.

+
+
+ Certification Icon +

Certification Management

+

End-to-end handling of the certification submission with bodies like LEED, IGBC, and GRIHA.

+
+
+
+
+ +
+
+

Globally Recognized Certifications

+
+ LEED Logo + IGBC Logo + GRIHA Logo + WELL Logo +
+
+
+ diff --git a/pages/projects.html b/pages/projects.html new file mode 100644 index 0000000..18e4fb1 --- /dev/null +++ b/pages/projects.html @@ -0,0 +1,52 @@ +
+
+

Our Projects

+

Delivering certified, high-performance sustainable buildings.

+
+
+ +
+
+
+ + + + +
+
+
+ Project Alpha +
+

Corporate HQ, Metro City

+

Certification: LEED Platinum

+

Key Metric: 45% Energy Reduction

+
+
+
+ Project Beta +
+

GreenView Apartments

+

Certification: IGBC Gold

+

Key Metric: 30% Water Savings

+
+
+
+ Project Gamma +
+

Eco-Friendly Warehouse

+

Certification: GRIHA 5-Star

+

Key Metric: 90% Waste Diversion

+
+
+
+ Project Delta +
+

Tech Park Tower II

+

Certification: WELL Certified

+

Key Metric: Enhanced Air Quality

+
+
+
+
+
+ diff --git a/pages/services.html b/pages/services.html new file mode 100644 index 0000000..f82f0cb --- /dev/null +++ b/pages/services.html @@ -0,0 +1,54 @@ +
+
+

Our Services

+

Comprehensive support for your green building projects.

+
+
+ +
+
+
+

Pre-Certification Audits

+

We conduct thorough initial assessments to identify the most viable certification path for your project, evaluating everything from site selection to material sourcing. This foundational step ensures a clear roadmap and minimizes risks.

+
+
+

Design Optimization & Simulation

+

Our experts work alongside your architectural team to optimize building design for energy efficiency, water conservation, and indoor environmental quality. We use advanced simulations to predict performance and secure maximum certification credits.

+
+
+

Final Submission Support & Documentation

+

We manage the entire documentation process, compiling all necessary evidence and submitting a flawless application to the certification body. Our meticulous approach guarantees a smooth and successful review.

+
+
+
+ +
+
+

Our Certification Process

+
+
+
1
+
Assessment
+
Initial project review and goal setting.
+
+
→
+
+
2
+
Strategy
+
Develop a tailored certification roadmap.
+
+
→
+
+
3
+
Implementation
+
Guide design and construction phases.
+
+
→
+
+
4
+
Submission
+
Compile and submit all documentation.
+
+
+
+
diff --git a/script.js b/script.js deleted file mode 100644 index 38d9b7c..0000000 --- a/script.js +++ /dev/null @@ -1,30 +0,0 @@ -const certifications = [ - { - name: "LEED Platinum", - description: "LEED (Leadership in Energy and Environmental Design) is the most widely used green building rating system in the world. Platinum is the highest level of certification.", - image: "https://via.placeholder.com/150" - }, - { - name: "BREEAM Outstanding", - description: "BREEAM (Building Research Establishment Environmental Assessment Method) is a sustainability assessment method for masterplanning projects, infrastructure and buildings. Outstanding is the highest rating.", - image: "https://via.placeholder.com/150" - }, - { - name: "WELL Certified Gold", - description: "The WELL Building Standard is a performance-based system for measuring, certifying, and monitoring features of the built environment that impact human health and wellbeing.", - image: "https://via.placeholder.com/150" - } -]; - -const certGrid = document.querySelector('.cert-grid'); - -certifications.forEach(cert => { - const certElement = document.createElement('div'); - certElement.classList.add('cert'); - certElement.innerHTML = ` - ${cert.name} -

${cert.name}

-

${cert.description}

- `; - certGrid.appendChild(certElement); -}); \ No newline at end of file diff --git a/scripts/filter.js b/scripts/filter.js new file mode 100644 index 0000000..1fb671f --- /dev/null +++ b/scripts/filter.js @@ -0,0 +1,23 @@ +document.addEventListener('DOMContentLoaded', function () { + const filterButtons = document.querySelectorAll('.filter-btn'); + const projectCards = document.querySelectorAll('.project-card'); + + filterButtons.forEach(button => { + button.addEventListener('click', function () { + // Manage active button state + filterButtons.forEach(btn => btn.classList.remove('active')); + this.classList.add('active'); + + const filter = this.getAttribute('data-filter'); + + // Show/hide project cards based on filter + projectCards.forEach(card => { + if (filter === 'all' || card.getAttribute('data-category') === filter) { + card.style.display = 'block'; + } else { + card.style.display = 'none'; + } + }); + }); + }); +}); diff --git a/scripts/router.js b/scripts/router.js new file mode 100644 index 0000000..37e534b --- /dev/null +++ b/scripts/router.js @@ -0,0 +1,86 @@ +document.addEventListener('DOMContentLoaded', () => { + const mainContent = document.getElementById('main-content'); + const navLinks = document.querySelectorAll('.nav-link'); + + const routes = { + '/': 'pages/home.html', + '/services': 'pages/services.html', + '/projects': 'pages/projects.html', + '/about': 'pages/about.html', + '/contact': 'pages/contact.html', + '/index.html': 'pages/home.html', + }; + + const loadPage = async (path) => { + // Normalize the path to handle cases like '/index.html' + const normalizedPath = path === '/index.html' ? '/' : path; + const pageFile = routes[normalizedPath] || routes['/']; + + try { + const response = await fetch(pageFile); + if (!response.ok) { + throw new Error(`Page not found: ${pageFile}`); + } + const content = await response.text(); + mainContent.innerHTML = content; + + // Find and execute any scripts in the loaded content + const scripts = mainContent.querySelectorAll('script'); + scripts.forEach(script => { + const newScript = document.createElement('script'); + if (script.src) { + // Adjust relative path for scripts like ../scripts/filter.js + const src = script.getAttribute('src'); + newScript.src = src.startsWith('../') ? src.substring(3) : src; + } else { + newScript.textContent = script.textContent; + } + // Append the script to the body to execute it, then remove it. + document.body.appendChild(newScript).parentNode.removeChild(newScript); + }); + + updateActiveLink(normalizedPath); + // Dispatch a custom event to signal that the page is loaded + mainContent.dispatchEvent(new CustomEvent('page-loaded', { bubbles: true })); + + } catch (error) { + mainContent.innerHTML = '

Error loading page. Please try again.

'; + console.error('Error fetching page:', error); + } + }; + + const updateActiveLink = (path) => { + const pageName = path === '/' ? 'home' : path.substring(1); + navLinks.forEach(link => { + if (link.dataset.page === pageName) { + link.classList.add('active'); + } else { + link.classList.remove('active'); + } + }); + }; + + const navigate = (path) => { + if (window.location.pathname === path) { + return; + } + history.pushState({}, '', path); + loadPage(path); + }; + + document.body.addEventListener('click', e => { + const navLink = e.target.closest('.nav-link'); + if (navLink) { + e.preventDefault(); + const path = navLink.getAttribute('href'); + navigate(path); + } + }); + + window.addEventListener('popstate', () => { + loadPage(window.location.pathname); + }); + + // Initial page load + loadPage(window.location.pathname); +}); diff --git a/scripts/typing-animation.js b/scripts/typing-animation.js new file mode 100644 index 0000000..b3833d5 --- /dev/null +++ b/scripts/typing-animation.js @@ -0,0 +1,21 @@ +function typeWriterEffect() { + const headline = document.getElementById('hero-headline'); + if (!headline) return; + + const text = headline.textContent; + headline.textContent = ''; + let i = 0; + + function type() { + if (i < text.length) { + headline.textContent += text.charAt(i); + i++; + setTimeout(type, 50); // Adjust typing speed here (in ms) + } + } + type(); +} + +// Since content is loaded dynamically, we need to ensure the script runs when the page is visible. +// A simple way is to call it directly. The router will execute it. +typeWriterEffect(); diff --git a/style.css b/style.css deleted file mode 100644 index e5022b7..0000000 --- a/style.css +++ /dev/null @@ -1,33 +0,0 @@ -body { - font-family: sans-serif; - margin: 0; - padding: 0; -} - -header { - background-color: #4CAF50; - color: white; - text-align: center; - padding: 1em 0; -} - -main { - padding: 2em; -} - -#certs { - text-align: center; -} - -.cert-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2em; - margin-top: 2em; -} - -.cert { - border: 1px solid #ccc; - padding: 1em; - border-radius: 5px; -} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..2193c2a --- /dev/null +++ b/styles/main.css @@ -0,0 +1,304 @@ +/* General Body Styles */ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + margin: 0; + line-height: 1.6; + color: #333; + background-color: #f4f7f6; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header & Navigation */ +.header { + background-color: #fff; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + position: sticky; + top: 0; + z-index: 1000; +} + +.nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + color: #004d40; /* Deep Forest Green */ + text-decoration: none; +} + +.nav-list { + list-style: none; + display: flex; + margin: 0; + padding: 0; +} + +.nav-list li { + margin-left: 2rem; +} + +.nav-list a { + text-decoration: none; + color: #333; + font-weight: 500; + position: relative; + transition: color 0.3s ease; +} + +.nav-list a::after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: -5px; + left: 0; + background-color: #00796b; + transform-origin: bottom right; + transition: transform 0.25s ease-out; +} + +.nav-list a:hover::after, .nav-list a.active::after { + transform: scaleX(1); + transform-origin: bottom left; +} + +.nav-list a:hover, .nav-list a.active { + color: #00796b; /* Lighter Emerald Green */ +} + +/* Hero Section */ +.hero { + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://placehold.co/1920x1080/228B22/FFFFFF?text=Green+Energy'); + background-size: cover; + background-position: center; + color: #fff; + text-align: center; + padding: 8rem 0; +} + +.hero-content h1 { + font-size: 3rem; + margin-bottom: 1rem; + min-height: 90px; /* Allocate space for typing animation */ +} + +.hero-content p { + font-size: 1.2rem; + margin-bottom: 2rem; +} + +/* Buttons */ +.btn { + padding: 0.8rem 1.5rem; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + transition: all 0.2s ease-in-out; + display: inline-block; + border: none; + cursor: pointer; +} + +.btn-primary { + background-color: #00796b; + color: #fff; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); +} + +.btn-primary:hover { + background-color: #004d40; + transform: translateY(-3px); + box-shadow: 0 6px 8px rgba(0,0,0,0.15); +} + +/* Sections */ +section { + padding: 4rem 0; +} + +.page-header { + background-color: #e0f2f1; + text-align: center; + padding: 3rem 0; +} + +.page-header h1 { + margin-bottom: 0.5rem; +} + +/* Services Summary */ +.services-summary { + background-color: #fff; +} + +.services-summary h2, .trust-section h2, .accreditations h2, .process-flow h2 { + text-align: center; + margin-bottom: 3rem; + font-size: 2rem; +} + +.service-blocks { + display: flex; + justify-content: space-around; + text-align: center; +} + +.service-block { + flex-basis: 30%; +} + +.service-block img { + margin-bottom: 1rem; + border-radius: 50%; +} + +/* Trust Section */ +.trust-section .logos, .accreditations .logos { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + flex-wrap: wrap; +} + +/* Footer */ +.footer { + background-color: #004d40; + color: #fff; + text-align: center; + padding: 1.5rem 0; +} + +/* Services Page */ +.service-details .service-item { + background: #fff; + padding: 2rem; + margin-bottom: 2rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0,0,0,0.05); +} + +.process-flow .flow-diagram { + display: flex; + justify-content: space-around; + align-items: center; +} + +.flow-step { + text-align: center; +} +.flow-step-number { + width: 50px; + height: 50px; + background-color: #00796b; + color: white; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5rem; + margin: 0 auto 1rem; +} +.flow-arrow { + font-size: 2rem; + color: #00796b; +} + +/* Projects Page */ +.filter-buttons { + text-align: center; + margin-bottom: 2rem; +} +.filter-btn { + background: #e0e0e0; + color: #333; + margin: 0 0.5rem; +} +.filter-btn.active { + background: #00796b; + color: white; +} +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} +.project-card { + background: #fff; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} +.project-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 12px rgba(0,0,0,0.15); +} +.project-card img { + width: 100%; + display: block; +} +.project-card .card-content { + padding: 1.5rem; +} + +/* About Page */ +.about-section { + margin-bottom: 3rem; +} +.team-section .team-members { + display: flex; + justify-content: space-around; + text-align: center; +} + +/* Contact Page */ +.contact-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: flex-start; +} +.contact-form form .form-group { + margin-bottom: 1.5rem; +} +.contact-form label { + display: block; + margin-bottom: 0.5rem; +} +.contact-form input, .contact-form textarea { + width: 100%; + padding: 0.8rem; + border: 1px solid #ccc; + border-radius: 5px; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-list { + display: none; /* Simple hiding for now, can be replaced with a burger menu */ + } + .service-blocks, .team-members, .flow-diagram { + flex-direction: column; + align-items: center; + gap: 2rem; + } + .contact-container { + grid-template-columns: 1fr; + } + .hero-content h1 { + font-size: 2.5rem; + min-height: 120px; + } +}