index.html (5630B)
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <meta name="description" content=""> 8 <meta name="author" content=""> 9 <link rel="icon" href="img/favicon.ico"> 10 11 <title>circu_hub</title> 12 13 <link href="css/style.css" rel="stylesheet"> 14 <link href="css/header.css" rel="stylesheet"> 15 </head> 16 17 <body> 18 <header> 19 <a href="index.html"> 20 <h1 id="title">CIRCU-HUB <span id="subtitle">nederland</span></h1> 21 </a> 22 <!-- spacing --> 23 <span id="links"> 24 <a href="#">Grondstoffenaanbod</a> 25 <a href="#">Over CIRCU-HUB</a> 26 <a href="#">Contact</a> 27 <a href="preferences.html" id="login">Inloggen</a> 28 </span> 29 </header> 30 <main> 31 <div id="sidebar"> 32 <table> 33 <form> 34 <tr> 35 <td colspan="2"> 36 <h2>Zoeken:</h2> 37 </td> 38 </tr> 39 <tr> 40 <td>Grondstof:</td> 41 <td><input type="entry" id="resource" /></td> 42 </tr> 43 <tr> 44 <td>Provincie:</td> 45 <td><select id="province"> 46 <option>-- selecteer iets --</option> 47 <option>Drenthe</option> 48 <option>Flevoland</option> 49 <option>Friesland</option> 50 <option>Gelderland</option> 51 <option>Groningen</option> 52 <option>Limburg</option> 53 <option>Noord-Brabant</option> 54 <option>Noord-Holland</option> 55 <option>Overijsel</option> 56 <option>Utrecht</option> 57 <option>Zeeland</option> 58 <option>Zuid-Holland</option> 59 </select></td> 60 </tr> 61 <tr> 62 <td>Postcode:</td> 63 <td><input type="entry" id="zipcode" /></td> 64 </tr> 65 <tr> 66 <td>Afstand tot</td> 67 <td><input type="range" id="zipcode-range" min="0" max="100" value="25" /></td> 68 </tr> 69 <tr> 70 <td></td> 71 <td><span id="zipcode-view">25km</span></td> 72 </tr> 73 <tr> 74 <td>Duurzaam?</td> 75 <td><input type="checkbox" id="is-sustainable" /></td> 76 </tr> 77 <tr> 78 <td>Is Pilot?</td> 79 <td><input type="checkbox" id="is-pilot" /></td> 80 </tr> 81 <tr> 82 <td></td> 83 <td><input type="submit" value="Zoeken" /></td> 84 </tr> 85 </form> 86 </table> 87 </div> 88 <div id="results"> 89 </div> 90 </main> 91 92 <script type="text/javascript"> 93 const muncipalities = [ 94 "aa-en-hunze.png", 95 "assen.png", 96 "border-odoorn.png", 97 "coevorden.png", 98 "de-wolden.png", 99 "eemsdelta.png", 100 "emmen.png", 101 "groningen.png", 102 "het-hogeland.png", 103 "meppel.png", 104 "midden-drenthe.png", 105 "midden-groningen.png", 106 "noordenveld.png", 107 "oldambt.png", 108 "pekela.png", 109 "stadskanaal.png", 110 "tynaarlo.png", 111 "veendam.png", 112 "westerkwartier.png", 113 "westerveld.png", 114 "westerwolde.png", 115 ]; 116 117 const resources = [ 118 { type: "Groente-Fruit-Tuin", category: "Natuurafval" }, 119 { type: "Plasic-Metaal-Drankverpakkingen", category: "Productiematerieel" }, 120 { type: "Papier", category: "Productiematerieel" }, 121 { type: "Klein Chemisch Afval", category: "Chemisch Afval" }, 122 { type: "Textiel", category: "Textiel" }, 123 { type: "Wit- en Bruingoed", category: "Electronica" }, 124 { type: "Restafval", category: "Restafval" }, 125 { type: "Gips", category: "Bouw- en Sloop" }, 126 { type: "Piepschuim", category: "Bouw- en Sloop" }, 127 ]; 128 129 let resultElement = document.getElementById("results"); 130 131 for (let img of muncipalities) { 132 let type = Math.floor(Math.random() * resources.length); 133 let html = `<div onclick='window.location.href="portfolio.html"' class="resource ${Math.random() > 0.7 ? 'substainable' : 'non-substainable'}">\n`; 134 if (resources[type].category != resources[type].type) 135 html += `<span>${resources[type].category} →</span>\n`; 136 else 137 html += '<span></span>' 138 html += `<p>${resources[type].type}</p><img src="img/${img}" />\n`; 139 html += `</div>\n`; 140 141 resultElement.innerHTML += html; 142 } 143 144 document.querySelector("#zipcode-range").addEventListener("input", (e) => { 145 let val = e.target.value; 146 document.querySelector("#zipcode-view").innerHTML = val + "km"; 147 }); 148 </script> 149 </body> 150 151 </html>