ScrapeLogic-Model-Generator/index.html at main · billbotprocessing-star/ScrapeLogic-Model-Generator · 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ScrapeLogic | URL to Monetization Strategy</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
</head>

<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white font-sans">

<header class="border-b border-slate-800 bg-slate-950/50 backdrop-blur-sm sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <div class="flex items-center gap-2">
      <i data-lucide="zap" class="w-6 h-6 text-emerald-400"></i>
      <span class="text-xl font-bold tracking-tight">ScrapeLogic</span>
    </div>
    <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 rounded-lg text-sm font-medium transition">
      Request Access
    </button>
  </div>
</header>

<section class="max-w-5xl mx-auto px-6 py-20 text-center">
  <div class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-500/10 border border-emerald-500/20 rounded-full text-sm text-emerald-300 mb-6">
    <i data-lucide="sparkles" class="w-4 h-4"></i>
    <span>Powered by Claude 3.5 Sonnet + GPT-4o</span>
  </div>

  <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-emerald-200 to-emerald-400 bg-clip-text text-transparent">
    Turn Any URL Into A Monetization Strategy
  </h1>

  <p class="text-xl text-slate-400 mb-12 max-w-2xl mx-auto">
    Enter a competitor's website or a prospect's landing page. Get a validated business model, offer stack, and launch roadmap in under 30 minutes.
  </p>

  <div class="bg-slate-900/50 border border-slate-800 rounded-2xl p-8 backdrop-blur-sm shadow-2xl">
    <div class="flex flex-col md:flex-row gap-3 mb-4">
      <div class="flex-1 relative">
        <i data-lucide="globe" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500"></i>
        <input id="urlInput" type="url" placeholder="https://competitor-site.com"
          class="w-full h-14 bg-slate-950 border border-slate-700 rounded-lg pl-12 pr-4 text-slate-300 focus:outline-none focus:border-emerald-500 text-lg transition" />
      </div>
      <button onclick="handleAnalyze()" id="analyzeBtn"
        class="px-8 h-14 bg-emerald-600 hover:bg-emerald-700 rounded-lg font-semibold flex items-center justify-center gap-2 transition disabled:opacity-50">
        <i data-lucide="zap" class="w-5 h-5"></i> <span id="btnText">Generate Plan</span>
      </button>
    </div>
    <p class="text-xs text-slate-500">Works directly from raw website text (no clean copy required).</p>
  </div>

  <div id="processing" class="hidden mt-8 bg-slate-900/30 border border-slate-800 rounded-xl p-6 animate-pulse">
    <h3 class="text-sm text-slate-400 mb-6">Orchestrating AI Pipeline...</h3>
    <div class="flex justify-around items-center max-w-md mx-auto">
      <div class="flex flex-col items-center"><i data-lucide="search" class="w-8 h-8 text-emerald-400 mb-2"></i><span class="text-[10px] uppercase text-slate-500">Crawl</span></div>
      <div class="w-12 h-px bg-slate-800"></div>
      <div class="flex flex-col items-center"><i data-lucide="brain" class="w-8 h-8 text-emerald-400 mb-2"></i><span class="text-[10px] uppercase text-slate-500">Analyze</span></div>
      <div class="w-12 h-px bg-slate-800"></div>
      <div class="flex flex-col items-center"><i data-lucide="sparkles" class="w-8 h-8 text-emerald-400 mb-2"></i><span class="text-[10px] uppercase text-slate-500">Generate</span></div>
    </div>
  </div>
</section>

<section id="transformationPreview" class="max-w-7xl mx-auto px-6 py-20 border-t border-slate-800/50">
  <h2 class="text-3xl font-bold text-center mb-12">The Transformation</h2>
  <div class="grid md:grid-cols-2 gap-8">
    <div class="bg-slate-950/50 border border-slate-800 rounded-xl p-8 flex items-center justify-center min-h-[300px]">
        <div class="text-center">
            <i data-lucide="globe" class="w-12 h-12 text-slate-700 mx-auto mb-4"></i>
            <p class="font-mono text-slate-500">https://raw-messy-site.com</p>
        </div>
    </div>
    <div class="bg-emerald-500/5 border border-emerald-500/20 rounded-xl p-8 min-h-[300px]">
        <div class="space-y-4">
            <div class="h-4 w-3/4 bg-emerald-500/20 rounded"></div>
            <div class="h-4 w-1/2 bg-emerald-500/10 rounded"></div>
            <div class="grid grid-cols-3 gap-2 py-4">
                <div class="h-20 bg-emerald-500/5 rounded border border-emerald-500/10"></div>
                <div class="h-20 bg-emerald-500/5 rounded border border-emerald-500/10"></div>
                <div class="h-20 bg-emerald-500/5 rounded border border-emerald-500/10"></div>
            </div>
            <div class="h-4 w-full bg-emerald-500/10 rounded"></div>
        </div>
    </div>
  </div>
</section>

<section id="resultsSection" class="hidden max-w-5xl mx-auto px-6 pb-20 space-y-6"></section>

