lcameron/anzic-code-locator-wizard
0
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>Western Sydney Infrastructure Supply Chain</title>7<script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>11 <style>12 .vanta-bg {13 position: fixed;14 top: 0;15 left: 0;16 width: 100%;17 height: 100%;18 z-index: -1;19 opacity: 0.3;20 }21 .gradient-text {22 background: linear-gradient(90deg, #003366, #0066cc);23 -webkit-background-clip: text;24 background-clip: text;25 color: transparent;26 }27.card-hover {28 transition: all 0.3s ease;29 }30 .card-hover:hover {31 transform: translateY(-5px);32 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);33 }34 </style>35</head>36<body class="bg-gray-50">37 <div id="vanta-bg" class="vanta-bg"></div>38 39 <div class="container mx-auto px-4 py-12">40 <!-- Navigation -->41 <nav class="flex justify-end mb-12">42 <div class="flex space-x-6">43 <a href="index.html" class="text-gray-600 hover:text-indigo-600">Home</a>44 <a href="results.html" class="text-gray-600 hover:text-indigo-600">Search</a>45 <a href="register.html" class="text-indigo-600 font-medium">Register/Update</a>46 </div>47 </nav>48 49 <!-- Header -->50 <header class="text-center mb-12">51<h1 class="text-5xl font-bold mb-4 gradient-text">Western Sydney Infrastructure Supply Chain</h1>52 <p class="text-xl text-gray-600 max-w-2xl mx-auto">53 Connecting infrastructure projects with Western Sydney businesses54 </p>55</header>56 <!-- Search Section -->57 <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-16 card-hover">58 <div class="space-y-6">59 <div>60 <label for="service" class="block text-sm font-medium text-gray-700 mb-1">Service Offering</label>61 <div class="relative">62 <input type="text" id="service" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600" placeholder="e.g. Civil construction, Traffic management, Asphalt laying">63<i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>64 </div>65 </div>66 <div>67 <label for="anzic-group" class="block text-sm font-medium text-gray-700 mb-1">ANZIC Group</label>68 <select id="service-category" class="w-full pl-4 pr-10 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 hovered-element" size="1">69<option value="">All Service Categories</option>70 <option value="civil">Civil Construction</option>71 <option value="structural">Structural Engineering</option>72 <option value="traffic">Traffic Management</option>73 <option value="asphalt">Asphalt Services</option>74 <option value="earthworks">Earthworks & Excavation</option>75 <option value="utilities">Utilities Installation</option>76 <option value="drainage">Drainage & Water Management</option>77 <option value="landscaping">Landscaping & Rehabilitation</option>78 <option value="surveying">Surveying & Site Analysis</option>79 <option value="concrete">Concrete Services</option>80 <option value="electrical">Electrical Infrastructure</option>81 <option value="mechanical">Mechanical Services</option>82 <option value="safety">Workplace Health & Safety</option>83 <option value="environmental">Environmental Services</option>84 <option value="project">Project Management</option>85 <option value="materials">Materials Supply</option>86 <option value="equipment">Equipment Hire</option>87 <option value="testing">Materials Testing</option>88 <option value="signage">Signage & Line Marking</option>89 <option value="fencing">Fencing & Hoarding</option>90 </select>91</div>92 <button class="w-full bg-blue-700 hover:bg-blue-800 text-white px-6 py-3 rounded-lg font-medium transition-colors">93Find Businesses94 </button>95 </div>96 </div>97<!-- Results Section -->98 <div class="max-w-3xl mx-auto">99 <h2 class="text-2xl font-semibold mb-6 text-gray-800">Recent Searches</h2>100 101 <div class="grid gap-6">102 <!-- Sample Result Card 1 -->103 <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover">104 <div class="flex flex-col md:flex-row md:items-center md:justify-between">105 <div>106 <h3 class="text-xl font-semibold text-gray-800 mb-1">4M Construction Pty Ltd</h3>107 <p class="text-gray-600 mb-2">ABN: 95 145 691 274</p>108 <span class="inline-block bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded-full">ANZIC: 3221 - Structural Steel Construction</span>109 </div>110 <div class="mt-4 md:mt-0">111 <button class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">112 <i data-feather="download" class="w-4 h-4 mr-1"></i>113 Export114 </button>115 </div>116 </div>117 </div>118 119 <!-- Sample Result Card 2 -->120 <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover">121 <div class="flex flex-col md:flex-row md:items-center md:justify-between">122 <div>123 <h3 class="text-xl font-semibold text-gray-800 mb-1">AAA Traffic Control Pty Ltd</h3>124 <p class="text-gray-600 mb-2">ABN: 53 648 829 994</p>125 <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2.5 py-0.5 rounded-full">ANZIC: 7729 - Other Road Transport Support Services</span>126 </div>127 <div class="mt-4 md:mt-0">128 <button class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">129 <i data-feather="download" class="w-4 h-4 mr-1"></i>130 Export131 </button>132 </div>133 </div>134 </div>135 </div>136 </div>137 138 <!-- Features Section -->139 <div class="max-w-7xl mx-auto mt-24">140 <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Powerful Features</h2>141 142 <div class="grid md:grid-cols-3 gap-8">143 <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">144 <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">145 <i data-feather="zap" class="text-indigo-600 w-8 h-8"></i>146 </div>147 <h3 class="text-xl font-semibold mb-2 text-gray-800">Instant Results</h3>148 <p class="text-gray-600">Get ANZIC codes instantly by searching ABNs or company names from our comprehensive database.</p>149 </div>150 151 <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">152 <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">153 <i data-feather="download" class="text-green-600 w-8 h-8"></i>154 </div>155 <h3 class="text-xl font-semibold mb-2 text-gray-800">Export Data</h3>156 <p class="text-gray-600">Download complete datasets in CSV, Excel or PDF formats for your records and reporting needs.</p>157 </div>158 159 <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">160 <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">161 <i data-feather="refresh-cw" class="text-purple-600 w-8 h-8"></i>162 </div>163 <h3 class="text-xl font-semibold mb-2 text-gray-800">Always Updated</h3>164 <p class="text-gray-600">Our database is continuously updated with the latest ANZIC classifications and company information.</p>165 </div>166 </div>167 </div>168 </div>169 170 <!-- Footer -->171 <footer class="bg-gray-800 text-white py-12 mt-24">172 <div class="container mx-auto px-4">173 <div class="flex flex-col md:flex-row justify-between items-center">174 <div class="mb-6 md:mb-0">175 <h2 class="text-2xl font-bold mb-2">Western Sydney Infrastructure Supply Chain</h2>176 <p class="text-gray-400">Connecting projects with local suppliers</p>177 </div>178 <a href="register.html" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">179 Register Your Business180 </a>181<div class="flex space-x-6">182 <a href="#" class="text-gray-400 hover:text-white transition-colors">183 <i data-feather="github" class="w-6 h-6"></i>184 </a>185 <a href="#" class="text-gray-400 hover:text-white transition-colors">186 <i data-feather="twitter" class="w-6 h-6"></i>187 </a>188 <a href="#" class="text-gray-400 hover:text-white transition-colors">189 <i data-feather="linkedin" class="w-6 h-6"></i>190 </a>191 </div>192 </div>193 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">194 <p>© 2023 ANZIC Code Wizard. All rights reserved.</p>195 </div>196 </div>197 </footer>198 199 <script>200 feather.replace();201 VANTA.GLOBE({202 el: "#vanta-bg",203 mouseControls: true,204 touchControls: true,205 gyroControls: false,206 minHeight: 200.00,207 minWidth: 200.00,208 scale: 1.00,209 scaleMobile: 1.00,210 color: 0x4f46e5211 });212 // Search functionality213 document.querySelector('button').addEventListener('click', function() {214 const serviceValue = document.getElementById('service').value.trim();215 const categoryValue = document.getElementById('service-category').value;216 217 if(serviceValue || categoryValue) {218 // Redirect to results page with search parameters219 let url = 'results.html?';220 if(serviceValue) url += `service=${encodeURIComponent(serviceValue)}`;221 if(categoryValue) url += `${serviceValue ? '&' : ''}category=${categoryValue}`;222window.location.href = url;223 } else {224 alert('Please enter a service offering or select a service category');225}226 });227</script>228</body>229</html>230