linkstack/business.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LinkStack | Business Account</title>
    <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>
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    <style>
        .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
        .hidden { display: none !important; }
        .modal-bg { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(8px); }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 font-sans antialiased">

    <nav class="fixed top-0 w-full z-50 glass border-b border-slate-200 py-4 px-6 flex justify-between items-center">
        <div class="flex items-center gap-2 font-bold text-xl text-indigo-600 cursor-pointer" onclick="window.location.href='/'">
            <i data-feather="layers"></i>
            <span>LinkStack</span>
        </div>
        <button onclick="window.location.href='/'" class="text-sm font-bold text-slate-500 hover:text-slate-900 transition">Back to Dashboard</button>
    </nav>

    <main class="pt-32 pb-20 px-6">
        <div class="max-w-4xl mx-auto text-center">
            <span class="px-4 py-2 rounded-full bg-indigo-100 text-indigo-700 text-xs font-black uppercase tracking-widest mb-6 inline-block">Pro Features</span>
            <h1 class="text-5xl md:text-6xl font-black mb-8 tracking-tighter text-slate-900">Elevate your brand with <br><span class="text-indigo-600">Business Account.</span></h1>

            <div class="grid md:grid-cols-2 gap-6 mt-16 text-left">
                <div class="p-8 bg-white rounded-3xl border border-slate-100 shadow-sm">
                    <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center mb-4"><i data-feather="check-circle"></i></div>
                    <h3 class="font-bold text-xl mb-2">Unlock Verification</h3>
                    <p class="text-slate-600">Get the blue checkmark next to your name to build instant trust and authority with your audience.</p>
                </div>
                <div class="p-8 bg-white rounded-3xl border border-slate-100 shadow-sm">
                    <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center mb-4"><i data-feather="share-2"></i></div>
                    <h3 class="font-bold text-xl mb-2">Pro Social Connections</h3>
                    <p class="text-slate-600">Unlock professional integrations for LinkedIn, YouTube, and WhatsApp to connect your entire ecosystem.</p>
                </div>
                <div class="p-8 bg-white rounded-3xl border border-slate-100 shadow-sm">
                    <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center mb-4"><i data-feather="bar-chart-2"></i></div>
                    <h3 class="font-bold text-xl mb-2">Deep Insights</h3>
                    <p class="text-slate-600">Unlock more insights with detailed analytics on page visits, link clicks, and audience behavior.</p>
                </div>
                <div class="p-8 bg-white rounded-3xl border border-slate-100 shadow-sm">
                    <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center mb-4"><i data-feather="trending-up"></i></div>
                    <h3 class="font-bold text-xl mb-2">Priority SEO</h3>
                    <p class="text-slate-600">Get discovered faster with enhanced search engine indexing and metadata control for your profile.</p>
                </div>
            </div>

            <div class="mt-16 p-10 bg-slate-900 rounded-[2.5rem] text-white">
                <h2 class="text-3xl font-bold mb-4">Ready to transition?</h2>
                <p class="text-slate-400 mb-8 max-w-lg mx-auto">Switching to a Business Account unlocks all pro features instantly. You can revert back to a Personal account at any time.</p>

                <div id="auth-check-area">
                    <p class="text-amber-400 font-bold mb-4">Checking authentication...</p>
                </div>
            </div>
        </div>
    </main>

    <div id="transfer-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 modal-bg">
        <div class="bg-white rounded-[2rem] p-8 max-w-md w-full shadow-2xl overflow-hidden relative">
            <div id="modal-step-1">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-2xl font-bold">Verification</h3>
                    <button onclick="closeBusinessModal()" class="p-2 hover:bg-slate-100 rounded-full transition"><i data-feather="x"></i></button>
                </div>
                <p class="text-slate-600 mb-6">Please complete the captcha below to confirm you are the account owner.</p>
                <div class="flex justify-center mb-8">
                    <div class="h-captcha" data-sitekey="f860927e-5a96-42be-b944-3d6c284032f2" data-callback="onCaptchaSuccess"></div>
                </div>
            </div>

            <div id="modal-step-2" class="hidden text-center py-4">
                <div class="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-6"><i data-feather="check"></i></div>
                <h3 class="text-2xl font-bold mb-4">Confirmation</h3>
                <p class="text-slate-600 mb-8">This action can be undone by going to the <strong>dashboard</strong> and clicking on the <strong>business tab</strong>, then clicking <strong>Switch to Personal</strong>.</p>
                <button id="final-transfer-btn" disabled class="w-full py-5 bg-slate-200 text-slate-400 font-bold rounded-2xl cursor-not-allowed transition duration-300">
                    Transfer to Business (5)
                </button>
            </div>
        </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 countdown = 5;
        let timerInterval;
        let currentUser = null;

        async function init() {
            feather.replace();
            const { data: { session } } = await supabaseClient.auth.getSession();

            const authArea = document.getElementById('auth-check-area');
            if (session) {
                currentUser = session.user;
                authArea.innerHTML = `<button onclick="openBusinessModal()" class="px-10 py-5 bg-white text-slate-900 font-bold rounded-2xl hover:bg-indigo-50 transition transform hover:scale-105 active:scale-95">Upgrade to Business</button>`;
            } else {
                authArea.innerHTML = `
                    <div class="bg-red-500/10 border border-red-500/20 p-4 rounded-xl mb-6">
                        <p class="text-red-400 font-bold">You must be logged in to upgrade your account.</p>
                    </div>
                    <button onclick="window.location.href='/?auth=true'" class="px-8 py-4 bg-indigo-600 text-white font-bold rounded-xl hover:bg-indigo-700 transition">Go to Login</button>
                `;
            }
        }

        function openBusinessModal() {
            document.getElementById('transfer-modal').classList.remove('hidden');
            feather.replace();
        }

        function closeBusinessModal() {
            document.getElementById('transfer-modal').classList.add('hidden');
            resetModal();
        }

        function resetModal() {
            document.getElementById('modal-step-1').classList.remove('hidden');
            document.getElementById('modal-step-2').classList.add('hidden');
            clearInterval(timerInterval);
            countdown = 5;
            const btn = document.getElementById('final-transfer-btn');
            btn.disabled = true;
            btn.innerText = `Transfer to Business (5)`;
            btn.className = "w-full py-5 bg-slate-200 text-slate-400 font-bold rounded-2xl cursor-not-allowed";
            if(window.hcaptcha) hcaptcha.reset();
        }

        function onCaptchaSuccess() {
            document.getElementById('modal-step-1').classList.add('hidden');
            document.getElementById('modal-step-2').classList.remove('hidden');
            feather.replace();
            startCountdown();
        }

        function startCountdown() {
            const btn = document.getElementById('final-transfer-btn');
            timerInterval = setInterval(() => {
                countdown--;
                btn.innerText = `Transfer to Business (${countdown})`;
                if (countdown <= 0) {
                    clearInterval(timerInterval);
                    btn.disabled = false;
                    btn.innerText = "Transfer to Business";
                    btn.className = "w-full py-5 bg-indigo-600 text-white font-bold rounded-2xl hover:bg-indigo-700 shadow-xl transition transform active:scale-95";
                    btn.onclick = performTransfer;
                }
            }, 1000);
        }

        async function performTransfer() {
            if (!currentUser) return;
            const { error } = await supabaseClient.from('profiles').update({
                is_business: true,
                is_verified: true
            }).eq('id', currentUser.id);

            if (error) {
                alert("Error: " + error.message);
            } else {
                window.location.href = '/?status=business_activated';
            }
        }

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