linkstack/index.html at main · jamestheakston/linkstack · 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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>LinkStack | The Ultimate Digital Identity & Bio Link Tool</title>
    <meta name="description" content="LinkStack is the leading digital identity platform. Centralize your online presence, share content, and grow your audience with a personalized bio link in seconds.">
    <meta name="keywords" content="link in bio, digital identity, bio link tool, social media landing page, linktree alternative, creator tools, digital business card">
    <meta name="author" content="James Theakston">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://link-stack.pages.dev/">

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://link-stack.pages.dev/">
    <meta property="og:title" content="LinkStack | Everything you are in one simple link">
    <meta property="og:description" content="Join thousands of creators using LinkStack to centralize their online presence. Create your professional bio link today.">
    <meta property="og:image" content="https://link-stack.pages.dev/og-preview.jpg">

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://link-stack.pages.dev/">
    <meta property="twitter:title" content="LinkStack | Everything you are in one simple link">
    <meta property="twitter:description" content="The ultimate digital identity platform for creators and businesses. Build your stack in seconds.">
    <meta property="twitter:image" content="https://link-stack.pages.dev/og-preview.jpg">

    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 2 7 12 12 22 7 12 2'/><polyline points='2 17 12 22 22 17'/><polyline points='2 12 12 17 22 12'/></svg>">

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        .glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
        .modal-bg { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); }
        .hidden { display: none !important; }
        .auth-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .auth-card:hover { transform: translateY(-5px); border-color: #6366f1; }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 font-sans antialiased">

    <div class="fixed top-0 w-full z-[60] bg-indigo-600 text-white py-2 px-4 text-center text-sm font-bold">
        We're rebranding to LinkLayer!
        <a href="/blog/rebrand.html" class="underline ml-2 inline-flex items-center gap-1 hover:text-indigo-100 transition">
            Learn more <i data-feather="arrow-right" class="w-3 h-3"></i>
        </a>
    </div>

    <nav class="fixed top-9 w-full z-50 glass border-b border-slate-200 py-4 px-8 flex justify-between items-center">
        <div class="flex items-center gap-2 font-black text-2xl text-indigo-600 cursor-pointer" onclick="location.href='/'">
            <i data-feather="layers"></i><span>LinkStack</span>
        </div>
        <div class="flex items-center gap-4">
            <button onclick="openAuthModal()" class="px-6 py-2 bg-indigo-600 text-white rounded-xl text-sm font-bold shadow-lg shadow-indigo-100 hover:scale-105 transition">Sign In</button>
        </div>
    </nav>

    <main id="main-content" class="pt-32">
        <section class="max-w-7xl mx-auto px-6 py-24 text-center">
            <span class="px-4 py-2 rounded-full bg-indigo-50 text-indigo-600 text-xs font-black uppercase tracking-widest mb-6 inline-block">The ultimate link in bio</span>
            <h1 class="text-6xl md:text-8xl font-black mb-8 tracking-tighter leading-[0.9]">Everything you are <br><span class="text-indigo-600">in one simple link.</span></h1>
            <p class="text-xl text-slate-500 mb-10 max-w-2xl mx-auto font-medium">Join thousands of creators and businesses using LinkStack to share their content, sell products, and grow their audience.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button onclick="openAuthModal()" class="px-10 py-5 bg-indigo-600 text-white font-black rounded-2xl shadow-2xl shadow-indigo-200 hover:scale-105 transition flex items-center justify-center gap-2">
                    <i data-feather="zap"></i> Get Started For Free
                </button>
                <button class="px-10 py-5 bg-white border-2 border-slate-100 text-slate-900 font-black rounded-2xl hover:bg-slate-50 transition">View Examples</button>
            </div>
        </section>

        <section class="max-w-7xl mx-auto px-6 py-20 bg-white rounded-[3rem] mb-20 border border-slate-100 shadow-sm">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-black tracking-tight mb-4">Powerful features for creators</h2>
                <p class="text-slate-500">Everything you need to manage your online presence.</p>
            </div>
            <div class="grid md:grid-cols-3 gap-12">
                <div class="space-y-4">
                    <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center"><i data-feather="layout"></i></div>
                    <h3 class="text-xl font-bold">Custom Themes</h3>
                    <p class="text-slate-500 text-sm">Personalize your page with beautiful themes, custom colors, and unique layouts.</p>
                </div>
                <div class="space-y-4">
                    <div class="w-12 h-12 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center"><i data-feather="bar-chart-2"></i></div>
                    <h3 class="text-xl font-bold">Advanced Analytics</h3>
                    <p class="text-slate-500 text-sm">Track your clicks, location data, and traffic sources with our Business suite.</p>
                </div>
                <div class="space-y-4">
                    <div class="w-12 h-12 bg-amber-50 text-amber-600 rounded-2xl flex items-center justify-center"><i data-feather="shield"></i></div>
                    <h3 class="text-xl font-bold">Verified Badge</h3>
                    <p class="text-slate-500 text-sm">Build trust with your audience through our professional verification system.</p>
                    <a href="/docs/verification.html" class="inline-flex items-center gap-1 text-xs font-black text-indigo-600 hover:gap-2 transition-all">Learn More <i data-feather="chevron-right" class="w-3 h-3"></i></a>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-white border-t border-slate-200 pt-16 pb-12 px-8">
        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
            <div class="md:col-span-2">
                <div class="flex items-center gap-2 font-black text-2xl text-indigo-600 mb-4">
                    <i data-feather="layers"></i><span>LinkStack</span>
                </div>
                <p class="text-slate-500 max-w-xs text-sm font-medium leading-relaxed">
                    The ultimate digital identity platform for creators and businesses to centralize their online presence.
                </p>
            </div>
            <div>
                <h4 class="font-black text-sm uppercase tracking-widest text-slate-900 mb-6">Legal</h4>
                <ul class="space-y-4 text-sm font-bold text-slate-400">
                    <li><a href="/privacy" class="hover:text-indigo-600 transition">Privacy Policy</a></li>
                    <li><a href="/terms" class="hover:text-indigo-600 transition">Terms of Service</a></li>
                    <li><a href="/contact.html" class="hover:text-indigo-600 transition">Contact</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-black text-sm uppercase tracking-widest text-slate-900 mb-6">Resources</h4>
                <ul class="space-y-4 text-sm font-bold text-slate-400">
                    <li><a href="/docs/verification.html" class="hover:text-indigo-600 transition">Verification Guide</a></li>
                    <li><a href="/docs/api.html" class="hover:text-indigo-600 transition">API Documentation</a></li>
                    <li><a href="/backup.html" class="hover:text-indigo-600 transition">Backup my data</a></li>
                    <li><a href="/alternatives/linktree.html" class="hover:text-indigo-600 transition">Linktree Alternatives</a></li>
                </ul>
            </div>
        </div>
        <div class="max-w-7xl mx-auto pt-8 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center gap-4">
            <p class="text-slate-400 text-sm font-bold">© James Theakston 2026</p>
            <div class="flex gap-6">
                <a href="https://github.com/jamestheakston1/linkstack" target="_blank" rel="noopener noreferrer">
                    <i data-feather="github" class="w-5 h-5 text-slate-300 hover:text-indigo-600 cursor-pointer transition"></i>
                </a>
            </div>
        </div>
    </footer>

    <div id="auth-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 modal-bg">
        <div class="bg-white rounded-[2.5rem] p-8 w-full max-w-2xl shadow-2xl relative overflow-hidden">
            <button onclick="closeAuthModal()" class="absolute top-6 right-6 p-2 hover:bg-slate-100 rounded-full transition text-slate-400"><i data-feather="x"></i></button>

            <div id="auth-selection" class="grid md:grid-cols-2 gap-6 pt-4">
                <div onclick="showAuthForm('login')" class="auth-card p-8 border-2 border-slate-100 rounded-[2rem] cursor-pointer bg-slate-50 text-center">
                    <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm"><i data-feather="log-in" class="text-indigo-600"></i></div>
                    <h4 class="text-2xl font-black mb-2">Welcome Back</h4>
                    <p class="text-slate-500 text-sm">Sign in to manage your existing stack.</p>
                </div>
                <div onclick="showAuthForm('signup')" class="auth-card p-8 border-2 border-indigo-100 rounded-[2rem] cursor-pointer bg-indigo-50/50 text-center">
                    <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm"><i data-feather="user-plus" class="text-indigo-600"></i></div>
                    <h4 class="text-2xl font-black mb-2">Join Now</h4>
                    <p class="text-slate-500 text-sm">Create a new profile and start sharing.</p>
                </div>
            </div>

            <div id="auth-form" class="hidden pt-4">
                <button onclick="backToSelection()" class="text-xs font-bold text-indigo-600 mb-6 flex items-center gap-1"><i data-feather="arrow-left" class="w-3 h-3"></i> Back to options</button>
                <h3 id="form-title" class="text-3xl font-black mb-6 tracking-tighter text-center">Account</h3>

                <div class="mb-6">
                    <button onclick="handleOAuth('github')" class="w-full flex items-center justify-center gap-3 py-4 border-2 border-slate-100 rounded-2xl font-black text-sm hover:bg-slate-50 transition">
                        <i data-feather="github" class="w-5 h-5"></i>
                        Continue with GitHub
                    </button>
                </div>

                <div class="relative mb-6">
                    <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-slate-100"></div></div>
                    <div class="relative flex justify-center text-[10px] uppercase font-black tracking-widest text-slate-400"><span class="bg-white px-4">Or use email</span></div>
                </div>

                <div class="space-y-4">
                    <input type="email" id="email" class="w-full px-5 py-4 bg-slate-50 border rounded-2xl outline-none focus:ring-2 ring-indigo-500/20" placeholder="Email Address">
                    <input type="password" id="password" class="w-full px-5 py-4 bg-slate-50 border rounded-2xl outline-none focus:ring-2 ring-indigo-500/20" placeholder="Password">
                    <button id="auth-submit-btn" class="w-full bg-slate-900 text-white font-black py-4 rounded-2xl shadow-lg hover:bg-black transition flex items-center justify-center gap-2"></button>
                </div>
            </div>
        </div>
    </div>

    <div id="msg-modal" class="hidden fixed inset-0 z-[110] flex items-center justify-center p-4 modal-bg">
        <div class="bg-white rounded-[2rem] p-8 w-full max-w-md shadow-2xl text-center">
            <div id="msg-icon-container" class="w-16 h-16 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
                <i id="msg-feather-icon" data-feather="bell" class="w-8 h-8"></i>
            </div>
            <h3 id="msg-title" class="text-2xl font-black mb-2"></h3>
            <p id="msg-content" class="text-slate-600 mb-8 text-sm"></p>
            <button onclick="closeMsgModal()" class="w-full py-4 bg-slate-900 text-white font-bold rounded-2xl">Dismiss</button>
        </div>
    </div>

    <script>
        const SUPABASE_URL = 'https://xcicvuqdoztxhidwdmlc.supabase.co';
        const SUPABASE_ANON_KEY = 'sb_publishable_DeSw5UHzjV444ZF6eMkB0g_taV-dynR';
        const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

        let currentMode = 'login';

        async function init() {
            feather.replace();
            const urlParams = new URLSearchParams(window.location.search);
            const handle = urlParams.get('u');
            const authRequested = urlParams.get('auth');

            if (handle) {
                document.getElementById('main-content').classList.add('opacity-0');
                const { data } = await supabaseClient.from('profiles').select('handle').eq('handle', handle.toLowerCase()).single();
                if (data) window.location.href = `/view?u=${handle}`;
                else {
                    document.getElementById('main-content').classList.remove('opacity-0');
                    showMsg("Profile Not Found", "The handle you are looking for doesn't exist yet.", "alert-circle");
                }
            } else if (authRequested === 'true') {
                openAuthModal();
            } else {
                checkUser();
            }
        }

        async function checkUser() {
            const { data: { session } } = await supabaseClient.auth.getSession();
            if (session) window.location.href = '/dashboard.html';
        }

        function openAuthModal() {
            document.getElementById('auth-modal').classList.remove('hidden');
            backToSelection();
        }

        function closeAuthModal() {
            document.getElementById('auth-modal').classList.add('hidden');
        }

        function showAuthForm(mode) {
            currentMode = mode;
            document.getElementById('auth-selection').classList.add('hidden');
            document.getElementById('auth-form').classList.remove('hidden');
            document.getElementById('form-title').innerText = mode === 'login' ? 'Welcome Back' : 'Create Account';
            const btn = document.getElementById('auth-submit-btn');
            btn.innerText = mode === 'login' ? 'Sign In' : 'Create My Stack';
            btn.onclick = mode === 'login' ? handleLogin : handleSignup;
            feather.replace();
        }

        function backToSelection() {
            document.getElementById('auth-selection').classList.remove('hidden');
            document.getElementById('auth-form').classList.add('hidden');
            feather.replace();
        }

        async function handleLogin() {
            const { error } = await supabaseClient.auth.signInWithPassword({
                email: document.getElementById('email').value,
                password: document.getElementById('password').value
            });
            if (!error) window.location.href = '/dashboard.html';
            else showMsg("Auth Error", error.message, "alert-circle");
        }

        async function handleSignup() {
            const { error } = await supabaseClient.auth.signUp({
                email: document.getElementById('email').value,
                password: document.getElementById('password').value
            });
            if (error) showMsg("Auth Error", error.message, "alert-circle");
        }

        async function handleOAuth(provider) {
            const { error } = await supabaseClient.auth.signInWithOAuth({
                provider: provider,
                options: {
                    redirectTo: window.location.origin + '/dashboard.html'
                }
            });
            if (error) showMsg("OAuth Error", error.message, "alert-circle");
        }

        function showMsg(t, m, icon = "bell") {
            document.getElementById('msg-title').innerText = t;
            document.getElementById('msg-content').innerText = m;
            document.getElementById('msg-feather-icon').setAttribute('data-feather', icon);
            document.getElementById('msg-modal').classList.remove('hidden');
            feather.replace();
        }

        function closeMsgModal() {
            document.getElementById('msg-modal').classList.add('hidden');
        }

        init();
    </script>
</body>
</html>