|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Social Media Hub - Your Digital Gateway</title>
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
|
|
<script src="https://accounts.google.com/gsi/client" async defer></script>
|
|
|
<meta name="google-signin-client_id" content="YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
|
|
|
<header class="header">
|
|
|
<div class="header-top">
|
|
|
<div class="header-controls">
|
|
|
|
|
|
<button class="control-icon-btn" id="themeToggle" title="Toggle Dark/Light Mode">
|
|
|
<i class="fas fa-moon"></i>
|
|
|
</button>
|
|
|
|
|
|
<button class="control-icon-btn" id="aiCaptionBtn" title="AI Caption Generator">
|
|
|
<i class="fas fa-camera"></i>
|
|
|
</button>
|
|
|
|
|
|
<button class="control-icon-btn" id="shortcutsBtn" title="Keyboard Shortcuts (?)">
|
|
|
<i class="fas fa-keyboard"></i>
|
|
|
</button>
|
|
|
|
|
|
<button class="control-icon-btn" id="analyticsBtn" title="Usage Analytics">
|
|
|
<i class="fas fa-chart-bar"></i>
|
|
|
</button>
|
|
|
|
|
|
<button class="control-icon-btn" id="addPlatformBtn" title="Add Custom Platform">
|
|
|
<i class="fas fa-plus-circle"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="logo-section">
|
|
|
<div class="logo-icon">
|
|
|
<i class="fas fa-share-alt"></i>
|
|
|
</div>
|
|
|
<h1 class="title">Social Hub</h1>
|
|
|
</div>
|
|
|
<p class="subtitle">Connect to your favorite platforms instantly</p>
|
|
|
|
|
|
<div class="system-status" id="systemStatus">
|
|
|
<i class="fas fa-check-circle"></i>
|
|
|
<span>All Systems Operational</span>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
|
|
|
<div class="filter-tabs" id="filterTabs">
|
|
|
<button class="filter-tab active" data-filter="all">All</button>
|
|
|
<button class="filter-tab" data-filter="favorites">
|
|
|
<i class="fas fa-star"></i> Favorites
|
|
|
</button>
|
|
|
<button class="filter-tab" data-filter="recent">
|
|
|
<i class="fas fa-history"></i> Recent
|
|
|
</button>
|
|
|
<button class="filter-tab" data-filter="social">Social</button>
|
|
|
<button class="filter-tab" data-filter="messaging">Messaging</button>
|
|
|
<button class="filter-tab" data-filter="professional">Professional</button>
|
|
|
<button class="filter-tab" data-filter="media">Media</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="search-container">
|
|
|
<input type="text" id="searchInput" class="search-bar" placeholder="Search platforms...">
|
|
|
<i class="fas fa-search search-icon"></i>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="recent-timeline" id="recentTimeline" style="display: none;">
|
|
|
<h3>Recent Activity</h3>
|
|
|
<div class="timeline-items" id="timelineItems"></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-grid" id="socialGrid">
|
|
|
|
|
|
<div class="social-card" data-platform="facebook" data-category="social">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front facebook-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-facebook-f"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">Facebook</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Connect with friends and the world</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 2.9B users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://www.facebook.com" target="_blank" class="launch-btn" data-url="https://www.facebook.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="instagram" data-category="social">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front instagram-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-instagram"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">Instagram</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Share your moments visually</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 2.0B users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://www.instagram.com" target="_blank" class="launch-btn" data-url="https://www.instagram.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="twitter" data-category="social">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front twitter-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-twitter"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">X (Twitter)</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Join the conversation</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 556M users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://www.twitter.com" target="_blank" class="launch-btn" data-url="https://www.twitter.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="linkedin" data-category="professional">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front linkedin-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-linkedin-in"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">LinkedIn</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Professional networking</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 930M users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://www.linkedin.com" target="_blank" class="launch-btn" data-url="https://www.linkedin.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="youtube" data-category="media">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front youtube-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-youtube"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">YouTube</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Watch and share videos</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 2.5B users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://www.youtube.com" target="_blank" class="launch-btn" data-url="https://www.youtube.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="tiktok" data-category="media">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front tiktok-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-tiktok"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">TikTok</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Create short entertaining videos</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 1.5B users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://www.tiktok.com" target="_blank" class="launch-btn" data-url="https://www.tiktok.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="reddit" data-category="social">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front reddit-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-reddit-alien"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">Reddit</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Dive into communities</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 430M users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://www.reddit.com" target="_blank" class="launch-btn" data-url="https://www.reddit.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="whatsapp" data-category="messaging">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front whatsapp-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-whatsapp"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">WhatsApp</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Simple. Secure. Messaging.</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 2.7B users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://web.whatsapp.com" target="_blank" class="launch-btn" data-url="https://web.whatsapp.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="telegram" data-category="messaging">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front telegram-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-telegram-plane"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">Telegram</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Fast and secure messaging</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 800M users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://web.telegram.org" target="_blank" class="launch-btn" data-url="https://web.telegram.org">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="discord" data-category="messaging">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front discord-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-discord"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">Discord</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Voice, video, and text chat</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 563M users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://discord.com/app" target="_blank" class="launch-btn" data-url="https://discord.com/app">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="snapchat" data-category="social">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front snapchat-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-snapchat-ghost"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">Snapchat</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Share the moment</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 750M users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://www.snapchat.com" target="_blank" class="launch-btn" data-url="https://www.snapchat.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="social-card" data-platform="pinterest" data-category="media">
|
|
|
<div class="card-inner">
|
|
|
<div class="card-front pinterest-bg">
|
|
|
<div class="card-top-controls">
|
|
|
<button class="favorite-btn" title="Add to Favorites">
|
|
|
<i class="far fa-star"></i>
|
|
|
</button>
|
|
|
<button class="note-btn" title="Add Note">
|
|
|
<i class="far fa-sticky-note"></i>
|
|
|
</button>
|
|
|
<div class="status-indicator" title="Status: Online"></div>
|
|
|
</div>
|
|
|
<div class="platform-logo">
|
|
|
<i class="fab fa-pinterest-p"></i>
|
|
|
</div>
|
|
|
<h3 class="platform-name">Pinterest</h3>
|
|
|
<div class="platform-badges">
|
|
|
<span class="visit-badge" style="display: none;">0 visits</span>
|
|
|
<span class="note-indicator" style="display: none;"><i class="fas fa-sticky-note"></i></span>
|
|
|
</div>
|
|
|
<p class="platform-desc">Discover ideas and inspiration</p>
|
|
|
<div class="card-stats">
|
|
|
<span><i class="fas fa-users"></i> 465M users</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://www.pinterest.com" target="_blank" class="launch-btn" data-url="https://www.pinterest.com">
|
|
|
<i class="fas fa-external-link-alt"></i> Launch
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<footer class="footer">
|
|
|
<p>© 2025 Social Hub | Your Digital Gateway to All Platforms</p>
|
|
|
<div class="footer-links">
|
|
|
<a href="#"><i class="fas fa-shield-alt"></i> Privacy</a>
|
|
|
<a href="#"><i class="fas fa-file-contract"></i> Terms</a>
|
|
|
<a href="#"><i class="fas fa-envelope"></i> Contact</a>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<canvas id="particles"></canvas>
|
|
|
|
|
|
|
|
|
<div id="shortcutsModal" class="modal">
|
|
|
<div class="modal-content shortcuts-modal">
|
|
|
<div class="modal-header">
|
|
|
<div class="modal-title">
|
|
|
<i class="fas fa-keyboard"></i>
|
|
|
<span>Keyboard Shortcuts</span>
|
|
|
</div>
|
|
|
<button class="modal-btn close-btn" onclick="document.getElementById('shortcutsModal').classList.remove('active')">
|
|
|
<i class="fas fa-times"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body shortcuts-body">
|
|
|
<div class="shortcut-item">
|
|
|
<kbd>/</kbd>
|
|
|
<span>Focus search bar</span>
|
|
|
</div>
|
|
|
<div class="shortcut-item">
|
|
|
<kbd>Esc</kbd>
|
|
|
<span>Close modal / Clear search</span>
|
|
|
</div>
|
|
|
<div class="shortcut-item">
|
|
|
<kbd>?</kbd>
|
|
|
<span>Show shortcuts</span>
|
|
|
</div>
|
|
|
<div class="shortcut-item">
|
|
|
<kbd>1-9</kbd>
|
|
|
<span>Quick launch platforms</span>
|
|
|
</div>
|
|
|
<div class="shortcut-item">
|
|
|
<kbd>Ctrl</kbd> + <kbd>K</kbd>
|
|
|
<span>Open analytics</span>
|
|
|
</div>
|
|
|
<div class="shortcut-item">
|
|
|
<kbd>Ctrl</kbd> + <kbd>D</kbd>
|
|
|
<span>Toggle dark/light mode</span>
|
|
|
</div>
|
|
|
<div class="shortcut-item">
|
|
|
<kbd>Ctrl</kbd> + <kbd>I</kbd>
|
|
|
<span>Open AI Caption Generator</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="analyticsModal" class="modal">
|
|
|
<div class="modal-content analytics-modal">
|
|
|
<div class="modal-header">
|
|
|
<div class="modal-title">
|
|
|
<i class="fas fa-chart-bar"></i>
|
|
|
<span>Usage Analytics</span>
|
|
|
</div>
|
|
|
<button class="modal-btn close-btn" onclick="document.getElementById('analyticsModal').classList.remove('active')">
|
|
|
<i class="fas fa-times"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body analytics-body">
|
|
|
<div class="analytics-stats">
|
|
|
<div class="stat-card">
|
|
|
<i class="fas fa-mouse-pointer"></i>
|
|
|
<h3 id="totalVisits">0</h3>
|
|
|
<p>Total Visits</p>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<i class="fas fa-clock"></i>
|
|
|
<h3 id="totalTime">0h 0m</h3>
|
|
|
<p>Total Time</p>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<i class="fas fa-star"></i>
|
|
|
<h3 id="totalFavorites">0</h3>
|
|
|
<p>Favorites</p>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<i class="fas fa-fire"></i>
|
|
|
<h3 id="mostUsed">-</h3>
|
|
|
<p>Most Used</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="analytics-chart">
|
|
|
<h3>Platform Usage</h3>
|
|
|
<div id="usageChart" class="usage-chart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="addPlatformModal" class="modal">
|
|
|
<div class="modal-content add-platform-modal">
|
|
|
<div class="modal-header">
|
|
|
<div class="modal-title">
|
|
|
<i class="fas fa-plus-circle"></i>
|
|
|
<span>Add Custom Platform</span>
|
|
|
</div>
|
|
|
<button class="modal-btn close-btn" onclick="document.getElementById('addPlatformModal').classList.remove('active')">
|
|
|
<i class="fas fa-times"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body add-platform-body">
|
|
|
<form id="addPlatformForm">
|
|
|
<div class="form-group">
|
|
|
<label>Platform Name</label>
|
|
|
<input type="text" id="customPlatformName" placeholder="e.g., My Custom App" required>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label>Platform URL</label>
|
|
|
<input type="url" id="customPlatformURL" placeholder="https://example.com" required>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label>Icon Class (Font Awesome)</label>
|
|
|
<input type="text" id="customPlatformIcon" placeholder="fab fa-custom" value="fas fa-globe">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label>Background Color</label>
|
|
|
<input type="color" id="customPlatformColor" value="#00d4ff">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label>Category</label>
|
|
|
<select id="customPlatformCategory">
|
|
|
<option value="social">Social</option>
|
|
|
<option value="messaging">Messaging</option>
|
|
|
<option value="professional">Professional</option>
|
|
|
<option value="media">Media</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<button type="submit" class="submit-btn">Add Platform</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="noteModal" class="modal">
|
|
|
<div class="modal-content note-modal">
|
|
|
<div class="modal-header">
|
|
|
<div class="modal-title">
|
|
|
<i class="fas fa-sticky-note"></i>
|
|
|
<span>Platform Note</span>
|
|
|
</div>
|
|
|
<button class="modal-btn close-btn" onclick="document.getElementById('noteModal').classList.remove('active')">
|
|
|
<i class="fas fa-times"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body note-body">
|
|
|
<h3 id="notePlatformName"></h3>
|
|
|
<textarea id="noteTextarea" placeholder="Add a note or reminder..." rows="5"></textarea>
|
|
|
<div class="note-actions">
|
|
|
<button class="cancel-btn" onclick="document.getElementById('noteModal').classList.remove('active')">Cancel</button>
|
|
|
<button class="save-btn" id="saveNoteBtn">Save Note</button>
|
|
|
<button class="delete-btn" id="deleteNoteBtn">Delete Note</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="timeTracker" class="time-tracker" style="display: none;">
|
|
|
<div class="tracker-header">
|
|
|
<i class="fas fa-stopwatch"></i>
|
|
|
<span>Time Spent: </span>
|
|
|
<span id="trackerTime">00:00</span>
|
|
|
</div>
|
|
|
<button class="tracker-stop" id="stopTracking">
|
|
|
<i class="fas fa-stop"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="aiCaptionModal" class="modal">
|
|
|
<div class="modal-content ai-caption-modal">
|
|
|
<div class="modal-header">
|
|
|
<div class="modal-title">
|
|
|
<i class="fas fa-camera"></i>
|
|
|
<span>AI Caption Generator</span>
|
|
|
</div>
|
|
|
<button class="modal-btn close-btn" onclick="document.getElementById('aiCaptionModal').classList.remove('active')">
|
|
|
<i class="fas fa-times"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body ai-caption-body">
|
|
|
|
|
|
<div class="upload-section" id="uploadSection">
|
|
|
<div class="upload-area" id="uploadArea">
|
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
|
<h3>Upload Your Photo</h3>
|
|
|
<p>Drop an image here or click to browse</p>
|
|
|
<input type="file" id="imageInput" accept="image/*" hidden>
|
|
|
<button class="upload-btn" onclick="document.getElementById('imageInput').click()">
|
|
|
<i class="fas fa-folder-open"></i> Choose Image
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="results-section" id="resultsSection" style="display: none;">
|
|
|
<div class="image-preview-container">
|
|
|
<img id="imagePreview" src="" alt="Preview">
|
|
|
<button class="change-image-btn" onclick="document.getElementById('imageInput').click()">
|
|
|
<i class="fas fa-exchange-alt"></i> Change Image
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="ai-results">
|
|
|
|
|
|
<div class="result-card">
|
|
|
<div class="result-header">
|
|
|
<i class="fas fa-align-left"></i>
|
|
|
<h4>AI Description</h4>
|
|
|
</div>
|
|
|
<div class="result-content" id="aiDescription">
|
|
|
<div class="loading-dots">
|
|
|
<span></span><span></span><span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="result-card">
|
|
|
<div class="result-header">
|
|
|
<i class="fas fa-quote-right"></i>
|
|
|
<h4>Generated Captions</h4>
|
|
|
</div>
|
|
|
<div class="result-content" id="aiCaptions">
|
|
|
<div class="loading-dots">
|
|
|
<span></span><span></span><span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="result-card">
|
|
|
<div class="result-header">
|
|
|
<i class="fas fa-hashtag"></i>
|
|
|
<h4>Hashtags</h4>
|
|
|
</div>
|
|
|
<div class="result-content" id="aiHashtags">
|
|
|
<div class="loading-dots">
|
|
|
<span></span><span></span><span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="post-section">
|
|
|
<h4><i class="fas fa-share-alt"></i> Post to Platform</h4>
|
|
|
<div class="platform-select-grid">
|
|
|
<button class="platform-post-btn" data-platform="instagram">
|
|
|
<i class="fab fa-instagram"></i> Instagram
|
|
|
</button>
|
|
|
<button class="platform-post-btn" data-platform="facebook">
|
|
|
<i class="fab fa-facebook"></i> Facebook
|
|
|
</button>
|
|
|
<button class="platform-post-btn" data-platform="twitter">
|
|
|
<i class="fab fa-twitter"></i> Twitter/X
|
|
|
</button>
|
|
|
<button class="platform-post-btn" data-platform="linkedin">
|
|
|
<i class="fab fa-linkedin"></i> LinkedIn
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="copy-buttons">
|
|
|
<button class="copy-btn" id="copyCaptionBtn">
|
|
|
<i class="fas fa-copy"></i> Copy Caption
|
|
|
</button>
|
|
|
<button class="copy-btn" id="copyHashtagsBtn">
|
|
|
<i class="fas fa-copy"></i> Copy Hashtags
|
|
|
</button>
|
|
|
<button class="copy-btn" id="copyAllBtn">
|
|
|
<i class="fas fa-copy"></i> Copy All
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="platformModal" class="modal">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<div class="modal-title">
|
|
|
<i class="platform-icon"></i>
|
|
|
<span class="platform-title">Platform</span>
|
|
|
</div>
|
|
|
<div class="modal-controls">
|
|
|
<button class="modal-btn close-btn" title="Close">
|
|
|
<i class="fas fa-times"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
|
|
|
<div id="authSection" class="auth-section">
|
|
|
<div class="auth-container">
|
|
|
<div class="auth-icon">
|
|
|
<i class="platform-icon-large"></i>
|
|
|
</div>
|
|
|
<h2 class="auth-title">Connect to <span class="platform-name-text">Platform</span></h2>
|
|
|
<p class="auth-description">Choose your preferred method to access this platform. A new window will open for secure authentication.</p>
|
|
|
|
|
|
<div class="auth-options">
|
|
|
|
|
|
<button class="auth-btn google-btn" id="googleSignIn">
|
|
|
<i class="fab fa-google"></i>
|
|
|
<span>Sign in with Google (Opens in New Window)</span>
|
|
|
</button>
|
|
|
|
|
|
|
|
|
<button class="auth-btn platform-btn" id="platformSignIn">
|
|
|
<i class="platform-icon-small"></i>
|
|
|
<span class="platform-login-text">Login with Platform Account</span>
|
|
|
</button>
|
|
|
|
|
|
|
|
|
<button class="auth-btn guest-btn" id="guestAccess">
|
|
|
<i class="fas fa-globe"></i>
|
|
|
<span>Open Web Version (New Window)</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="auth-footer">
|
|
|
<i class="fas fa-shield-alt"></i>
|
|
|
<p>Your credentials are secure and handled by the platform's official authentication</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="platformSection" class="platform-section" style="display: none;">
|
|
|
<div class="platform-controls">
|
|
|
<button class="control-btn refresh-btn" title="Refresh">
|
|
|
<i class="fas fa-sync-alt"></i>
|
|
|
</button>
|
|
|
<button class="control-btn fullscreen-btn" title="Fullscreen">
|
|
|
<i class="fas fa-expand"></i>
|
|
|
</button>
|
|
|
<button class="control-btn logout-btn" title="Logout">
|
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<iframe id="platformFrame" src="" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
|
|
|
<div class="loading-spinner">
|
|
|
<i class="fas fa-circle-notch fa-spin"></i>
|
|
|
<p>Loading platform...</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="script.js"></script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
