Edit-Profile/index.html at main · tc-card/Edit-Profile · 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
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Editor | tccards</title>
    <meta name="description" content="Edit your digital business card profile with tccards' intuitive interface. Customize your professional presence and share your contact information seamlessly.">
    <meta name="keywords" content="digital business card, profile editor, tccards, virtual business card, contact sharing, professional networking">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://edit.tccards.tn/">
    <meta property="og:title" content="Profile Editor | tccards">
    <meta property="og:description" content="Edit your digital business card profile with tccards' intuitive interface.">
    <meta property="og:image" content="https://www.tccards.tn/Assets/152.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://edit.tccards.tn/">
    <meta property="twitter:title" content="Profile Editor | tccards">
    <meta property="twitter:description" content="Edit your digital business card profile with tccards' intuitive interface.">
    <meta property="twitter:image" content="https://www.tccards.tn/Assets/152.png">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="https://www.tccards.tn/Assets/150.png">
    <link rel="apple-touch-icon" href="https://www.tccards.tn/Assets/150.png">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://edit.tccards.tn/">

    <!-- CSS -->
    <link rel="stylesheet" href="Assets/css/main.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        [x-cloak] {
            display: none !important;
        }
        .otp-inputs input:focus {
            outline: 2px solid #8b5cf6;
            outline-offset: 2px;
        }
        .sidebar-link:hover {
            background-color: rgba(139, 92, 246, 0.1);
        }
        .sidebar-link.active {
            background-color: rgba(139, 92, 246, 0.2);
            border-left: 3px solid #8b5cf6;
        }
        .profile-container {
            height: calc(100vh - 3rem);
        }
        @media (max-width: 1023px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease-in-out;
            }
            .sidebar.open {
                transform: translateX(0);
            }
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>

