|
|
| (22 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| <html>
| | <div id="social-app"> |
| <div id="social-feed-app"> | | <div style="text-align:center;padding:60px;color:#8e8e8e"> |
| <style> | | <div style="font-size:48px;margin-bottom:16px">⏳</div> |
| /* Reset and Base */
| | <div>Loading Social Feed...</div> |
| #social-feed-app * { box-sizing: border-box; }
| |
| #social-feed-app {
| |
| max-width: 680px;
| |
| margin: 0 auto;
| |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
| |
| background: #f0f2f5;
| |
| min-height: 100vh;
| |
| padding: 20px;
| |
| }
| |
| | |
| /* Composer Card */
| |
| .sf-composer {
| |
| background: white;
| |
| border-radius: 12px;
| |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1);
| |
| margin-bottom: 20px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .sf-composer-toolbar {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 16px;
| |
| padding: 12px 20px;
| |
| border-bottom: 1px solid #e4e6eb;
| |
| background: #fafbfc;
| |
| }
| |
| | |
| .sf-toolbar-btn {
| |
| background: none;
| |
| border: none;
| |
| font-size: 16px;
| |
| font-weight: 600;
| |
| color: #65676b;
| |
| cursor: pointer;
| |
| padding: 6px 10px;
| |
| border-radius: 6px;
| |
| transition: all 0.15s;
| |
| }
| |
| | |
| .sf-toolbar-btn:hover { background: #e4e6eb; color: #050505; }
| |
| .sf-toolbar-btn.active { color: #1877f2; background: #e7f3ff; }
| |
| | |
| .sf-toolbar-dropdown {
| |
| background: white;
| |
| border: 1px solid #dddfe2;
| |
| border-radius: 8px;
| |
| padding: 8px 16px;
| |
| font-size: 14px;
| |
| color: #65676b;
| |
| cursor: pointer;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 6px;
| |
| }
| |
| | |
| .sf-composer-main {
| |
| display: flex;
| |
| padding: 16px 20px;
| |
| gap: 12px;
| |
| }
| |
| | |
| .sf-avatar {
| |
| width: 48px;
| |
| height: 48px;
| |
| border-radius: 50%;
| |
| object-fit: cover;
| |
| flex-shrink: 0;
| |
| }
| |
| | |
| .sf-avatar-small {
| |
| width: 36px;
| |
| height: 36px;
| |
| }
| |
| | |
| .sf-composer-input {
| |
| flex: 1;
| |
| background: #f0f2f5;
| |
| border: none;
| |
| border-radius: 20px;
| |
| padding: 14px 20px;
| |
| font-size: 17px;
| |
| resize: none;
| |
| min-height: 80px;
| |
| outline: none;
| |
| color: #050505;
| |
| }
| |
| | |
| .sf-composer-input::placeholder { color: #65676b; }
| |
| .sf-composer-input:focus { background: #e4e6eb; }
| |
| | |
| .sf-composer-actions {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| padding: 12px 20px;
| |
| border-top: 1px solid #e4e6eb;
| |
| background: #fafbfc;
| |
| }
| |
| | |
| .sf-action-buttons {
| |
| display: flex;
| |
| gap: 4px;
| |
| }
| |
| | |
| .sf-action-btn {
| |
| width: 44px;
| |
| height: 44px;
| |
| border-radius: 10px;
| |
| border: none;
| |
| background: white;
| |
| cursor: pointer;
| |
| font-size: 20px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| transition: all 0.15s;
| |
| box-shadow: 0 1px 2px rgba(0,0,0,0.05);
| |
| }
| |
| | |
| .sf-action-btn:hover { background: #f0f2f5; transform: scale(1.05); }
| |
| .sf-action-btn.pink { color: #e91e63; }
| |
| .sf-action-btn.green { color: #43a047; }
| |
| .sf-action-btn.red { color: #e53935; }
| |
| .sf-action-btn.blue { color: #1877f2; }
| |
| .sf-action-btn.orange { color: #fb8c00; }
| |
| .sf-action-btn.gray { color: #65676b; }
| |
| | |
| .sf-share-dropdown {
| |
| background: white;
| |
| border: 1px solid #dddfe2;
| |
| border-radius: 8px;
| |
| padding: 10px 20px;
| |
| font-size: 15px;
| |
| font-weight: 500;
| |
| color: #65676b;
| |
| cursor: pointer;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| }
| |
| | |
| .sf-post-btn {
| |
| background: linear-gradient(135deg, #c62828 0%, #8e0000 100%);
| |
| color: white;
| |
| border: none;
| |
| border-radius: 8px;
| |
| padding: 12px 28px;
| |
| font-size: 15px;
| |
| font-weight: 600;
| |
| cursor: pointer;
| |
| transition: all 0.2s;
| |
| box-shadow: 0 2px 8px rgba(198,40,40,0.3);
| |
| }
| |
| | |
| .sf-post-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(198,40,40,0.4); }
| |
| | |
| /* Timeline Posts */
| |
| .sf-post {
| |
| background: white;
| |
| border-radius: 12px;
| |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1);
| |
| margin-bottom: 16px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .sf-post-header {
| |
| display: flex;
| |
| align-items: center;
| |
| padding: 16px;
| |
| gap: 12px;
| |
| }
| |
| | |
| .sf-post-user-info {
| |
| flex: 1;
| |
| }
| |
| | |
| .sf-post-username {
| |
| font-weight: 600;
| |
| color: #050505;
| |
| font-size: 15px;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 6px;
| |
| }
| |
| | |
| .sf-verified {
| |
| color: #1877f2;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .sf-post-meta {
| |
| font-size: 13px;
| |
| color: #65676b;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 4px;
| |
| }
| |
| | |
| .sf-post-menu {
| |
| background: none;
| |
| border: none;
| |
| font-size: 20px;
| |
| color: #65676b;
| |
| cursor: pointer;
| |
| padding: 8px;
| |
| border-radius: 50%;
| |
| }
| |
| | |
| .sf-post-menu:hover { background: #f0f2f5; }
| |
| | |
| .sf-post-content {
| |
| padding: 0 16px 16px;
| |
| font-size: 15px;
| |
| line-height: 1.5;
| |
| color: #050505;
| |
| }
| |
| | |
| .sf-post-image {
| |
| width: 100%;
| |
| max-height: 500px;
| |
| object-fit: cover;
| |
| }
| |
| | |
| .sf-post-stats {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| padding: 12px 16px;
| |
| font-size: 14px;
| |
| color: #65676b;
| |
| border-bottom: 1px solid #e4e6eb;
| |
| }
| |
| | |
| .sf-post-stats-left {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 6px;
| |
| }
| |
| | |
| .sf-reaction-icons {
| |
| display: flex;
| |
| }
| |
| | |
| .sf-reaction-icon {
| |
| width: 20px;
| |
| height: 20px;
| |
| border-radius: 50%;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 12px;
| |
| margin-left: -4px;
| |
| }
| |
| | |
| .sf-reaction-icon:first-child { margin-left: 0; }
| |
| .sf-reaction-icon.like { background: #1877f2; color: white; }
| |
| .sf-reaction-icon.love { background: #e91e63; color: white; }
| |
| .sf-reaction-icon.wow { background: #ffc107; }
| |
| | |
| .sf-post-actions {
| |
| display: flex;
| |
| padding: 4px 16px;
| |
| }
| |
| | |
| .sf-post-action {
| |
| flex: 1;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| padding: 12px;
| |
| background: none;
| |
| border: none;
| |
| font-size: 15px;
| |
| font-weight: 600;
| |
| color: #65676b;
| |
| cursor: pointer;
| |
| border-radius: 8px;
| |
| transition: all 0.15s;
| |
| }
| |
| | |
| .sf-post-action:hover { background: #f0f2f5; }
| |
| .sf-post-action.liked { color: #1877f2; }
| |
| .sf-post-action.liked .sf-action-icon { color: #1877f2; }
| |
| | |
| /* Comments */
| |
| .sf-comments {
| |
| padding: 8px 16px 16px;
| |
| background: #f0f2f5;
| |
| }
| |
| | |
| .sf-comment {
| |
| display: flex;
| |
| gap: 8px;
| |
| margin-bottom: 12px;
| |
| }
| |
| | |
| .sf-comment-bubble {
| |
| background: white;
| |
| border-radius: 18px;
| |
| padding: 10px 14px;
| |
| flex: 1;
| |
| }
| |
| | |
| .sf-comment-author {
| |
| font-weight: 600;
| |
| font-size: 13px;
| |
| color: #050505;
| |
| }
| |
| | |
| .sf-comment-text {
| |
| font-size: 14px;
| |
| color: #050505;
| |
| line-height: 1.4;
| |
| }
| |
| | |
| .sf-comment-actions {
| |
| display: flex;
| |
| gap: 12px;
| |
| padding: 4px 14px;
| |
| font-size: 12px;
| |
| font-weight: 600;
| |
| color: #65676b;
| |
| }
| |
| | |
| .sf-comment-actions span { cursor: pointer; }
| |
| .sf-comment-actions span:hover { text-decoration: underline; }
| |
| | |
| .sf-add-comment {
| |
| display: flex;
| |
| gap: 8px;
| |
| align-items: center;
| |
| margin-top: 8px;
| |
| }
| |
| | |
| .sf-comment-input {
| |
| flex: 1;
| |
| background: white;
| |
| border: none;
| |
| border-radius: 20px;
| |
| padding: 10px 16px;
| |
| font-size: 14px;
| |
| outline: none;
| |
| }
| |
| | |
| .sf-comment-input::placeholder { color: #65676b; }
| |
| | |
| /* Stories Section */
| |
| .sf-stories {
| |
| display: flex;
| |
| gap: 12px;
| |
| padding: 16px;
| |
| background: white;
| |
| border-radius: 12px;
| |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1);
| |
| margin-bottom: 20px;
| |
| overflow-x: auto;
| |
| }
| |
| | |
| .sf-story {
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| gap: 8px;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .sf-story-ring {
| |
| width: 68px;
| |
| height: 68px;
| |
| border-radius: 50%;
| |
| padding: 3px;
| |
| background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
| |
| }
| |
| | |
| .sf-story-ring.seen { background: #dddfe2; }
| |
| | |
| .sf-story-avatar {
| |
| width: 100%;
| |
| height: 100%;
| |
| border-radius: 50%;
| |
| border: 3px solid white;
| |
| object-fit: cover;
| |
| }
| |
| | |
| .sf-story-name {
| |
| font-size: 12px;
| |
| color: #050505;
| |
| max-width: 70px;
| |
| text-align: center;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .sf-create-story {
| |
| width: 68px;
| |
| height: 68px;
| |
| border-radius: 50%;
| |
| background: #e4e6eb;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 28px;
| |
| color: #65676b;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .sf-create-story:hover { background: #d8dadf; }
| |
| </style>
| |
| | |
| <!-- Stories -->
| |
| <div class="sf-stories">
| |
| <div class="sf-story">
| |
| <div class="sf-create-story">+</div>
| |
| <span class="sf-story-name">Create Story</span>
| |
| </div>
| |
| <div class="sf-story">
| |
| <div class="sf-story-ring">
| |
| <img class="sf-story-avatar" src="https://i.pravatar.cc/150?img=11" alt="">
| |
| </div>
| |
| <span class="sf-story-name">Sarah</span>
| |
| </div>
| |
| <div class="sf-story">
| |
| <div class="sf-story-ring">
| |
| <img class="sf-story-avatar" src="https://i.pravatar.cc/150?img=12" alt="">
| |
| </div>
| |
| <span class="sf-story-name">Alex</span>
| |
| </div>
| |
| <div class="sf-story">
| |
| <div class="sf-story-ring seen">
| |
| <img class="sf-story-avatar" src="https://i.pravatar.cc/150?img=33" alt="">
| |
| </div>
| |
| <span class="sf-story-name">Jordan</span>
| |
| </div>
| |
| <div class="sf-story">
| |
| <div class="sf-story-ring">
| |
| <img class="sf-story-avatar" src="https://i.pravatar.cc/150?img=44" alt="">
| |
| </div>
| |
| <span class="sf-story-name">Taylor</span>
| |
| </div>
| |
| </div> | | </div> |
|
| |
| <!-- Composer -->
| |
| <div class="sf-composer">
| |
| <div class="sf-composer-toolbar">
| |
| <button class="sf-toolbar-btn" onclick="formatText(\"bold\")"><b>B</b></button>
| |
| <button class="sf-toolbar-btn" onclick="formatText(\"italic\")"><i>I</i></button>
| |
| <button class="sf-toolbar-btn" onclick="formatText(\"underline\")"><u>U</u></button>
| |
| <div class="sf-toolbar-dropdown">Text Color ▾</div>
| |
| <div class="sf-toolbar-dropdown">Outline ▾</div>
| |
| </div>
| |
| <div class="sf-composer-main">
| |
| <img class="sf-avatar" src="https://docmoates.com/images/thumb/8/8b/Docmoates_Profile.jpeg/120px-Docmoates_Profile.jpeg" alt="Avatar">
| |
| <textarea class="sf-composer-input" placeholder="What's on your mind, Michael?"></textarea>
| |
| </div>
| |
| <div class="sf-composer-actions">
| |
| <div class="sf-action-buttons">
| |
| <button class="sf-action-btn pink" title="Themes">🎨</button>
| |
| <button class="sf-action-btn green" title="Photo">🖼️</button>
| |
| <button class="sf-action-btn red" title="Vivid">✓</button>
| |
| <button class="sf-action-btn blue" title="Tag People">👤</button>
| |
| <button class="sf-action-btn orange" title="Emoji">😊</button>
| |
| <button class="sf-action-btn red" title="Video">🎥</button>
| |
| <button class="sf-action-btn red" title="Location">📍</button>
| |
| <button class="sf-action-btn gray" title="Files">📁</button>
| |
| </div>
| |
| <div class="sf-share-dropdown">Share to... ▾</div>
| |
| <button class="sf-post-btn">Post</button>
| |
| </div>
| |
| </div> | | </div> |
|
| |
| <!-- Timeline Posts -->
| |
| <div class="sf-post">
| |
| <div class="sf-post-header">
| |
| <img class="sf-avatar" src="https://docmoates.com/images/thumb/8/8b/Docmoates_Profile.jpeg/120px-Docmoates_Profile.jpeg" alt="">
| |
| <div class="sf-post-user-info">
| |
| <div class="sf-post-username">Michael Moates <span class="sf-verified">✓</span></div>
| |
| <div class="sf-post-meta">2h · 🌐</div>
| |
| </div>
| |
| <button class="sf-post-menu">···</button>
| |
| </div>
| |
| <div class="sf-post-content">
| |
| Just finished setting up the new wiki infrastructure! 🚀 The newsletter system is now fully operational with Gmail integration, analytics tracking, and a beautiful new dashboard.
| |
| <br><br>
| |
| What features would you like to see next? Drop your ideas below! 👇
| |
| </div>
| |
| <img class="sf-post-image" src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800" alt="Post image">
| |
| <div class="sf-post-stats">
| |
| <div class="sf-post-stats-left">
| |
| <div class="sf-reaction-icons">
| |
| <span class="sf-reaction-icon like">👍</span>
| |
| <span class="sf-reaction-icon love">❤️</span>
| |
| <span class="sf-reaction-icon wow">😮</span>
| |
| </div>
| |
| <span>128</span>
| |
| </div>
| |
| <span>24 comments · 8 shares</span>
| |
| </div>
| |
| <div class="sf-post-actions">
| |
| <button class="sf-post-action" onclick="this.classList.toggle(\"liked\")">
| |
| <span class="sf-action-icon">👍</span> Like
| |
| </button>
| |
| <button class="sf-post-action">
| |
| <span class="sf-action-icon">💬</span> Comment
| |
| </button>
| |
| <button class="sf-post-action">
| |
| <span class="sf-action-icon">↗️</span> Share
| |
| </button>
| |
| </div>
| |
| <div class="sf-comments">
| |
| <div class="sf-comment">
| |
| <img class="sf-avatar sf-avatar-small" src="https://i.pravatar.cc/150?img=5" alt="">
| |
| <div>
| |
| <div class="sf-comment-bubble">
| |
| <div class="sf-comment-author">Sarah Johnson</div>
| |
| <div class="sf-comment-text">This looks amazing! Can we get dark mode support? 🌙</div>
| |
| </div>
| |
| <div class="sf-comment-actions">
| |
| <span>Like</span>
| |
| <span>Reply</span>
| |
| <span>1h</span>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="sf-add-comment">
| |
| <img class="sf-avatar sf-avatar-small" src="https://docmoates.com/images/thumb/8/8b/Docmoates_Profile.jpeg/120px-Docmoates_Profile.jpeg" alt="">
| |
| <input type="text" class="sf-comment-input" placeholder="Write a comment...">
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="sf-post">
| |
| <div class="sf-post-header">
| |
| <img class="sf-avatar" src="https://i.pravatar.cc/150?img=8" alt="">
| |
| <div class="sf-post-user-info">
| |
| <div class="sf-post-username">Alex Chen</div>
| |
| <div class="sf-post-meta">5h · 🌐</div>
| |
| </div>
| |
| <button class="sf-post-menu">···</button>
| |
| </div>
| |
| <div class="sf-post-content">
| |
| Just discovered this wiki platform and I am blown away by the features! The integration capabilities are incredible. Definitely recommending this to my team. 💯
| |
| <br><br>
| |
| #productivity #wiki #collaboration
| |
| </div>
| |
| <div class="sf-post-stats">
| |
| <div class="sf-post-stats-left">
| |
| <div class="sf-reaction-icons">
| |
| <span class="sf-reaction-icon like">👍</span>
| |
| <span class="sf-reaction-icon love">❤️</span>
| |
| </div>
| |
| <span>45</span>
| |
| </div>
| |
| <span>12 comments · 3 shares</span>
| |
| </div>
| |
| <div class="sf-post-actions">
| |
| <button class="sf-post-action liked">
| |
| <span class="sf-action-icon">👍</span> Like
| |
| </button>
| |
| <button class="sf-post-action">
| |
| <span class="sf-action-icon">💬</span> Comment
| |
| </button>
| |
| <button class="sf-post-action">
| |
| <span class="sf-action-icon">↗️</span> Share
| |
| </button>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="sf-post">
| |
| <div class="sf-post-header">
| |
| <img class="sf-avatar" src="https://i.pravatar.cc/150?img=20" alt="">
| |
| <div class="sf-post-user-info">
| |
| <div class="sf-post-username">Emily Rodriguez <span class="sf-verified">✓</span></div>
| |
| <div class="sf-post-meta">Yesterday at 4:32 PM · 🌐</div>
| |
| </div>
| |
| <button class="sf-post-menu">···</button>
| |
| </div>
| |
| <div class="sf-post-content">
| |
| 📚 New study guide just dropped! Check out the NCLEX prep materials I have been working on. Interactive quizzes, flashcards, and more!
| |
| </div>
| |
| <img class="sf-post-image" src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=800" alt="Study materials">
| |
| <div class="sf-post-stats">
| |
| <div class="sf-post-stats-left">
| |
| <div class="sf-reaction-icons">
| |
| <span class="sf-reaction-icon love">❤️</span>
| |
| <span class="sf-reaction-icon like">👍</span>
| |
| </div>
| |
| <span>256</span>
| |
| </div>
| |
| <span>48 comments · 32 shares</span>
| |
| </div>
| |
| <div class="sf-post-actions">
| |
| <button class="sf-post-action">
| |
| <span class="sf-action-icon">👍</span> Like
| |
| </button>
| |
| <button class="sf-post-action">
| |
| <span class="sf-action-icon">💬</span> Comment
| |
| </button>
| |
| <button class="sf-post-action">
| |
| <span class="sf-action-icon">↗️</span> Share
| |
| </button>
| |
| </div>
| |
| </div>
| |
|
| |
| </div>
| |
| </html>
| |