Spaces:

dmease
/

mortgage-mapper-pro

Running

App Files Files Community

dmease commited on Nov 21, 2025

Commit

fc12541

verified ·

1 Parent(s): 06feeee

why do you have the site twice?

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +192 -19
script.js +56 -0
style.css +57 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Mortgage Mapper Pro
-emoji: 🚀
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Mortgage Mapper Pro 🏡📊
+colorFrom: red
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,192 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mortgage Mapper Pro | HELOC vs Refi Comparison</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: '#3b82f6',
+              secondary: '#10b981'
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
+  <div class="min-h-screen">
+    <header class="bg-primary-600 text-white">
+      <div class="container mx-auto px-4 py-8">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+          <div>
+            <h1 class="text-3xl font-bold">Mortgage Mapper Pro 🏡📊</h1>
+            <p class="mt-2 opacity-90">Turn your HELOC and refinance scenarios into clean, visual insights</p>
+          </div>
+          <div class="flex items-center space-x-4">
+            <div class="flex items-center">
+              <i data-feather="moon" class="w-5 h-5"></i>
+              <span class="ml-2">Dark Mode</span>
+            </div>
+            <button id="theme-toggle" class="relative inline-flex items-center h-6 rounded-full w-11 bg-gray-200 dark:bg-gray-700">
+              <span class="sr-only">Toggle theme</span>
+              <span id="theme-toggle-ball" class="inline-block w-4 h-4 transform transition translate-x-1 dark:translate-x-6 rounded-full bg-white dark:bg-gray-300"></span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+      <section class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8">
+        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Create New Comparison</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="border-2 border-dashed border-primary-200 dark:border-primary-800 rounded-xl p-6 flex flex-col items-center justify-center transition hover:border-primary-400 cursor-pointer">
+            <i data-feather="home" class="w-12 h-12 text-primary-500"></i>
+            <h3 class="text-xl font-semibold mt-4 text-gray-800 dark:text-white">Add HELOC Option</h3>
+            <p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Compare home equity line of credit offers</p>
+          </div>
+          <div class="border-2 border-dashed border-secondary-200 dark:border-secondary-800 rounded-xl p-6 flex flex-col items-center justify-center transition hover:border-secondary-400 cursor-pointer">
+            <i data-feather="refresh-cw" class="w-12 h-12 text-secondary-500"></i>
+            <h3 class="text-xl font-semibold mt-4 text-gray-800 dark:text-white">Add Refinance Option</h3>
+            <p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Compare mortgage refinance scenarios</p>
+          </div>
+        </div>
+      </section>
+      <section class="mb-8">
+        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Quick Stats</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-primary-500">
+            <h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">HELOC First-Year Cost</h3>
+            <p class="text-2xl font-bold mt-1">—</p>
+            <p class="text-xs text-gray-400">No HELOC options</p>
+          </div>
+          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-secondary-500">
+            <h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Refi Interest Rate</h3>
+            <p class="text-2xl font-bold mt-1">—</p>
+            <p class="text-xs text-gray-400">No refi options</p>
+          </div>
+          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-secondary-500">
+            <h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Refi Monthly Savings</h3>
+            <p class="text-2xl font-bold mt-1">—</p>
+            <p class="text-xs text-gray-400">No savings calculated</p>
+          </div>
+          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-primary-500">
+            <h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Max Cash-Out</h3>
+            <p class="text-2xl font-bold mt-1">—</p>
+            <p class="text-xs text-gray-400">Add refi options</p>
+          </div>
+          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-gray-500">
+            <h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Best Option</h3>
+            <p class="text-2xl font-bold mt-1">—</p>
+            <p class="text-xs text-gray-400">Add options to compare</p>
+          </div>
+        </div>
+      </section>
+      <section class="mb-8">
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-2xl font-bold text-gray-800 dark:text-white">HELOC Options</h2>
+          <button class="btn-primary flex items-center">
+            <i data-feather="plus" class="w-4 h-4 mr-2"></i>
+            Add HELOC
+          </button>
+        </div>
+        <div class="overflow-x-auto">
+          <table class="w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow">
+            <thead class="bg-gray-100 dark:bg-gray-700">
+              <tr>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Option</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Lender</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Max Line</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Draw</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Rate</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Upfront Cost</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">1st Year Total</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+              <tr class="text-gray-600 dark:text-gray-400">
+                <td colspan="7" class="py-8 text-center">
+                  <i data-feather="alert-circle" class="w-8 h-8 mx-auto text-gray-400"></i>
+                  <p class="mt-2">No HELOC options added yet</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <section>
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Refinance Options</h2>
+          <button class="btn-secondary flex items-center">
+            <i data-feather="plus" class="w-4 h-4 mr-2"></i>
+            Add Refinance
+          </button>
+        </div>
+        <div class="overflow-x-auto">
+          <table class="w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow">
+            <thead class="bg-gray-100 dark:bg-gray-700">
+              <tr>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Option</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Lender</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Loan Amount</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Rate</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Term</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Upfront Cost</th>
+                <th class="py-3 px-4 text-left font-medium text-gray-700 dark:text-gray-300">Monthly Payment</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+              <tr class="text-gray-600 dark:text-gray-400">
+                <td colspan="7" class="py-8 text-center">
+                  <i data-feather="alert-circle" class="w-8 h-8 mx-auto text-gray-400"></i>
+                  <p class="mt-2">No refinance options added yet</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+    <footer class="bg-gray-100 dark:bg-gray-800 py-8 mt-12">
+      <div class="container mx-auto px-4">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+          <div class="mb-4 md:mb-0">
+            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Mortgage Mapper Pro</h2>
+            <p class="text-gray-600 dark:text-gray-400 mt-1">Plan your next move with clarity</p>
+          </div>
+          <div class="flex space-x-4">
+            <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400">
+              <i data-feather="github" class="w-5 h-5"></i>
+            </a>
+            <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400">
+              <i data-feather="twitter" class="w-5 h-5"></i>
+            </a>
+            <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400">
+              <i data-feather="mail" class="w-5 h-5"></i>
+            </a>
+          </div>
+        </div>
+        <div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500 dark:text-gray-400 text-sm">
+          © 2023 Mortgage Mapper Pro. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script src="script.js"></script>
+  <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,56 @@

