Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>InstaScheduler | Instagram Post Scheduler for Personal Brands</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .post-preview { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .calendar-day:hover { | |
| background-color: #e0f2fe; | |
| } | |
| .calendar-day.active { | |
| background-color: #0ea5e9; | |
| color: white; | |
| } | |
| .drag-item { | |
| cursor: move; | |
| transition: transform 0.2s ease; | |
| } | |
| .drag-item:hover { | |
| transform: scale(1.02); | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| .modal-content { | |
| max-height: 90vh; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-white border-r border-gray-200 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-lg bg-blue-500 flex items-center justify-center text-white font-bold text-xl">IS</div> | |
| <h1 class="text-xl font-bold ml-3">InstaScheduler</h1> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4"> | |
| <button id="createPostBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> Create Post | |
| </button> | |
| </div> | |
| <nav class="px-2"> | |
| <div class="mb-4"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 mb-2">Menu</h3> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-lg bg-blue-50"> | |
| <i class="fas fa-calendar-alt mr-3 text-blue-500"></i> | |
| Calendar | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-chart-line mr-3 text-gray-500"></i> | |
| Analytics | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-image mr-3 text-gray-500"></i> | |
| Media Library | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-hashtag mr-3 text-gray-500"></i> | |
| Hashtag Library | |
| </a> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 mb-2">Account</h3> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-user mr-3 text-gray-500"></i> | |
| Profile | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-cog mr-3 text-gray-500"></i> | |
| Settings | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Sarah Johnson</p> | |
| <p class="text-xs text-gray-500">Free Plan</p> | |
| </div> | |
| <button class="ml-auto text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <header class="bg-white border-b border-gray-200 py-4 px-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <h2 class="text-lg font-semibold text-gray-900">Content Calendar</h2> | |
| <div class="ml-4 relative"> | |
| <select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg py-1 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| <option>Personal Brand</option> | |
| <option>Business Account</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-2 text-xs text-gray-500 pointer-events-none"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Calendar Navigation --> | |
| <div class="bg-white border-b border-gray-200 py-3 px-6 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left text-gray-600"></i> | |
| </button> | |
| <h3 class="text-md font-semibold">June 2023</h3> | |
| <button class="p-1 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right text-gray-600"></i> | |
| </button> | |
| <button class="text-sm text-blue-500 hover:text-blue-700">Today</button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-lg">Month</button> | |
| <button class="px-3 py-1 text-sm hover:bg-gray-100 rounded-lg">Week</button> | |
| <button class="px-3 py-1 text-sm hover:bg-gray-100 rounded-lg">Day</button> | |
| </div> | |
| </div> | |
| <!-- Calendar Grid --> | |
| <div class="flex-1 overflow-auto p-6"> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> | |
| <!-- Weekday Headers --> | |
| <div class="grid grid-cols-7 border-b border-gray-200"> | |
| <div class="py-2 text-center text-sm font-medium text-gray-500">Sun</div> | |
| <div class="py-2 text-center text-sm font-medium text-gray-500">Mon</div> | |
| <div class="py-2 text-center text-sm font-medium text-gray-500">Tue</div> | |
| <div class="py-2 text-center text-sm font-medium text-gray-500">Wed</div> | |
| <div class="py-2 text-center text-sm font-medium text-gray-500">Thu</div> | |
| <div class="py-2 text-center text-sm font-medium text-gray-500">Fri</div> | |
| <div class="py-2 text-center text-sm font-medium text-gray-500">Sat</div> | |
| </div> | |
| <!-- Calendar Days --> | |
| <div class="grid grid-cols-7 divide-x divide-y divide-gray-200"> | |
| <!-- Week 1 --> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-05-28"> | |
| <div class="text-right text-xs text-gray-400 mb-1">28</div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-05-29"> | |
| <div class="text-right text-xs text-gray-400 mb-1">29</div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-05-30"> | |
| <div class="text-right text-xs text-gray-400 mb-1">30</div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-05-31"> | |
| <div class="text-right text-xs text-gray-400 mb-1">31</div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-06-01"> | |
| <div class="text-right text-xs mb-1">1</div> | |
| <div class="space-y-1"> | |
| <div class="drag-item bg-blue-50 border border-blue-100 text-xs p-1 rounded cursor-move"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-blue-500 rounded-full mr-1"></div> | |
| <span>9:00 AM</span> | |
| </div> | |
| <div class="truncate">Product launch announcement</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-06-02"> | |
| <div class="text-right text-xs mb-1">2</div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-06-03"> | |
| <div class="text-right text-xs mb-1">3</div> | |
| </div> | |
| <!-- Week 2 --> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-06-04"> | |
| <div class="text-right text-xs mb-1">4</div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-06-05"> | |
| <div class="text-right text-xs mb-1">5</div> | |
| <div class="space-y-1"> | |
| <div class="drag-item bg-purple-50 border border-purple-100 text-xs p-1 rounded cursor-move"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-purple-500 rounded-full mr-1"></div> | |
| <span>2:30 PM</span> | |
| </div> | |
| <div class="truncate">Behind the scenes</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-06-06"> | |
| <div class="text-right text-xs mb-1">6</div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-06-07"> | |
| <div class="text-right text-xs mb-1">7</div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-06-08"> | |
| <div class="text-right text-xs mb-1">8</div> | |
| <div class="space-y-1"> | |
| <div class="drag-item bg-green-50 border border-green-100 text-xs p-1 rounded cursor-move"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-green-500 rounded-full mr-1"></div> | |
| <span>11:00 AM</span> | |
| </div> | |
| <div class="truncate">Client testimonial</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1" data-date="2023-06-09"> | |
| <div class="text-right text-xs mb-1">9</div> | |
| </div> | |
| <div class="calendar-day min-h-24 p-1 active" data-date="2023-06-10"> | |
| <div class="text-right text-xs text-white mb-1">10</div> | |
| <div class="space-y-1"> | |
| <div class="drag-item bg-white border border-gray-200 text-xs p-1 rounded cursor-move"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-blue-500 rounded-full mr-1"></div> | |
| <span>5:00 PM</span> | |
| </div> | |
| <div class="truncate">Weekend special offer</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weeks 3-5 would continue here --> | |
| <!-- For brevity, I'm omitting them but they would follow the same pattern --> | |
| </div> | |
| </div> | |
| <!-- Scheduled Posts List --> | |
| <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> | |
| <div class="border-b border-gray-200 px-6 py-3 flex items-center justify-between"> | |
| <h3 class="font-medium">Scheduled Posts</h3> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-sm text-gray-500 hover:text-gray-700">All</button> | |
| <button class="text-sm text-blue-500">This Month</button> | |
| <button class="text-sm text-gray-500 hover:text-gray-700">Upcoming</button> | |
| </div> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Post Item 1 --> | |
| <div class="p-4 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643" alt="Post" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="text-sm font-medium">Product launch announcement</h4> | |
| <span class="text-xs text-gray-500">Jun 1, 9:00 AM</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1 line-clamp-2">Exciting news! Our new product line is launching next week. Stay tuned for exclusive early access for our followers. #NewProduct #Launch</p> | |
| <div class="mt-2 flex items-center space-x-2"> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">Scheduled</span> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post Item 2 --> | |
| <div class="p-4 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f" alt="Post" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="text-sm font-medium">Behind the scenes</h4> | |
| <span class="text-xs text-gray-500">Jun 5, 2:30 PM</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1 line-clamp-2">A peek into our creative process. This is where the magic happens! #BehindTheScenes #CreativeProcess</p> | |
| <div class="mt-2 flex items-center space-x-2"> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">Scheduled</span> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post Item 3 --> | |
| <div class="p-4 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df" alt="Post" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="text-sm font-medium">Client testimonial</h4> | |
| <span class="text-xs text-gray-500">Jun 8, 11:00 AM</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1 line-clamp-2">"Working with Sarah transformed my business. The results speak for themselves!" - Happy Client #Testimonial #SuccessStory</p> | |
| <div class="mt-2 flex items-center space-x-2"> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">Scheduled</span> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Post Modal --> | |
| <div id="postModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none"> | |
| <div class="modal-content bg-white rounded-xl w-full max-w-4xl overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between border-b border-gray-200 pb-4"> | |
| <h3 class="text-lg font-semibold">Create New Post</h3> | |
| <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Left Column - Media Upload --> | |
| <div class="md:col-span-1"> | |
| <div class="post-preview rounded-lg border-2 border-dashed border-gray-300 p-4 flex flex-col items-center justify-center h-64"> | |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-3"></i> | |
| <p class="text-sm text-gray-500 mb-3">Drag & drop your image or video here</p> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg text-sm"> | |
| Browse Files | |
| </button> | |
| <p class="text-xs text-gray-400 mt-2">JPEG, PNG, MP4 up to 50MB</p> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="text-sm font-medium mb-2">Media Options</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="carousel" class="rounded text-blue-500"> | |
| <label for="carousel" class="ml-2 text-sm">Create carousel post</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="firstComment" class="rounded text-blue-500" checked> | |
| <label for="firstComment" class="ml-2 text-sm">Add hashtags in first comment</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-medium mb-2">Grid Preview</h4> | |
| <div class="grid grid-cols-3 gap-1"> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| <div class="aspect-square bg-gray-200 rounded flex items-center justify-center text-gray-400"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column - Caption & Hashtags --> | |
| <div class="md:col-span-1"> | |
| <div class="mb-4"> | |
| <label for="caption" class="block text-sm font-medium mb-1">Caption</label> | |
| <textarea id="caption" rows="6" class="w-full border border-gray-300 rounded-lg p-3 text-sm focus:ring-1 focus:ring-blue-500 focus:border-blue-500" placeholder="Write your caption here..."></textarea> | |
| <div class="flex justify-between items-center mt-1"> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-at"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </button> | |
| </div> | |
| <span class="text-xs text-gray-500">0/2200</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="hashtags" class="block text-sm font-medium mb-1">Hashtags</label> | |
| <textarea id="hashtags" rows="2" class="w-full border border-gray-300 rounded-lg p-3 text-sm focus:ring-1 focus:ring-blue-500 focus:border-blue-500" placeholder="#your #hashtags #here"></textarea> | |
| <div class="flex justify-between items-center mt-1"> | |
| <button class="text-xs text-blue-500 hover:text-blue-700">Add from library</button> | |
| <span class="text-xs text-gray-500">0/30</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">AI Suggestions</label> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left text-xs bg-gray-100 hover:bg-gray-200 p-2 rounded"> | |
| "Just launched! 🎉 Our new [product/service] is now available. Click the link in bio to learn more. #NewLaunch #ExcitingTimes" | |
| </button> | |
| <button class="w-full text-left text-xs bg-gray-100 hover:bg-gray-200 p-2 rounded"> | |
| "Behind the scenes of creating [product/service]. So much love goes into every detail! #BehindTheScenes #CreativeProcess" | |
| </button> | |
| <button class="w-full text-left text-xs bg-gray-100 hover:bg-gray-200 p-2 rounded"> | |
| "We're thrilled to share [news/announcement] with you all! Thank you for your continued support. #Grateful #Community" | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Scheduling --> | |
| <div class="md:col-span-1"> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Schedule</label> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="scheduleNow" name="schedule" class="text-blue-500" checked> | |
| <label for="scheduleNow" class="ml-2 text-sm">Post now</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="scheduleLater" name="schedule" class="text-blue-500"> | |
| <label for="scheduleLater" class="ml-2 text-sm">Schedule for later</label> | |
| </div> | |
| </div> | |
| <div id="scheduleOptions" class="mt-4 hidden"> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div> | |
| <label for="date" class="block text | |
| </html> |