<section class="bg-slate-900/30 border-y border-slate-800 py-24">
    <div class="max-w-7xl mx-auto px-6">
        <h2 class="text-3xl font-bold text-center mb-16">Decision-Ready Artifacts</h2>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="p-6 bg-slate-950 border border-slate-800 rounded-xl">
                <i data-lucide="trending-up" class="w-10 h-10 text-emerald-400 mb-4"></i>
                <h3 class="text-xl font-semibold mb-2">Monetization Matrix</h3>
                <p class="text-slate-400 text-sm">Comparison of Subscription, Usage-based, and Service-led models with viability scores.</p>
            </div>
            <div class="p-6 bg-slate-950 border border-slate-800 rounded-xl">
                <i data-lucide="target" class="w-10 h-10 text-emerald-400 mb-4"></i>
                <h3 class="text-xl font-semibold mb-2">The Offer Stack</h3>
                <p class="text-slate-400 text-sm">Pre-written Entry, Core, and Premium tiers with specific pricing and deliverables.</p>
            </div>
            <div class="p-6 bg-slate-950 border border-slate-800 rounded-xl">
                <i data-lucide="rocket" class="w-10 h-10 text-emerald-400 mb-4"></i>
                <h3 class="text-xl font-semibold mb-2">Acquisition Script</h3>
                <p class="text-slate-400 text-sm">Ready-to-use cold outreach scripts tailored to your target customer's pain points.</p>
            </div>
        </div>
    </div>
</section>

<footer class="bg-slate-950 py-12 text-center">
  <div class="flex items-center justify-center gap-2 mb-4">
    <i data-lucide="zap" class="w-5 h-5 text-emerald-400"></i>
    <span class="font-bold">ScrapeLogic</span>
  </div>
  <p class="text-slate-500 text-sm">© 2026 Internal Development. Proprietary Artifact.</p>
</footer>

<script>
// Initialize Icons
lucide.createIcons();

async function handleAnalyze() {
  const url = document.getElementById("urlInput").value;
  if (!url) return alert("Please enter a valid URL to begin analysis.");

  const processing = document.getElementById("processing");
  const resultsSection = document.getElementById("resultsSection");
  const transformationPreview = document.getElementById("transformationPreview");
  const analyzeBtn = document.getElementById("analyzeBtn");
  const btnText = document.getElementById("btnText");

  // UI State Change
  processing.classList.remove("hidden");
  resultsSection.classList.add("hidden");
  transformationPreview.classList.add("hidden");
  analyzeBtn.disabled = true;
  btnText.innerText = "Analyzing...";

  try {
    const response = await fetch("https://billbotprocessing.app.n8n.cloud/webhook/analyze-site", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ url })
    });

    if (!response.ok) throw new Error("Connection failed — check n8n endpoint.");

    const data = await response.json();

    // Mapping Response to UI
    resultsSection.innerHTML = `
      <h2 class="text-3xl font-bold text-center mb-8">Strategy Analysis Results</h2>

      <div class="grid gap-6">
        <div class="bg-slate-950 border border-slate-800 rounded-xl p-8 shadow-xl">
          <div class="flex items-center gap-3 mb-4">
            <i data-lucide="target" class="w-6 h-6 text-emerald-400"></i>
            <h3 class="font-bold text-xl">Positioning & Value Prop</h3>
          </div>
          <p class="text-slate-300 leading-relaxed">${data.positioning || 'No data returned.'}</p>
        </div>

        <div class="bg-slate-950 border border-slate-800 rounded-xl p-8 shadow-xl">
          <div class="flex items-center gap-3 mb-4">
            <i data-lucide="trending-up" class="w-6 h-6 text-emerald-400"></i>
            <h3 class="font-bold text-xl">Monetization Strategy</h3>
          </div>
          <p class="text-slate-300 leading-relaxed">${data.monetization || 'No data returned.'}</p>
        </div>

        <div class="bg-slate-950 border border-slate-800 rounded-xl p-8 shadow-xl">
          <div class="flex items-center gap-3 mb-4">
            <i data-lucide="layers" class="w-6 h-6 text-emerald-400"></i>
            <h3 class="font-bold text-xl">Offer Stack Builder</h3>
          </div>
          <div class="text-slate-300">${data.offerStack || 'No data returned.'}</div>
        </div>

        <div class="bg-slate-950 border border-slate-800 rounded-xl p-8 shadow-xl">
          <div class="flex items-center gap-3 mb-4">
            <i data-lucide="rocket" class="w-6 h-6 text-emerald-400"></i>
            <h3 class="font-bold text-xl">Speed to Market Plan</h3>
          </div>
          <p class="text-slate-300 leading-relaxed">${data.speedToMarket || 'No data returned.'}</p>
        </div>
      </div>
    `;

    resultsSection.classList.remove("hidden");
    // Re-trigger icon creation for the new HTML
    lucide.createIcons();

  } catch (error) {
    alert("Connection Error. Check your n8n cloud instance.");
    console.error(error);
    transformationPreview.classList.remove("hidden");
  } finally {
    processing.classList.add("hidden");
    analyzeBtn.disabled = false;
    btnText.innerText = "Generate Plan";
  }
}
</script>

</body>
</html>