+document.addEventListener('DOMContentLoaded', function() {
+  // Dark mode toggle functionality
+  const themeToggle = document.getElementById('theme-toggle');
+  const themeToggleBall = document.getElementById('theme-toggle-ball');
+  function toggleTheme() {
+    document.documentElement.classList.toggle('dark');
+    localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+  }
+  // Check for saved theme preference
+  if (localStorage.getItem('theme') === 'dark') {
+    document.documentElement.classList.add('dark');
+    themeToggleBall.classList.remove('translate-x-1');
+    themeToggleBall.classList.add('translate-x-6');
+  } else {
+    document.documentElement.classList.remove('dark');
+    themeToggleBall.classList.add('translate-x-1');
+    themeToggleBall.classList.remove('translate-x-6');
+  }
+  // Theme toggle event
+  themeToggle.addEventListener('click', toggleTheme);
+  // Initialize tooltips when data is added
+  function initTooltips() {
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function(tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+  }
+  // Feather icons replacement
+  feather.replace();
+  // Sample data for demonstration (would be replaced with real data in production)
+  const sampleHelocData = {
+    lender: "Example Bank",
+    maxLine: "$150,000",
+    draw: "$50,000",
+    rate: "5.25%",
+    closingCosts: "$1,200",
+    annualFee: "$75"
+  };
+  const sampleRefiData = {
+    lender: "Example Mortgage",
+    loanAmount: "$300,000",
+    rate: "4.99%",
+    term: "30 years",
+    points: "1%",
+    closingCosts: "$3,500"
+  };
+  // Would use these to populate tables when "Add" buttons are clicked
+});

style.css CHANGED Viewed

@@ -1,28 +1,67 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+:root {
+  --primary-500: #3b82f6;
+  --primary-600: #2563eb;
+  --secondary-500: #10b981;
+  --secondary-600: #059669;
+}
+* {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
 body {
+  transition: background-color 0.2s ease;
 }
+.btn-primary {
+  background-color: var(--primary-500);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
 }
+.btn-primary:hover {
+  background-color: var(--primary-600);
 }
+.btn-secondary {
+  background-color: var(--secondary-500);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
 }
+.btn-secondary:hover {
+  background-color: var(--secondary-600);
 }
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #e5e7eb;
+  }
+  .btn-primary {
+    background-color: var(--primary-600);
+  }
+  .btn-secondary {
+    background-color: var(--secondary-600);
+  }
+}
+/* Table responsive styles */
+@media (max-width: 768px) {
+  table {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}