<body class="bg-gray-900 text-gray-100 min-h-screen">
    <!-- Login Screen -->
    <div class="bg-gray-900 min-h-screen" style="height: 100vh;" id="loginScreen">
        <div class="container mx-auto px-4 md:px-8">
            <div class="dark:bg-gray-900 sm:p-0">
                <!-- Add Back to Main link -->
                <div class="absolute top-4 left-4 md:top-8 md:left-8 z-20">
                    <a href="https://www.tccards.tn/index.html" class="inline-flex items-center text-sm text-gray-400 transition-colors hover:text-gray-300">
                        <svg class="stroke-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M12.7083 5L7.5 10.2083L12.7083 15.4167" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <span class="ml-1">Back to Main</span>
                    </a>
                </div>
                <!-- Grid decorations -->
                <div class="absolute right-0 top-0 w-full max-w-[250px] xl:max-w-[450px] z-0">
                    <img src="https://demo.tailadmin.com/src/images/shape/grid-01.svg" alt="grid" class="w-full">
                </div>

                <div class="absolute bottom-0 left-0 w-full max-w-[250px] rotate-180 xl:max-w-[450px] z-0">
                    <img src="https://demo.tailadmin.com/src/images/shape/grid-01.svg" alt="grid" class="w-full">
                </div>

                <div class="relative flex flex-col justify-center min-h-screen w-full lg:flex-row">
                    <!-- Login Screen -->
                    <div class="flex items-center justify-center w-full lg:w-1/2">
                        <!-- Background blur effects -->
                        <div class="absolute inset-0 md:hidden opacity-10 pointer-events-none">
                            <div class="absolute top-0 left-1/4 w-64 h-64 rounded-full bg-blue-600 filter blur-3xl">
                            </div>
                            <div
                                class="absolute bottom-0 right-1/3 w-80 h-80 rounded-full bg-indigo-600 filter blur-3xl">
                            </div>
                        </div>

                        <!-- Login Form Container -->
                        <div
                            class="relative z-10 max-w-md w-full p-6 md:p-8 bg-gray-800/80 backdrop-blur-sm rounded-xl shadow-lg">
                            <h1 class="text-2xl font-bold text-purple-400 text-center mb-6">Dashboard Login</h1>

                            <div id="emailForm">
                                <div class="mb-4">
                                    <label for="loginEmail" class="block text-sm font-medium text-gray-300 mb-2">Email
                                        Address</label>
                                    <input type="email" id="loginEmail" name="loginEmail" placeholder="your@email.com"
                                        autocomplete="email"
                                        class="w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500">
                                </div>
                                <button id="requestOtpBtn"
                                    class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition-colors">
                                    <i class="fas fa-paper-plane"></i> Send OTP
                                </button>
                            </div>

                            <div id="otpForm" class="hidden mt-4">

                                <div class="otp-inputs flex gap-2 mb-4 justify-center">
                                    <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" data-index="0"
                                        autocomplete="one-time-code"
                                        class="w-12 h-12 text-center text-xl rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500">
                                    <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" data-index="1"
                                        class="w-12 h-12 text-center text-xl rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500">
                                    <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" data-index="2"
                                        class="w-12 h-12 text-center text-xl rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500">
                                    <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" data-index="3"
                                        class="w-12 h-12 text-center text-xl rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500">
                                    <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" data-index="4"
                                        class="w-12 h-12 text-center text-xl rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500">
                                    <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" data-index="5"
                                        class="w-12 h-12 text-center text-xl rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500">
                                </div>

                                <p class="mb-4 text-gray-300 text-center center">We sent a 6-digit code to
                                    <span id="otpEmailDisplay" class="font-medium text-blue-400"></span>
                                </p>

                                <button id="verifyOtpBtn"
                                    class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition-colors mb-2">
                                    Verify OTP
                                </button>
                                <button id="backToEmailBtn"
                                    class="w-full text-gray-300 hover:text-white py-2 px-4 rounded-lg transition-colors">
                                    Back to Email
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Update right side background -->
                   <div class="relative hidden w-full lg:flex lg:w-1/2 border-l border-gray-700 border-dashed">
                        <div class="relative flex items-center justify-center w-full">

                            <!-- Logo and text -->
                            <div class="relative z-10 flex flex-col items-center max-w-xs">
                                <a href="index.html" class="block mb-4">
                                    <img src="https://tccards.tn/Assets/150.png" class="w-40 h-40" alt="Logo">
                                </a>
                                <p class="text-center text-gray-400">
                                    Create, manage, and share digital business cards with ease. Make a lasting
                                    impression!
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Update info button tooltip background -->
                    <div class="fixed z-50 bottom-6 right-6 group">
                        <button
                            class="inline-flex items-center justify-center w-12 h-12 md:w-14 md:h-14 text-white transition-all duration-200 rounded-full bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
                            title="Information" aria-label="Information">
                            <i class="fa fa-info text-lg md:text-xl"></i>
                        </button>
                        <div
                            class="absolute bottom-full right-0 mb-2 w-40 md:w-48 p-3 md:p-4 bg-gray-800/90 backdrop-blur-sm rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
                            <p class="text-xs md:text-sm text-gray-300">Edit your profile information and customize your Smart card profile.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dashboard Layout -->
    <div id="dashboard" class="hidden">
        <!-- Mobile Header -->
        <div class="lg:hidden fixed top-0 left-0 right-0 bg-gray-800 p-4 border-b border-gray-700 z-20 flex justify-between items-center">
            <button id="mobileMenuToggle" class="text-gray-300 hover:text-white z-30">
                <i class="fas fa-bars text-xl"></i>
            </button>
            <div class="absolute left-0 right-0 flex justify-center pointer-events-none">
                <a href="index.html" class="flex items-center space-x-2 pointer-events-auto">
                    <img src="https://tccards.tn/Assets/150.png" class="w-8 h-8" alt="Logo">
                    <span class="text-lg font-semibold text-purple-400">tccards</span>
                </a>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="sidebar fixed top-45 lg:top-0 left-0 h-full w-64 bg-gray-800 border-r border-gray-700 z-10 lg:translate-x-0">
            <div class="p-4 border-b border-gray-700 lg:flex hidden">
                <a href="index.html" class="flex items-center space-x-2">
                    <img src="https://tccards.tn/Assets/150.png" class="w-10 h-10" alt="Logo">
                    <span class="text-xl font-semibold text-purple-400">tccards</span>
                </a>
            </div>

            <div class="p-4 mt-4 lg:mt-0">
                <div class="flex items-center space-x-3 mb-6">
                    <img id="sidebarProfilePic" src="https://tccards.tn/Assets/150.png" class="w-12 h-12 rounded-full object-cover">
                    <div>
                        <h3 id="sidebarUserName" class="font-medium text-gray-100">Loading...</h3>
                        <p class="text-xs text-gray-400">Profile Editor</p>
                    </div>
                </div>

                <nav class="space-y-1">
                    <a href="#" class="sidebar-link active flex items-center space-x-3 px-4 py-3 text-gray-200 rounded-lg transition-colors">
                        <i class="fas fa-user-circle text-purple-400"></i>
                        <span>Profile</span>
                    </a>
                    <a href="#" class="sidebar-link flex items-center space-x-3 px-4 py-3 text-gray-400 rounded-lg transition-colors relative group">
                        <i class="fas fa-qrcode text-gray-500"></i>
                        <span>QR Code</span>
                        <span class="absolute right-4 text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded">Standard</span>
                        <div class="absolute hidden group-hover:block -top-2 left-full ml-2 p-2 bg-gray-700 text-sm text-gray-300 rounded shadow-lg whitespace-nowrap">
                            Upgrade to standard to access analytics
                        </div>
                    </a>
                    <a href="#" class="sidebar-link flex items-center space-x-3 px-4 py-3 text-gray-400 rounded-lg transition-colors relative group">
                        <i class="fas fa-chart-line text-gray-500"></i>
                        <span>Analytics</span>
                        <span class="absolute right-4 text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded">Standard</span>
                        <div class="absolute hidden group-hover:block -top-2 left-full ml-2 p-2 bg-gray-700 text-sm text-gray-300 rounded shadow-lg whitespace-nowrap">
                            Upgrade to standard to access analytics
                        </div>
                    </a>
                    <a href="#" class="sidebar-link flex items-center space-x-3 px-4 py-3 text-gray-400 rounded-lg transition-colors relative group">
                        <i class="fas fa-cog text-gray-500"></i>
                        <span>Settings</span>
                        <span class="absolute right-4 text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded">Coming Soon</span>
                        <div class="absolute hidden group-hover:block -top-2 left-full ml-2 p-2 bg-gray-700 text-sm text-gray-300 rounded shadow-lg whitespace-nowrap">
                            Feature in development
                        </div>
                    </a>
                </nav>
            </div>

            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-700">
                <button id="logoutBtnSidebar" class="w-full flex items-center space-x-3 px-4 py-3 text-gray-200 hover:text-red-400 rounded-lg transition-colors">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>Logout</span>
                </button>
            </div>
        </div>

        <!-- Main Content -->
        <div class="main-content lg:ml-64 p-6 mt-16 lg:mt-0">
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold text-purple-400">Profile Editor</h1>
                <div class="flex items-center space-x-4">
                    <a href="#" id="publicProfileLink" target="_blank" class="text-blue-400 hover:text-blue-300 flex items-center">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        View Public Profile
                    </a>
                </div>
            </div>

            <!-- Profile Editor Container -->
            <div id="profileEditor" class="bg-gray-800/80 backdrop-blur-sm rounded-xl shadow-lg p-6">
                <!-- Content will be populated by profile.js -->
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script type="module" src="Assets/js/main.js"></script>
    <script>
        // Mobile menu toggle functionality
        document.addEventListener('DOMContentLoaded', function() {
            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
            const sidebar = document.querySelector('.sidebar');

            mobileMenuToggle?.addEventListener('click', function() {
                sidebar.classList.toggle('open');

                // Update the menu icon based on state
                const icon = mobileMenuToggle.querySelector('i');
                if (sidebar.classList.contains('open')) {
                    icon.classList.remove('fa-bars');
                    icon.classList.add('fa-times');
                } else {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            });

            // Close sidebar when clicking on a link (for mobile)
            document.querySelectorAll('.sidebar-link').forEach(link => {
                link.addEventListener('click', function() {
                    if (window.innerWidth < 1024) {
                        sidebar.classList.remove('open');
                        const icon = mobileMenuToggle.querySelector('i');
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                });
            });
        });
    </script>
</body>
</html>