Skip to content

Instantly share code, notes, and snippets.

@jsonMartin

jsonMartin/index.html

Created August 5, 2025 04:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jsonMartin/d928e5be8396447c111a6ece756764c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jsonMartin/d928e5be8396447c111a6ece756764c9 to your computer and use it in GitHub Desktop.
Download ZIP
WalletSync html
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WalletSync API - Business Presentation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0a0a0a;
color: #ffffff;
overflow: hidden;
position: relative;
}
.presentation-container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.slide {
width: 90%;
max-width: 1200px;
height: 90vh;
max-height: 700px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border-radius: 20px;
padding: 60px;
display: none;
animation: slideIn 0.5s ease-out;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.slide::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
animation: rotate 30s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.slide.active {
display: flex;
flex-direction: column;
justify-content: center;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
h1 {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 30px;
background: linear-gradient(45deg, #00ff88, #00ffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
z-index: 1;
position: relative;
}
h2 {
font-size: 2.5em;
font-weight: 600;
margin-bottom: 25px;
color: #00ff88;
z-index: 1;
position: relative;
}
h3 {
font-size: 1.8em;
font-weight: 500;
margin-bottom: 20px;
color: #00ffff;
z-index: 1;
position: relative;
}
p, li {
font-size: 1.3em;
line-height: 1.6;
margin-bottom: 15px;
z-index: 1;
position: relative;
}
.accent {
color: #00ff88;
font-weight: 600;
}
.highlight {
background: linear-gradient(45deg, #00ff88, #00ffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.big-number {
font-size: 4em;
font-weight: 800;
background: linear-gradient(45deg, #00ff88, #00ffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
margin: 20px 0;
}
.nav-buttons {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
gap: 15px;
z-index: 10;
}
button {
padding: 12px 24px;
background: linear-gradient(45deg, #00ff88, #00ffff);
border: none;
border-radius: 30px;
color: #0a0a0a;
font-weight: 600;
font-size: 1em;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 255, 136, 0.3);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.slide-number {
position: absolute;
top: 30px;
right: 30px;
font-size: 1.2em;
color: rgba(255, 255, 255, 0.5);
z-index: 10;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 20px 0;
z-index: 1;
position: relative;
}
.card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(0, 255, 136, 0.3);
border-radius: 15px;
padding: 25px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
border-color: #00ff88;
box-shadow: 0 10px 30px rgba(0, 255, 136, 0.2);
}
.chart-container {
width: 100%;
height: 300px;
margin: 30px 0;
z-index: 1;
position: relative;
}
.progress-bar {
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
margin: 15px 0;
overflow: hidden;
z-index: 1;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(45deg, #00ff88, #00ffff);
border-radius: 20px;
transition: width 1s ease-out;
display: flex;
align-items: center;
padding: 0 20px;
font-weight: 600;
color: #0a0a0a;
white-space: nowrap;
font-size: 1.1em;
}
.metric-box {
text-align: center;
padding: 20px;
background: rgba(0, 255, 136, 0.1);
border-radius: 15px;
border: 1px solid rgba(0, 255, 136, 0.3);
z-index: 1;
position: relative;
}
.metric-value {
font-size: 2.5em;
font-weight: 700;
color: #00ff88;
}
.metric-label {
font-size: 1.1em;
color: rgba(255, 255, 255, 0.7);
margin-top: 5px;
}
ul {
list-style: none;
padding-left: 0;
}
ul li:before {
content: "→ ";
color: #00ff88;
font-weight: bold;
margin-right: 10px;
}
.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
z-index: 1;
position: relative;
}
.logo {
font-size: 2em;
font-weight: 800;
background: linear-gradient(45deg, #00ff88, #00ffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
top: 30px;
left: 30px;
z-index: 10;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
z-index: 1;
position: relative;
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
th {
background: rgba(0, 255, 136, 0.1);
color: #00ff88;
font-weight: 600;
}
tr:hover {
background: rgba(255, 255, 255, 0.05);
}
.pricing-tier {
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(0, 255, 136, 0.3);
border-radius: 15px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
}
.pricing-tier:hover {
transform: translateY(-10px);
border-color: #00ff88;
box-shadow: 0 20px 40px rgba(0, 255, 136, 0.3);
}
.price {
font-size: 3em;
font-weight: 700;
color: #00ff88;
margin: 20px 0;
}
.small-text {
font-size: 0.9em;
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
.slide {
padding: 30px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
.grid, .two-column {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="presentation-container">
<div class="logo">WalletSync</div>
<div class="slide-number" id="slideNumber">1 / 15</div>
<!-- Slide 1: Title -->
<div class="slide active">
<div style="text-align: center;">
<h1 style="font-size: 5em; margin-bottom: 40px;">WalletSync API</h1>
<p style="font-size: 2em; color: #00ffff;">Enterprise-grade wallet tracking at indie developer prices</p>
<div style="margin-top: 60px;">
<p style="font-size: 1.5em;">Democratizing Blockchain Data Access</p>
<p style="font-size: 1.2em; color: rgba(255,255,255,0.7); margin-top: 20px;">2025</p>
</div>
</div>
</div>
<!-- Slide 2: The Problem -->
<div class="slide">
<h2>The Problem</h2>
<div class="two-column">
<div>
<h3>Current Market Pain Points</h3>
<ul>
<li>Vezgo charges <span class="accent">$500+/month</span></li>
<li>Complex integrations take weeks</li>
<li>Per-connection fees add up fast</li>
<li>Poor developer experience</li>
<li>Slow, unreliable APIs</li>
</ul>
</div>
<div>
<div class="metric-box">
<div class="metric-value">75%</div>
<div class="metric-label">of developers can't afford current solutions</div>
</div>
<div class="metric-box" style="margin-top: 20px;">
<div class="metric-value">$150M</div>
<div class="metric-label">Total addressable market</div>
</div>
</div>
</div>
</div>
<!-- Slide 3: Our Solution -->
<div class="slide">
<h2>Our Solution</h2>
<div style="text-align: center; margin-bottom: 40px;">
<p style="font-size: 1.8em;"><span class="highlight">90% of Vezgo's functionality</span> at <span class="highlight">75% lower cost</span></p>
</div>
<div class="grid">
<div class="card">
<h3>🚀 Lightning Fast</h3>
<p>&lt;200ms response times</p>
<p>5-minute integration</p>
</div>
<div class="card">
<h3>💰 Affordable</h3>
<p>Starting at $29/month</p>
<p>No per-connection fees</p>
</div>
<div class="card">
<h3>🛡️ Reliable</h3>
<p>99.9% uptime SLA</p>
<p>Real-time data</p>
</div>
<div class="card">
<h3>🎯 Focused</h3>
<p>Wallets & NFTs only</p>
<p>No complexity</p>
</div>
</div>
</div>
<!-- Slide 4: Market Opportunity -->
<div class="slide">
<h2>Market Opportunity</h2>
<div style="text-align: center;">
<div class="big-number">$8.5B</div>
<p style="font-size: 1.5em; margin-bottom: 40px;">Blockchain API market by 2028</p>
</div>
<div class="grid" style="grid-template-columns: repeat(3, 1fr);">
<div class="metric-box">
<div class="metric-value">63.2%</div>
<div class="metric-label">Annual Growth Rate</div>
</div>
<div class="metric-box">
<div class="metric-value">500K+</div>
<div class="metric-label">Crypto Applications</div>
</div>
<div class="metric-box">
<div class="metric-value">$36M</div>
<div class="metric-label">Serviceable Market</div>
</div>
</div>
</div>
<!-- Slide 5: Target Customers -->
<div class="slide">
<h2>Target Customer Segments</h2>
<div class="grid">
<div class="card">
<h3>Individual Developers (30%)</h3>
<p>$20-50/month</p>
<p>2,000+ potential customers</p>
</div>
<div class="card">
<h3>Crypto Startups (40%)</h3>
<p>$100-500/month</p>
<p>500+ potential customers</p>
</div>
<div class="card">
<h3>Established Apps (25%)</h3>
<p>$500-2,000/month</p>
<p>100+ potential customers</p>
</div>
<div class="card">
<h3>Enterprise (5%)</h3>
<p>$2,000-10,000/month</p>
<p>10-20 potential customers</p>
</div>
</div>
</div>
<!-- Slide 6: Use Cases -->
<div class="slide">
<h2>Primary Use Cases</h2>
<div style="margin-top: 40px;">
<div class="progress-bar">
<div class="progress-fill" style="width: 35%;">Portfolio Trackers 35%</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 20%;">Tax Software 20%</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 15%;">DeFi Analytics 15%</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 15%;">NFT Tools 15%</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 10%;">Accounting 10%</div>
</div>
</div>
</div>
<!-- Slide 7: Competitive Analysis -->
<div class="slide">
<h2>Competitive Landscape</h2>
<table>
<tr>
<th>Competitor</th>
<th>Pricing</th>
<th>Our Advantage</th>
</tr>
<tr>
<td><strong>Vezgo</strong></td>
<td>$149-500/mo + fees</td>
<td>75% cheaper, 5-min integration</td>
</tr>
<tr>
<td><strong>Zapper API</strong></td>
<td>$99-999/month</td>
<td>More chains, better pricing</td>
</tr>
<tr>
<td><strong>Moralis</strong></td>
<td>$29-2,499/month</td>
<td>Focused solution, clearer pricing</td>
</tr>
<tr>
<td><strong>Covalent</strong></td>
<td>$0-3,995/month</td>
<td>Faster, simpler, cheaper</td>
</tr>
</table>
</div>
<!-- Slide 8: Pricing Strategy -->
<div class="slide">
<h2>Simple, Transparent Pricing</h2>
<div class="grid" style="grid-template-columns: repeat(4, 1fr);">
<div class="pricing-tier">
<h3>Pay as You Go</h3>
<div class="price">$0.50</div>
<p class="small-text">per connection</p>
<p class="small-text" style="margin-top: 10px;">Regular: $0.25/conn</p>
</div>
<div class="pricing-tier">
<h3>Starter</h3>
<div class="price">$29</div>
<p>150 connections</p>
<p>60 req/min</p>
</div>
<div class="pricing-tier" style="border-color: #00ff88;">
<h3>Growth</h3>
<div class="price">$99</div>
<p>750 connections</p>
<p>300 req/min</p>
<p style="color: #00ff88; margin-top: 10px;">Most Popular</p>
</div>
<div class="pricing-tier">
<h3>Scale</h3>
<div class="price">$799</div>
<p>15,000 connections</p>
<p>5,000 req/min</p>
</div>
</div>
</div>
<!-- Slide 9: Unit Economics -->
<div class="slide">
<h2>Strong Unit Economics</h2>
<div class="grid" style="grid-template-columns: repeat(2, 1fr);">
<div class="metric-box">
<div class="metric-value">$15-30</div>
<div class="metric-label">Customer Acquisition Cost</div>
</div>
<div class="metric-box">
<div class="metric-value">$1,200-1,800</div>
<div class="metric-label">Lifetime Value</div>
</div>
<div class="metric-box">
<div class="metric-value">60-80:1</div>
<div class="metric-label">LTV:CAC Ratio</div>
</div>
<div class="metric-box">
<div class="metric-value">95-97%</div>
<div class="metric-label">Gross Margin</div>
</div>
</div>
</div>
<!-- Slide 10: Conservative Financial Projections -->
<div class="slide">
<h2>Conservative Financial Projections</h2>
<div style="text-align: center;">
<div style="margin: 40px 0;">
<div class="metric-box" style="display: inline-block; margin: 0 20px;">
<div class="metric-value">$80-120K</div>
<div class="metric-label">Year 1 Revenue</div>
</div>
<div class="metric-box" style="display: inline-block; margin: 0 20px;">
<div class="metric-value">$600K-1M</div>
<div class="metric-label">Year 2 Revenue</div>
</div>
<div class="metric-box" style="display: inline-block; margin: 0 20px;">
<div class="metric-value">$1.5-2.5M</div>
<div class="metric-label">Year 3 Revenue</div>
</div>
</div>
<p style="font-size: 1.5em; color: #00ff88;">85-91% Net Margin in Year 1</p>
</div>
</div>
<!-- Slide 11: Cost Structure -->
<div class="slide">
<h2>Lean Cost Structure</h2>
<div class="two-column">
<div>
<h3>Year 1 (Solo Founder)</h3>
<ul>
<li>Infrastructure: $30-50/month</li>
<li>Marketing: $50-150/month</li>
<li>Legal/Accounting: $200/month</li>
<li><strong>Total: $280-400/month</strong></li>
</ul>
<div class="metric-box" style="margin-top: 20px;">
<div class="metric-value">$70-105K</div>
<div class="metric-label">Net Profit Year 1</div>
</div>
</div>
<div>
<h3>Scaling Infrastructure</h3>
<p>Our infrastructure scales efficiently:</p>
<ul>
<li>Railway: $30 → $175</li>
<li>Database: $0 → $300</li>
<li>APIs: $0 → $628</li>
<li>95%+ gross margins maintained</li>
</ul>
</div>
</div>
</div>
<!-- Slide 12: Competitive Moat -->
<div class="slide">
<h2>Our Competitive Moat</h2>
<div class="grid">
<div class="card">
<h3>💰 Cost Structure</h3>
<p>95-97% gross margins</p>
<p>Can always be cheapest</p>
</div>
<div class="card">
<h3>⚡ Technical Excellence</h3>
<p>Built by developers</p>
<p>Superior performance</p>
</div>
<div class="card">
<h3>⏰ Market Timing</h3>
<p>Crypto adoption growing</p>
<p>Vezgo too expensive</p>
</div>
<div class="card">
<h3>👤 Founder Advantage</h3>
<p>Low burn rate</p>
<p>Long-term thinking</p>
</div>
</div>
</div>
<!-- Slide 13: Risk Analysis -->
<div class="slide">
<h2>Risk Mitigation</h2>
<table>
<tr>
<th>Risk</th>
<th>Impact</th>
<th>Mitigation</th>
</tr>
<tr>
<td>Vezgo drops prices</td>
<td>High</td>
<td>Can go 90% lower with our margins</td>
</tr>
<tr>
<td>New competitor</td>
<td>Medium</td>
<td>Fast iteration, developer focus</td>
</tr>
<tr>
<td>Crypto crash</td>
<td>High</td>
<td>Diversified customer base</td>
</tr>
<tr>
<td>Technical outage</td>
<td>High</td>
<td>99.9% SLA, redundancy</td>
</tr>
</table>
</div>
<!-- Slide 14: Exit Strategy -->
<div class="slide">
<h2>Exit Opportunities</h2>
<div class="two-column">
<div>
<h3>Option 1: Lifestyle Business</h3>
<ul>
<li>$1-2M annual profit</li>
<li>20 hours/week</li>
<li>100% ownership</li>
</ul>
<h3 style="margin-top: 30px;">Option 2: Strategic Acquisition</h3>
<p>Potential acquirers:</p>
<ul>
<li>Vezgo (eliminate competition)</li>
<li>Plaid (add crypto)</li>
<li>Coinbase (developer tools)</li>
</ul>
</div>
<div style="text-align: center;">
<div class="metric-box">
<div class="metric-value">$7.5-25M</div>
<div class="metric-label">Estimated Valuation</div>
<p style="font-size: 0.9em; margin-top: 10px;">(5-10x ARR by Year 3)</p>
</div>
</div>
</div>
</div>
<!-- Slide 15: Call to Action -->
<div class="slide">
<div style="text-align: center;">
<h1 style="font-size: 4em;">The market is ready.</h1>
<h1 style="font-size: 4em;">The technology is proven.</h1>
<h1 style="font-size: 5em; margin-top: 60px;">Let's build.</h1>
<div style="margin-top: 80px;">
<p style="font-size: 1.8em; color: #00ffff;">WalletSync API</p>
<p style="font-size: 1.2em; color: rgba(255,255,255,0.7);">Enterprise-grade wallet tracking at indie developer prices</p>
</div>
</div>
</div>
<div class="nav-buttons">
<button id="prevBtn" onclick="changeSlide(-1)">Previous</button>
<button id="nextBtn" onclick="changeSlide(1)">Next</button>
</div>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
function showSlide(n) {
slides[currentSlide].classList.remove('active');
currentSlide = (n + totalSlides) % totalSlides;
slides[currentSlide].classList.add('active');
document.getElementById('slideNumber').textContent = `${currentSlide + 1} / ${totalSlides}`;
document.getElementById('prevBtn').disabled = currentSlide === 0;
document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;
// Animate progress bars when visible
if (currentSlide === 5) { // Use cases slide
setTimeout(() => {
const fills = slides[5].querySelectorAll('.progress-fill');
fills.forEach(fill => {
fill.style.width = fill.style.width;
});
}, 100);
}
}
function changeSlide(direction) {
showSlide(currentSlide + direction);
}
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' && currentSlide < totalSlides - 1) {
changeSlide(1);
} else if (e.key === 'ArrowLeft' && currentSlide > 0) {
changeSlide(-1);
} else if (e.key === ' ') {
e.preventDefault();
if (currentSlide < totalSlides - 1) {
changeSlide(1);
}
}
});
// Touch/swipe support for mobile
let touchStartX = 0;
let touchEndX = 0;
document.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
});
document.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
});
function handleSwipe() {
if (touchEndX < touchStartX - 50 && currentSlide < totalSlides - 1) {
changeSlide(1);
}
if (touchEndX > touchStartX + 50 && currentSlide > 0) {
changeSlide(-1);
}
}
// Initialize
showSlide(0);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment