Spaces:
Running
Running
• I want to create a tool for estimating the cost of buildings, renovations, flats and similar projects. However, only using eco-friendly hempcrete technology. It is important that I can enter various data, e.g. the floor area of the building, the amount of materials needed, the prices of specific materials, the quantity of materials, the workforce and other important elements. Then I can make a comprehensive estimate. Add other necessary guidelines based on solutions from other construction companies. I would like to be able to add local llm models to help with data collection. The entire project is ultimately intended to be local.
Browse files- README.md +8 -5
- index.html +356 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: HempCost Estimator Pro 🌿
|
| 3 |
+
colorFrom: red
|
| 4 |
+
colorTo: purple
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,357 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>HempCost Estimator Pro - Eco-Friendly Construction Calculator</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
|
| 12 |
+
<style>
|
| 13 |
+
.custom-scrollbar::-webkit-scrollbar {
|
| 14 |
+
width: 6px;
|
| 15 |
+
}
|
| 16 |
+
.custom-scrollbar::-webkit-scrollbar-track {
|
| 17 |
+
background: #f1f5f9;
|
| 18 |
+
}
|
| 19 |
+
.custom-scrollbar::-webkit-scrollbar-thumb {
|
| 20 |
+
background: #cbd5e1;
|
| 21 |
+
border-radius: 3px;
|
| 22 |
+
}
|
| 23 |
+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
| 24 |
+
background: #94a3b8;
|
| 25 |
+
}
|
| 26 |
+
.animate-float {
|
| 27 |
+
animation: float 6s ease-in-out infinite;
|
| 28 |
+
}
|
| 29 |
+
@keyframes float {
|
| 30 |
+
0% { transform: translateY(0px); }
|
| 31 |
+
50% { transform: translateY(-10px); }
|
| 32 |
+
100% { transform: translateY(0px); }
|
| 33 |
+
}
|
| 34 |
+
</style>
|
| 35 |
+
</head>
|
| 36 |
+
<body class="bg-gradient-to-br from-emerald-50 to-green-50 min-h-screen">
|
| 37 |
+
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
|
| 38 |
+
|
| 39 |
+
<div class="relative z-10">
|
| 40 |
+
<!-- Header -->
|
| 41 |
+
<header class="bg-white/80 backdrop-blur-sm border-b border-emerald-100 sticky top-0 z-50">
|
| 42 |
+
<div class="container mx-auto px-4 py-4">
|
| 43 |
+
<div class="flex items-center justify-between">
|
| 44 |
+
<div class="flex items-center space-x-2">
|
| 45 |
+
<i data-feather="leaf" class="text-emerald-600"></i>
|
| 46 |
+
<h1 class="text-2xl font-bold text-emerald-800">HempCost Estimator Pro</h1>
|
| 47 |
+
</div>
|
| 48 |
+
<nav class="hidden md:flex space-x-6">
|
| 49 |
+
<a href="#" class="text-emerald-700 hover:text-emerald-900 font-medium">Calculator</a>
|
| 50 |
+
<a href="#" class="text-emerald-700 hover:text-emerald-900 font-medium">Materials</a>
|
| 51 |
+
<a href="#" class="text-emerald-700 hover:text-emerald-900 font-medium">Projects</a>
|
| 52 |
+
<a href="#" class="text-emerald-700 hover:text-emerald-900 font-medium">AI Assistant</a>
|
| 53 |
+
</nav>
|
| 54 |
+
<button class="md:hidden">
|
| 55 |
+
<i data-feather="menu" class="text-emerald-700"></i>
|
| 56 |
+
</button>
|
| 57 |
+
</div>
|
| 58 |
+
</div>
|
| 59 |
+
</header>
|
| 60 |
+
|
| 61 |
+
<!-- Hero Section -->
|
| 62 |
+
<section class="py-16 px-4">
|
| 63 |
+
<div class="container mx-auto max-w-6xl">
|
| 64 |
+
<div class="text-center mb-12">
|
| 65 |
+
<h2 class="text-4xl md:text-5xl font-bold text-emerald-900 mb-4">Sustainable Construction Cost Estimation</h2>
|
| 66 |
+
<p class="text-xl text-emerald-700 max-w-3xl mx-auto">Calculate your hempcrete project costs with precision and eco-conscious intelligence</p>
|
| 67 |
+
</div>
|
| 68 |
+
|
| 69 |
+
<!-- Calculator Form -->
|
| 70 |
+
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
|
| 71 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 72 |
+
<!-- Project Details -->
|
| 73 |
+
<div>
|
| 74 |
+
<h3 class="text-2xl font-semibold text-emerald-800 mb-6 flex items-center">
|
| 75 |
+
<i data-feather="clipboard" class="mr-2"></i>
|
| 76 |
+
Project Information
|
| 77 |
+
</h3>
|
| 78 |
+
|
| 79 |
+
<div class="space-y-4">
|
| 80 |
+
<div>
|
| 81 |
+
<label class="block text-sm font-medium text-emerald-700 mb-2">Project Type</label>
|
| 82 |
+
<select class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
|
| 83 |
+
<option>New Building</option>
|
| 84 |
+
<option>Renovation</option>
|
| 85 |
+
<option>Flat/Appartment</option>
|
| 86 |
+
<option>Extension</option>
|
| 87 |
+
<option>Commercial Space</option>
|
| 88 |
+
</select>
|
| 89 |
+
</div>
|
| 90 |
+
|
| 91 |
+
<div>
|
| 92 |
+
<label class="block text-sm font-medium text-emerald-700 mb-2">Total Floor Area (m²)</label>
|
| 93 |
+
<input type="number" placeholder="Enter area" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
|
| 94 |
+
</div>
|
| 95 |
+
|
| 96 |
+
<div>
|
| 97 |
+
<label class="block text-sm font-medium text-emerald-700 mb-2">Number of Floors</label>
|
| 98 |
+
<input type="number" placeholder="Enter number" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
|
| 99 |
+
</div>
|
| 100 |
+
|
| 101 |
+
<div>
|
| 102 |
+
<label class="block text-sm font-medium text-emerald-700 mb-2">Location/Region</label>
|
| 103 |
+
<input type="text" placeholder="Enter location" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
|
| 108 |
+
<!-- Material Costs -->
|
| 109 |
+
<div>
|
| 110 |
+
<h3 class="text-2xl font-semibold text-emerald-800 mb-6 flex items-center">
|
| 111 |
+
<i data-feather="package" class="mr-2"></i>
|
| 112 |
+
Material Costs
|
| 113 |
+
</h3>
|
| 114 |
+
|
| 115 |
+
<div class="space-y-4">
|
| 116 |
+
<div>
|
| 117 |
+
<label class="block text-sm font-medium text-emerald-700 mb-2">Hempcrete Quantity (m³)</label>
|
| 118 |
+
<input type="number" placeholder="Enter quantity" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
|
| 119 |
+
</div>
|
| 120 |
+
|
| 121 |
+
<div>
|
| 122 |
+
<label class="block text-sm font-medium text-emerald-700 mb-2">Price per m³ (€)</label>
|
| 123 |
+
<input type="number" placeholder="Enter price" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
|
| 124 |
+
</div>
|
| 125 |
+
|
| 126 |
+
<div>
|
| 127 |
+
<label class="block text-sm font-medium text-emerald-700 mb-2">Additional Materials</label>
|
| 128 |
+
<div class="space-y-2">
|
| 129 |
+
<div class="flex items-center space-x-2">
|
| 130 |
+
<input type="checkbox" class="rounded text-emerald-600">
|
| 131 |
+
<span class="text-sm">Lime binder</span>
|
| 132 |
+
</div>
|
| 133 |
+
<div class="flex items-center space-x-2">
|
| 134 |
+
<input type="checkbox" class="rounded text-emerald-600">
|
| 135 |
+
<span class="text-sm">Waterproofing</span>
|
| 136 |
+
</div>
|
| 137 |
+
<div class="flex items-center space-x-2">
|
| 138 |
+
<input type="checkbox" class="rounded text-emerald-600">
|
| 139 |
+
<span class="text-sm">Insulation</span>
|
| 140 |
+
</div>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
|
| 144 |
+
<div>
|
| 145 |
+
<label class="block text-sm font-medium text-emerald-700 mb-2">Labor Cost (€/day)</label>
|
| 146 |
+
<input type="number" placeholder="Enter daily rate" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
|
| 152 |
+
<!-- Additional Options -->
|
| 153 |
+
<div class="mt-8 border-t border-emerald-100 pt-6">
|
| 154 |
+
<h3 class="text-xl font-semibold text-emerald-800 mb-4 flex items-center">
|
| 155 |
+
<i data-feather="settings" class="mr-2"></i>
|
| 156 |
+
Additional Options
|
| 157 |
+
</h3>
|
| 158 |
+
|
| 159 |
+
<div class="grid md:grid-cols-3 gap-4">
|
| 160 |
+
<div class="flex items-center space-x-2">
|
| 161 |
+
<input type="checkbox" class="rounded text-emerald-600">
|
| 162 |
+
<span class="text-sm">Architect Fees</span>
|
| 163 |
+
</div>
|
| 164 |
+
<div class="flex items-center space-x-2">
|
| 165 |
+
<input type="checkbox" class="rounded text-emerald-600">
|
| 166 |
+
<span class="text-sm">Permits & Licenses</span>
|
| 167 |
+
</div>
|
| 168 |
+
<div class="flex items-center space-x-2">
|
| 169 |
+
<input type="checkbox" class="rounded text-emerald-600">
|
| 170 |
+
<span class="text-sm">Waste Management</span>
|
| 171 |
+
</div>
|
| 172 |
+
<div class="flex items-center space-x-2">
|
| 173 |
+
<input type="checkbox" class="rounded text-emerald-600">
|
| 174 |
+
<span class="text-sm">Transportation</span>
|
| 175 |
+
</div>
|
| 176 |
+
<div class="flex items-center space-x-2">
|
| 177 |
+
<input type="checkbox" class="rounded text-emerald-600">
|
| 178 |
+
<span class="text-sm">Equipment Rental</span>
|
| 179 |
+
</div>
|
| 180 |
+
<div class="flex items-center space-x-2">
|
| 181 |
+
<input type="checkbox" class="rounded text-emerald-600">
|
| 182 |
+
<span class="text-sm">Contingency (10%)</span>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
</div>
|
| 186 |
+
|
| 187 |
+
<!-- Calculate Button -->
|
| 188 |
+
<div class="mt-8 text-center">
|
| 189 |
+
<button class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-200 flex items-center justify-center mx-auto">
|
| 190 |
+
<i data-feather="calculator" class="mr-2"></i>
|
| 191 |
+
Calculate Estimate
|
| 192 |
+
</button>
|
| 193 |
+
</div>
|
| 194 |
+
</div>
|
| 195 |
+
|
| 196 |
+
<!-- Results Section -->
|
| 197 |
+
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mt-8 hidden" id="results-section">
|
| 198 |
+
<h3 class="text-2xl font-semibold text-emerald-800 mb-6 text-center">
|
| 199 |
+
<i data-feather="dollar-sign" class="mr-2"></i>
|
| 200 |
+
Estimated Costs
|
| 201 |
+
</h3>
|
| 202 |
+
|
| 203 |
+
<div class="grid md:grid-cols-3 gap-6">
|
| 204 |
+
<div class="text-center p-6 bg-emerald-50 rounded-xl">
|
| 205 |
+
<div class="text-3xl font-bold text-emerald-700">€24,500</div>
|
| 206 |
+
<p class="text-sm text-emerald-600 mt-2">Materials Cost</p>
|
| 207 |
+
</div>
|
| 208 |
+
<div class="text-center p-6 bg-emerald-50 rounded-xl">
|
| 209 |
+
<div class="text-3xl font-bold text-emerald-700">€15,800</div>
|
| 210 |
+
<p class="text-sm text-emerald-600 mt-2">Labor Cost</p>
|
| 211 |
+
</div>
|
| 212 |
+
<div class="text-center p-6 bg-emerald-50 rounded-xl">
|
| 213 |
+
<div class="text-3xl font-bold text-emerald-700">€42,300</div>
|
| 214 |
+
<p class="text-sm text-emerald-600 mt-2">Total Estimated</p>
|
| 215 |
+
</div>
|
| 216 |
+
</div>
|
| 217 |
+
|
| 218 |
+
<div class="mt-6 p-4 bg-emerald-100 rounded-lg">
|
| 219 |
+
<h4 class="font-semibold text-emerald-800 mb-2">Breakdown Details</h4>
|
| 220 |
+
<div class="text-sm text-emerald-700 space-y-1">
|
| 221 |
+
<p>• Hempcrete Materials: €18,200</p>
|
| 222 |
+
<p>• Additional Materials: €6,300</p>
|
| 223 |
+
<p>• Labor (45 days): €15,800</p>
|
| 224 |
+
<p>• Additional Costs: €2,000</p>
|
| 225 |
+
</div>
|
| 226 |
+
</div>
|
| 227 |
+
</div>
|
| 228 |
+
|
| 229 |
+
<!-- AI Assistant Section -->
|
| 230 |
+
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mt-8">
|
| 231 |
+
<h3 class="text-2xl font-semibold text-emerald-800 mb-6 flex items-center">
|
| 232 |
+
<i data-feather="cpu" class="mr-2"></i>
|
| 233 |
+
AI Assistant
|
| 234 |
+
</h3>
|
| 235 |
+
|
| 236 |
+
<div class="bg-emerald-50 rounded-xl p-6">
|
| 237 |
+
<div class="flex items-start space-x-4">
|
| 238 |
+
<div class="bg-emerald-600 text-white p-3 rounded-full">
|
| 239 |
+
<i data-feather="bot" class="w-6 h-6"></i>
|
| 240 |
+
</div>
|
| 241 |
+
<div class="flex-1">
|
| 242 |
+
<p class="text-emerald-800 mb-4">I can help you optimize your hempcrete project costs. Ask me about material alternatives, local suppliers, or energy efficiency calculations.</p>
|
| 243 |
+
<div class="flex space-x-3">
|
| 244 |
+
<button class="bg-emerald-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-emerald-700 transition">
|
| 245 |
+
Local Suppliers
|
| 246 |
+
</button>
|
| 247 |
+
<button class="bg-emerald-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-emerald-700 transition">
|
| 248 |
+
Material Tips
|
| 249 |
+
</button>
|
| 250 |
+
<button class="bg-emerald-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-emerald-700 transition">
|
| 251 |
+
Energy Savings
|
| 252 |
+
</button>
|
| 253 |
+
</div>
|
| 254 |
+
</div>
|
| 255 |
+
</div>
|
| 256 |
+
</div>
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
</section>
|
| 260 |
+
|
| 261 |
+
<!-- Footer -->
|
| 262 |
+
<footer class="bg-emerald-900 text-white py-12 mt-16">
|
| 263 |
+
<div class="container mx-auto px-4">
|
| 264 |
+
<div class="grid md:grid-cols-4 gap-8">
|
| 265 |
+
<div>
|
| 266 |
+
<h4 class="font-semibold mb-4">HempCost Estimator Pro</h4>
|
| 267 |
+
<p class="text-emerald-200 text-sm">Sustainable construction cost estimation made easy with hempcrete technology.</p>
|
| 268 |
+
</div>
|
| 269 |
+
<div>
|
| 270 |
+
<h4 class="font-semibold mb-4">Features</h4>
|
| 271 |
+
<ul class="space-y-2 text-sm text-emerald-200">
|
| 272 |
+
<li><a href="#" class="hover:text-white">Cost Calculator</a></li>
|
| 273 |
+
<li><a href="#" class="hover:text-white">Material Database</a></li>
|
| 274 |
+
<li><a href="#" class="hover:text-white">Project Templates</a></li>
|
| 275 |
+
<li><a href="#" class="hover:text-white">AI Assistant</a></li>
|
| 276 |
+
</ul>
|
| 277 |
+
</div>
|
| 278 |
+
<div>
|
| 279 |
+
<h4 class="font-semibold mb-4">Resources</h4>
|
| 280 |
+
<ul class="space-y-2 text-sm text-emerald-200">
|
| 281 |
+
<li><a href="#" class="hover:text-white">Hempcrete Guide</a></li>
|
| 282 |
+
<li><a href="#" class="hover:text-white">Case Studies</a></li>
|
| 283 |
+
<li><a href="#" class="hover:text-white">Supplier Directory</a></li>
|
| 284 |
+
<li><a href="#" class="hover:text-white">API Documentation</a></li>
|
| 285 |
+
</ul>
|
| 286 |
+
</div>
|
| 287 |
+
<div>
|
| 288 |
+
<h4 class="font-semibold mb-4">Connect</h4>
|
| 289 |
+
<div class="flex space-x-4">
|
| 290 |
+
<a href="#" class="text-emerald-200 hover:text-white">
|
| 291 |
+
<i data-feather="github"></i>
|
| 292 |
+
</a>
|
| 293 |
+
<a href="#" class="text-emerald-200 hover:text-white">
|
| 294 |
+
<i data-feather="twitter"></i>
|
| 295 |
+
</a>
|
| 296 |
+
<a href="#" class="text-emerald-200 hover:text-white">
|
| 297 |
+
<i data-feather="linkedin"></i>
|
| 298 |
+
</a>
|
| 299 |
+
</div>
|
| 300 |
+
</div>
|
| 301 |
+
</div>
|
| 302 |
+
<div class="border-t border-emerald-800 mt-8 pt-8 text-center text-sm text-emerald-400">
|
| 303 |
+
<p>© 2024 HempCost Estimator Pro. Built with sustainability in mind.</p>
|
| 304 |
+
</div>
|
| 305 |
+
</div>
|
| 306 |
+
</footer>
|
| 307 |
+
</div>
|
| 308 |
+
|
| 309 |
+
<script>
|
| 310 |
+
// Initialize Vanta.js background
|
| 311 |
+
VANTA.WAVES({
|
| 312 |
+
el: "#vanta-bg",
|
| 313 |
+
mouseControls: true,
|
| 314 |
+
touchControls: true,
|
| 315 |
+
gyroControls: false,
|
| 316 |
+
minHeight: 200.00,
|
| 317 |
+
minWidth: 200.00,
|
| 318 |
+
scale: 1.00,
|
| 319 |
+
scaleMobile: 1.00,
|
| 320 |
+
color: 0x10b981,
|
| 321 |
+
shininess: 35.00,
|
| 322 |
+
waveHeight: 15.00,
|
| 323 |
+
waveSpeed: 0.75,
|
| 324 |
+
zoom: 0.85
|
| 325 |
+
});
|
| 326 |
+
|
| 327 |
+
// Initialize Feather Icons
|
| 328 |
+
feather.replace();
|
| 329 |
+
|
| 330 |
+
// Simple calculation demo
|
| 331 |
+
document.querySelector('button').addEventListener('click', function() {
|
| 332 |
+
document.getElementById('results-section').classList.remove('hidden');
|
| 333 |
+
document.getElementById('results-section').scrollIntoView({ behavior: 'smooth' });
|
| 334 |
+
});
|
| 335 |
+
|
| 336 |
+
// Local storage for project data
|
| 337 |
+
const saveProjectData = () => {
|
| 338 |
+
const formData = {
|
| 339 |
+
projectType: document.querySelector('select').value,
|
| 340 |
+
floorArea: document.querySelector('input[type="number"]').value,
|
| 341 |
+
// Add more fields as needed
|
| 342 |
+
};
|
| 343 |
+
localStorage.setItem('hempcostProject', JSON.stringify(formData));
|
| 344 |
+
};
|
| 345 |
+
|
| 346 |
+
// Load saved data if available
|
| 347 |
+
window.addEventListener('load', () => {
|
| 348 |
+
const savedData = localStorage.getItem('hempcostProject');
|
| 349 |
+
if (savedData) {
|
| 350 |
+
const data = JSON.parse(savedData);
|
| 351 |
+
// Pre-fill form fields
|
| 352 |
+
}
|
| 353 |
+
});
|
| 354 |
+
</script>
|
| 355 |
+
</body>
|
| 356 |
</html>
|
| 357 |
+
|