Hugging Face's logo

Spaces:
Twan07
/
socialhub
Running

App Files Community
vscode commited on
Commit
e1fabf0
·
verified ·
1 Parent(s): f35f42c

Upload 4 files

Browse files
Files changed (4) hide show
  1. AI_SETUP.md +166 -0
  2. index.html +838 -0
  3. script.js +1664 -0
  4. styles.css +1873 -0
AI_SETUP.md ADDED
@@ -0,0 +1,166 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # AI Caption Generator Setup
2
+
3
+ ## 🤖 Features Integrated
4
+
5
+ Your Social Hub now includes an **AI-powered Image Caption Generator** that:
6
+
7
+ 1. **Analyzes uploaded images** using BLIP (Salesforce image captioning model via Hugging Face)
8
+ 2. **Generates 3 creative captions** using Groq's Llama-3.1-8b-instant model
9
+ 3. **Creates relevant hashtags** using AI based on image content
10
+ 4. **Allows posting directly** to social media platforms
11
+
12
+ ---
13
+
14
+ ## 🔑 API Configuration
15
+
16
+ ### Current Setup (Real-Time AI)
17
+ The app uses **two AI services**:
18
+
19
+ #### 1. **Groq API** (for caption & hashtag generation)
20
+ ```javascript
21
+ const GROQ_API_KEY = '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';
22
+ ```
23
+
24
+ #### 2. **Hugging Face API** (for image analysis)
25
+ ```javascript
26
+ const HF_API_TOKEN = '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';
27
+ ```
28
+
29
+ ⚠️ **Note**: These are demo tokens with limited requests.
30
+
31
+ ### Get Your Own FREE API Key:
32
+
33
+ 1. **Sign up at Hugging Face**: https://huggingface.co/join
34
+ 2. **Generate API Token**:
35
+ - Go to Settings → Access Tokens
36
+ - Click "New Token"
37
+ - Name it "Social Hub AI"
38
+ - Copy the token
39
+
40
+ 3. **Replace token in `script.js`**:
41
+ ```javascript
42
+ const HF_API_TOKEN = 'your_token_here';
43
+ ```
44
+
45
+ ### Free Tier Limits:
46
+ - ✅ **1,000 requests/month** (more than enough for personal use)
47
+ - ✅ **No credit card required**
48
+ - ✅ **No time limit**
49
+
50
+ ---
51
+
52
+ ## 🚀 How to Use
53
+
54
+ ### 1. **Upload Image**
55
+ - Click camera icon in header (or press `Ctrl+I`)
56
+ - Upload or drag & drop an image
57
+ - Supports: JPG, PNG, JPEG
58
+
59
+ ### 2. **AI Processing**
60
+ - Image is analyzed automatically
61
+ - Description generated in ~2-3 seconds
62
+ - 3 unique captions created
63
+ - 10 relevant hashtags generated
64
+
65
+ ### 3. **Post to Platform**
66
+ - Click any platform button (Instagram, Facebook, Twitter, LinkedIn)
67
+ - Caption + hashtags automatically copied to clipboard
68
+ - Platform opens in new window
69
+ - Paste and post!
70
+
71
+ ### 4. **Copy Options**
72
+ - Copy just captions
73
+ - Copy just hashtags
74
+ - Copy everything
75
+
76
+ ---
77
+
78
+ ## 🎯 Keyboard Shortcuts
79
+
80
+ - **Ctrl + I**: Open AI Caption Generator
81
+ - **Esc**: Close modal
82
+
83
+ ---
84
+
85
+ ## 🔧 Alternative AI Services (Optional)
86
+
87
+ Want to use a different AI? You can modify `script.js` to use:
88
+
89
+ ### OpenAI GPT-4 Vision:
90
+ ```javascript
91
+ // Replace in script.js
92
+ const OPENAI_API_KEY = 'your_openai_key';
93
+ const OPENAI_API = 'https://api.openai.com/v1/chat/completions';
94
+ ```
95
+
96
+ ### Google Gemini:
97
+ ```javascript
98
+ const GEMINI_API_KEY = 'your_gemini_key';
99
+ const GEMINI_API = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro-vision';
100
+ ```
101
+
102
+ ### Groq (like your original code):
103
+ ```javascript
104
+ const GROQ_API_KEY = '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';
105
+ const GROQ_API = 'https://api.groq.com/openai/v1/chat/completions';
106
+ ```
107
+
108
+ ---
109
+
110
+ ## 🛡️ Privacy & Security
111
+
112
+ - ✅ Images processed via Hugging Face API (HTTPS encrypted)
113
+ - ✅ No images stored on servers
114
+ - ✅ Results generated in real-time
115
+ - ✅ All processing happens client-side except API calls
116
+
117
+ ---
118
+
119
+ ## 💡 Tips
120
+
121
+ 1. **Better results**: Upload clear, high-quality images
122
+ 2. **Edit captions**: Feel free to modify AI-generated content
123
+ 3. **Hashtag relevance**: Remove irrelevant hashtags before posting
124
+ 4. **Multiple tries**: Upload different angles for varied captions
125
+
126
+ ---
127
+
128
+ ## 🐛 Troubleshooting
129
+
130
+ ### "AI generation failed"
131
+ - **Solution**: App uses fallback captions automatically
132
+ - Check console for errors (F12)
133
+ - Verify internet connection
134
+ - API might be at rate limit (wait 1 minute)
135
+
136
+ ### Captions not copying
137
+ - **Solution**: Browser might block clipboard access
138
+ - Allow clipboard permissions
139
+ - Manually select and copy text
140
+
141
+ ### Platform won't open
142
+ - **Solution**: Check pop-up blocker settings
143
+ - Allow pop-ups from localhost/your domain
144
+
145
+ ---
146
+
147
+ ## 📝 Customization
148
+
149
+ Want to customize AI behavior? Edit these in `script.js`:
150
+
151
+ ```javascript
152
+ // Change caption style
153
+ const prompt = `Generate 3 captions...`; // Line ~895
154
+
155
+ // Modify hashtag count
156
+ const allHashtags = [...baseHashtags, ...genericHashtags].slice(0, 15); // More hashtags
157
+
158
+ // Adjust AI temperature (creativity)
159
+ parameters: {
160
+ temperature: 0.9, // Higher = more creative (0.1-1.0)
161
+ }
162
+ ```
163
+
164
+ ---
165
+
166
+ Enjoy your AI-powered Social Hub! 🎉
index.html ADDED
@@ -0,0 +1,838 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Social Media Hub - Your Digital Gateway</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Google Sign-In -->
10
+ <script src="https://accounts.google.com/gsi/client" async defer></script>
11
+ <meta name="google-signin-client_id" content="YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com">
12
+ </head>
13
+ <body>
14
+ <div class="container">
15
+ <!-- Header Section -->
16
+ <header class="header">
17
+ <div class="header-top">
18
+ <div class="header-controls">
19
+ <!-- Theme Toggle -->
20
+ <button class="control-icon-btn" id="themeToggle" title="Toggle Dark/Light Mode">
21
+ <i class="fas fa-moon"></i>
22
+ </button>
23
+ <!-- AI Caption Generator -->
24
+ <button class="control-icon-btn" id="aiCaptionBtn" title="AI Caption Generator">
25
+ <i class="fas fa-camera"></i>
26
+ </button>
27
+ <!-- Keyboard Shortcuts Help -->
28
+ <button class="control-icon-btn" id="shortcutsBtn" title="Keyboard Shortcuts (?)">
29
+ <i class="fas fa-keyboard"></i>
30
+ </button>
31
+ <!-- Analytics Dashboard -->
32
+ <button class="control-icon-btn" id="analyticsBtn" title="Usage Analytics">
33
+ <i class="fas fa-chart-bar"></i>
34
+ </button>
35
+ <!-- Add Custom Platform -->
36
+ <button class="control-icon-btn" id="addPlatformBtn" title="Add Custom Platform">
37
+ <i class="fas fa-plus-circle"></i>
38
+ </button>
39
+ </div>
40
+ </div>
41
+ <div class="logo-section">
42
+ <div class="logo-icon">
43
+ <i class="fas fa-share-alt"></i>
44
+ </div>
45
+ <h1 class="title">Social Hub</h1>
46
+ </div>
47
+ <p class="subtitle">Connect to your favorite platforms instantly</p>
48
+ <!-- System Status -->
49
+ <div class="system-status" id="systemStatus">
50
+ <i class="fas fa-check-circle"></i>
51
+ <span>All Systems Operational</span>
52
+ </div>
53
+ </header>
54
+
55
+ <!-- Filter Tabs -->
56
+ <div class="filter-tabs" id="filterTabs">
57
+ <button class="filter-tab active" data-filter="all">All</button>
58
+ <button class="filter-tab" data-filter="favorites">
59
+ <i class="fas fa-star"></i> Favorites
60
+ </button>
61
+ <button class="filter-tab" data-filter="recent">
62
+ <i class="fas fa-history"></i> Recent
63
+ </button>
64
+ <button class="filter-tab" data-filter="social">Social</button>
65
+ <button class="filter-tab" data-filter="messaging">Messaging</button>
66
+ <button class="filter-tab" data-filter="professional">Professional</button>
67
+ <button class="filter-tab" data-filter="media">Media</button>
68
+ </div>
69
+
70
+ <!-- Search Bar -->
71
+ <div class="search-container">
72
+ <input type="text" id="searchInput" class="search-bar" placeholder="Search platforms...">
73
+ <i class="fas fa-search search-icon"></i>
74
+ </div>
75
+
76
+ <!-- Recent Activity Timeline -->
77
+ <div class="recent-timeline" id="recentTimeline" style="display: none;">
78
+ <h3>Recent Activity</h3>
79
+ <div class="timeline-items" id="timelineItems"></div>
80
+ </div>
81
+
82
+ <!-- Social Media Grid -->
83
+ <div class="social-grid" id="socialGrid">
84
+ <!-- Facebook -->
85
+ <div class="social-card" data-platform="facebook" data-category="social">
86
+ <div class="card-inner">
87
+ <div class="card-front facebook-bg">
88
+ <div class="card-top-controls">
89
+ <button class="favorite-btn" title="Add to Favorites">
90
+ <i class="far fa-star"></i>
91
+ </button>
92
+ <button class="note-btn" title="Add Note">
93
+ <i class="far fa-sticky-note"></i>
94
+ </button>
95
+ <div class="status-indicator" title="Status: Online"></div>
96
+ </div>
97
+ <div class="platform-logo">
98
+ <i class="fab fa-facebook-f"></i>
99
+ </div>
100
+ <h3 class="platform-name">Facebook</h3>
101
+ <div class="platform-badges">
102
+ <span class="visit-badge" style="display: none;">0 visits</span>
103
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
104
+ </div>
105
+ <p class="platform-desc">Connect with friends and the world</p>
106
+ <div class="card-stats">
107
+ <span><i class="fas fa-users"></i> 2.9B users</span>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <a href="https://www.facebook.com" target="_blank" class="launch-btn" data-url="https://www.facebook.com">
112
+ <i class="fas fa-external-link-alt"></i> Launch
113
+ </a>
114
+ </div>
115
+
116
+ <!-- Instagram -->
117
+ <div class="social-card" data-platform="instagram" data-category="social">
118
+ <div class="card-inner">
119
+ <div class="card-front instagram-bg">
120
+ <div class="card-top-controls">
121
+ <button class="favorite-btn" title="Add to Favorites">
122
+ <i class="far fa-star"></i>
123
+ </button>
124
+ <button class="note-btn" title="Add Note">
125
+ <i class="far fa-sticky-note"></i>
126
+ </button>
127
+ <div class="status-indicator" title="Status: Online"></div>
128
+ </div>
129
+ <div class="platform-logo">
130
+ <i class="fab fa-instagram"></i>
131
+ </div>
132
+ <h3 class="platform-name">Instagram</h3>
133
+ <div class="platform-badges">
134
+ <span class="visit-badge" style="display: none;">0 visits</span>
135
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
136
+ </div>
137
+ <p class="platform-desc">Share your moments visually</p>
138
+ <div class="card-stats">
139
+ <span><i class="fas fa-users"></i> 2.0B users</span>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ <a href="https://www.instagram.com" target="_blank" class="launch-btn" data-url="https://www.instagram.com">
144
+ <i class="fas fa-external-link-alt"></i> Launch
145
+ </a>
146
+ </div>
147
+
148
+ <!-- Twitter/X -->
149
+ <div class="social-card" data-platform="twitter" data-category="social">
150
+ <div class="card-inner">
151
+ <div class="card-front twitter-bg">
152
+ <div class="card-top-controls">
153
+ <button class="favorite-btn" title="Add to Favorites">
154
+ <i class="far fa-star"></i>
155
+ </button>
156
+ <button class="note-btn" title="Add Note">
157
+ <i class="far fa-sticky-note"></i>
158
+ </button>
159
+ <div class="status-indicator" title="Status: Online"></div>
160
+ </div>
161
+ <div class="platform-logo">
162
+ <i class="fab fa-twitter"></i>
163
+ </div>
164
+ <h3 class="platform-name">X (Twitter)</h3>
165
+ <div class="platform-badges">
166
+ <span class="visit-badge" style="display: none;">0 visits</span>
167
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
168
+ </div>
169
+ <p class="platform-desc">Join the conversation</p>
170
+ <div class="card-stats">
171
+ <span><i class="fas fa-users"></i> 556M users</span>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <a href="https://www.twitter.com" target="_blank" class="launch-btn" data-url="https://www.twitter.com">
176
+ <i class="fas fa-external-link-alt"></i> Launch
177
+ </a>
178
+ </div>
179
+
180
+ <!-- LinkedIn -->
181
+ <div class="social-card" data-platform="linkedin" data-category="professional">
182
+ <div class="card-inner">
183
+ <div class="card-front linkedin-bg">
184
+ <div class="card-top-controls">
185
+ <button class="favorite-btn" title="Add to Favorites">
186
+ <i class="far fa-star"></i>
187
+ </button>
188
+ <button class="note-btn" title="Add Note">
189
+ <i class="far fa-sticky-note"></i>
190
+ </button>
191
+ <div class="status-indicator" title="Status: Online"></div>
192
+ </div>
193
+ <div class="platform-logo">
194
+ <i class="fab fa-linkedin-in"></i>
195
+ </div>
196
+ <h3 class="platform-name">LinkedIn</h3>
197
+ <div class="platform-badges">
198
+ <span class="visit-badge" style="display: none;">0 visits</span>
199
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
200
+ </div>
201
+ <p class="platform-desc">Professional networking</p>
202
+ <div class="card-stats">
203
+ <span><i class="fas fa-users"></i> 930M users</span>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <a href="https://www.linkedin.com" target="_blank" class="launch-btn" data-url="https://www.linkedin.com">
208
+ <i class="fas fa-external-link-alt"></i> Launch
209
+ </a>
210
+ </div>
211
+
212
+ <!-- YouTube -->
213
+ <div class="social-card" data-platform="youtube" data-category="media">
214
+ <div class="card-inner">
215
+ <div class="card-front youtube-bg">
216
+ <div class="card-top-controls">
217
+ <button class="favorite-btn" title="Add to Favorites">
218
+ <i class="far fa-star"></i>
219
+ </button>
220
+ <button class="note-btn" title="Add Note">
221
+ <i class="far fa-sticky-note"></i>
222
+ </button>
223
+ <div class="status-indicator" title="Status: Online"></div>
224
+ </div>
225
+ <div class="platform-logo">
226
+ <i class="fab fa-youtube"></i>
227
+ </div>
228
+ <h3 class="platform-name">YouTube</h3>
229
+ <div class="platform-badges">
230
+ <span class="visit-badge" style="display: none;">0 visits</span>
231
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
232
+ </div>
233
+ <p class="platform-desc">Watch and share videos</p>
234
+ <div class="card-stats">
235
+ <span><i class="fas fa-users"></i> 2.5B users</span>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ <a href="https://www.youtube.com" target="_blank" class="launch-btn" data-url="https://www.youtube.com">
240
+ <i class="fas fa-external-link-alt"></i> Launch
241
+ </a>
242
+ </div>
243
+
244
+ <!-- TikTok -->
245
+ <div class="social-card" data-platform="tiktok" data-category="media">
246
+ <div class="card-inner">
247
+ <div class="card-front tiktok-bg">
248
+ <div class="card-top-controls">
249
+ <button class="favorite-btn" title="Add to Favorites">
250
+ <i class="far fa-star"></i>
251
+ </button>
252
+ <button class="note-btn" title="Add Note">
253
+ <i class="far fa-sticky-note"></i>
254
+ </button>
255
+ <div class="status-indicator" title="Status: Online"></div>
256
+ </div>
257
+ <div class="platform-logo">
258
+ <i class="fab fa-tiktok"></i>
259
+ </div>
260
+ <h3 class="platform-name">TikTok</h3>
261
+ <div class="platform-badges">
262
+ <span class="visit-badge" style="display: none;">0 visits</span>
263
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
264
+ </div>
265
+ <p class="platform-desc">Create short entertaining videos</p>
266
+ <div class="card-stats">
267
+ <span><i class="fas fa-users"></i> 1.5B users</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ <a href="https://www.tiktok.com" target="_blank" class="launch-btn" data-url="https://www.tiktok.com">
272
+ <i class="fas fa-external-link-alt"></i> Launch
273
+ </a>
274
+ </div>
275
+
276
+ <!-- Reddit -->
277
+ <div class="social-card" data-platform="reddit" data-category="social">
278
+ <div class="card-inner">
279
+ <div class="card-front reddit-bg">
280
+ <div class="card-top-controls">
281
+ <button class="favorite-btn" title="Add to Favorites">
282
+ <i class="far fa-star"></i>
283
+ </button>
284
+ <button class="note-btn" title="Add Note">
285
+ <i class="far fa-sticky-note"></i>
286
+ </button>
287
+ <div class="status-indicator" title="Status: Online"></div>
288
+ </div>
289
+ <div class="platform-logo">
290
+ <i class="fab fa-reddit-alien"></i>
291
+ </div>
292
+ <h3 class="platform-name">Reddit</h3>
293
+ <div class="platform-badges">
294
+ <span class="visit-badge" style="display: none;">0 visits</span>
295
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
296
+ </div>
297
+ <p class="platform-desc">Dive into communities</p>
298
+ <div class="card-stats">
299
+ <span><i class="fas fa-users"></i> 430M users</span>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ <a href="https://www.reddit.com" target="_blank" class="launch-btn" data-url="https://www.reddit.com">
304
+ <i class="fas fa-external-link-alt"></i> Launch
305
+ </a>
306
+ </div>
307
+
308
+ <!-- WhatsApp -->
309
+ <div class="social-card" data-platform="whatsapp" data-category="messaging">
310
+ <div class="card-inner">
311
+ <div class="card-front whatsapp-bg">
312
+ <div class="card-top-controls">
313
+ <button class="favorite-btn" title="Add to Favorites">
314
+ <i class="far fa-star"></i>
315
+ </button>
316
+ <button class="note-btn" title="Add Note">
317
+ <i class="far fa-sticky-note"></i>
318
+ </button>
319
+ <div class="status-indicator" title="Status: Online"></div>
320
+ </div>
321
+ <div class="platform-logo">
322
+ <i class="fab fa-whatsapp"></i>
323
+ </div>
324
+ <h3 class="platform-name">WhatsApp</h3>
325
+ <div class="platform-badges">
326
+ <span class="visit-badge" style="display: none;">0 visits</span>
327
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
328
+ </div>
329
+ <p class="platform-desc">Simple. Secure. Messaging.</p>
330
+ <div class="card-stats">
331
+ <span><i class="fas fa-users"></i> 2.7B users</span>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <a href="https://web.whatsapp.com" target="_blank" class="launch-btn" data-url="https://web.whatsapp.com">
336
+ <i class="fas fa-external-link-alt"></i> Launch
337
+ </a>
338
+ </div>
339
+
340
+ <!-- Telegram -->
341
+ <div class="social-card" data-platform="telegram" data-category="messaging">
342
+ <div class="card-inner">
343
+ <div class="card-front telegram-bg">
344
+ <div class="card-top-controls">
345
+ <button class="favorite-btn" title="Add to Favorites">
346
+ <i class="far fa-star"></i>
347
+ </button>
348
+ <button class="note-btn" title="Add Note">
349
+ <i class="far fa-sticky-note"></i>
350
+ </button>
351
+ <div class="status-indicator" title="Status: Online"></div>
352
+ </div>
353
+ <div class="platform-logo">
354
+ <i class="fab fa-telegram-plane"></i>
355
+ </div>
356
+ <h3 class="platform-name">Telegram</h3>
357
+ <div class="platform-badges">
358
+ <span class="visit-badge" style="display: none;">0 visits</span>
359
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
360
+ </div>
361
+ <p class="platform-desc">Fast and secure messaging</p>
362
+ <div class="card-stats">
363
+ <span><i class="fas fa-users"></i> 800M users</span>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ <a href="https://web.telegram.org" target="_blank" class="launch-btn" data-url="https://web.telegram.org">
368
+ <i class="fas fa-external-link-alt"></i> Launch
369
+ </a>
370
+ </div>
371
+
372
+ <!-- Discord -->
373
+ <div class="social-card" data-platform="discord" data-category="messaging">
374
+ <div class="card-inner">
375
+ <div class="card-front discord-bg">
376
+ <div class="card-top-controls">
377
+ <button class="favorite-btn" title="Add to Favorites">
378
+ <i class="far fa-star"></i>
379
+ </button>
380
+ <button class="note-btn" title="Add Note">
381
+ <i class="far fa-sticky-note"></i>
382
+ </button>
383
+ <div class="status-indicator" title="Status: Online"></div>
384
+ </div>
385
+ <div class="platform-logo">
386
+ <i class="fab fa-discord"></i>
387
+ </div>
388
+ <h3 class="platform-name">Discord</h3>
389
+ <div class="platform-badges">
390
+ <span class="visit-badge" style="display: none;">0 visits</span>
391
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
392
+ </div>
393
+ <p class="platform-desc">Voice, video, and text chat</p>
394
+ <div class="card-stats">
395
+ <span><i class="fas fa-users"></i> 563M users</span>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ <a href="https://discord.com/app" target="_blank" class="launch-btn" data-url="https://discord.com/app">
400
+ <i class="fas fa-external-link-alt"></i> Launch
401
+ </a>
402
+ </div>
403
+
404
+ <!-- Snapchat -->
405
+ <div class="social-card" data-platform="snapchat" data-category="social">
406
+ <div class="card-inner">
407
+ <div class="card-front snapchat-bg">
408
+ <div class="card-top-controls">
409
+ <button class="favorite-btn" title="Add to Favorites">
410
+ <i class="far fa-star"></i>
411
+ </button>
412
+ <button class="note-btn" title="Add Note">
413
+ <i class="far fa-sticky-note"></i>
414
+ </button>
415
+ <div class="status-indicator" title="Status: Online"></div>
416
+ </div>
417
+ <div class="platform-logo">
418
+ <i class="fab fa-snapchat-ghost"></i>
419
+ </div>
420
+ <h3 class="platform-name">Snapchat</h3>
421
+ <div class="platform-badges">
422
+ <span class="visit-badge" style="display: none;">0 visits</span>
423
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
424
+ </div>
425
+ <p class="platform-desc">Share the moment</p>
426
+ <div class="card-stats">
427
+ <span><i class="fas fa-users"></i> 750M users</span>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ <a href="https://www.snapchat.com" target="_blank" class="launch-btn" data-url="https://www.snapchat.com">
432
+ <i class="fas fa-external-link-alt"></i> Launch
433
+ </a>
434
+ </div>
435
+
436
+ <!-- Pinterest -->
437
+ <div class="social-card" data-platform="pinterest" data-category="media">
438
+ <div class="card-inner">
439
+ <div class="card-front pinterest-bg">
440
+ <div class="card-top-controls">
441
+ <button class="favorite-btn" title="Add to Favorites">
442
+ <i class="far fa-star"></i>
443
+ </button>
444
+ <button class="note-btn" title="Add Note">
445
+ <i class="far fa-sticky-note"></i>
446
+ </button>
447
+ <div class="status-indicator" title="Status: Online"></div>
448
+ </div>
449
+ <div class="platform-logo">
450
+ <i class="fab fa-pinterest-p"></i>
451
+ </div>
452
+ <h3 class="platform-name">Pinterest</h3>
453
+ <div class="platform-badges">
454
+ <span class="visit-badge" style="display: none;">0 visits</span>
455
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
456
+ </div>
457
+ <p class="platform-desc">Discover ideas and inspiration</p>
458
+ <div class="card-stats">
459
+ <span><i class="fas fa-users"></i> 465M users</span>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ <a href="https://www.pinterest.com" target="_blank" class="launch-btn" data-url="https://www.pinterest.com">
464
+ <i class="fas fa-external-link-alt"></i> Launch
465
+ </a>
466
+ </div>
467
+ </div>
468
+
469
+ <!-- Footer -->
470
+ <footer class="footer">
471
+ <p>© 2025 Social Hub | Your Digital Gateway to All Platforms</p>
472
+ <div class="footer-links">
473
+ <a href="#"><i class="fas fa-shield-alt"></i> Privacy</a>
474
+ <a href="#"><i class="fas fa-file-contract"></i> Terms</a>
475
+ <a href="#"><i class="fas fa-envelope"></i> Contact</a>
476
+ </div>
477
+ </footer>
478
+ </div>
479
+
480
+ <!-- Particles Background -->
481
+ <canvas id="particles"></canvas>
482
+
483
+ <!-- Keyboard Shortcuts Modal -->
484
+ <div id="shortcutsModal" class="modal">
485
+ <div class="modal-content shortcuts-modal">
486
+ <div class="modal-header">
487
+ <div class="modal-title">
488
+ <i class="fas fa-keyboard"></i>
489
+ <span>Keyboard Shortcuts</span>
490
+ </div>
491
+ <button class="modal-btn close-btn" onclick="document.getElementById('shortcutsModal').classList.remove('active')">
492
+ <i class="fas fa-times"></i>
493
+ </button>
494
+ </div>
495
+ <div class="modal-body shortcuts-body">
496
+ <div class="shortcut-item">
497
+ <kbd>/</kbd>
498
+ <span>Focus search bar</span>
499
+ </div>
500
+ <div class="shortcut-item">
501
+ <kbd>Esc</kbd>
502
+ <span>Close modal / Clear search</span>
503
+ </div>
504
+ <div class="shortcut-item">
505
+ <kbd>?</kbd>
506
+ <span>Show shortcuts</span>
507
+ </div>
508
+ <div class="shortcut-item">
509
+ <kbd>1-9</kbd>
510
+ <span>Quick launch platforms</span>
511
+ </div>
512
+ <div class="shortcut-item">
513
+ <kbd>Ctrl</kbd> + <kbd>K</kbd>
514
+ <span>Open analytics</span>
515
+ </div>
516
+ <div class="shortcut-item">
517
+ <kbd>Ctrl</kbd> + <kbd>D</kbd>
518
+ <span>Toggle dark/light mode</span>
519
+ </div>
520
+ <div class="shortcut-item">
521
+ <kbd>Ctrl</kbd> + <kbd>I</kbd>
522
+ <span>Open AI Caption Generator</span>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- Analytics Modal -->
529
+ <div id="analyticsModal" class="modal">
530
+ <div class="modal-content analytics-modal">
531
+ <div class="modal-header">
532
+ <div class="modal-title">
533
+ <i class="fas fa-chart-bar"></i>
534
+ <span>Usage Analytics</span>
535
+ </div>
536
+ <button class="modal-btn close-btn" onclick="document.getElementById('analyticsModal').classList.remove('active')">
537
+ <i class="fas fa-times"></i>
538
+ </button>
539
+ </div>
540
+ <div class="modal-body analytics-body">
541
+ <div class="analytics-stats">
542
+ <div class="stat-card">
543
+ <i class="fas fa-mouse-pointer"></i>
544
+ <h3 id="totalVisits">0</h3>
545
+ <p>Total Visits</p>
546
+ </div>
547
+ <div class="stat-card">
548
+ <i class="fas fa-clock"></i>
549
+ <h3 id="totalTime">0h 0m</h3>
550
+ <p>Total Time</p>
551
+ </div>
552
+ <div class="stat-card">
553
+ <i class="fas fa-star"></i>
554
+ <h3 id="totalFavorites">0</h3>
555
+ <p>Favorites</p>
556
+ </div>
557
+ <div class="stat-card">
558
+ <i class="fas fa-fire"></i>
559
+ <h3 id="mostUsed">-</h3>
560
+ <p>Most Used</p>
561
+ </div>
562
+ </div>
563
+ <div class="analytics-chart">
564
+ <h3>Platform Usage</h3>
565
+ <div id="usageChart" class="usage-chart"></div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </div>
570
+
571
+ <!-- Add Platform Modal -->
572
+ <div id="addPlatformModal" class="modal">
573
+ <div class="modal-content add-platform-modal">
574
+ <div class="modal-header">
575
+ <div class="modal-title">
576
+ <i class="fas fa-plus-circle"></i>
577
+ <span>Add Custom Platform</span>
578
+ </div>
579
+ <button class="modal-btn close-btn" onclick="document.getElementById('addPlatformModal').classList.remove('active')">
580
+ <i class="fas fa-times"></i>
581
+ </button>
582
+ </div>
583
+ <div class="modal-body add-platform-body">
584
+ <form id="addPlatformForm">
585
+ <div class="form-group">
586
+ <label>Platform Name</label>
587
+ <input type="text" id="customPlatformName" placeholder="e.g., My Custom App" required>
588
+ </div>
589
+ <div class="form-group">
590
+ <label>Platform URL</label>
591
+ <input type="url" id="customPlatformURL" placeholder="https://example.com" required>
592
+ </div>
593
+ <div class="form-group">
594
+ <label>Icon Class (Font Awesome)</label>
595
+ <input type="text" id="customPlatformIcon" placeholder="fab fa-custom" value="fas fa-globe">
596
+ </div>
597
+ <div class="form-group">
598
+ <label>Background Color</label>
599
+ <input type="color" id="customPlatformColor" value="#00d4ff">
600
+ </div>
601
+ <div class="form-group">
602
+ <label>Category</label>
603
+ <select id="customPlatformCategory">
604
+ <option value="social">Social</option>
605
+ <option value="messaging">Messaging</option>
606
+ <option value="professional">Professional</option>
607
+ <option value="media">Media</option>
608
+ </select>
609
+ </div>
610
+ <button type="submit" class="submit-btn">Add Platform</button>
611
+ </form>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <!-- Note Modal -->
617
+ <div id="noteModal" class="modal">
618
+ <div class="modal-content note-modal">
619
+ <div class="modal-header">
620
+ <div class="modal-title">
621
+ <i class="fas fa-sticky-note"></i>
622
+ <span>Platform Note</span>
623
+ </div>
624
+ <button class="modal-btn close-btn" onclick="document.getElementById('noteModal').classList.remove('active')">
625
+ <i class="fas fa-times"></i>
626
+ </button>
627
+ </div>
628
+ <div class="modal-body note-body">
629
+ <h3 id="notePlatformName"></h3>
630
+ <textarea id="noteTextarea" placeholder="Add a note or reminder..." rows="5"></textarea>
631
+ <div class="note-actions">
632
+ <button class="cancel-btn" onclick="document.getElementById('noteModal').classList.remove('active')">Cancel</button>
633
+ <button class="save-btn" id="saveNoteBtn">Save Note</button>
634
+ <button class="delete-btn" id="deleteNoteBtn">Delete Note</button>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+
640
+ <!-- Time Tracking Widget -->
641
+ <div id="timeTracker" class="time-tracker" style="display: none;">
642
+ <div class="tracker-header">
643
+ <i class="fas fa-stopwatch"></i>
644
+ <span>Time Spent: </span>
645
+ <span id="trackerTime">00:00</span>
646
+ </div>
647
+ <button class="tracker-stop" id="stopTracking">
648
+ <i class="fas fa-stop"></i>
649
+ </button>
650
+ </div>
651
+
652
+ <!-- AI Caption Generator Modal -->
653
+ <div id="aiCaptionModal" class="modal">
654
+ <div class="modal-content ai-caption-modal">
655
+ <div class="modal-header">
656
+ <div class="modal-title">
657
+ <i class="fas fa-camera"></i>
658
+ <span>AI Caption Generator</span>
659
+ </div>
660
+ <button class="modal-btn close-btn" onclick="document.getElementById('aiCaptionModal').classList.remove('active')">
661
+ <i class="fas fa-times"></i>
662
+ </button>
663
+ </div>
664
+ <div class="modal-body ai-caption-body">
665
+ <!-- Upload Section -->
666
+ <div class="upload-section" id="uploadSection">
667
+ <div class="upload-area" id="uploadArea">
668
+ <i class="fas fa-cloud-upload-alt"></i>
669
+ <h3>Upload Your Photo</h3>
670
+ <p>Drop an image here or click to browse</p>
671
+ <input type="file" id="imageInput" accept="image/*" hidden>
672
+ <button class="upload-btn" onclick="document.getElementById('imageInput').click()">
673
+ <i class="fas fa-folder-open"></i> Choose Image
674
+ </button>
675
+ </div>
676
+ </div>
677
+
678
+ <!-- Preview & Results Section -->
679
+ <div class="results-section" id="resultsSection" style="display: none;">
680
+ <div class="image-preview-container">
681
+ <img id="imagePreview" src="" alt="Preview">
682
+ <button class="change-image-btn" onclick="document.getElementById('imageInput').click()">
683
+ <i class="fas fa-exchange-alt"></i> Change Image
684
+ </button>
685
+ </div>
686
+
687
+ <div class="ai-results">
688
+ <!-- Description -->
689
+ <div class="result-card">
690
+ <div class="result-header">
691
+ <i class="fas fa-align-left"></i>
692
+ <h4>AI Description</h4>
693
+ </div>
694
+ <div class="result-content" id="aiDescription">
695
+ <div class="loading-dots">
696
+ <span></span><span></span><span></span>
697
+ </div>
698
+ </div>
699
+ </div>
700
+
701
+ <!-- Captions -->
702
+ <div class="result-card">
703
+ <div class="result-header">
704
+ <i class="fas fa-quote-right"></i>
705
+ <h4>Generated Captions</h4>
706
+ </div>
707
+ <div class="result-content" id="aiCaptions">
708
+ <div class="loading-dots">
709
+ <span></span><span></span><span></span>
710
+ </div>
711
+ </div>
712
+ </div>
713
+
714
+ <!-- Hashtags -->
715
+ <div class="result-card">
716
+ <div class="result-header">
717
+ <i class="fas fa-hashtag"></i>
718
+ <h4>Hashtags</h4>
719
+ </div>
720
+ <div class="result-content" id="aiHashtags">
721
+ <div class="loading-dots">
722
+ <span></span><span></span><span></span>
723
+ </div>
724
+ </div>
725
+ </div>
726
+
727
+ <!-- Post to Platform -->
728
+ <div class="post-section">
729
+ <h4><i class="fas fa-share-alt"></i> Post to Platform</h4>
730
+ <div class="platform-select-grid">
731
+ <button class="platform-post-btn" data-platform="instagram">
732
+ <i class="fab fa-instagram"></i> Instagram
733
+ </button>
734
+ <button class="platform-post-btn" data-platform="facebook">
735
+ <i class="fab fa-facebook"></i> Facebook
736
+ </button>
737
+ <button class="platform-post-btn" data-platform="twitter">
738
+ <i class="fab fa-twitter"></i> Twitter/X
739
+ </button>
740
+ <button class="platform-post-btn" data-platform="linkedin">
741
+ <i class="fab fa-linkedin"></i> LinkedIn
742
+ </button>
743
+ </div>
744
+ <div class="copy-buttons">
745
+ <button class="copy-btn" id="copyCaptionBtn">
746
+ <i class="fas fa-copy"></i> Copy Caption
747
+ </button>
748
+ <button class="copy-btn" id="copyHashtagsBtn">
749
+ <i class="fas fa-copy"></i> Copy Hashtags
750
+ </button>
751
+ <button class="copy-btn" id="copyAllBtn">
752
+ <i class="fas fa-copy"></i> Copy All
753
+ </button>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ </div>
758
+ </div>
759
+ </div>
760
+ </div>
761
+
762
+ <!-- Modal for Embedded Platform -->
763
+ <div id="platformModal" class="modal">
764
+ <div class="modal-content">
765
+ <div class="modal-header">
766
+ <div class="modal-title">
767
+ <i class="platform-icon"></i>
768
+ <span class="platform-title">Platform</span>
769
+ </div>
770
+ <div class="modal-controls">
771
+ <button class="modal-btn close-btn" title="Close">
772
+ <i class="fas fa-times"></i>
773
+ </button>
774
+ </div>
775
+ </div>
776
+ <div class="modal-body">
777
+ <!-- Login/Authentication Section -->
778
+ <div id="authSection" class="auth-section">
779
+ <div class="auth-container">
780
+ <div class="auth-icon">
781
+ <i class="platform-icon-large"></i>
782
+ </div>
783
+ <h2 class="auth-title">Connect to <span class="platform-name-text">Platform</span></h2>
784
+ <p class="auth-description">Choose your preferred method to access this platform. A new window will open for secure authentication.</p>
785
+
786
+ <div class="auth-options">
787
+ <!-- Google Sign-In Button -->
788
+ <button class="auth-btn google-btn" id="googleSignIn">
789
+ <i class="fab fa-google"></i>
790
+ <span>Sign in with Google (Opens in New Window)</span>
791
+ </button>
792
+
793
+ <!-- Direct Platform Login -->
794
+ <button class="auth-btn platform-btn" id="platformSignIn">
795
+ <i class="platform-icon-small"></i>
796
+ <span class="platform-login-text">Login with Platform Account</span>
797
+ </button>
798
+
799
+ <!-- Guest/Web Version -->
800
+ <button class="auth-btn guest-btn" id="guestAccess">
801
+ <i class="fas fa-globe"></i>
802
+ <span>Open Web Version (New Window)</span>
803
+ </button>
804
+ </div>
805
+
806
+ <div class="auth-footer">
807
+ <i class="fas fa-shield-alt"></i>
808
+ <p>Your credentials are secure and handled by the platform's official authentication</p>
809
+ </div>
810
+ </div>
811
+ </div>
812
+
813
+ <!-- Platform Content Section -->
814
+ <div id="platformSection" class="platform-section" style="display: none;">
815
+ <div class="platform-controls">
816
+ <button class="control-btn refresh-btn" title="Refresh">
817
+ <i class="fas fa-sync-alt"></i>
818
+ </button>
819
+ <button class="control-btn fullscreen-btn" title="Fullscreen">
820
+ <i class="fas fa-expand"></i>
821
+ </button>
822
+ <button class="control-btn logout-btn" title="Logout">
823
+ <i class="fas fa-sign-out-alt"></i>
824
+ </button>
825
+ </div>
826
+ <iframe id="platformFrame" src="" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
827
+ <div class="loading-spinner">
828
+ <i class="fas fa-circle-notch fa-spin"></i>
829
+ <p>Loading platform...</p>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ </div>
835
+
836
+ <script src="script.js"></script>
837
+ </body>
838
+ </html>
script.js ADDED
@@ -0,0 +1,1664 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // ===== GLOBAL VARIABLES AND INITIALIZATION =====
2
+ let currentPlatformURL = '';
3
+ let currentPlatformName = '';
4
+ let currentPlatform = '';
5
+ let currentNoteEditPlatform = '';
6
+ let timeTrackingInterval = null;
7
+ let startTime = null;
8
+ let currentImageData = null;
9
+ let currentDescription = '';
10
+ let currentCaptions = '';
11
+ let currentHashtags = '';
12
+
13
+ // ===== STORAGE MANAGER =====
14
+ const StorageManager = {
15
+ // Get favorites
16
+ getFavorites: () => {
17
+ const favorites = localStorage.getItem('socialHub_favorites');
18
+ return favorites ? JSON.parse(favorites) : [];
19
+ },
20
+
21
+ // Set favorites
22
+ setFavorites: (favorites) => {
23
+ localStorage.setItem('socialHub_favorites', JSON.stringify(favorites));
24
+ },
25
+
26
+ // Toggle favorite
27
+ toggleFavorite: (platform) => {
28
+ const favorites = StorageManager.getFavorites();
29
+ const index = favorites.indexOf(platform);
30
+ if (index > -1) {
31
+ favorites.splice(index, 1);
32
+ } else {
33
+ favorites.push(platform);
34
+ }
35
+ StorageManager.setFavorites(favorites);
36
+ return favorites;
37
+ },
38
+
39
+ // Get notes
40
+ getNotes: () => {
41
+ const notes = localStorage.getItem('socialHub_notes');
42
+ return notes ? JSON.parse(notes) : {};
43
+ },
44
+
45
+ // Set note
46
+ setNote: (platform, note) => {
47
+ const notes = StorageManager.getNotes();
48
+ if (note.trim()) {
49
+ notes[platform] = note;
50
+ } else {
51
+ delete notes[platform];
52
+ }
53
+ localStorage.setItem('socialHub_notes', JSON.stringify(notes));
54
+ },
55
+
56
+ // Get analytics
57
+ getAnalytics: () => {
58
+ const analytics = localStorage.getItem('socialHub_analytics');
59
+ return analytics ? JSON.parse(analytics) : {};
60
+ },
61
+
62
+ // Update analytics
63
+ updateAnalytics: (platform) => {
64
+ const analytics = StorageManager.getAnalytics();
65
+ if (!analytics[platform]) {
66
+ analytics[platform] = { visits: 0, time: 0, lastVisit: null };
67
+ }
68
+ analytics[platform].visits++;
69
+ analytics[platform].lastVisit = new Date().toISOString();
70
+ localStorage.setItem('socialHub_analytics', JSON.stringify(analytics));
71
+ },
72
+
73
+ // Update time spent
74
+ updateTimeSpent: (platform, seconds) => {
75
+ const analytics = StorageManager.getAnalytics();
76
+ if (!analytics[platform]) {
77
+ analytics[platform] = { visits: 0, time: 0, lastVisit: null };
78
+ }
79
+ analytics[platform].time = (analytics[platform].time || 0) + seconds;
80
+ localStorage.setItem('socialHub_analytics', JSON.stringify(analytics));
81
+ },
82
+
83
+ // Get recent activity
84
+ getRecentActivity: () => {
85
+ const recent = localStorage.getItem('socialHub_recent');
86
+ return recent ? JSON.parse(recent) : [];
87
+ },
88
+
89
+ // Add to recent
90
+ addToRecent: (platform, name, icon) => {
91
+ let recent = StorageManager.getRecentActivity();
92
+ recent = recent.filter(item => item.platform !== platform);
93
+ recent.unshift({ platform, name, icon, timestamp: new Date().toISOString() });
94
+ recent = recent.slice(0, 10);
95
+ localStorage.setItem('socialHub_recent', JSON.stringify(recent));
96
+ },
97
+
98
+ // Get theme
99
+ getTheme: () => {
100
+ return localStorage.getItem('socialHub_theme') || 'dark';
101
+ },
102
+
103
+ // Set theme
104
+ setTheme: (theme) => {
105
+ localStorage.setItem('socialHub_theme', theme);
106
+ },
107
+
108
+ // Get custom platforms
109
+ getCustomPlatforms: () => {
110
+ const custom = localStorage.getItem('socialHub_custom');
111
+ return custom ? JSON.parse(custom) : [];
112
+ },
113
+
114
+ // Add custom platform
115
+ addCustomPlatform: (platform) => {
116
+ const custom = StorageManager.getCustomPlatforms();
117
+ custom.push(platform);
118
+ localStorage.setItem('socialHub_custom', JSON.stringify(custom));
119
+ },
120
+
121
+ // Remove custom platform
122
+ removeCustomPlatform: (id) => {
123
+ let custom = StorageManager.getCustomPlatforms();
124
+ custom = custom.filter(p => p.id !== id);
125
+ localStorage.setItem('socialHub_custom', JSON.stringify(custom));
126
+ }
127
+ };
128
+
129
+ // ===== Particles Background Animation =====
130
+ const canvas = document.getElementById('particles');
131
+ const ctx = canvas.getContext('2d');
132
+
133
+ canvas.width = window.innerWidth;
134
+ canvas.height = window.innerHeight;
135
+
136
+ let particlesArray = [];
137
+ const numberOfParticles = 100;
138
+
139
+ class Particle {
140
+ constructor() {
141
+ this.x = Math.random() * canvas.width;
142
+ this.y = Math.random() * canvas.height;
143
+ this.size = Math.random() * 2 + 1;
144
+ this.speedX = Math.random() * 1 - 0.5;
145
+ this.speedY = Math.random() * 1 - 0.5;
146
+ this.opacity = Math.random() * 0.5 + 0.2;
147
+ }
148
+
149
+ update() {
150
+ this.x += this.speedX;
151
+ this.y += this.speedY;
152
+
153
+ if (this.x > canvas.width || this.x < 0) {
154
+ this.speedX = -this.speedX;
155
+ }
156
+ if (this.y > canvas.height || this.y < 0) {
157
+ this.speedY = -this.speedY;
158
+ }
159
+ }
160
+
161
+ draw() {
162
+ ctx.fillStyle = `rgba(0, 212, 255, ${this.opacity})`;
163
+ ctx.beginPath();
164
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
165
+ ctx.fill();
166
+ }
167
+ }
168
+
169
+ function initParticles() {
170
+ particlesArray = [];
171
+ for (let i = 0; i < numberOfParticles; i++) {
172
+ particlesArray.push(new Particle());
173
+ }
174
+ }
175
+
176
+ function animateParticles() {
177
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
178
+
179
+ for (let i = 0; i < particlesArray.length; i++) {
180
+ particlesArray[i].update();
181
+ particlesArray[i].draw();
182
+
183
+ // Connect particles with lines
184
+ for (let j = i; j < particlesArray.length; j++) {
185
+ const dx = particlesArray[i].x - particlesArray[j].x;
186
+ const dy = particlesArray[i].y - particlesArray[j].y;
187
+ const distance = Math.sqrt(dx * dx + dy * dy);
188
+
189
+ if (distance < 100) {
190
+ ctx.strokeStyle = `rgba(0, 212, 255, ${0.2 * (1 - distance / 100)})`;
191
+ ctx.lineWidth = 1;
192
+ ctx.beginPath();
193
+ ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
194
+ ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
195
+ ctx.stroke();
196
+ }
197
+ }
198
+ }
199
+
200
+ requestAnimationFrame(animateParticles);
201
+ }
202
+
203
+ // ===== Window Resize Handler =====
204
+ window.addEventListener('resize', () => {
205
+ canvas.width = window.innerWidth;
206
+ canvas.height = window.innerHeight;
207
+ initParticles();
208
+ });
209
+
210
+ // ===== Search Functionality =====
211
+ const searchInput = document.getElementById('searchInput');
212
+ const socialCards = document.querySelectorAll('.social-card');
213
+
214
+ searchInput.addEventListener('input', (e) => {
215
+ const searchTerm = e.target.value.toLowerCase();
216
+ const activeFilter = document.querySelector('.filter-tab.active')?.getAttribute('data-filter') || 'all';
217
+
218
+ socialCards.forEach(card => {
219
+ const platform = card.getAttribute('data-platform');
220
+ const platformName = card.querySelector('.platform-name').textContent.toLowerCase();
221
+ const platformDesc = card.querySelector('.platform-desc').textContent.toLowerCase();
222
+ const category = card.getAttribute('data-category');
223
+ const isFavorite = StorageManager.getFavorites().includes(platform);
224
+
225
+ const matchesSearch = platform.includes(searchTerm) ||
226
+ platformName.includes(searchTerm) ||
227
+ platformDesc.includes(searchTerm);
228
+
229
+ const matchesFilter = activeFilter === 'all' ||
230
+ (activeFilter === 'favorites' && isFavorite) ||
231
+ (activeFilter === 'recent' && isInRecentActivity(platform)) ||
232
+ (activeFilter !== 'favorites' && activeFilter !== 'recent' && category === activeFilter);
233
+
234
+ if (matchesSearch && matchesFilter) {
235
+ card.classList.remove('hidden');
236
+ } else {
237
+ card.classList.add('hidden');
238
+ }
239
+ });
240
+ });
241
+
242
+ function isInRecentActivity(platform) {
243
+ const recent = StorageManager.getRecentActivity();
244
+ return recent.some(item => item.platform === platform);
245
+ }
246
+
247
+ // ===== FILTER FUNCTIONALITY =====
248
+ const filterTabs = document.querySelectorAll('.filter-tab');
249
+ const recentTimeline = document.getElementById('recentTimeline');
250
+
251
+ filterTabs.forEach(tab => {
252
+ tab.addEventListener('click', () => {
253
+ // Update active tab
254
+ filterTabs.forEach(t => t.classList.remove('active'));
255
+ tab.classList.add('active');
256
+
257
+ const filter = tab.getAttribute('data-filter');
258
+
259
+ // Show/hide recent timeline
260
+ if (filter === 'recent') {
261
+ updateRecentTimeline();
262
+ recentTimeline.style.display = 'block';
263
+ } else {
264
+ recentTimeline.style.display = 'none';
265
+ }
266
+
267
+ // Filter cards
268
+ filterCards(filter);
269
+ });
270
+ });
271
+
272
+ function filterCards(filter) {
273
+ const favorites = StorageManager.getFavorites();
274
+
275
+ socialCards.forEach(card => {
276
+ const platform = card.getAttribute('data-platform');
277
+ const category = card.getAttribute('data-category');
278
+ const searchTerm = searchInput.value.toLowerCase();
279
+ const platformName = card.querySelector('.platform-name').textContent.toLowerCase();
280
+ const platformDesc = card.querySelector('.platform-desc').textContent.toLowerCase();
281
+
282
+ const matchesSearch = !searchTerm || platform.includes(searchTerm) ||
283
+ platformName.includes(searchTerm) || platformDesc.includes(searchTerm);
284
+
285
+ let show = false;
286
+
287
+ if (filter === 'all') {
288
+ show = true;
289
+ } else if (filter === 'favorites') {
290
+ show = favorites.includes(platform);
291
+ } else if (filter === 'recent') {
292
+ show = isInRecentActivity(platform);
293
+ } else {
294
+ show = category === filter;
295
+ }
296
+
297
+ if (show && matchesSearch) {
298
+ card.classList.remove('hidden');
299
+ } else {
300
+ card.classList.add('hidden');
301
+ }
302
+ });
303
+ }
304
+
305
+ // ===== FAVORITES FUNCTIONALITY =====
306
+ function initializeFavorites() {
307
+ const favorites = StorageManager.getFavorites();
308
+
309
+ socialCards.forEach(card => {
310
+ const platform = card.getAttribute('data-platform');
311
+ const favBtn = card.querySelector('.favorite-btn');
312
+
313
+ if (favorites.includes(platform)) {
314
+ favBtn.classList.add('active');
315
+ favBtn.querySelector('i').classList.remove('far');
316
+ favBtn.querySelector('i').classList.add('fas');
317
+ }
318
+
319
+ favBtn.addEventListener('click', (e) => {
320
+ e.stopPropagation();
321
+ e.preventDefault();
322
+ toggleFavorite(platform, favBtn);
323
+ });
324
+ });
325
+ }
326
+
327
+ function toggleFavorite(platform, btn) {
328
+ const favorites = StorageManager.toggleFavorite(platform);
329
+ const isFavorite = favorites.includes(platform);
330
+
331
+ if (isFavorite) {
332
+ btn.classList.add('active');
333
+ btn.querySelector('i').classList.remove('far');
334
+ btn.querySelector('i').classList.add('fas');
335
+ showNotification(`Added to favorites!`, 'success');
336
+ } else {
337
+ btn.classList.remove('active');
338
+ btn.querySelector('i').classList.remove('fas');
339
+ btn.querySelector('i').classList.add('far');
340
+ showNotification(`Removed from favorites`, 'info');
341
+ }
342
+
343
+ updateAnalyticsDisplay();
344
+ }
345
+
346
+ // ===== NOTES FUNCTIONALITY =====
347
+ const noteModal = document.getElementById('noteModal');
348
+ const noteTextarea = document.getElementById('noteTextarea');
349
+ const notePlatformName = document.getElementById('notePlatformName');
350
+ const saveNoteBtn = document.getElementById('saveNoteBtn');
351
+ const deleteNoteBtn = document.getElementById('deleteNoteBtn');
352
+
353
+ function initializeNotes() {
354
+ const notes = StorageManager.getNotes();
355
+
356
+ socialCards.forEach(card => {
357
+ const platform = card.getAttribute('data-platform');
358
+ const noteBtn = card.querySelector('.note-btn');
359
+ const noteIndicator = card.querySelector('.note-indicator');
360
+
361
+ if (notes[platform]) {
362
+ noteBtn.classList.add('has-note');
363
+ noteIndicator.style.display = 'inline-flex';
364
+ }
365
+
366
+ noteBtn.addEventListener('click', (e) => {
367
+ e.stopPropagation();
368
+ e.preventDefault();
369
+ openNoteModal(platform, card.querySelector('.platform-name').textContent);
370
+ });
371
+ });
372
+ }
373
+
374
+ function openNoteModal(platform, name) {
375
+ currentNoteEditPlatform = platform;
376
+ notePlatformName.textContent = name;
377
+
378
+ const notes = StorageManager.getNotes();
379
+ noteTextarea.value = notes[platform] || '';
380
+
381
+ noteModal.classList.add('active');
382
+ document.body.style.overflow = 'hidden';
383
+ noteTextarea.focus();
384
+ }
385
+
386
+ saveNoteBtn.addEventListener('click', () => {
387
+ const note = noteTextarea.value;
388
+ StorageManager.setNote(currentNoteEditPlatform, note);
389
+
390
+ // Update UI
391
+ const card = document.querySelector(`[data-platform="${currentNoteEditPlatform}"]`);
392
+ const noteBtn = card.querySelector('.note-btn');
393
+ const noteIndicator = card.querySelector('.note-indicator');
394
+
395
+ if (note.trim()) {
396
+ noteBtn.classList.add('has-note');
397
+ noteIndicator.style.display = 'inline-flex';
398
+ showNotification('Note saved!', 'success');
399
+ } else {
400
+ noteBtn.classList.remove('has-note');
401
+ noteIndicator.style.display = 'none';
402
+ showNotification('Note deleted', 'info');
403
+ }
404
+
405
+ noteModal.classList.remove('active');
406
+ document.body.style.overflow = '';
407
+ });
408
+
409
+ deleteNoteBtn.addEventListener('click', () => {
410
+ noteTextarea.value = '';
411
+ saveNoteBtn.click();
412
+ });
413
+
414
+ // ===== Card Click Analytics (Optional) =====
415
+ // Platform URLs mapping
416
+ const platformURLs = {
417
+ facebook: 'https://www.facebook.com',
418
+ instagram: 'https://www.instagram.com',
419
+ twitter: 'https://www.twitter.com',
420
+ linkedin: 'https://www.linkedin.com',
421
+ youtube: 'https://www.youtube.com',
422
+ tiktok: 'https://www.tiktok.com',
423
+ reddit: 'https://www.reddit.com',
424
+ whatsapp: 'https://web.whatsapp.com',
425
+ telegram: 'https://web.telegram.org',
426
+ discord: 'https://discord.com/app',
427
+ snapchat: 'https://www.snapchat.com',
428
+ pinterest: 'https://www.pinterest.com'
429
+ };
430
+
431
+ // Platform icons mapping
432
+ const platformIcons = {
433
+ facebook: 'fab fa-facebook-f',
434
+ instagram: 'fab fa-instagram',
435
+ twitter: 'fab fa-twitter',
436
+ linkedin: 'fab fa-linkedin-in',
437
+ youtube: 'fab fa-youtube',
438
+ tiktok: 'fab fa-tiktok',
439
+ reddit: 'fab fa-reddit-alien',
440
+ whatsapp: 'fab fa-whatsapp',
441
+ telegram: 'fab fa-telegram-plane',
442
+ discord: 'fab fa-discord',
443
+ snapchat: 'fab fa-snapchat-ghost',
444
+ pinterest: 'fab fa-pinterest-p'
445
+ };
446
+
447
+ // Modal elements
448
+ const modal = document.getElementById('platformModal');
449
+ const modalFrame = document.getElementById('platformFrame');
450
+ const loadingSpinner = document.querySelector('.loading-spinner');
451
+ const closeBtn = document.querySelector('.close-btn');
452
+ const platformIcon = document.querySelector('.platform-icon');
453
+ const platformTitle = document.querySelector('.platform-title');
454
+ const modalContent = document.querySelector('.modal-content');
455
+
456
+ // Auth section elements
457
+ const authSection = document.getElementById('authSection');
458
+ const platformSection = document.getElementById('platformSection');
459
+ const googleSignInBtn = document.getElementById('googleSignIn');
460
+ const platformSignInBtn = document.getElementById('platformSignIn');
461
+ const guestAccessBtn = document.getElementById('guestAccess');
462
+ const refreshBtn = document.querySelector('.refresh-btn');
463
+ const fullscreenBtn = document.querySelector('.fullscreen-btn');
464
+ const logoutBtn = document.querySelector('.logout-btn');
465
+ const platformIconLarge = document.querySelector('.platform-icon-large');
466
+ const platformIconSmall = document.querySelector('.platform-icon-small');
467
+ const platformNameText = document.querySelector('.platform-name-text');
468
+ const platformLoginText = document.querySelector('.platform-login-text');
469
+
470
+ socialCards.forEach(card => {
471
+ const launchBtn = card.querySelector('.launch-btn');
472
+
473
+ launchBtn.addEventListener('click', (e) => {
474
+ e.preventDefault();
475
+ const platform = card.getAttribute('data-platform');
476
+ const platformName = card.querySelector('.platform-name').textContent;
477
+ const url = platformURLs[platform];
478
+ const icon = platformIcons[platform];
479
+
480
+ console.log(`Opening ${platform} in modal`);
481
+
482
+ // Update analytics
483
+ StorageManager.updateAnalytics(platform);
484
+ StorageManager.addToRecent(platform, platformName, icon);
485
+ updateVisitBadge(card, platform);
486
+ updateAnalyticsDisplay();
487
+
488
+ // Open platform in modal
489
+ openPlatformModal(url, platformName, platform);
490
+
491
+ // Add a visual feedback
492
+ card.style.transform = 'scale(0.95)';
493
+ setTimeout(() => {
494
+ card.style.transform = '';
495
+ }, 200);
496
+ });
497
+ });
498
+
499
+ // Open platform in modal
500
+ function openPlatformModal(url, name, platform) {
501
+ currentPlatformURL = url;
502
+ currentPlatformName = name;
503
+ currentPlatform = platform;
504
+
505
+ // Set platform info in header
506
+ platformTitle.textContent = name;
507
+ platformIcon.className = 'platform-icon ' + platformIcons[platform];
508
+
509
+ // Set platform info in auth section
510
+ platformNameText.textContent = name;
511
+ platformIconLarge.className = 'platform-icon-large ' + platformIcons[platform];
512
+ platformIconSmall.className = 'platform-icon-small ' + platformIcons[platform];
513
+ platformLoginText.textContent = `Login with ${name} Account`;
514
+
515
+ // Show modal with auth section
516
+ modal.classList.add('active');
517
+ document.body.style.overflow = 'hidden';
518
+
519
+ // Show auth section, hide platform section
520
+ authSection.style.display = 'flex';
521
+ platformSection.style.display = 'none';
522
+ }
523
+
524
+ // Close modal
525
+ function closePlatformModal() {
526
+ modal.classList.remove('active');
527
+ document.body.style.overflow = '';
528
+ modalContent.classList.remove('fullscreen');
529
+
530
+ // Stop time tracking
531
+ stopTimeTracking();
532
+
533
+ // Clear iframe and reset to auth section
534
+ setTimeout(() => {
535
+ modalFrame.src = '';
536
+ authSection.style.display = 'flex';
537
+ platformSection.style.display = 'none';
538
+ loadingSpinner.classList.remove('hidden');
539
+ }, 300);
540
+ }
541
+
542
+ // Load platform with authentication
543
+ function loadPlatform(authMethod) {
544
+ console.log(`Loading ${currentPlatformName} with ${authMethod} authentication`);
545
+
546
+ // Hide auth section, show platform section
547
+ authSection.style.display = 'none';
548
+ platformSection.style.display = 'block';
549
+
550
+ // Show loading
551
+ loadingSpinner.classList.remove('hidden');
552
+
553
+ // Load iframe
554
+ modalFrame.src = currentPlatformURL;
555
+
556
+ // Hide loading when iframe loads (or after timeout)
557
+ modalFrame.onload = () => {
558
+ setTimeout(() => {
559
+ loadingSpinner.classList.add('hidden');
560
+ }, 500);
561
+ };
562
+
563
+ // Fallback timeout for platforms that block iframes
564
+ setTimeout(() => {
565
+ loadingSpinner.classList.add('hidden');
566
+ }, 3000);
567
+ }
568
+
569
+ // Google Sign-In
570
+ googleSignInBtn.addEventListener('click', () => {
571
+ console.log('Google Sign-In clicked');
572
+ showNotification('Google Sign-In feature coming soon! Opening platform directly...', 'info');
573
+
574
+ // Open platform in a large popup window
575
+ const width = 1200;
576
+ const height = 800;
577
+ const left = (screen.width - width) / 2;
578
+ const top = (screen.height - height) / 2;
579
+
580
+ setTimeout(() => {
581
+ window.open(
582
+ currentPlatformURL,
583
+ currentPlatformName,
584
+ `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no,scrollbars=yes,resizable=yes`
585
+ );
586
+
587
+ closePlatformModal();
588
+ }, 1000);
589
+ });
590
+
591
+ // Platform Sign-In
592
+ platformSignInBtn.addEventListener('click', () => {
593
+ console.log('Platform Sign-In clicked');
594
+ showNotification(`Opening ${currentPlatformName} in new window...`, 'success');
595
+
596
+ // Start time tracking
597
+ startTimeTracking(currentPlatform);
598
+
599
+ // Open platform in a large popup window
600
+ const width = 1200;
601
+ const height = 800;
602
+ const left = (screen.width - width) / 2;
603
+ const top = (screen.height - height) / 2;
604
+
605
+ window.open(
606
+ currentPlatformURL,
607
+ currentPlatformName,
608
+ `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no,scrollbars=yes,resizable=yes`
609
+ );
610
+
611
+ // Close the modal since platform opened in new window
612
+ setTimeout(() => {
613
+ closePlatformModal();
614
+ }, 500);
615
+ });
616
+
617
+ // Guest Access / Web Version
618
+ guestAccessBtn.addEventListener('click', () => {
619
+ console.log('Guest access clicked');
620
+ showNotification(`Opening ${currentPlatformName} web version...`, 'info');
621
+
622
+ // Open platform in a large popup window
623
+ const width = 1200;
624
+ const height = 800;
625
+ const left = (screen.width - width) / 2;
626
+ const top = (screen.height - height) / 2;
627
+
628
+ window.open(
629
+ currentPlatformURL,
630
+ currentPlatformName + '_Web',
631
+ `width=${width},height=${height},left=${left},top=${top},toolbar=yes,menubar=no,scrollbars=yes,resizable=yes,location=yes`
632
+ );
633
+
634
+ // Close the modal
635
+ setTimeout(() => {
636
+ closePlatformModal();
637
+ }, 500);
638
+ });
639
+
640
+ // Notification system
641
+ function showNotification(message, type = 'info') {
642
+ const notification = document.createElement('div');
643
+ notification.className = `notification notification-${type}`;
644
+ notification.innerHTML = `
645
+ <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
646
+ <span>${message}</span>
647
+ `;
648
+
649
+ document.body.appendChild(notification);
650
+
651
+ // Animate in
652
+ setTimeout(() => notification.classList.add('show'), 10);
653
+
654
+ // Remove after 3 seconds
655
+ setTimeout(() => {
656
+ notification.classList.remove('show');
657
+ setTimeout(() => notification.remove(), 300);
658
+ }, 3000);
659
+ }
660
+
661
+ // Close button
662
+ closeBtn.addEventListener('click', closePlatformModal);
663
+
664
+ // Close on background click
665
+ modal.addEventListener('click', (e) => {
666
+ if (e.target === modal) {
667
+ closePlatformModal();
668
+ }
669
+ });
670
+
671
+ // Refresh button
672
+ refreshBtn.addEventListener('click', () => {
673
+ loadingSpinner.classList.remove('hidden');
674
+ modalFrame.src = modalFrame.src;
675
+
676
+ setTimeout(() => {
677
+ loadingSpinner.classList.add('hidden');
678
+ }, 2000);
679
+ });
680
+
681
+ // Fullscreen button
682
+ fullscreenBtn.addEventListener('click', () => {
683
+ modalContent.classList.toggle('fullscreen');
684
+ const icon = fullscreenBtn.querySelector('i');
685
+
686
+ if (modalContent.classList.contains('fullscreen')) {
687
+ icon.classList.remove('fa-expand');
688
+ icon.classList.add('fa-compress');
689
+ fullscreenBtn.title = 'Exit Fullscreen';
690
+ } else {
691
+ icon.classList.remove('fa-compress');
692
+ icon.classList.add('fa-expand');
693
+ fullscreenBtn.title = 'Fullscreen';
694
+ }
695
+ });
696
+
697
+ // Logout button - returns to auth screen
698
+ logoutBtn.addEventListener('click', () => {
699
+ showNotification('Logged out successfully', 'success');
700
+ authSection.style.display = 'flex';
701
+ platformSection.style.display = 'none';
702
+ modalFrame.src = '';
703
+ });
704
+
705
+ // Escape key to close modal
706
+ document.addEventListener('keydown', (e) => {
707
+ if (e.key === 'Escape' && modal.classList.contains('active')) {
708
+ closePlatformModal();
709
+ }
710
+ });
711
+
712
+ // ===== Card Hover Sound Effect (Optional) =====
713
+ socialCards.forEach(card => {
714
+ card.addEventListener('mouseenter', () => {
715
+ card.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
716
+ });
717
+ });
718
+
719
+ // ===== Smooth Scroll =====
720
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
721
+ anchor.addEventListener('click', function (e) {
722
+ e.preventDefault();
723
+ const target = document.querySelector(this.getAttribute('href'));
724
+ if (target) {
725
+ target.scrollIntoView({
726
+ behavior: 'smooth',
727
+ block: 'start'
728
+ });
729
+ }
730
+ });
731
+ });
732
+
733
+ // ===== Dynamic Time-based Greeting (Optional Enhancement) =====
734
+ function updateGreeting() {
735
+ const hour = new Date().getHours();
736
+ const subtitle = document.querySelector('.subtitle');
737
+
738
+ if (hour >= 5 && hour < 12) {
739
+ subtitle.textContent = 'Good morning! Connect to your favorite platforms';
740
+ } else if (hour >= 12 && hour < 17) {
741
+ subtitle.textContent = 'Good afternoon! Connect to your favorite platforms';
742
+ } else if (hour >= 17 && hour < 21) {
743
+ subtitle.textContent = 'Good evening! Connect to your favorite platforms';
744
+ } else {
745
+ subtitle.textContent = 'Connect to your favorite platforms instantly';
746
+ }
747
+ }
748
+
749
+ // ===== Loading Animation =====
750
+ window.addEventListener('load', () => {
751
+ document.body.style.opacity = '0';
752
+ setTimeout(() => {
753
+ document.body.style.transition = 'opacity 0.5s ease';
754
+ document.body.style.opacity = '1';
755
+ }, 100);
756
+ });
757
+
758
+ // ===== Initialize Everything =====
759
+ initParticles();
760
+ animateParticles();
761
+ updateGreeting();
762
+ initializeFavorites();
763
+ initializeNotes();
764
+ initializeAnalytics();
765
+ initializeTheme();
766
+ initializeCustomPlatforms();
767
+ initializeStatusIndicators();
768
+ initializeKeyboardShortcuts();
769
+ initializeHeaderControls();
770
+
771
+ // ===== ANALYTICS FUNCTIONS =====
772
+ function initializeAnalytics() {
773
+ const analytics = StorageManager.getAnalytics();
774
+
775
+ socialCards.forEach(card => {
776
+ const platform = card.getAttribute('data-platform');
777
+ updateVisitBadge(card, platform);
778
+ });
779
+ }
780
+
781
+ function updateVisitBadge(card, platform) {
782
+ const analytics = StorageManager.getAnalytics();
783
+ const visitBadge = card.querySelector('.visit-badge');
784
+
785
+ if (analytics[platform] && analytics[platform].visits > 0) {
786
+ visitBadge.textContent = `${analytics[platform].visits} visits`;
787
+ visitBadge.style.display = 'inline-flex';
788
+ }
789
+ }
790
+
791
+ function updateAnalyticsDisplay() {
792
+ const analytics = StorageManager.getAnalytics();
793
+ const favorites = StorageManager.getFavorites();
794
+
795
+ let totalVisits = 0;
796
+ let totalTime = 0;
797
+ let mostUsedPlatform = '-';
798
+ let maxVisits = 0;
799
+
800
+ Object.keys(analytics).forEach(platform => {
801
+ totalVisits += analytics[platform].visits || 0;
802
+ totalTime += analytics[platform].time || 0;
803
+
804
+ if (analytics[platform].visits > maxVisits) {
805
+ maxVisits = analytics[platform].visits;
806
+ mostUsedPlatform = platform;
807
+ }
808
+ });
809
+
810
+ document.getElementById('totalVisits').textContent = totalVisits;
811
+ document.getElementById('totalFavorites').textContent = favorites.length;
812
+
813
+ const hours = Math.floor(totalTime / 3600);
814
+ const minutes = Math.floor((totalTime % 3600) / 60);
815
+ document.getElementById('totalTime').textContent = `${hours}h ${minutes}m`;
816
+
817
+ if (mostUsedPlatform !== '-') {
818
+ const card = document.querySelector(`[data-platform="${mostUsedPlatform}"]`);
819
+ if (card) {
820
+ mostUsedPlatform = card.querySelector('.platform-name').textContent;
821
+ }
822
+ }
823
+ document.getElementById('mostUsed').textContent = mostUsedPlatform;
824
+
825
+ updateUsageChart(analytics);
826
+ }
827
+
828
+ function updateUsageChart(analytics) {
829
+ const chartContainer = document.getElementById('usageChart');
830
+ chartContainer.innerHTML = '';
831
+
832
+ const sorted = Object.entries(analytics)
833
+ .sort((a, b) => b[1].visits - a[1].visits)
834
+ .slice(0, 10);
835
+
836
+ if (sorted.length === 0) {
837
+ chartContainer.innerHTML = '<p style="color: var(--text-secondary); text-align: center;">No usage data yet</p>';
838
+ return;
839
+ }
840
+
841
+ const maxVisits = sorted[0][1].visits;
842
+
843
+ sorted.forEach(([platform, data]) => {
844
+ const card = document.querySelector(`[data-platform="${platform}"]`);
845
+ const name = card ? card.querySelector('.platform-name').textContent : platform;
846
+ const percentage = (data.visits / maxVisits) * 100;
847
+
848
+ const barHTML = `
849
+ <div class="chart-bar">
850
+ <div class="chart-label">${name}</div>
851
+ <div class="chart-bar-container">
852
+ <div class="chart-bar-fill" style="width: ${percentage}%">
853
+ ${data.visits}
854
+ </div>
855
+ </div>
856
+ </div>
857
+ `;
858
+ chartContainer.innerHTML += barHTML;
859
+ });
860
+ }
861
+
862
+ // ===== THEME TOGGLE =====
863
+ function initializeTheme() {
864
+ const theme = StorageManager.getTheme();
865
+ applyTheme(theme);
866
+ }
867
+
868
+ function applyTheme(theme) {
869
+ const themeToggle = document.getElementById('themeToggle');
870
+ const icon = themeToggle.querySelector('i');
871
+
872
+ if (theme === 'light') {
873
+ document.body.classList.add('light-mode');
874
+ icon.classList.remove('fa-moon');
875
+ icon.classList.add('fa-sun');
876
+ } else {
877
+ document.body.classList.remove('light-mode');
878
+ icon.classList.remove('fa-sun');
879
+ icon.classList.add('fa-moon');
880
+ }
881
+ }
882
+
883
+ // ===== RECENT ACTIVITY TIMELINE =====
884
+ function updateRecentTimeline() {
885
+ const recent = StorageManager.getRecentActivity();
886
+ const timelineItems = document.getElementById('timelineItems');
887
+
888
+ if (recent.length === 0) {
889
+ timelineItems.innerHTML = '<p style="color: var(--text-secondary); text-align: center;">No recent activity</p>';
890
+ return;
891
+ }
892
+
893
+ timelineItems.innerHTML = '';
894
+
895
+ recent.forEach(item => {
896
+ const timeAgo = getTimeAgo(new Date(item.timestamp));
897
+ const itemHTML = `
898
+ <div class="timeline-item" data-platform="${item.platform}">
899
+ <i class="${item.icon}"></i>
900
+ <div class="timeline-info">
901
+ <h4>${item.name}</h4>
902
+ <span>${timeAgo}</span>
903
+ </div>
904
+ </div>
905
+ `;
906
+ timelineItems.innerHTML += itemHTML;
907
+ });
908
+
909
+ // Add click handlers
910
+ timelineItems.querySelectorAll('.timeline-item').forEach(item => {
911
+ item.addEventListener('click', () => {
912
+ const platform = item.getAttribute('data-platform');
913
+ const card = document.querySelector(`[data-platform="${platform}"]`);
914
+ if (card) {
915
+ card.querySelector('.launch-btn').click();
916
+ }
917
+ });
918
+ });
919
+ }
920
+
921
+ function getTimeAgo(date) {
922
+ const seconds = Math.floor((new Date() - date) / 1000);
923
+
924
+ if (seconds < 60) return 'Just now';
925
+ if (seconds < 3600) return `${Math.floor(seconds / 60)} minutes ago`;
926
+ if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours ago`;
927
+ return `${Math.floor(seconds / 86400)} days ago`;
928
+ }
929
+
930
+ // ===== CUSTOM PLATFORMS =====
931
+ function initializeCustomPlatforms() {
932
+ const customPlatforms = StorageManager.getCustomPlatforms();
933
+ const socialGrid = document.getElementById('socialGrid');
934
+
935
+ customPlatforms.forEach(platform => {
936
+ addCustomPlatformCard(platform, socialGrid);
937
+ });
938
+ }
939
+
940
+ function addCustomPlatformCard(platform, container) {
941
+ const cardHTML = `
942
+ <div class="social-card" data-platform="${platform.id}" data-category="${platform.category}" data-custom="true">
943
+ <div class="card-inner">
944
+ <div class="card-front" style="background: ${platform.color};">
945
+ <div class="card-top-controls">
946
+ <button class="favorite-btn" title="Add to Favorites">
947
+ <i class="far fa-star"></i>
948
+ </button>
949
+ <button class="note-btn" title="Add Note">
950
+ <i class="far fa-sticky-note"></i>
951
+ </button>
952
+ <button class="delete-custom-btn" title="Delete Platform" style="background: rgba(255, 71, 87, 0.8);">
953
+ <i class="fas fa-trash"></i>
954
+ </button>
955
+ <div class="status-indicator" title="Status: Online"></div>
956
+ </div>
957
+ <div class="platform-logo">
958
+ <i class="${platform.icon}"></i>
959
+ </div>
960
+ <h3 class="platform-name">${platform.name}</h3>
961
+ <div class="platform-badges">
962
+ <span class="visit-badge" style="display: none;">0 visits</span>
963
+ <span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
964
+ </div>
965
+ <p class="platform-desc">Custom platform</p>
966
+ <div class="card-stats">
967
+ <span><i class="fas fa-globe"></i> Custom</span>
968
+ </div>
969
+ </div>
970
+ </div>
971
+ <a href="${platform.url}" target="_blank" class="launch-btn" data-url="${platform.url}">
972
+ <i class="fas fa-external-link-alt"></i> Launch
973
+ </a>
974
+ </div>
975
+ `;
976
+
977
+ container.innerHTML += cardHTML;
978
+
979
+ // Re-initialize features for new card
980
+ const newCard = container.lastElementChild;
981
+ initializeCardFeatures(newCard, platform.id);
982
+ }
983
+
984
+ function initializeCardFeatures(card, platform) {
985
+ // Favorite button
986
+ const favBtn = card.querySelector('.favorite-btn');
987
+ const favorites = StorageManager.getFavorites();
988
+ if (favorites.includes(platform)) {
989
+ favBtn.classList.add('active');
990
+ favBtn.querySelector('i').classList.remove('far');
991
+ favBtn.querySelector('i').classList.add('fas');
992
+ }
993
+ favBtn.addEventListener('click', (e) => {
994
+ e.stopPropagation();
995
+ e.preventDefault();
996
+ toggleFavorite(platform, favBtn);
997
+ });
998
+
999
+ // Note button
1000
+ const noteBtn = card.querySelector('.note-btn');
1001
+ const notes = StorageManager.getNotes();
1002
+ if (notes[platform]) {
1003
+ noteBtn.classList.add('has-note');
1004
+ card.querySelector('.note-indicator').style.display = 'inline-flex';
1005
+ }
1006
+ noteBtn.addEventListener('click', (e) => {
1007
+ e.stopPropagation();
1008
+ e.preventDefault();
1009
+ openNoteModal(platform, card.querySelector('.platform-name').textContent);
1010
+ });
1011
+
1012
+ // Delete custom platform button
1013
+ const deleteBtn = card.querySelector('.delete-custom-btn');
1014
+ if (deleteBtn) {
1015
+ deleteBtn.addEventListener('click', (e) => {
1016
+ e.stopPropagation();
1017
+ e.preventDefault();
1018
+ if (confirm('Delete this custom platform?')) {
1019
+ StorageManager.removeCustomPlatform(platform);
1020
+ card.remove();
1021
+ showNotification('Platform deleted', 'success');
1022
+ }
1023
+ });
1024
+ }
1025
+
1026
+ // Launch button
1027
+ const launchBtn = card.querySelector('.launch-btn');
1028
+ launchBtn.addEventListener('click', (e) => {
1029
+ e.preventDefault();
1030
+ const platformName = card.querySelector('.platform-name').textContent;
1031
+ const url = launchBtn.getAttribute('data-url');
1032
+ const icon = card.querySelector('.platform-logo i').className;
1033
+
1034
+ StorageManager.updateAnalytics(platform);
1035
+ StorageManager.addToRecent(platform, platformName, icon);
1036
+ updateVisitBadge(card, platform);
1037
+ updateAnalyticsDisplay();
1038
+
1039
+ openPlatformModal(url, platformName, platform);
1040
+
1041
+ card.style.transform = 'scale(0.95)';
1042
+ setTimeout(() => {
1043
+ card.style.transform = '';
1044
+ }, 200);
1045
+ });
1046
+ }
1047
+
1048
+ // ===== STATUS INDICATORS =====
1049
+ function initializeStatusIndicators() {
1050
+ // Simulated status check - in real app, you'd ping the services
1051
+ // For now, all are marked as online
1052
+ document.querySelectorAll('.status-indicator').forEach(indicator => {
1053
+ indicator.classList.remove('offline');
1054
+ });
1055
+ }
1056
+
1057
+ // ===== KEYBOARD SHORTCUTS =====
1058
+ function initializeKeyboardShortcuts() {
1059
+ document.addEventListener('keydown', (e) => {
1060
+ // Don't trigger if typing in input
1061
+ if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
1062
+ return;
1063
+ }
1064
+
1065
+ // ? - Show shortcuts
1066
+ if (e.key === '?') {
1067
+ e.preventDefault();
1068
+ document.getElementById('shortcutsModal').classList.add('active');
1069
+ }
1070
+
1071
+ // Ctrl+K - Analytics
1072
+ if (e.ctrlKey && e.key === 'k') {
1073
+ e.preventDefault();
1074
+ document.getElementById('analyticsModal').classList.add('active');
1075
+ updateAnalyticsDisplay();
1076
+ }
1077
+
1078
+ // Ctrl+D - Theme toggle
1079
+ if (e.ctrlKey && e.key === 'd') {
1080
+ e.preventDefault();
1081
+ document.getElementById('themeToggle').click();
1082
+ }
1083
+
1084
+ // Ctrl+I - AI Caption Generator
1085
+ if (e.ctrlKey && e.key === 'i') {
1086
+ e.preventDefault();
1087
+ document.getElementById('aiCaptionBtn').click();
1088
+ }
1089
+
1090
+ // 1-9 - Quick launch
1091
+ if (e.key >= '1' && e.key <= '9') {
1092
+ const index = parseInt(e.key) - 1;
1093
+ const visibleCards = Array.from(socialCards).filter(card => !card.classList.contains('hidden'));
1094
+ if (visibleCards[index]) {
1095
+ visibleCards[index].querySelector('.launch-btn').click();
1096
+ }
1097
+ }
1098
+ });
1099
+ }
1100
+
1101
+ // ===== HEADER CONTROLS =====
1102
+ function initializeHeaderControls() {
1103
+ // Theme toggle
1104
+ document.getElementById('themeToggle').addEventListener('click', () => {
1105
+ const currentTheme = StorageManager.getTheme();
1106
+ const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
1107
+ StorageManager.setTheme(newTheme);
1108
+ applyTheme(newTheme);
1109
+ showNotification(`Switched to ${newTheme} mode`, 'success');
1110
+ });
1111
+
1112
+ // AI Caption Generator button (already initialized above)
1113
+ // document.getElementById('aiCaptionBtn') - handled in AI section
1114
+
1115
+ // Shortcuts button
1116
+ document.getElementById('shortcutsBtn').addEventListener('click', () => {
1117
+ document.getElementById('shortcutsModal').classList.add('active');
1118
+ });
1119
+
1120
+ // Analytics button
1121
+ document.getElementById('analyticsBtn').addEventListener('click', () => {
1122
+ document.getElementById('analyticsModal').classList.add('active');
1123
+ updateAnalyticsDisplay();
1124
+ });
1125
+
1126
+ // Add platform button
1127
+ document.getElementById('addPlatformBtn').addEventListener('click', () => {
1128
+ document.getElementById('addPlatformModal').classList.add('active');
1129
+ });
1130
+ }
1131
+
1132
+ // ===== ADD CUSTOM PLATFORM FORM =====
1133
+ document.getElementById('addPlatformForm').addEventListener('submit', (e) => {
1134
+ e.preventDefault();
1135
+
1136
+ const platform = {
1137
+ id: 'custom_' + Date.now(),
1138
+ name: document.getElementById('customPlatformName').value,
1139
+ url: document.getElementById('customPlatformURL').value,
1140
+ icon: document.getElementById('customPlatformIcon').value,
1141
+ color: document.getElementById('customPlatformColor').value,
1142
+ category: document.getElementById('customPlatformCategory').value
1143
+ };
1144
+
1145
+ StorageManager.addCustomPlatform(platform);
1146
+ addCustomPlatformCard(platform, document.getElementById('socialGrid'));
1147
+
1148
+ document.getElementById('addPlatformModal').classList.remove('active');
1149
+ document.getElementById('addPlatformForm').reset();
1150
+ showNotification('Custom platform added!', 'success');
1151
+ });
1152
+
1153
+ // ===== TIME TRACKING =====
1154
+ function startTimeTracking(platform) {
1155
+ startTime = Date.now();
1156
+ const tracker = document.getElementById('timeTracker');
1157
+ tracker.style.display = 'flex';
1158
+
1159
+ timeTrackingInterval = setInterval(() => {
1160
+ const elapsed = Math.floor((Date.now() - startTime) / 1000);
1161
+ const minutes = Math.floor(elapsed / 60);
1162
+ const seconds = elapsed % 60;
1163
+ document.getElementById('trackerTime').textContent =
1164
+ `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
1165
+ }, 1000);
1166
+ }
1167
+
1168
+ function stopTimeTracking() {
1169
+ if (timeTrackingInterval) {
1170
+ clearInterval(timeTrackingInterval);
1171
+ const elapsed = Math.floor((Date.now() - startTime) / 1000);
1172
+ StorageManager.updateTimeSpent(currentPlatform, elapsed);
1173
+ document.getElementById('timeTracker').style.display = 'none';
1174
+ updateAnalyticsDisplay();
1175
+ }
1176
+ }
1177
+
1178
+ document.getElementById('stopTracking').addEventListener('click', stopTimeTracking);
1179
+
1180
+ // ===== AI CAPTION GENERATOR =====
1181
+ // Groq API Configuration (from your original code)
1182
+ const GROQ_API_KEY = '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';
1183
+ const GROQ_API_URL = 'https://api.groq.com/openai/v1/chat/completions';
1184
+ const HF_IMAGE_API = 'https://api-inference.huggingface.co/models/Salesforce/blip-image-captioning-base';
1185
+ const HF_API_TOKEN = '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';
1186
+
1187
+ // AI Caption Button
1188
+ document.getElementById('aiCaptionBtn').addEventListener('click', () => {
1189
+ document.getElementById('aiCaptionModal').classList.add('active');
1190
+ document.body.style.overflow = 'hidden';
1191
+ });
1192
+
1193
+ // Image Upload Handler
1194
+ const imageInput = document.getElementById('imageInput');
1195
+ const uploadArea = document.getElementById('uploadArea');
1196
+ const uploadSection = document.getElementById('uploadSection');
1197
+ const resultsSection = document.getElementById('resultsSection');
1198
+ const imagePreview = document.getElementById('imagePreview');
1199
+
1200
+ imageInput.addEventListener('change', handleImageUpload);
1201
+
1202
+ // Drag and drop
1203
+ uploadArea.addEventListener('dragover', (e) => {
1204
+ e.preventDefault();
1205
+ uploadArea.style.borderColor = 'var(--accent-color)';
1206
+ uploadArea.style.background = 'rgba(0, 212, 255, 0.15)';
1207
+ });
1208
+
1209
+ uploadArea.addEventListener('dragleave', () => {
1210
+ uploadArea.style.borderColor = 'rgba(0, 212, 255, 0.3)';
1211
+ uploadArea.style.background = 'rgba(0, 212, 255, 0.05)';
1212
+ });
1213
+
1214
+ uploadArea.addEventListener('drop', (e) => {
1215
+ e.preventDefault();
1216
+ uploadArea.style.borderColor = 'rgba(0, 212, 255, 0.3)';
1217
+ uploadArea.style.background = 'rgba(0, 212, 255, 0.05)';
1218
+
1219
+ const files = e.dataTransfer.files;
1220
+ if (files.length > 0 && files[0].type.startsWith('image/')) {
1221
+ imageInput.files = files;
1222
+ handleImageUpload();
1223
+ }
1224
+ });
1225
+
1226
+ async function handleImageUpload() {
1227
+ const file = imageInput.files[0];
1228
+ if (!file) return;
1229
+
1230
+ // Show preview
1231
+ const reader = new FileReader();
1232
+ reader.onload = (e) => {
1233
+ imagePreview.src = e.target.result;
1234
+ currentImageData = e.target.result;
1235
+ };
1236
+ reader.readAsDataURL(file);
1237
+
1238
+ // Switch to results view
1239
+ uploadSection.style.display = 'none';
1240
+ resultsSection.style.display = 'grid';
1241
+
1242
+ // Reset loading states
1243
+ showLoadingState();
1244
+
1245
+ // Generate AI content
1246
+ await generateAIContent(file);
1247
+ }
1248
+
1249
+ function showLoadingState() {
1250
+ document.getElementById('aiDescription').innerHTML = '<div class="loading-dots"><span></span><span></span><span></span></div>';
1251
+ document.getElementById('aiCaptions').innerHTML = '<div class="loading-dots"><span></span><span></span><span></span></div>';
1252
+ document.getElementById('aiHashtags').innerHTML = '<div class="loading-dots"><span></span><span></span><span></span></div>';
1253
+ }
1254
+
1255
+ async function generateAIContent(imageFile) {
1256
+ try {
1257
+ console.log('=== Starting AI Generation ===');
1258
+ console.log('Image file:', imageFile.name, imageFile.type, imageFile.size, 'bytes');
1259
+
1260
+ // Step 1: Get image description using BLIP
1261
+ showNotification('Analyzing image with AI...', 'info');
1262
+ const description = await getImageDescription(imageFile);
1263
+ currentDescription = description;
1264
+
1265
+ console.log('✓ Image description:', description);
1266
+ document.getElementById('aiDescription').innerHTML = `<p>${description}</p>`;
1267
+
1268
+ // Step 2: Generate captions
1269
+ showNotification('Generating creative captions...', 'info');
1270
+ const captions = await generateCaptions(description);
1271
+ currentCaptions = captions;
1272
+
1273
+ console.log('✓ Captions generated:', captions);
1274
+ document.getElementById('aiCaptions').innerHTML = formatCaptions(captions);
1275
+
1276
+ // Step 3: Generate hashtags
1277
+ showNotification('Creating hashtags...', 'info');
1278
+ const hashtags = await generateHashtags(description);
1279
+ currentHashtags = hashtags;
1280
+
1281
+ console.log('✓ Hashtags created:', hashtags);
1282
+ document.getElementById('aiHashtags').innerHTML = `<p>${hashtags}</p>`;
1283
+
1284
+ console.log('=== AI Generation Complete ===');
1285
+ showNotification('AI generation complete! ✨', 'success');
1286
+ } catch (error) {
1287
+ console.error('=== AI Generation Error ===');
1288
+ console.error('Error:', error);
1289
+ showNotification('AI generation failed. Using fallback content...', 'warning');
1290
+ useFallbackGeneration();
1291
+ }
1292
+ }
1293
+
1294
+ async function getImageDescription(imageFile) {
1295
+ try {
1296
+ // Convert image to base64 for API
1297
+ const imageData = await imageFile.arrayBuffer();
1298
+ const blob = new Blob([imageData]);
1299
+
1300
+ const response = await fetch(HF_IMAGE_API, {
1301
+ method: 'POST',
1302
+ headers: {
1303
+ 'Authorization': `Bearer ${HF_API_TOKEN}`,
1304
+ },
1305
+ body: blob
1306
+ });
1307
+
1308
+ if (!response.ok) {
1309
+ const errorText = await response.text();
1310
+ console.error('HF API Error:', errorText);
1311
+
1312
+ // If model is loading, wait and retry
1313
+ if (response.status === 503) {
1314
+ showNotification('AI model is loading, retrying in 3 seconds...', 'info');
1315
+ await new Promise(resolve => setTimeout(resolve, 3000));
1316
+ return getImageDescription(imageFile); // Retry
1317
+ }
1318
+
1319
+ throw new Error('Image API request failed');
1320
+ }
1321
+
1322
+ const result = await response.json();
1323
+ console.log('Image description result:', result);
1324
+
1325
+ // Extract description from response
1326
+ const description = result[0]?.generated_text || result?.generated_text || 'an interesting image';
1327
+ return description.trim();
1328
+ } catch (error) {
1329
+ console.error('Image description error:', error);
1330
+ showNotification('Using basic image analysis...', 'warning');
1331
+ return 'a photo with interesting elements';
1332
+ }
1333
+ }
1334
+
1335
+ async function generateCaptions(description) {
1336
+ const prompt = `Generate exactly 3 unique, creative, and engaging social media captions for a photo that shows: "${description}". Make them catchy and suitable for Instagram, Facebook, or Twitter. Format as:
1337
+ 1. [first caption]
1338
+ 2. [second caption]
1339
+ 3. [third caption]
1340
+
1341
+ Only provide the numbered captions, nothing else.`;
1342
+
1343
+ try {
1344
+ console.log('Generating captions for:', description);
1345
+
1346
+ const response = await fetch(GROQ_API_URL, {
1347
+ method: 'POST',
1348
+ headers: {
1349
+ 'Authorization': `Bearer ${GROQ_API_KEY}`,
1350
+ 'Content-Type': 'application/json'
1351
+ },
1352
+ body: JSON.stringify({
1353
+ model: 'llama-3.1-8b-instant',
1354
+ messages: [
1355
+ {
1356
+ role: 'system',
1357
+ content: 'You are a creative social media caption writer. Generate engaging, concise captions.'
1358
+ },
1359
+ {
1360
+ role: 'user',
1361
+ content: prompt
1362
+ }
1363
+ ],
1364
+ max_tokens: 200,
1365
+ temperature: 0.8
1366
+ })
1367
+ });
1368
+
1369
+ if (!response.ok) {
1370
+ const errorText = await response.text();
1371
+ console.error('Groq API Error:', errorText);
1372
+ throw new Error('Caption API request failed');
1373
+ }
1374
+
1375
+ const result = await response.json();
1376
+ console.log('Caption result:', result);
1377
+
1378
+ const generatedText = result.choices[0]?.message?.content || '';
1379
+ return generatedText.trim() || getFallbackCaptions(description);
1380
+ } catch (error) {
1381
+ console.error('Caption generation error:', error);
1382
+ showNotification('Using fallback captions...', 'warning');
1383
+ return getFallbackCaptions(description);
1384
+ }
1385
+ }
1386
+
1387
+ async function generateHashtags(description) {
1388
+ const prompt = `Generate exactly 10 relevant and trending hashtags for a photo that shows: "${description}". Only provide the hashtags with # symbol, separated by spaces. No explanations.`;
1389
+
1390
+ try {
1391
+ console.log('Generating hashtags for:', description);
1392
+
1393
+ const response = await fetch(GROQ_API_URL, {
1394
+ method: 'POST',
1395
+ headers: {
1396
+ 'Authorization': `Bearer ${GROQ_API_KEY}`,
1397
+ 'Content-Type': 'application/json'
1398
+ },
1399
+ body: JSON.stringify({
1400
+ model: 'llama-3.1-8b-instant',
1401
+ messages: [
1402
+ {
1403
+ role: 'system',
1404
+ content: 'You are a social media expert. Generate relevant hashtags based on image descriptions.'
1405
+ },
1406
+ {
1407
+ role: 'user',
1408
+ content: prompt
1409
+ }
1410
+ ],
1411
+ max_tokens: 100,
1412
+ temperature: 0.7
1413
+ })
1414
+ });
1415
+
1416
+ if (!response.ok) {
1417
+ const errorText = await response.text();
1418
+ console.error('Hashtag API Error:', errorText);
1419
+ throw new Error('Hashtag API request failed');
1420
+ }
1421
+
1422
+ const result = await response.json();
1423
+ console.log('Hashtag result:', result);
1424
+
1425
+ let hashtags = result.choices[0]?.message?.content || '';
1426
+
1427
+ // Clean up hashtags - ensure they have # and are properly formatted
1428
+ hashtags = hashtags.split(/\s+/)
1429
+ .map(tag => tag.trim())
1430
+ .filter(tag => tag.length > 0)
1431
+ .map(tag => tag.startsWith('#') ? tag : '#' + tag)
1432
+ .slice(0, 10)
1433
+ .join(' ');
1434
+
1435
+ return hashtags || getFallbackHashtags(description);
1436
+ } catch (error) {
1437
+ console.error('Hashtag generation error:', error);
1438
+ return getFallbackHashtags(description);
1439
+ }
1440
+ }
1441
+
1442
+ function getFallbackHashtags(description) {
1443
+ // Extract keywords from description and create hashtags
1444
+ const words = description.split(' ')
1445
+ .filter(w => w.length > 3)
1446
+ .map(w => w.replace(/[^a-zA-Z]/g, ''))
1447
+ .filter(w => w.length > 0);
1448
+
1449
+ const baseHashtags = words.slice(0, 5).map(w => '#' + w.toLowerCase());
1450
+
1451
+ const genericHashtags = [
1452
+ '#photography', '#photooftheday', '#instagood',
1453
+ '#beautiful', '#instadaily', '#picoftheday',
1454
+ '#instagram', '#love', '#amazing', '#art'
1455
+ ];
1456
+
1457
+ const allHashtags = [...new Set([...baseHashtags, ...genericHashtags])].slice(0, 10);
1458
+ return allHashtags.join(' ');
1459
+ }
1460
+
1461
+ function getFallbackCaptions(description) {
1462
+ // Create captions based on the actual description
1463
+ const mainSubject = description.split(' ').slice(0, 3).join(' ');
1464
+
1465
+ return `1. Capturing the beauty of ${description} 📸✨
1466
+
1467
+ 2. ${description.charAt(0).toUpperCase() + description.slice(1)} - moments like these make life special 🌟
1468
+
1469
+ 3. Just ${mainSubject}... living my best life! 💫 #blessed`;
1470
+ }
1471
+
1472
+ function formatCaptions(captions) {
1473
+ // Split captions by numbers or newlines
1474
+ const captionArray = captions.split(/\d+\./).filter(c => c.trim());
1475
+
1476
+ let html = '';
1477
+ captionArray.forEach((caption, index) => {
1478
+ if (caption.trim()) {
1479
+ html += `<p><strong>Caption ${index + 1}:</strong> ${caption.trim()}</p>`;
1480
+ }
1481
+ });
1482
+
1483
+ return html || `<p>${captions}</p>`;
1484
+ }
1485
+
1486
+ function useFallbackGeneration() {
1487
+ currentDescription = 'a wonderful moment captured in time';
1488
+ currentCaptions = getFallbackCaptions(currentDescription);
1489
+ currentHashtags = '#photography #photooftheday #instagood #beautiful #instadaily #picoftheday #instagram #love #amazing #art';
1490
+
1491
+ document.getElementById('aiDescription').innerHTML = `<p>${currentDescription}</p>`;
1492
+ document.getElementById('aiCaptions').innerHTML = formatCaptions(currentCaptions);
1493
+ document.getElementById('aiHashtags').innerHTML = `<p>${currentHashtags}</p>`;
1494
+ }
1495
+
1496
+ // Copy functionality
1497
+ document.getElementById('copyCaptionBtn').addEventListener('click', () => {
1498
+ copyToClipboard(currentCaptions, 'Caption copied!');
1499
+ });
1500
+
1501
+ document.getElementById('copyHashtagsBtn').addEventListener('click', () => {
1502
+ copyToClipboard(currentHashtags, 'Hashtags copied!');
1503
+ });
1504
+
1505
+ document.getElementById('copyAllBtn').addEventListener('click', () => {
1506
+ const allText = `${currentCaptions}\n\n${currentHashtags}`;
1507
+ copyToClipboard(allText, 'All content copied!');
1508
+ });
1509
+
1510
+ function copyToClipboard(text, message) {
1511
+ navigator.clipboard.writeText(text).then(() => {
1512
+ showNotification(message, 'success');
1513
+ }).catch(() => {
1514
+ showNotification('Copy failed', 'warning');
1515
+ });
1516
+ }
1517
+
1518
+ // Post to platform
1519
+ document.querySelectorAll('.platform-post-btn').forEach(btn => {
1520
+ btn.addEventListener('click', () => {
1521
+ const platform = btn.getAttribute('data-platform');
1522
+ postToPlatform(platform);
1523
+ });
1524
+ });
1525
+
1526
+ function postToPlatform(platform) {
1527
+ // Copy caption and hashtags to clipboard first
1528
+ const fullContent = `${currentCaptions.split('\n')[0]}\n\n${currentHashtags}`;
1529
+ copyToClipboard(fullContent, `Content copied! Opening ${platform}...`);
1530
+
1531
+ // Open platform in popup
1532
+ const platformURL = platformURLs[platform];
1533
+ if (platformURL) {
1534
+ setTimeout(() => {
1535
+ const width = 1200;
1536
+ const height = 800;
1537
+ const left = (screen.width - width) / 2;
1538
+ const top = (screen.height - height) / 2;
1539
+
1540
+ window.open(
1541
+ platformURL,
1542
+ platform,
1543
+ `width=${width},height=${height},left=${left},top=${top},toolbar=yes,menubar=no,scrollbars=yes,resizable=yes`
1544
+ );
1545
+
1546
+ showNotification(`Paste your caption and upload the image on ${platform}!`, 'info');
1547
+ }, 500);
1548
+ }
1549
+ }
1550
+
1551
+ // ===== Performance Optimization =====
1552
+ // Throttle scroll events
1553
+ let ticking = false;
1554
+ window.addEventListener('scroll', () => {
1555
+ if (!ticking) {
1556
+ window.requestAnimationFrame(() => {
1557
+ // Add scroll-based animations here if needed
1558
+ ticking = false;
1559
+ });
1560
+ ticking = true;
1561
+ }
1562
+ });
1563
+
1564
+ // ===== Keyboard Navigation =====
1565
+ document.addEventListener('keydown', (e) => {
1566
+ // Don't trigger shortcuts if modal is open (except Escape)
1567
+ if (modal.classList.contains('active') && e.key !== 'Escape') {
1568
+ return;
1569
+ }
1570
+
1571
+ if (e.key === '/') {
1572
+ e.preventDefault();
1573
+ searchInput.focus();
1574
+ }
1575
+ if (e.key === 'Escape') {
1576
+ if (modal.classList.contains('active')) {
1577
+ closePlatformModal();
1578
+ } else {
1579
+ searchInput.blur();
1580
+ searchInput.value = '';
1581
+ searchInput.dispatchEvent(new Event('input'));
1582
+ }
1583
+ }
1584
+ });
1585
+
1586
+ // ===== Show keyboard shortcut hint =====
1587
+ const searchContainer = document.querySelector('.search-container');
1588
+ const hintElement = document.createElement('div');
1589
+ hintElement.style.cssText = `
1590
+ position: absolute;
1591
+ right: 4rem;
1592
+ top: 50%;
1593
+ transform: translateY(-50%);
1594
+ font-size: 0.8rem;
1595
+ color: var(--text-secondary);
1596
+ opacity: 0.6;
1597
+ pointer-events: none;
1598
+ `;
1599
+ hintElement.innerHTML = '<kbd style="background: rgba(0,212,255,0.1); padding: 2px 6px; border-radius: 3px; font-size: 0.7rem;">/ to search</kbd>';
1600
+ searchContainer.appendChild(hintElement);
1601
+
1602
+ searchInput.addEventListener('focus', () => {
1603
+ hintElement.style.opacity = '0';
1604
+ });
1605
+
1606
+ searchInput.addEventListener('blur', () => {
1607
+ if (!searchInput.value) {
1608
+ hintElement.style.opacity = '0.6';
1609
+ }
1610
+ });
1611
+
1612
+ // ===== Add ripple effect on card click =====
1613
+ socialCards.forEach(card => {
1614
+ card.addEventListener('click', function(e) {
1615
+ const ripple = document.createElement('div');
1616
+ const rect = this.getBoundingClientRect();
1617
+ const size = Math.max(rect.width, rect.height);
1618
+ const x = e.clientX - rect.left - size / 2;
1619
+ const y = e.clientY - rect.top - size / 2;
1620
+
1621
+ ripple.style.cssText = `
1622
+ position: absolute;
1623
+ width: ${size}px;
1624
+ height: ${size}px;
1625
+ border-radius: 50%;
1626
+ background: rgba(255, 255, 255, 0.3);
1627
+ left: ${x}px;
1628
+ top: ${y}px;
1629
+ pointer-events: none;
1630
+ animation: rippleEffect 0.6s ease-out;
1631
+ `;
1632
+
1633
+ this.style.position = 'relative';
1634
+ this.style.overflow = 'hidden';
1635
+ this.appendChild(ripple);
1636
+
1637
+ setTimeout(() => ripple.remove(), 600);
1638
+ });
1639
+ });
1640
+
1641
+ // Add ripple animation to stylesheet dynamically
1642
+ const style = document.createElement('style');
1643
+ style.textContent = `
1644
+ @keyframes rippleEffect {
1645
+ 0% {
1646
+ transform: scale(0);
1647
+ opacity: 1;
1648
+ }
1649
+ 100% {
1650
+ transform: scale(2);
1651
+ opacity: 0;
1652
+ }
1653
+ }
1654
+
1655
+ kbd {
1656
+ font-family: 'Courier New', monospace;
1657
+ }
1658
+ `;
1659
+ document.head.appendChild(style);
1660
+
1661
+ console.log('%c🚀 Social Hub Loaded Successfully!', 'color: #00d4ff; font-size: 20px; font-weight: bold;');
1662
+ console.log('%cPress "/" to search platforms', 'color: #00ff88; font-size: 14px;');
1663
+ console.log('%cPress "Ctrl+I" to open AI Caption Generator', 'color: #00ff88; font-size: 14px;');
1664
+ console.log('%c🤖 AI Features: Real-time image analysis with Groq + Hugging Face', 'color: #ffa502; font-size: 12px;');
styles.css ADDED
@@ -0,0 +1,1873 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* ===== CSS Variables ===== */
2
+ :root {
3
+ --primary-bg: #0a0e27;
4
+ --secondary-bg: #151a35;
5
+ --accent-color: #00d4ff;
6
+ --text-primary: #ffffff;
7
+ --text-secondary: #a8b2d1;
8
+ --card-shadow: rgba(0, 212, 255, 0.15);
9
+ --success-color: #00ff88;
10
+ --warning-color: #ffa502;
11
+ --danger-color: #ff4757;
12
+
13
+ /* Social Media Colors */
14
+ --facebook: linear-gradient(135deg, #1877f2, #0d5dbf);
15
+ --instagram: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
16
+ --twitter: linear-gradient(135deg, #1da1f2, #0d8bd9);
17
+ --linkedin: linear-gradient(135deg, #0077b5, #005582);
18
+ --youtube: linear-gradient(135deg, #ff0000, #cc0000);
19
+ --tiktok: linear-gradient(135deg, #000000, #ee1d52, #69c9d0);
20
+ --reddit: linear-gradient(135deg, #ff4500, #cc3700);
21
+ --whatsapp: linear-gradient(135deg, #25d366, #1da851);
22
+ --telegram: linear-gradient(135deg, #0088cc, #006699);
23
+ --discord: linear-gradient(135deg, #5865f2, #4752c4);
24
+ --snapchat: linear-gradient(135deg, #fffc00, #ccca00);
25
+ --pinterest: linear-gradient(135deg, #e60023, #bd001c);
26
+ }
27
+
28
+ /* Light Mode Variables */
29
+ body.light-mode {
30
+ --primary-bg: #f5f7fa;
31
+ --secondary-bg: #ffffff;
32
+ --text-primary: #1a1a2e;
33
+ --text-secondary: #4a5568;
34
+ --card-shadow: rgba(0, 0, 0, 0.1);
35
+ }
36
+
37
+ /* ===== Global Styles ===== */
38
+ * {
39
+ margin: 0;
40
+ padding: 0;
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ body {
45
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
46
+ background: var(--primary-bg);
47
+ color: var(--text-primary);
48
+ min-height: 100vh;
49
+ overflow-x: hidden;
50
+ position: relative;
51
+ transition: background 0.3s ease, color 0.3s ease;
52
+ }
53
+
54
+ /* Light Mode Particles */
55
+ body.light-mode #particles {
56
+ opacity: 0.2;
57
+ filter: invert(1);
58
+ }
59
+
60
+ /* ===== Particles Background ===== */
61
+ #particles {
62
+ position: fixed;
63
+ top: 0;
64
+ left: 0;
65
+ width: 100%;
66
+ height: 100%;
67
+ z-index: 0;
68
+ opacity: 0.6;
69
+ }
70
+
71
+ /* ===== Container ===== */
72
+ .container {
73
+ max-width: 1400px;
74
+ margin: 0 auto;
75
+ padding: 2rem;
76
+ position: relative;
77
+ z-index: 1;
78
+ }
79
+
80
+ /* ===== Header ===== */
81
+ .header {
82
+ text-align: center;
83
+ margin-bottom: 2rem;
84
+ animation: fadeInDown 0.8s ease-out;
85
+ }
86
+
87
+ .header-top {
88
+ display: flex;
89
+ justify-content: flex-end;
90
+ margin-bottom: 1rem;
91
+ }
92
+
93
+ .header-controls {
94
+ display: flex;
95
+ gap: 0.5rem;
96
+ align-items: center;
97
+ }
98
+
99
+ .control-icon-btn {
100
+ padding: 0.6rem 1rem;
101
+ background: rgba(0, 212, 255, 0.1);
102
+ border: 2px solid rgba(0, 212, 255, 0.3);
103
+ border-radius: 10px;
104
+ color: var(--accent-color);
105
+ cursor: pointer;
106
+ font-size: 1rem;
107
+ transition: all 0.3s ease;
108
+ display: flex;
109
+ align-items: center;
110
+ gap: 0.5rem;
111
+ }
112
+
113
+ .control-icon-btn:hover {
114
+ background: var(--accent-color);
115
+ color: var(--primary-bg);
116
+ transform: translateY(-2px);
117
+ box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
118
+ }
119
+
120
+ .system-status {
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ gap: 0.5rem;
125
+ margin-top: 1rem;
126
+ padding: 0.5rem 1.5rem;
127
+ background: rgba(0, 255, 136, 0.1);
128
+ border: 1px solid rgba(0, 255, 136, 0.3);
129
+ border-radius: 50px;
130
+ color: var(--success-color);
131
+ font-size: 0.9rem;
132
+ max-width: fit-content;
133
+ margin-left: auto;
134
+ margin-right: auto;
135
+ }
136
+
137
+ .logo-section {
138
+ display: flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+ gap: 1rem;
142
+ margin-bottom: 1rem;
143
+ }
144
+
145
+ .logo-icon {
146
+ width: 60px;
147
+ height: 60px;
148
+ background: linear-gradient(135deg, var(--accent-color), #00a8cc);
149
+ border-radius: 15px;
150
+ display: flex;
151
+ align-items: center;
152
+ justify-content: center;
153
+ font-size: 2rem;
154
+ box-shadow: 0 8px 32px rgba(0, 212, 255, 0.3);
155
+ animation: pulse 2s infinite;
156
+ }
157
+
158
+ .title {
159
+ font-size: 3.5rem;
160
+ font-weight: 700;
161
+ background: linear-gradient(135deg, var(--accent-color), #00ff88);
162
+ -webkit-background-clip: text;
163
+ -webkit-text-fill-color: transparent;
164
+ background-clip: text;
165
+ text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
166
+ }
167
+
168
+ .subtitle {
169
+ font-size: 1.2rem;
170
+ color: var(--text-secondary);
171
+ font-weight: 300;
172
+ letter-spacing: 1px;
173
+ }
174
+
175
+ /* ===== Filter Tabs ===== */
176
+ .filter-tabs {
177
+ display: flex;
178
+ gap: 1rem;
179
+ justify-content: center;
180
+ flex-wrap: wrap;
181
+ margin-bottom: 2rem;
182
+ animation: fadeInUp 0.8s ease-out 0.1s backwards;
183
+ }
184
+
185
+ .filter-tab {
186
+ padding: 0.7rem 1.5rem;
187
+ background: var(--secondary-bg);
188
+ border: 2px solid rgba(0, 212, 255, 0.3);
189
+ border-radius: 25px;
190
+ color: var(--text-secondary);
191
+ cursor: pointer;
192
+ font-size: 0.95rem;
193
+ font-weight: 500;
194
+ transition: all 0.3s ease;
195
+ display: flex;
196
+ align-items: center;
197
+ gap: 0.5rem;
198
+ }
199
+
200
+ .filter-tab:hover {
201
+ border-color: var(--accent-color);
202
+ color: var(--accent-color);
203
+ transform: translateY(-2px);
204
+ }
205
+
206
+ .filter-tab.active {
207
+ background: var(--accent-color);
208
+ border-color: var(--accent-color);
209
+ color: var(--primary-bg);
210
+ box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
211
+ }
212
+
213
+ .filter-tab i {
214
+ font-size: 1rem;
215
+ }
216
+
217
+ /* ===== Search Bar ===== */
218
+ .search-container {
219
+ position: relative;
220
+ max-width: 600px;
221
+ margin: 0 auto 3rem;
222
+ animation: fadeInUp 0.8s ease-out 0.2s backwards;
223
+ }
224
+
225
+ .search-bar {
226
+ width: 100%;
227
+ padding: 1rem 3rem 1rem 1.5rem;
228
+ font-size: 1rem;
229
+ background: var(--secondary-bg);
230
+ border: 2px solid rgba(0, 212, 255, 0.3);
231
+ border-radius: 50px;
232
+ color: var(--text-primary);
233
+ outline: none;
234
+ transition: all 0.3s ease;
235
+ }
236
+
237
+ .search-bar:focus {
238
+ border-color: var(--accent-color);
239
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
240
+ }
241
+
242
+ .search-bar::placeholder {
243
+ color: var(--text-secondary);
244
+ }
245
+
246
+ .search-icon {
247
+ position: absolute;
248
+ right: 1.5rem;
249
+ top: 50%;
250
+ transform: translateY(-50%);
251
+ color: var(--accent-color);
252
+ font-size: 1.2rem;
253
+ }
254
+
255
+ /* ===== Recent Timeline ===== */
256
+ .recent-timeline {
257
+ max-width: 900px;
258
+ margin: 0 auto 2rem;
259
+ padding: 1.5rem;
260
+ background: var(--secondary-bg);
261
+ border-radius: 15px;
262
+ border: 2px solid rgba(0, 212, 255, 0.2);
263
+ animation: fadeInUp 0.6s ease-out;
264
+ }
265
+
266
+ .recent-timeline h3 {
267
+ color: var(--accent-color);
268
+ margin-bottom: 1rem;
269
+ font-size: 1.3rem;
270
+ display: flex;
271
+ align-items: center;
272
+ gap: 0.5rem;
273
+ }
274
+
275
+ .timeline-items {
276
+ display: flex;
277
+ flex-direction: column;
278
+ gap: 0.8rem;
279
+ }
280
+
281
+ .timeline-item {
282
+ display: flex;
283
+ align-items: center;
284
+ gap: 1rem;
285
+ padding: 0.8rem;
286
+ background: rgba(0, 212, 255, 0.05);
287
+ border-radius: 10px;
288
+ border-left: 3px solid var(--accent-color);
289
+ cursor: pointer;
290
+ transition: all 0.3s ease;
291
+ }
292
+
293
+ .timeline-item:hover {
294
+ background: rgba(0, 212, 255, 0.1);
295
+ transform: translateX(5px);
296
+ }
297
+
298
+ .timeline-item i {
299
+ font-size: 1.5rem;
300
+ color: var(--accent-color);
301
+ }
302
+
303
+ .timeline-info {
304
+ flex: 1;
305
+ }
306
+
307
+ .timeline-info h4 {
308
+ color: var(--text-primary);
309
+ font-size: 1rem;
310
+ margin-bottom: 0.2rem;
311
+ }
312
+
313
+ .timeline-info span {
314
+ color: var(--text-secondary);
315
+ font-size: 0.85rem;
316
+ }
317
+
318
+ /* ===== Social Media Grid ===== */
319
+ .social-grid {
320
+ display: grid;
321
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
322
+ gap: 2rem;
323
+ margin-bottom: 3rem;
324
+ }
325
+
326
+ /* ===== Social Card ===== */
327
+ .social-card {
328
+ position: relative;
329
+ animation: fadeInUp 0.6s ease-out backwards;
330
+ animation-delay: calc(var(--card-index) * 0.1s);
331
+ }
332
+
333
+ .social-card:nth-child(1) { --card-index: 1; }
334
+ .social-card:nth-child(2) { --card-index: 2; }
335
+ .social-card:nth-child(3) { --card-index: 3; }
336
+ .social-card:nth-child(4) { --card-index: 4; }
337
+ .social-card:nth-child(5) { --card-index: 5; }
338
+ .social-card:nth-child(6) { --card-index: 6; }
339
+ .social-card:nth-child(7) { --card-index: 7; }
340
+ .social-card:nth-child(8) { --card-index: 8; }
341
+ .social-card:nth-child(9) { --card-index: 9; }
342
+ .social-card:nth-child(10) { --card-index: 10; }
343
+ .social-card:nth-child(11) { --card-index: 11; }
344
+ .social-card:nth-child(12) { --card-index: 12; }
345
+
346
+ .card-inner {
347
+ position: relative;
348
+ height: 280px;
349
+ border-radius: 20px;
350
+ transition: transform 0.3s ease;
351
+ }
352
+
353
+ .social-card:hover .card-inner {
354
+ transform: translateY(-10px);
355
+ }
356
+
357
+ .card-front {
358
+ position: absolute;
359
+ width: 100%;
360
+ height: 100%;
361
+ border-radius: 20px;
362
+ padding: 2rem;
363
+ display: flex;
364
+ flex-direction: column;
365
+ justify-content: space-between;
366
+ box-shadow: 0 10px 40px var(--card-shadow);
367
+ transition: all 0.3s ease;
368
+ overflow: hidden;
369
+ }
370
+
371
+ .card-front::before {
372
+ content: '';
373
+ position: absolute;
374
+ top: 0;
375
+ left: 0;
376
+ right: 0;
377
+ bottom: 0;
378
+ background: rgba(255, 255, 255, 0.05);
379
+ opacity: 0;
380
+ transition: opacity 0.3s ease;
381
+ }
382
+
383
+ .social-card:hover .card-front::before {
384
+ opacity: 1;
385
+ }
386
+
387
+ /* Card Top Controls */
388
+ .card-top-controls {
389
+ display: flex;
390
+ justify-content: flex-end;
391
+ gap: 0.5rem;
392
+ margin-bottom: 0.5rem;
393
+ position: relative;
394
+ z-index: 5;
395
+ }
396
+
397
+ .favorite-btn,
398
+ .note-btn {
399
+ width: 32px;
400
+ height: 32px;
401
+ background: rgba(255, 255, 255, 0.2);
402
+ backdrop-filter: blur(10px);
403
+ border: none;
404
+ border-radius: 8px;
405
+ color: white;
406
+ cursor: pointer;
407
+ font-size: 0.9rem;
408
+ transition: all 0.3s ease;
409
+ display: flex;
410
+ align-items: center;
411
+ justify-content: center;
412
+ }
413
+
414
+ .favorite-btn:hover,
415
+ .note-btn:hover {
416
+ background: rgba(255, 255, 255, 0.3);
417
+ transform: scale(1.1);
418
+ }
419
+
420
+ .favorite-btn.active {
421
+ background: rgba(255, 215, 0, 0.9);
422
+ color: #fff;
423
+ }
424
+
425
+ .favorite-btn.active i {
426
+ font-weight: 900;
427
+ }
428
+
429
+ .note-btn.has-note {
430
+ background: rgba(0, 212, 255, 0.8);
431
+ }
432
+
433
+ .status-indicator {
434
+ width: 12px;
435
+ height: 12px;
436
+ border-radius: 50%;
437
+ background: var(--success-color);
438
+ border: 2px solid rgba(255, 255, 255, 0.3);
439
+ box-shadow: 0 0 10px var(--success-color);
440
+ animation: pulse 2s infinite;
441
+ }
442
+
443
+ .status-indicator.offline {
444
+ background: var(--danger-color);
445
+ box-shadow: 0 0 10px var(--danger-color);
446
+ }
447
+
448
+ /* Platform Specific Backgrounds */
449
+ .facebook-bg { background: var(--facebook); }
450
+ .instagram-bg { background: var(--instagram); }
451
+ .twitter-bg { background: var(--twitter); }
452
+ .linkedin-bg { background: var(--linkedin); }
453
+ .youtube-bg { background: var(--youtube); }
454
+ .tiktok-bg { background: var(--tiktok); }
455
+ .reddit-bg { background: var(--reddit); }
456
+ .whatsapp-bg { background: var(--whatsapp); }
457
+ .telegram-bg { background: var(--telegram); }
458
+ .discord-bg { background: var(--discord); }
459
+ .snapchat-bg { background: var(--snapchat); }
460
+ .pinterest-bg { background: var(--pinterest); }
461
+
462
+ /* Platform Logo */
463
+ .platform-logo {
464
+ width: 70px;
465
+ height: 70px;
466
+ background: rgba(255, 255, 255, 0.2);
467
+ backdrop-filter: blur(10px);
468
+ border-radius: 18px;
469
+ display: flex;
470
+ align-items: center;
471
+ justify-content: center;
472
+ font-size: 2.2rem;
473
+ margin-bottom: 1rem;
474
+ transition: all 0.3s ease;
475
+ border: 2px solid rgba(255, 255, 255, 0.3);
476
+ }
477
+
478
+ .social-card:hover .platform-logo {
479
+ transform: rotate(360deg) scale(1.1);
480
+ background: rgba(255, 255, 255, 0.3);
481
+ }
482
+
483
+ .platform-name {
484
+ font-size: 1.5rem;
485
+ font-weight: 700;
486
+ margin-bottom: 0.5rem;
487
+ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
488
+ }
489
+
490
+ .platform-desc {
491
+ font-size: 0.9rem;
492
+ opacity: 0.9;
493
+ margin-bottom: 1rem;
494
+ line-height: 1.4;
495
+ }
496
+
497
+ .platform-badges {
498
+ display: flex;
499
+ gap: 0.5rem;
500
+ align-items: center;
501
+ margin-bottom: 0.5rem;
502
+ flex-wrap: wrap;
503
+ }
504
+
505
+ .visit-badge {
506
+ padding: 0.3rem 0.7rem;
507
+ background: rgba(255, 255, 255, 0.2);
508
+ backdrop-filter: blur(10px);
509
+ border-radius: 12px;
510
+ font-size: 0.75rem;
511
+ font-weight: 600;
512
+ display: flex;
513
+ align-items: center;
514
+ gap: 0.3rem;
515
+ }
516
+
517
+ .note-indicator {
518
+ padding: 0.3rem 0.5rem;
519
+ background: rgba(0, 212, 255, 0.3);
520
+ border-radius: 8px;
521
+ font-size: 0.75rem;
522
+ display: flex;
523
+ align-items: center;
524
+ }
525
+
526
+ .card-stats {
527
+ display: flex;
528
+ gap: 1rem;
529
+ font-size: 0.85rem;
530
+ opacity: 0.85;
531
+ }
532
+
533
+ .card-stats i {
534
+ margin-right: 0.3rem;
535
+ }
536
+
537
+ /* Launch Button */
538
+ .launch-btn {
539
+ position: absolute;
540
+ bottom: -20px;
541
+ left: 50%;
542
+ transform: translateX(-50%);
543
+ padding: 0.8rem 2rem;
544
+ background: var(--accent-color);
545
+ color: var(--primary-bg);
546
+ text-decoration: none;
547
+ border-radius: 50px;
548
+ font-weight: 600;
549
+ font-size: 0.9rem;
550
+ opacity: 0;
551
+ transition: all 0.3s ease;
552
+ box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4);
553
+ z-index: 10;
554
+ }
555
+
556
+ .social-card:hover .launch-btn {
557
+ opacity: 1;
558
+ bottom: 1.5rem;
559
+ }
560
+
561
+ .launch-btn:hover {
562
+ background: #00ff88;
563
+ transform: translateX(-50%) scale(1.05);
564
+ box-shadow: 0 8px 30px rgba(0, 255, 136, 0.5);
565
+ }
566
+
567
+ .launch-btn i {
568
+ margin-right: 0.5rem;
569
+ }
570
+
571
+ /* ===== Footer ===== */
572
+ .footer {
573
+ text-align: center;
574
+ padding: 2rem 0;
575
+ border-top: 1px solid rgba(168, 178, 209, 0.1);
576
+ margin-top: 3rem;
577
+ animation: fadeIn 1s ease-out 0.5s backwards;
578
+ }
579
+
580
+ .footer p {
581
+ color: var(--text-secondary);
582
+ margin-bottom: 1rem;
583
+ }
584
+
585
+ .footer-links {
586
+ display: flex;
587
+ justify-content: center;
588
+ gap: 2rem;
589
+ }
590
+
591
+ .footer-links a {
592
+ color: var(--accent-color);
593
+ text-decoration: none;
594
+ transition: all 0.3s ease;
595
+ font-size: 0.9rem;
596
+ }
597
+
598
+ .footer-links a:hover {
599
+ color: #00ff88;
600
+ transform: translateY(-2px);
601
+ }
602
+
603
+ .footer-links a i {
604
+ margin-right: 0.5rem;
605
+ }
606
+
607
+ /* ===== Animations ===== */
608
+ @keyframes fadeInDown {
609
+ from {
610
+ opacity: 0;
611
+ transform: translateY(-30px);
612
+ }
613
+ to {
614
+ opacity: 1;
615
+ transform: translateY(0);
616
+ }
617
+ }
618
+
619
+ @keyframes fadeInUp {
620
+ from {
621
+ opacity: 0;
622
+ transform: translateY(30px);
623
+ }
624
+ to {
625
+ opacity: 1;
626
+ transform: translateY(0);
627
+ }
628
+ }
629
+
630
+ @keyframes fadeIn {
631
+ from {
632
+ opacity: 0;
633
+ }
634
+ to {
635
+ opacity: 1;
636
+ }
637
+ }
638
+
639
+ @keyframes pulse {
640
+ 0%, 100% {
641
+ transform: scale(1);
642
+ }
643
+ 50% {
644
+ transform: scale(1.05);
645
+ }
646
+ }
647
+
648
+ /* ===== Responsive Design ===== */
649
+ @media (max-width: 768px) {
650
+ .container {
651
+ padding: 1rem;
652
+ }
653
+
654
+ .title {
655
+ font-size: 2.5rem;
656
+ }
657
+
658
+ .subtitle {
659
+ font-size: 1rem;
660
+ }
661
+
662
+ .header-controls {
663
+ flex-wrap: wrap;
664
+ }
665
+
666
+ .control-icon-btn {
667
+ padding: 0.5rem 0.8rem;
668
+ font-size: 0.9rem;
669
+ }
670
+
671
+ .filter-tabs {
672
+ gap: 0.5rem;
673
+ }
674
+
675
+ .filter-tab {
676
+ padding: 0.5rem 1rem;
677
+ font-size: 0.85rem;
678
+ }
679
+
680
+ .social-grid {
681
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
682
+ gap: 1.5rem;
683
+ }
684
+
685
+ .footer-links {
686
+ flex-direction: column;
687
+ gap: 1rem;
688
+ }
689
+
690
+ .analytics-stats {
691
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
692
+ }
693
+
694
+ .stat-card h3 {
695
+ font-size: 1.5rem;
696
+ }
697
+
698
+ .time-tracker {
699
+ bottom: 1rem;
700
+ right: 1rem;
701
+ left: 1rem;
702
+ }
703
+ }
704
+
705
+ @media (max-width: 480px) {
706
+ .logo-section {
707
+ flex-direction: column;
708
+ }
709
+
710
+ .title {
711
+ font-size: 2rem;
712
+ }
713
+
714
+ .social-grid {
715
+ grid-template-columns: 1fr;
716
+ }
717
+ }
718
+
719
+ /* ===== Hidden Class for Search ===== */
720
+ .hidden {
721
+ display: none !important;
722
+ }
723
+
724
+ /* ===== Snapchat Special Styling ===== */
725
+ .snapchat-bg .platform-logo,
726
+ .snapchat-bg .platform-name,
727
+ .snapchat-bg .platform-desc,
728
+ .snapchat-bg .card-stats {
729
+ color: #000000;
730
+ }
731
+
732
+ /* ===== Scrollbar Styling ===== */
733
+ ::-webkit-scrollbar {
734
+ width: 10px;
735
+ }
736
+
737
+ ::-webkit-scrollbar-track {
738
+ background: var(--primary-bg);
739
+ }
740
+
741
+ ::-webkit-scrollbar-thumb {
742
+ background: var(--accent-color);
743
+ border-radius: 5px;
744
+ }
745
+
746
+ ::-webkit-scrollbar-thumb:hover {
747
+ background: #00ff88;
748
+ }
749
+
750
+ /* ===== Modal Styles ===== */
751
+ .modal {
752
+ display: none;
753
+ position: fixed;
754
+ top: 0;
755
+ left: 0;
756
+ width: 100%;
757
+ height: 100%;
758
+ background: rgba(10, 14, 39, 0.95);
759
+ backdrop-filter: blur(10px);
760
+ z-index: 1000;
761
+ animation: fadeIn 0.3s ease;
762
+ }
763
+
764
+ .modal.active {
765
+ display: flex;
766
+ align-items: center;
767
+ justify-content: center;
768
+ }
769
+
770
+ .modal-content {
771
+ width: 95%;
772
+ height: 90%;
773
+ max-width: 1600px;
774
+ background: var(--secondary-bg);
775
+ border-radius: 20px;
776
+ overflow: hidden;
777
+ box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
778
+ border: 2px solid rgba(0, 212, 255, 0.2);
779
+ display: flex;
780
+ flex-direction: column;
781
+ animation: slideUp 0.4s ease;
782
+ }
783
+
784
+ @keyframes slideUp {
785
+ from {
786
+ opacity: 0;
787
+ transform: translateY(50px) scale(0.95);
788
+ }
789
+ to {
790
+ opacity: 1;
791
+ transform: translateY(0) scale(1);
792
+ }
793
+ }
794
+
795
+ /* Modal Header */
796
+ .modal-header {
797
+ display: flex;
798
+ align-items: center;
799
+ justify-content: space-between;
800
+ padding: 1.5rem 2rem;
801
+ background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 168, 204, 0.05));
802
+ border-bottom: 2px solid rgba(0, 212, 255, 0.2);
803
+ }
804
+
805
+ .modal-title {
806
+ display: flex;
807
+ align-items: center;
808
+ gap: 1rem;
809
+ font-size: 1.5rem;
810
+ font-weight: 600;
811
+ color: var(--text-primary);
812
+ }
813
+
814
+ .modal-title .platform-icon {
815
+ font-size: 2rem;
816
+ color: var(--accent-color);
817
+ }
818
+
819
+ .modal-controls {
820
+ display: flex;
821
+ gap: 0.5rem;
822
+ }
823
+
824
+ .modal-btn {
825
+ width: 40px;
826
+ height: 40px;
827
+ border: none;
828
+ background: rgba(0, 212, 255, 0.1);
829
+ color: var(--accent-color);
830
+ border-radius: 10px;
831
+ cursor: pointer;
832
+ font-size: 1rem;
833
+ transition: all 0.3s ease;
834
+ display: flex;
835
+ align-items: center;
836
+ justify-content: center;
837
+ }
838
+
839
+ .modal-btn:hover {
840
+ background: var(--accent-color);
841
+ color: var(--primary-bg);
842
+ transform: scale(1.1);
843
+ }
844
+
845
+ .close-btn:hover {
846
+ background: #ff4757;
847
+ color: white;
848
+ }
849
+
850
+ /* Modal Body */
851
+ .modal-body {
852
+ flex: 1;
853
+ position: relative;
854
+ background: var(--primary-bg);
855
+ overflow: hidden;
856
+ }
857
+
858
+ /* ===== Authentication Section ===== */
859
+ .auth-section {
860
+ width: 100%;
861
+ height: 100%;
862
+ display: flex;
863
+ align-items: center;
864
+ justify-content: center;
865
+ padding: 2rem;
866
+ background: linear-gradient(135deg, var(--primary-bg), var(--secondary-bg));
867
+ }
868
+
869
+ .auth-container {
870
+ max-width: 500px;
871
+ width: 100%;
872
+ text-align: center;
873
+ animation: fadeInUp 0.5s ease;
874
+ }
875
+
876
+ .auth-icon {
877
+ width: 100px;
878
+ height: 100px;
879
+ margin: 0 auto 2rem;
880
+ background: linear-gradient(135deg, var(--accent-color), #00a8cc);
881
+ border-radius: 25px;
882
+ display: flex;
883
+ align-items: center;
884
+ justify-content: center;
885
+ font-size: 3rem;
886
+ box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
887
+ animation: pulse 2s infinite;
888
+ }
889
+
890
+ .platform-icon-large {
891
+ font-size: 3.5rem;
892
+ color: white;
893
+ }
894
+
895
+ .auth-title {
896
+ font-size: 2rem;
897
+ font-weight: 700;
898
+ color: var(--text-primary);
899
+ margin-bottom: 0.5rem;
900
+ }
901
+
902
+ .platform-name-text {
903
+ background: linear-gradient(135deg, var(--accent-color), #00ff88);
904
+ -webkit-background-clip: text;
905
+ -webkit-text-fill-color: transparent;
906
+ background-clip: text;
907
+ }
908
+
909
+ .auth-description {
910
+ font-size: 1rem;
911
+ color: var(--text-secondary);
912
+ margin-bottom: 3rem;
913
+ line-height: 1.6;
914
+ }
915
+
916
+ /* Auth Options */
917
+ .auth-options {
918
+ display: flex;
919
+ flex-direction: column;
920
+ gap: 1rem;
921
+ margin-bottom: 2rem;
922
+ }
923
+
924
+ .auth-btn {
925
+ width: 100%;
926
+ padding: 1.2rem 2rem;
927
+ border: none;
928
+ border-radius: 15px;
929
+ font-size: 1.1rem;
930
+ font-weight: 600;
931
+ cursor: pointer;
932
+ display: flex;
933
+ align-items: center;
934
+ justify-content: center;
935
+ gap: 1rem;
936
+ transition: all 0.3s ease;
937
+ position: relative;
938
+ overflow: hidden;
939
+ }
940
+
941
+ .auth-btn::before {
942
+ content: '';
943
+ position: absolute;
944
+ top: 0;
945
+ left: -100%;
946
+ width: 100%;
947
+ height: 100%;
948
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
949
+ transition: left 0.5s ease;
950
+ }
951
+
952
+ .auth-btn:hover::before {
953
+ left: 100%;
954
+ }
955
+
956
+ .auth-btn i {
957
+ font-size: 1.5rem;
958
+ }
959
+
960
+ /* Google Button */
961
+ .google-btn {
962
+ background: linear-gradient(135deg, #4285f4, #34a853);
963
+ color: white;
964
+ box-shadow: 0 5px 20px rgba(66, 133, 244, 0.3);
965
+ }
966
+
967
+ .google-btn:hover {
968
+ transform: translateY(-3px);
969
+ box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5);
970
+ }
971
+
972
+ /* Platform Button */
973
+ .platform-btn {
974
+ background: linear-gradient(135deg, var(--accent-color), #00a8cc);
975
+ color: white;
976
+ box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
977
+ }
978
+
979
+ .platform-btn:hover {
980
+ transform: translateY(-3px);
981
+ box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5);
982
+ }
983
+
984
+ /* Guest Button */
985
+ .guest-btn {
986
+ background: rgba(255, 255, 255, 0.1);
987
+ color: var(--text-primary);
988
+ border: 2px solid rgba(255, 255, 255, 0.2);
989
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
990
+ }
991
+
992
+ .guest-btn:hover {
993
+ background: rgba(255, 255, 255, 0.15);
994
+ border-color: var(--accent-color);
995
+ transform: translateY(-3px);
996
+ box-shadow: 0 8px 30px rgba(0, 212, 255, 0.3);
997
+ }
998
+
999
+ /* Auth Footer */
1000
+ .auth-footer {
1001
+ display: flex;
1002
+ align-items: center;
1003
+ justify-content: center;
1004
+ gap: 0.5rem;
1005
+ padding: 1.5rem;
1006
+ background: rgba(0, 212, 255, 0.05);
1007
+ border-radius: 10px;
1008
+ border: 1px solid rgba(0, 212, 255, 0.1);
1009
+ }
1010
+
1011
+ .auth-footer i {
1012
+ color: var(--accent-color);
1013
+ font-size: 1.2rem;
1014
+ }
1015
+
1016
+ .auth-footer p {
1017
+ font-size: 0.85rem;
1018
+ color: var(--text-secondary);
1019
+ margin: 0;
1020
+ line-height: 1.4;
1021
+ }
1022
+
1023
+ /* ===== Platform Section ===== */
1024
+ .platform-section {
1025
+ width: 100%;
1026
+ height: 100%;
1027
+ position: relative;
1028
+ background: #000;
1029
+ }
1030
+
1031
+ .platform-controls {
1032
+ position: absolute;
1033
+ top: 1rem;
1034
+ right: 1rem;
1035
+ display: flex;
1036
+ gap: 0.5rem;
1037
+ z-index: 10;
1038
+ }
1039
+
1040
+ .control-btn {
1041
+ width: 40px;
1042
+ height: 40px;
1043
+ border: none;
1044
+ background: rgba(0, 0, 0, 0.7);
1045
+ backdrop-filter: blur(10px);
1046
+ color: var(--accent-color);
1047
+ border-radius: 10px;
1048
+ cursor: pointer;
1049
+ font-size: 1rem;
1050
+ transition: all 0.3s ease;
1051
+ display: flex;
1052
+ align-items: center;
1053
+ justify-content: center;
1054
+ border: 1px solid rgba(0, 212, 255, 0.2);
1055
+ }
1056
+
1057
+ .control-btn:hover {
1058
+ background: var(--accent-color);
1059
+ color: var(--primary-bg);
1060
+ transform: scale(1.1);
1061
+ }
1062
+
1063
+ .logout-btn:hover {
1064
+ background: #ff4757;
1065
+ color: white;
1066
+ border-color: #ff4757;
1067
+ }
1068
+
1069
+ #platformFrame {
1070
+ width: 100%;
1071
+ height: 100%;
1072
+ border: none;
1073
+ display: block;
1074
+ background: white;
1075
+ }
1076
+
1077
+ /* Loading Spinner */
1078
+ .loading-spinner {
1079
+ position: absolute;
1080
+ top: 50%;
1081
+ left: 50%;
1082
+ transform: translate(-50%, -50%);
1083
+ text-align: center;
1084
+ color: var(--accent-color);
1085
+ }
1086
+
1087
+ .loading-spinner i {
1088
+ font-size: 3rem;
1089
+ margin-bottom: 1rem;
1090
+ }
1091
+
1092
+ .loading-spinner p {
1093
+ font-size: 1.2rem;
1094
+ color: var(--text-secondary);
1095
+ }
1096
+
1097
+ .loading-spinner.hidden {
1098
+ display: none;
1099
+ }
1100
+
1101
+ /* Fullscreen Mode */
1102
+ .modal-content.fullscreen {
1103
+ width: 100%;
1104
+ height: 100%;
1105
+ max-width: 100%;
1106
+ border-radius: 0;
1107
+ }
1108
+
1109
+ /* Mobile Responsive */
1110
+ @media (max-width: 768px) {
1111
+ .modal-content {
1112
+ width: 100%;
1113
+ height: 100%;
1114
+ border-radius: 0;
1115
+ }
1116
+
1117
+ .modal-header {
1118
+ padding: 1rem;
1119
+ }
1120
+
1121
+ .modal-title {
1122
+ font-size: 1.2rem;
1123
+ }
1124
+
1125
+ .modal-title .platform-icon {
1126
+ font-size: 1.5rem;
1127
+ }
1128
+
1129
+ .modal-btn {
1130
+ width: 35px;
1131
+ height: 35px;
1132
+ font-size: 0.9rem;
1133
+ }
1134
+
1135
+ .platform-title {
1136
+ font-size: 1rem;
1137
+ }
1138
+
1139
+ .auth-container {
1140
+ padding: 1rem;
1141
+ }
1142
+
1143
+ .auth-title {
1144
+ font-size: 1.5rem;
1145
+ }
1146
+
1147
+ .auth-btn {
1148
+ padding: 1rem 1.5rem;
1149
+ font-size: 1rem;
1150
+ }
1151
+
1152
+ .platform-controls {
1153
+ top: 0.5rem;
1154
+ right: 0.5rem;
1155
+ }
1156
+
1157
+ .control-btn {
1158
+ width: 35px;
1159
+ height: 35px;
1160
+ }
1161
+ }
1162
+
1163
+ /* ===== Notification Styles ===== */
1164
+ .notification {
1165
+ position: fixed;
1166
+ top: 2rem;
1167
+ right: -400px;
1168
+ background: var(--secondary-bg);
1169
+ color: var(--text-primary);
1170
+ padding: 1rem 1.5rem;
1171
+ border-radius: 10px;
1172
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
1173
+ border-left: 4px solid var(--accent-color);
1174
+ display: flex;
1175
+ align-items: center;
1176
+ gap: 1rem;
1177
+ z-index: 10000;
1178
+ min-width: 300px;
1179
+ transition: right 0.3s ease;
1180
+ }
1181
+
1182
+ .notification.show {
1183
+ right: 2rem;
1184
+ }
1185
+
1186
+ .notification i {
1187
+ font-size: 1.5rem;
1188
+ }
1189
+
1190
+ .notification-success {
1191
+ border-left-color: #00ff88;
1192
+ }
1193
+
1194
+ .notification-success i {
1195
+ color: #00ff88;
1196
+ }
1197
+
1198
+ .notification-warning {
1199
+ border-left-color: #ffa502;
1200
+ }
1201
+
1202
+ .notification-warning i {
1203
+ color: #ffa502;
1204
+ }
1205
+
1206
+ .notification-info {
1207
+ border-left-color: var(--accent-color);
1208
+ }
1209
+
1210
+ .notification-info i {
1211
+ color: var(--accent-color);
1212
+ }
1213
+
1214
+ /* ===== Shortcuts Modal ===== */
1215
+ .shortcuts-modal {
1216
+ max-width: 600px;
1217
+ max-height: 80vh;
1218
+ }
1219
+
1220
+ .shortcuts-body {
1221
+ padding: 2rem;
1222
+ display: flex;
1223
+ flex-direction: column;
1224
+ gap: 1rem;
1225
+ }
1226
+
1227
+ .shortcut-item {
1228
+ display: flex;
1229
+ align-items: center;
1230
+ gap: 1.5rem;
1231
+ padding: 1rem;
1232
+ background: rgba(0, 212, 255, 0.05);
1233
+ border-radius: 10px;
1234
+ border-left: 3px solid var(--accent-color);
1235
+ }
1236
+
1237
+ .shortcut-item kbd {
1238
+ min-width: 50px;
1239
+ padding: 0.5rem 1rem;
1240
+ background: var(--secondary-bg);
1241
+ border: 2px solid rgba(0, 212, 255, 0.3);
1242
+ border-radius: 8px;
1243
+ font-family: 'Courier New', monospace;
1244
+ font-size: 0.9rem;
1245
+ font-weight: 600;
1246
+ color: var(--accent-color);
1247
+ text-align: center;
1248
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
1249
+ }
1250
+
1251
+ .shortcut-item span {
1252
+ flex: 1;
1253
+ color: var(--text-primary);
1254
+ font-size: 1rem;
1255
+ }
1256
+
1257
+ /* ===== Analytics Modal ===== */
1258
+ .analytics-modal {
1259
+ max-width: 900px;
1260
+ max-height: 85vh;
1261
+ }
1262
+
1263
+ .analytics-body {
1264
+ padding: 2rem;
1265
+ overflow-y: auto;
1266
+ }
1267
+
1268
+ .analytics-stats {
1269
+ display: grid;
1270
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1271
+ gap: 1.5rem;
1272
+ margin-bottom: 2rem;
1273
+ }
1274
+
1275
+ .stat-card {
1276
+ padding: 1.5rem;
1277
+ background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 168, 204, 0.05));
1278
+ border-radius: 15px;
1279
+ border: 2px solid rgba(0, 212, 255, 0.2);
1280
+ text-align: center;
1281
+ transition: all 0.3s ease;
1282
+ }
1283
+
1284
+ .stat-card:hover {
1285
+ transform: translateY(-5px);
1286
+ box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
1287
+ }
1288
+
1289
+ .stat-card i {
1290
+ font-size: 2.5rem;
1291
+ color: var(--accent-color);
1292
+ margin-bottom: 1rem;
1293
+ }
1294
+
1295
+ .stat-card h3 {
1296
+ font-size: 2rem;
1297
+ color: var(--text-primary);
1298
+ margin-bottom: 0.5rem;
1299
+ font-weight: 700;
1300
+ }
1301
+
1302
+ .stat-card p {
1303
+ color: var(--text-secondary);
1304
+ font-size: 0.9rem;
1305
+ margin: 0;
1306
+ }
1307
+
1308
+ .analytics-chart {
1309
+ background: rgba(0, 212, 255, 0.05);
1310
+ padding: 2rem;
1311
+ border-radius: 15px;
1312
+ border: 2px solid rgba(0, 212, 255, 0.1);
1313
+ }
1314
+
1315
+ .analytics-chart h3 {
1316
+ color: var(--accent-color);
1317
+ margin-bottom: 1.5rem;
1318
+ font-size: 1.3rem;
1319
+ }
1320
+
1321
+ .usage-chart {
1322
+ display: flex;
1323
+ flex-direction: column;
1324
+ gap: 1rem;
1325
+ }
1326
+
1327
+ .chart-bar {
1328
+ display: flex;
1329
+ align-items: center;
1330
+ gap: 1rem;
1331
+ }
1332
+
1333
+ .chart-label {
1334
+ min-width: 120px;
1335
+ color: var(--text-primary);
1336
+ font-size: 0.95rem;
1337
+ font-weight: 500;
1338
+ }
1339
+
1340
+ .chart-bar-container {
1341
+ flex: 1;
1342
+ height: 30px;
1343
+ background: rgba(255, 255, 255, 0.05);
1344
+ border-radius: 15px;
1345
+ overflow: hidden;
1346
+ position: relative;
1347
+ }
1348
+
1349
+ .chart-bar-fill {
1350
+ height: 100%;
1351
+ background: linear-gradient(90deg, var(--accent-color), var(--success-color));
1352
+ border-radius: 15px;
1353
+ transition: width 0.5s ease;
1354
+ display: flex;
1355
+ align-items: center;
1356
+ justify-content: flex-end;
1357
+ padding-right: 0.8rem;
1358
+ color: white;
1359
+ font-size: 0.85rem;
1360
+ font-weight: 600;
1361
+ }
1362
+
1363
+ /* ===== Add Platform Modal ===== */
1364
+ .add-platform-modal {
1365
+ max-width: 550px;
1366
+ }
1367
+
1368
+ .add-platform-body {
1369
+ padding: 2rem;
1370
+ }
1371
+
1372
+ .form-group {
1373
+ margin-bottom: 1.5rem;
1374
+ }
1375
+
1376
+ .form-group label {
1377
+ display: block;
1378
+ color: var(--text-primary);
1379
+ font-weight: 600;
1380
+ margin-bottom: 0.5rem;
1381
+ font-size: 0.95rem;
1382
+ }
1383
+
1384
+ .form-group input,
1385
+ .form-group select {
1386
+ width: 100%;
1387
+ padding: 0.9rem;
1388
+ background: var(--secondary-bg);
1389
+ border: 2px solid rgba(0, 212, 255, 0.3);
1390
+ border-radius: 10px;
1391
+ color: var(--text-primary);
1392
+ font-size: 1rem;
1393
+ transition: all 0.3s ease;
1394
+ }
1395
+
1396
+ .form-group input:focus,
1397
+ .form-group select:focus {
1398
+ outline: none;
1399
+ border-color: var(--accent-color);
1400
+ box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
1401
+ }
1402
+
1403
+ .form-group input[type="color"] {
1404
+ height: 50px;
1405
+ cursor: pointer;
1406
+ }
1407
+
1408
+ .submit-btn {
1409
+ width: 100%;
1410
+ padding: 1rem;
1411
+ background: linear-gradient(135deg, var(--accent-color), var(--success-color));
1412
+ border: none;
1413
+ border-radius: 12px;
1414
+ color: white;
1415
+ font-size: 1.1rem;
1416
+ font-weight: 600;
1417
+ cursor: pointer;
1418
+ transition: all 0.3s ease;
1419
+ }
1420
+
1421
+ .submit-btn:hover {
1422
+ transform: translateY(-2px);
1423
+ box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
1424
+ }
1425
+
1426
+ /* ===== Note Modal ===== */
1427
+ .note-modal {
1428
+ max-width: 550px;
1429
+ }
1430
+
1431
+ .note-body {
1432
+ padding: 2rem;
1433
+ }
1434
+
1435
+ .note-body h3 {
1436
+ color: var(--accent-color);
1437
+ margin-bottom: 1rem;
1438
+ font-size: 1.5rem;
1439
+ }
1440
+
1441
+ .note-body textarea {
1442
+ width: 100%;
1443
+ padding: 1rem;
1444
+ background: var(--secondary-bg);
1445
+ border: 2px solid rgba(0, 212, 255, 0.3);
1446
+ border-radius: 12px;
1447
+ color: var(--text-primary);
1448
+ font-size: 1rem;
1449
+ font-family: inherit;
1450
+ resize: vertical;
1451
+ transition: all 0.3s ease;
1452
+ }
1453
+
1454
+ .note-body textarea:focus {
1455
+ outline: none;
1456
+ border-color: var(--accent-color);
1457
+ box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
1458
+ }
1459
+
1460
+ .note-actions {
1461
+ display: flex;
1462
+ gap: 1rem;
1463
+ margin-top: 1.5rem;
1464
+ }
1465
+
1466
+ .cancel-btn,
1467
+ .save-btn,
1468
+ .delete-btn {
1469
+ flex: 1;
1470
+ padding: 0.9rem;
1471
+ border: none;
1472
+ border-radius: 10px;
1473
+ font-size: 1rem;
1474
+ font-weight: 600;
1475
+ cursor: pointer;
1476
+ transition: all 0.3s ease;
1477
+ }
1478
+
1479
+ .cancel-btn {
1480
+ background: rgba(255, 255, 255, 0.1);
1481
+ color: var(--text-primary);
1482
+ border: 2px solid rgba(255, 255, 255, 0.2);
1483
+ }
1484
+
1485
+ .cancel-btn:hover {
1486
+ background: rgba(255, 255, 255, 0.15);
1487
+ }
1488
+
1489
+ .save-btn {
1490
+ background: linear-gradient(135deg, var(--accent-color), var(--success-color));
1491
+ color: white;
1492
+ }
1493
+
1494
+ .save-btn:hover {
1495
+ transform: translateY(-2px);
1496
+ box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4);
1497
+ }
1498
+
1499
+ .delete-btn {
1500
+ background: var(--danger-color);
1501
+ color: white;
1502
+ }
1503
+
1504
+ .delete-btn:hover {
1505
+ transform: translateY(-2px);
1506
+ box-shadow: 0 5px 20px rgba(255, 71, 87, 0.4);
1507
+ }
1508
+
1509
+ /* ===== Time Tracker Widget ===== */
1510
+ .time-tracker {
1511
+ position: fixed;
1512
+ bottom: 2rem;
1513
+ right: 2rem;
1514
+ background: var(--secondary-bg);
1515
+ padding: 1rem 1.5rem;
1516
+ border-radius: 15px;
1517
+ border: 2px solid var(--accent-color);
1518
+ box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
1519
+ display: flex;
1520
+ align-items: center;
1521
+ gap: 1rem;
1522
+ z-index: 999;
1523
+ animation: slideInRight 0.5s ease;
1524
+ }
1525
+
1526
+ @keyframes slideInRight {
1527
+ from {
1528
+ transform: translateX(400px);
1529
+ opacity: 0;
1530
+ }
1531
+ to {
1532
+ transform: translateX(0);
1533
+ opacity: 1;
1534
+ }
1535
+ }
1536
+
1537
+ .tracker-header {
1538
+ display: flex;
1539
+ align-items: center;
1540
+ gap: 0.5rem;
1541
+ color: var(--text-primary);
1542
+ font-weight: 600;
1543
+ }
1544
+
1545
+ .tracker-header i {
1546
+ color: var(--accent-color);
1547
+ font-size: 1.2rem;
1548
+ }
1549
+
1550
+ #trackerTime {
1551
+ color: var(--accent-color);
1552
+ font-family: 'Courier New', monospace;
1553
+ font-size: 1.1rem;
1554
+ }
1555
+
1556
+ .tracker-stop {
1557
+ padding: 0.5rem 1rem;
1558
+ background: var(--danger-color);
1559
+ border: none;
1560
+ border-radius: 8px;
1561
+ color: white;
1562
+ cursor: pointer;
1563
+ font-size: 0.9rem;
1564
+ transition: all 0.3s ease;
1565
+ }
1566
+
1567
+ .tracker-stop:hover {
1568
+ transform: scale(1.05);
1569
+ box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
1570
+ }
1571
+
1572
+ /* ===== AI Caption Generator Modal ===== */
1573
+ .ai-caption-modal {
1574
+ max-width: 1000px;
1575
+ max-height: 90vh;
1576
+ }
1577
+
1578
+ .ai-caption-body {
1579
+ padding: 2rem;
1580
+ overflow-y: auto;
1581
+ max-height: calc(90vh - 80px);
1582
+ }
1583
+
1584
+ /* Upload Section */
1585
+ .upload-section {
1586
+ display: flex;
1587
+ justify-content: center;
1588
+ align-items: center;
1589
+ min-height: 400px;
1590
+ }
1591
+
1592
+ .upload-area {
1593
+ width: 100%;
1594
+ max-width: 500px;
1595
+ padding: 3rem;
1596
+ border: 3px dashed rgba(0, 212, 255, 0.3);
1597
+ border-radius: 20px;
1598
+ text-align: center;
1599
+ background: rgba(0, 212, 255, 0.05);
1600
+ transition: all 0.3s ease;
1601
+ cursor: pointer;
1602
+ }
1603
+
1604
+ .upload-area:hover {
1605
+ border-color: var(--accent-color);
1606
+ background: rgba(0, 212, 255, 0.1);
1607
+ transform: translateY(-5px);
1608
+ }
1609
+
1610
+ .upload-area i {
1611
+ font-size: 4rem;
1612
+ color: var(--accent-color);
1613
+ margin-bottom: 1.5rem;
1614
+ }
1615
+
1616
+ .upload-area h3 {
1617
+ color: var(--text-primary);
1618
+ font-size: 1.5rem;
1619
+ margin-bottom: 0.5rem;
1620
+ }
1621
+
1622
+ .upload-area p {
1623
+ color: var(--text-secondary);
1624
+ margin-bottom: 1.5rem;
1625
+ }
1626
+
1627
+ .upload-btn {
1628
+ padding: 0.9rem 2rem;
1629
+ background: linear-gradient(135deg, var(--accent-color), var(--success-color));
1630
+ border: none;
1631
+ border-radius: 12px;
1632
+ color: white;
1633
+ font-size: 1rem;
1634
+ font-weight: 600;
1635
+ cursor: pointer;
1636
+ transition: all 0.3s ease;
1637
+ }
1638
+
1639
+ .upload-btn:hover {
1640
+ transform: translateY(-2px);
1641
+ box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
1642
+ }
1643
+
1644
+ /* Results Section */
1645
+ .results-section {
1646
+ display: grid;
1647
+ grid-template-columns: 1fr 1.5fr;
1648
+ gap: 2rem;
1649
+ }
1650
+
1651
+ .image-preview-container {
1652
+ position: relative;
1653
+ }
1654
+
1655
+ .image-preview-container img {
1656
+ width: 100%;
1657
+ max-height: 500px;
1658
+ object-fit: contain;
1659
+ border-radius: 15px;
1660
+ border: 2px solid rgba(0, 212, 255, 0.2);
1661
+ background: rgba(0, 0, 0, 0.3);
1662
+ }
1663
+
1664
+ .change-image-btn {
1665
+ width: 100%;
1666
+ margin-top: 1rem;
1667
+ padding: 0.8rem;
1668
+ background: rgba(255, 255, 255, 0.1);
1669
+ border: 2px solid rgba(255, 255, 255, 0.2);
1670
+ border-radius: 10px;
1671
+ color: var(--text-primary);
1672
+ font-size: 0.95rem;
1673
+ font-weight: 600;
1674
+ cursor: pointer;
1675
+ transition: all 0.3s ease;
1676
+ }
1677
+
1678
+ .change-image-btn:hover {
1679
+ background: rgba(255, 255, 255, 0.15);
1680
+ border-color: var(--accent-color);
1681
+ }
1682
+
1683
+ /* AI Results */
1684
+ .ai-results {
1685
+ display: flex;
1686
+ flex-direction: column;
1687
+ gap: 1.5rem;
1688
+ }
1689
+
1690
+ .result-card {
1691
+ background: rgba(0, 212, 255, 0.05);
1692
+ border: 2px solid rgba(0, 212, 255, 0.2);
1693
+ border-radius: 15px;
1694
+ padding: 1.5rem;
1695
+ transition: all 0.3s ease;
1696
+ }
1697
+
1698
+ .result-card:hover {
1699
+ border-color: var(--accent-color);
1700
+ background: rgba(0, 212, 255, 0.08);
1701
+ }
1702
+
1703
+ .result-header {
1704
+ display: flex;
1705
+ align-items: center;
1706
+ gap: 0.8rem;
1707
+ margin-bottom: 1rem;
1708
+ }
1709
+
1710
+ .result-header i {
1711
+ font-size: 1.3rem;
1712
+ color: var(--accent-color);
1713
+ }
1714
+
1715
+ .result-header h4 {
1716
+ color: var(--text-primary);
1717
+ font-size: 1.1rem;
1718
+ margin: 0;
1719
+ }
1720
+
1721
+ .result-content {
1722
+ color: var(--text-primary);
1723
+ font-size: 1rem;
1724
+ line-height: 1.8;
1725
+ min-height: 60px;
1726
+ padding: 1rem;
1727
+ background: rgba(0, 0, 0, 0.2);
1728
+ border-radius: 10px;
1729
+ }
1730
+
1731
+ .result-content p {
1732
+ margin: 0.5rem 0;
1733
+ }
1734
+
1735
+ /* Loading Animation */
1736
+ .loading-dots {
1737
+ display: flex;
1738
+ gap: 0.5rem;
1739
+ justify-content: center;
1740
+ align-items: center;
1741
+ height: 60px;
1742
+ }
1743
+
1744
+ .loading-dots span {
1745
+ width: 10px;
1746
+ height: 10px;
1747
+ background: var(--accent-color);
1748
+ border-radius: 50%;
1749
+ animation: loadingBounce 1.4s infinite ease-in-out both;
1750
+ }
1751
+
1752
+ .loading-dots span:nth-child(1) {
1753
+ animation-delay: -0.32s;
1754
+ }
1755
+
1756
+ .loading-dots span:nth-child(2) {
1757
+ animation-delay: -0.16s;
1758
+ }
1759
+
1760
+ @keyframes loadingBounce {
1761
+ 0%, 80%, 100% {
1762
+ transform: scale(0);
1763
+ }
1764
+ 40% {
1765
+ transform: scale(1);
1766
+ }
1767
+ }
1768
+
1769
+ /* Post Section */
1770
+ .post-section {
1771
+ background: rgba(0, 212, 255, 0.05);
1772
+ border: 2px solid rgba(0, 212, 255, 0.2);
1773
+ border-radius: 15px;
1774
+ padding: 1.5rem;
1775
+ }
1776
+
1777
+ .post-section h4 {
1778
+ color: var(--text-primary);
1779
+ font-size: 1.1rem;
1780
+ margin-bottom: 1rem;
1781
+ display: flex;
1782
+ align-items: center;
1783
+ gap: 0.5rem;
1784
+ }
1785
+
1786
+ .platform-select-grid {
1787
+ display: grid;
1788
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
1789
+ gap: 1rem;
1790
+ margin-bottom: 1.5rem;
1791
+ }
1792
+
1793
+ .platform-post-btn {
1794
+ padding: 0.9rem;
1795
+ background: var(--secondary-bg);
1796
+ border: 2px solid rgba(0, 212, 255, 0.3);
1797
+ border-radius: 12px;
1798
+ color: var(--text-primary);
1799
+ font-size: 0.95rem;
1800
+ font-weight: 600;
1801
+ cursor: pointer;
1802
+ transition: all 0.3s ease;
1803
+ display: flex;
1804
+ align-items: center;
1805
+ justify-content: center;
1806
+ gap: 0.5rem;
1807
+ }
1808
+
1809
+ .platform-post-btn:hover {
1810
+ background: var(--accent-color);
1811
+ color: var(--primary-bg);
1812
+ transform: translateY(-3px);
1813
+ box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
1814
+ }
1815
+
1816
+ .platform-post-btn i {
1817
+ font-size: 1.2rem;
1818
+ }
1819
+
1820
+ .copy-buttons {
1821
+ display: flex;
1822
+ gap: 1rem;
1823
+ flex-wrap: wrap;
1824
+ }
1825
+
1826
+ .copy-btn {
1827
+ flex: 1;
1828
+ min-width: 140px;
1829
+ padding: 0.8rem 1.2rem;
1830
+ background: rgba(0, 255, 136, 0.1);
1831
+ border: 2px solid rgba(0, 255, 136, 0.3);
1832
+ border-radius: 10px;
1833
+ color: var(--success-color);
1834
+ font-size: 0.9rem;
1835
+ font-weight: 600;
1836
+ cursor: pointer;
1837
+ transition: all 0.3s ease;
1838
+ display: flex;
1839
+ align-items: center;
1840
+ justify-content: center;
1841
+ gap: 0.5rem;
1842
+ }
1843
+
1844
+ .copy-btn:hover {
1845
+ background: var(--success-color);
1846
+ color: var(--primary-bg);
1847
+ transform: translateY(-2px);
1848
+ box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
1849
+ }
1850
+
1851
+ .copy-btn.copied {
1852
+ background: var(--success-color);
1853
+ color: white;
1854
+ }
1855
+
1856
+ /* Responsive AI Modal */
1857
+ @media (max-width: 768px) {
1858
+ .results-section {
1859
+ grid-template-columns: 1fr;
1860
+ }
1861
+
1862
+ .platform-select-grid {
1863
+ grid-template-columns: repeat(2, 1fr);
1864
+ }
1865
+
1866
+ .copy-buttons {
1867
+ flex-direction: column;
1868
+ }
1869
+
1870
+ .copy-btn {
1871
+ width: 100%;
1872
+ }
1873
+ }