HTMLify
profile.html
Views: 29 | 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 | <!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>Profile - @Priya_Sharma</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 (Simplified for profile view) --> <nav class="top-nav"> <div class="container nav-content"> <div class="logo-nav">CampusConnect</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> <button class="nav-icon-btn" title="Settings"><span class="material-icons">settings</span></button> <button id="theme-toggle-profile" class="theme-toggle-btn-small ml-2"> <span class="material-icons">brightness_4</span> </button> </div> </div> </nav> <!-- Main Content Area --> <main class="profile-main container"> <!-- Profile Header --> <section class="profile-header"> <div class="profile-info-top"> <div class="avatar-large" style="background-image: url('https://via.placeholder.com/150/4a90e2/ffffff?text=U');"></div> <div class="profile-details"> <div class="name-handle"> <h1 class="display-name">Priya Sharma</h1> <span class="username">@Priya_Sharma</span> </div> <div class="profile-actions"> <button class="btn btn-primary">Follow</button> <button class="btn btn-secondary"><span class="material-icons">person_add_alt</span></button> <button class="btn btn-ghost"><span class="material-icons">more_horiz</span></button> </div> </div> </div> <p class="bio">Final Year Computer Science student at IIT Bombay. Passionate about ML and building scalable solutions. Currently seeking full-time roles in Bangalore.</p> <div class="stats"> <div class="stat-item"><span class="stat-value">1,204</span><span class="stat-label">Followers</span></div> <div class="stat-item"><span class="stat-value">312</span><span class="stat-label">Following</span></div> <div class="stat-item points-stat"><span class="stat-value">9,450</span><span class="stat-label">Points</span></div> </div> </section> <!-- Content Tabs --> <section class="profile-tabs"> <div class="tab-navigation"> <button class="tab-link active" data-tab="posts">Posts</button> <button class="tab-link" data-tab="media">Media</button> <button class="tab-link" data-tab="activity">Activity</button> <button class="tab-link" data-tab="notes">Notes</button> <button class="tab-link" data-tab="rewards">Rewards</button> </div> <div id="posts" class="tab-content active"> <!-- Mock Post Card for Profile --> <article class="post-card profile-post-card"> <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"> <a href="#" class="username">@Priya_Sharma</a> <span class="timestamp">Posted: Oct 20, 2024</span> </div> <button class="more-options"><span class="material-icons">more_vert</span></button> </div> <div class="post-content"> <p>Just submitted my thesis proposal! Fingers crossed for smooth sailing from here on out. Wish me luck!</p> </div> <div class="post-actions"> <button class="action-btn"><span class="material-icons">favorite_border</span> <span>88</span></button> <button class="action-btn"><span class="material-icons">comment</span> <span>15</span></button> <span class="points-earned">+10 Points</span> </div> </article> </div> <div id="media" class="tab-content"> <div class="media-grid"> <div class="media-item" style="background-image: url('https://via.placeholder.com/300/4a90e2/ffffff?text=Media+1');"></div> <div class="media-item" style="background-image: url('https://via.placeholder.com/300/50e3c2/ffffff?text=Media+2');"></div> <div class="media-item" style="background-image: url('https://via.placeholder.com/300/f5a623/ffffff?text=Media+3');"></div> <div class="media-item" style="background-image: url('https://via.placeholder.com/300/9b59b6/ffffff?text=Media+4');"></div> <div class="media-item" style="background-image: url('https://via.placeholder.com/300/e91e63/ffffff?text=Media+5');"></div> </div> </div> <div id="activity" class="tab-content"> <ul class="activity-list"> <li><span class="material-icons">trending_up</span> Gained 50 points from a highly liked post.</li> <li><span class="material-icons">person_add</span> Started following <a href="#">@AlumniMentor</a>.</li> <li><span class="material-icons">event_note</span> RSVP'd to 'Campus Tech Summit 2025'.</li> <li><span class="material-icons">star</span> Earned 'First Contributor' Badge.</li> </ul> </div> <div id="notes" class="tab-content"> <p class="placeholder-text">No shared notes found yet. Start contributing academic resources!</p> </div> <div id="rewards" class="tab-content"> <h3>Your Achievements</h3> <div class="bento-grid" style="grid-template-columns: repeat(4, 1fr);"> <div class="bento-item" style="text-align: center;"><span class="material-icons" style="color: var(--color-points); font-size: 40px;">stars</span><p>Top Poster (Lvl 2)</p></div> <div class="bento-item" style="text-align: center;"><span class="material-icons" style="color: var(--color-success); font-size: 40px;">check_circle</span><p>Verified Contributor</p></div> <div class="bento-item" style="text-align: center;"><span class="material-icons" style="color: var(--color-accent); font-size: 40px;">event_available</span><p>Event Attendee</p></div> <div class="bento-item" style="text-align: center;"><span class="material-icons" style="color: var(--color-text-secondary); font-size: 40px;">lock_open</span><p>New User Welcome</p></div> </div> <p style="margin-top: 20px;">Current Points: <span style="color: var(--color-points); font-weight: 700;">9,450</span></p> </div> </section> </main> <!-- Fixed Bottom Navigation --> <nav class="bottom-nav"> <a href="feed.html" class="nav-item" 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 active" 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> |