HTMLify
feed.html
Views: 33 | Author: karbonsites
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | <!DOCTYPE html> <html lang="en" data-theme="light"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Feed - CampusConnect</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div class="app-shell"> <!-- Fixed Top Navigation --> <nav class="top-nav"> <div class="container nav-content"> <div class="logo-nav">CampusConnect</div> <div class="search-bar-wrapper"> <span class="material-icons search-icon">search</span> <input type="text" placeholder="Search users, posts, or events..." class="search-input"> </div> <div class="nav-icons"> <button class="nav-icon-btn" title="Notifications"><span class="material-icons">notifications_none</span><span class="badge">3</span></button> <button class="nav-icon-btn" title="Messages"><span class="material-icons">send</span></button> <a href="profile.html" class="profile-shortcut" title="My Profile"> <div class="avatar-small" id="nav-avatar"></div> </a> <button id="theme-toggle-feed" class="theme-toggle-btn-small ml-2"> <span class="material-icons">brightness_4</span> </button> </div> </div> </nav> <!-- Main Content Area --> <main class="feed-container container"> <!-- Floating Create Post Area (Desktop/Tablet placement, will collapse for mobile feed structure) --> <section id="create-post-area" class="post-card fade-in-up" style="margin-bottom: 25px; border-color: var(--color-accent); background-color: var(--color-surface);"> <div class="post-header"> <div class="avatar-medium" style="background-image: url('https://via.placeholder.com/150/4a90e2/ffffff?text=U');"></div> <div class="user-info" style="flex-grow: 1;"> <input type="text" placeholder="What’s happening on campus?" style="width: 100%; border:none; background:transparent; color: var(--color-text-primary); font-size: 1rem; font-weight: 500; padding: 0; margin: 0;"> </div> <button class="btn btn-primary btn-small" style="margin-left: 15px;">Post</button> </div> <div class="post-actions" style="border-top: none; justify-content: flex-start;"> <button class="action-btn" title="Add Image"><span class="material-icons" style="color: var(--color-text-secondary);">image</span></button> <button class="action-btn" title="Tag Event"><span class="material-icons" style="color: var(--color-text-secondary);">event</span></button> <button class="action-btn" title="Poll"><span class="material-icons" style="color: var(--color-text-secondary);">poll</span></button> </div> </section> <section id="feed-posts" class="post-feed"> <!-- Feed Post Card 1 (Placeholder) --> <article class="post-card"> <div class="post-header"> <div class="avatar-medium" style="background-image: url('https://via.placeholder.com/150/4a90e2/ffffff?text=U1');"></div> <div class="user-info"> <a href="profile.html" class="username">@Priya_Sharma</a> <span class="timestamp">5 minutes ago · IIT Bombay</span> </div> <button class="more-options"><span class="material-icons">more_vert</span></button> </div> <div class="post-content"> <p>Excited to announce my internship at Google this summer! Hard work pays off. #Internship #CS</p> <!-- Optional Image --> <div class="post-image-wrapper"> <img src="https://via.placeholder.com/600x400/50e3c2/ffffff?text=Internship+Offer" alt="Post Image" class="post-image"> </div> </div> <div class="post-actions"> <button class="action-btn liked"><span class="material-icons">favorite</span> <span>158</span></button> <button class="action-btn"><span class="material-icons">comment</span> <span>23</span></button> <button class="action-btn"><span class="material-icons">share</span> <span>12</span></button> <span class="points-earned">+5 Points</span> </div> </article> <!-- Feed Post Card 2 (Placeholder) --> <article class="post-card delay-1"> <div class="post-header"> <div class="avatar-medium" style="background-image: url('https://via.placeholder.com/150/f5a623/ffffff?text=U2');"></div> <div class="user-info"> <a href="profile.html" class="username">@TechGeek_99</a> <span class="timestamp">2 hours ago · NIT Trichy</span> </div> <button class="more-options"><span class="material-icons">more_vert</span></button> </div> <div class="post-content"> <p>Does anyone have the PDF notes for Advanced Algorithms (CS 401)? The shared drive link seems broken. Any help appreciated!</p> </div> <div class="post-actions"> <button class="action-btn"><span class="material-icons">favorite_border</span> <span>35</span></button> <button class="action-btn"><span class="material-icons">comment</span> <span>9</span></button> <button class="action-btn"><span class="material-icons">bookmark_border</span></button> <span class="points-earned">+2 Points</span> </div> </article> <!-- Feed Post Card 3 (Placeholder for Admin/Mod Example) --> <article class="post-card delay-2"> <div class="post-header"> <div class="avatar-medium" style="background-image: url('https://via.placeholder.com/150/e74c3c/ffffff?text=ADM');"></div> <div class="user-info"> <a href="profile.html" class="username">@CampusAdmin</a> <span class="timestamp">1 day ago · Global</span> </div> <button class="more-options"><span class="material-icons">more_vert</span></button> </div> <div class="post-content"> <p>ATTENTION: Due to scheduled server maintenance, the platform will be offline tonight from 2:00 AM to 3:00 AM IST. Please save your work beforehand.</p> </div> <div class="post-actions"> <button class="action-btn"><span class="material-icons">favorite_border</span> <span>801</span></button> <button class="action-btn"><span class="material-icons">comment</span> <span>104</span></button> <button class="action-btn"><span class="material-icons">flag</span></button> <span class="points-earned">+1 Point</span> </div> </article> </section> </main> <!-- Fixed Bottom Navigation (Mobile Optimized) --> <nav class="bottom-nav"> <a href="feed.html" class="nav-item active" title="Home"> <span class="material-icons">home</span> <span class="nav-text">Home</span> </a> <a href="search.html" class="nav-item" title="Search"> <span class="material-icons">search</span> <span class="nav-text">Search</span> </a> <button class="nav-item create-btn" title="Create Post"> <span class="material-icons">add_box</span> <span class="nav-text">Post</span> </button> <a href="events.html" class="nav-item" title="Events"> <span class="material-icons">event</span> <span class="nav-text">Events</span> </a> <a href="profile.html" class="nav-item" title="Profile"> <span class="material-icons">person</span> <span class="nav-text">Profile</span> </a> </nav> </div> <script src="script.js"></script> <a href="https://karbonsites.space/home" target="_blank" id="karbon-promo-banner"> <span>✨</span> <div>Built with <b>Karbon Sites</b></div> </a> </body> </html> |