build-valuecurve/tools/house-predictor/index.html

54 lines
7.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="../../favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Build with AI - Data science guides, interactive tools, and insights" />
<link href="../../_app/immutable/assets/0.DxgpWi6j.css" rel="stylesheet">
<link rel="modulepreload" href="../../_app/immutable/entry/start.BwqP7o9C.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/WSjfo0Ud.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/mO2F3zLa.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/OXvvA7WZ.js">
<link rel="modulepreload" href="../../_app/immutable/entry/app.I5VArHs7.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/eH5yZvH4.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/Bh-96fzJ.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/tuD4s8Oc.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/DBQEMQMg.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/ECMuNRdJ.js">
<link rel="modulepreload" href="../../_app/immutable/nodes/0.BOu9fROT.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/EiYUD4Mm.js">
<link rel="modulepreload" href="../../_app/immutable/nodes/7.uv031Qn9.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/DhvLCtu-.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/Da-hDQCT.js">
<link rel="modulepreload" href="../../_app/immutable/chunks/CJrErHKE.js"><!--1yo8vla--><meta name="description" content="Seattle/King County house price prediction and visualization tool with ML-powered estimates."/><!----><title>House Price Predictor | Build with AI</title>
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents"><!--[--><!--[--><!----><!--[--><!----><div class="min-h-screen bg-gradient-to-b from-slate-50 to-white"><nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-transparent"><div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"><a href="/" class="flex items-center gap-2"><img src="/logo.png" alt="ValueCurve" class="h-8 w-auto"/> <span class="font-semibold text-gray-900">Build ValueCurve</span></a> <div class="flex items-center gap-6"><a href="/guides/" class="text-gray-600 hover:text-gray-900 transition-colors text-sm font-medium">Guides</a> <a href="/tools/" class="text-gray-600 hover:text-gray-900 transition-colors text-sm font-medium">Tools</a> <a href="https://www.valuecurve.ai" target="_blank" rel="noopener" class="text-gray-600 hover:text-gray-900 transition-colors text-sm font-medium">Newsletter</a> <a href="/notebooks/" class="text-gray-600 hover:text-gray-900 transition-colors text-sm font-medium">Notebooks</a></div></div></nav><!----> <main class="pt-24 pb-16 px-6"><div class="max-w-7xl mx-auto"><div class="mb-6"><a href="/tools" class="text-primary-600 hover:text-primary-700 text-sm mb-2 inline-block">← Back to Tools</a> <h1 class="text-2xl font-bold text-gray-900">House Price Predictor</h1> <p class="text-gray-600 mt-1">Seattle/King County house price prediction and visualization (21,613 houses, 2014-2015)</p></div> <!--[!--><!--[!--><div class="grid grid-cols-1 lg:grid-cols-6 gap-4"><div class="lg:col-span-1 space-y-4"><div class="bg-white rounded-xl shadow-sm p-3 border border-gray-100"><h2 class="text-sm font-semibold mb-3 flex items-center gap-1"><span>Filters</span></h2> <div class="space-y-3"><div><span class="block text-xs font-medium text-gray-700 mb-1">Price Range</span> <div class="flex gap-2"><input type="number" value="0" class="w-1/2 px-2 py-1 text-sm border rounded" placeholder="Min"/> <input type="number" value="8000000" class="w-1/2 px-2 py-1 text-sm border rounded" placeholder="Max"/></div></div> <div><span class="block text-xs font-medium text-gray-700 mb-1">Bedrooms</span> <div class="flex gap-2"><input type="number" value="0" min="0" max="10" class="w-1/2 px-2 py-1 text-sm border rounded"/> <input type="number" value="10" min="0" max="10" class="w-1/2 px-2 py-1 text-sm border rounded"/></div></div> <div><span class="block text-xs font-medium text-gray-700 mb-1">Zipcode</span> <select class="w-full px-2 py-1 text-sm border rounded"><option value="" selected>All Zipcodes</option><!--[!--><!--]--></select></div> <label class="flex items-center gap-2"><input type="checkbox" class="rounded"/> <span class="text-sm text-gray-700">Waterfront only</span></label> <button class="w-full bg-primary-600 text-white py-2 rounded-lg hover:bg-primary-700 transition-colors">Apply Filters</button></div></div> <div class="bg-white rounded-xl shadow-sm p-3 border border-gray-100"><h2 class="text-sm font-semibold mb-3 flex items-center gap-1"><span>Selection</span></h2> <div class="space-y-3"><div><span class="block text-xs font-medium text-gray-700 mb-1">Beds: 3</span> <input type="range" value="3" min="1" max="10" class="w-full"/></div> <div><span class="block text-xs font-medium text-gray-700 mb-1">Baths: 2</span> <input type="range" value="2" min="1" max="6" step="0.5" class="w-full"/></div> <div><span class="block text-xs font-medium text-gray-700 mb-1">Sqft: 2,000</span> <input type="range" value="2000" min="500" max="10000" step="100" class="w-full"/></div> <div><span class="block text-xs font-medium text-gray-700 mb-1">Age: 10yr</span> <input type="range" value="10" min="0" max="120" class="w-full"/></div></div></div></div> <div class="lg:col-span-4"><div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"><div class="flex border-b border-gray-200"><button class="flex-1 px-4 py-3 text-sm font-medium transition-colors bg-primary-50 text-primary-700 border-b-2 border-primary-600">Map View</button> <button class="flex-1 px-4 py-3 text-sm font-medium transition-colors text-gray-600 hover:bg-gray-50">Distribu
<script>
{
__sveltekit_m4hdb0 = {
base: new URL("../..", location).pathname.slice(0, -1)
};
const element = document.currentScript.parentElement;
Promise.all([
import("../../_app/immutable/entry/start.BwqP7o9C.js"),
import("../../_app/immutable/entry/app.I5VArHs7.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 7],
data: [null,null],
form: null,
error: null
});
});
}
</script>
</div>
</body>
</html>