FundStack-AI/qualifier.html at main · JFeimster/FundStack-AI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lead Qualifier | FundStack AI</title>
  <meta name="description" content="A funding readiness qualifier for planning, education, and partner intake support.">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/styles.css">
  <style>
    .grade-a { color: #22c55e; text-shadow: 0 0 20px rgba(34, 197, 94, 0.4); }
    .grade-b { color: #eab308; }
    .grade-f { color: #ef4444; }
  </style>
</head>
<body class="antialiased selection:bg-brand-500 selection:text-dark-900 overflow-x-hidden">
  <main class="fs-page-shell">
    <nav class="fixed w-full z-50 border-b border-white/5 bg-dark-900/90 backdrop-blur-md">
      <div class="fs-container h-16 flex items-center justify-between">
        <a href="index.html" class="font-display font-bold text-xl tracking-tight flex items-center gap-2"><span class="w-3 h-3 bg-brand-500 rounded-full"></span>FUNDSTACK<span class="text-brand-500">AI</span></a>
        <div class="hidden md:flex gap-7 text-[11px] font-bold uppercase tracking-[0.12em] text-gray-500">
          <a href="tools/index.html" class="hover:text-brand-500 transition-colors">Tools</a>
          <a href="funding/index.html" class="hover:text-brand-500 transition-colors">Funding</a>
          <a href="partners/index.html" class="hover:text-brand-500 transition-colors">Partners</a>
        </div>
        <a href="index.html#apply" class="fs-button fs-button-primary !py-2 !px-5 text-[11px]">Partner Intake</a>
      </div>
    </nav>

    <section class="pt-32 pb-20 px-6 max-w-3xl mx-auto">
      <div class="mb-10 text-center">
        <div class="fs-kicker mb-5">Readiness Snapshot</div>
        <h1 class="fs-display text-4xl md:text-6xl font-black mb-4">Lead Qualifier</h1>
        <p class="text-gray-400 leading-relaxed">Use this tool to organize a funding conversation based on revenue, time in business, credit tier, and collateral signals.</p>
      </div>

      <div id="qualifierTool" class="fs-panel p-8 md:p-12 rounded-[2rem] shadow-2xl">
        <div id="step1">
          <h3 class="font-display text-xl font-bold mb-8 flex items-center gap-4"><span class="w-8 h-8 rounded-full bg-brand-500 text-dark-900 flex items-center justify-center text-sm">1</span>Revenue & Cash Flow</h3>
          <div class="space-y-6">
            <div>
              <label class="block text-xs font-bold text-gray-500 uppercase mb-3">Avg Monthly Bank Deposits</label>
              <select id="revInput" class="w-full bg-white/5 border border-white/10 p-4 rounded-xl text-white outline-none focus:border-brand-500 transition-all">
                <option value="0">Less than $10,000</option>
                <option value="15000" selected>$15,000 - $30,000</option>
                <option value="50000">$30,000 - $100,000</option>
                <option value="150000">$100,000+</option>
              </select>
            </div>
            <div>
              <label class="block text-xs font-bold text-gray-500 uppercase mb-3">Time in Business</label>
              <select id="tibInput" class="w-full bg-white/5 border border-white/10 p-4 rounded-xl text-white outline-none focus:border-brand-500 transition-all">
                <option value="0">Startup (0-6 months)</option>
                <option value="12">6 - 24 months</option>
                <option value="24" selected>2+ Years</option>
              </select>
            </div>
            <button onclick="nextStep(2)" class="w-full bg-brand-500 text-dark-900 py-4 rounded-xl font-bold uppercase text-sm mt-4 hover:bg-white transition-all">Next Component</button>
          </div>
        </div>

        <div id="step2" class="hidden">
          <h3 class="font-display text-xl font-bold mb-8 flex items-center gap-4"><span class="w-8 h-8 rounded-full bg-brand-500 text-dark-900 flex items-center justify-center text-sm">2</span>Credit & Collateral Signals</h3>
          <div class="space-y-6">
            <div>
              <label class="block text-xs font-bold text-gray-500 uppercase mb-3">Estimated FICO Score</label>
              <select id="ficoInput" class="w-full bg-white/5 border border-white/10 p-4 rounded-xl text-white outline-none focus:border-brand-500 transition-all">
                <option value="550">Subprime (500-600)</option>
                <option value="640">Fair (600-680)</option>
                <option value="720" selected>Good (680+)</option>
              </select>
            </div>
            <div>
              <label class="block text-xs font-bold text-gray-500 uppercase mb-3">Collateral Available?</label>
              <select id="collateralInput" class="w-full bg-white/5 border border-white/10 p-4 rounded-xl text-white outline-none focus:border-brand-500 transition-all">
                <option value="none">No / unsecured profile</option>
                <option value="re">Real estate</option>
                <option value="equipment">Equipment / vehicles</option>
              </select>
            </div>
            <div class="flex gap-4">
              <button onclick="nextStep(1)" class="w-1/3 bg-white/5 text-white py-4 rounded-xl font-bold uppercase text-sm">Back</button>
              <button onclick="calculateGrade()" class="w-2/3 bg-brand-500 text-dark-900 py-4 rounded-xl font-bold uppercase text-sm hover:bg-white transition-all">Generate Snapshot</button>
            </div>
          </div>
        </div>

        <div id="result" class="hidden text-center">
          <div id="gradeChar" class="font-display text-8xl font-black mb-4">A</div>
          <h2 id="gradeTitle" class="text-2xl font-bold mb-2">Strong Review Profile</h2>
          <p id="gradeDesc" class="text-gray-400 text-sm mb-8 px-2">This profile appears organized enough for a funding-path review. Final options depend on full documentation and provider criteria.</p>
          <div class="bg-dark-900 p-6 rounded-2xl border border-white/5 text-left mb-8">
            <h4 class="text-[10px] font-bold text-brand-500 uppercase tracking-widest mb-4">Suggested Review Paths</h4>
            <ul id="routingList" class="space-y-2 text-sm text-gray-300"></ul>
          </div>
          <a href="index.html#apply" class="block w-full bg-white text-dark-900 py-4 rounded-xl font-bold uppercase text-sm">Request Partner Review</a>
          <button onclick="location.reload()" class="mt-4 text-xs font-bold text-gray-500 uppercase tracking-widest hover:text-white">Restart Snapshot</button>
        </div>
      </div>
      <div class="fs-disclaimer mt-8">This tool is for planning and education only. It does not guarantee approval, funding, terms, rates, amounts, or timing. Actual options depend on business profile, documentation, underwriting review, and provider criteria.</div>
    </section>
  </main>

  <script>
    function nextStep(n) {
      document.getElementById('step1').classList.add('hidden');
      document.getElementById('step2').classList.add('hidden');
      document.getElementById('result').classList.add('hidden');
      document.getElementById('step' + n).classList.remove('hidden');
    }

    function calculateGrade() {
      const rev = parseInt(document.getElementById('revInput').value);
      const tib = parseInt(document.getElementById('tibInput').value);
      const fico = parseInt(document.getElementById('ficoInput').value);
      const collateral = document.getElementById('collateralInput').value;
      let score = 0;
      if (rev >= 15000) score += 2;
      if (rev >= 50000) score += 1;
      if (tib >= 24) score += 2;
      if (fico >= 680) score += 2;
      if (collateral !== 'none') score += 2;

      const gradeChar = document.getElementById('gradeChar');
      const gradeTitle = document.getElementById('gradeTitle');
      const gradeDesc = document.getElementById('gradeDesc');
      const routingList = document.getElementById('routingList');
      const result = document.getElementById('result');

      nextStep('result');
      result.classList.remove('hidden');
      routingList.innerHTML = '';

      if (score >= 7) {
        gradeChar.innerText = 'A';
        gradeChar.className = 'font-display text-8xl font-black mb-4 grade-a';
        gradeTitle.innerText = 'Strong Review Profile';
        gradeDesc.innerText = 'This profile shows multiple positive signals. A review may include term, line-of-credit, or asset-backed paths depending on documentation.';
        routingList.innerHTML = '<li>• Review recent bank statements and deposits</li><li>• Compare term, line-of-credit, or asset-backed paths</li><li>• Confirm use case, debt stack, and document readiness</li>';
      } else if (score >= 4) {
        gradeChar.innerText = 'B';
        gradeChar.className = 'font-display text-8xl font-black mb-4 grade-b';
        gradeTitle.innerText = 'Alternative Review Profile';
        gradeDesc.innerText = 'This profile may still have review paths, but friction points should be clarified before a full application.';
        routingList.innerHTML = '<li>• Review revenue-based or asset-supported options</li><li>• Check existing debt and cash-flow consistency</li><li>• Gather documentation before submission</li>';
      } else {
        gradeChar.innerText = 'C';
        gradeChar.className = 'font-display text-8xl font-black mb-4 grade-f';
        gradeTitle.innerText = 'Readiness Work Needed';
        gradeDesc.innerText = 'This profile likely needs preparation before pursuing heavier funding applications.';
        routingList.innerHTML = '<li>• Build business banking and documentation</li><li>• Review credit/business readiness steps</li><li>• Clarify collateral, revenue, or startup path</li>';
      }
    }
  </script>
  <script src="assets/js/app.js"></script>
</body>
</html>