Dashboard Temp Share Shortlinks Frames API

HTMLify

search.html
Views: 41 | 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
<!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>Search - 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 active-search">
                    <span class="material-icons search-icon">search</span>
                    <input type="text" placeholder="Search users, posts, or events..." id="search-input-main" class="search-input" autofocus>
                </div>
                <div class="nav-icons">
                    <button id="theme-toggle-search" class="theme-toggle-btn-small mr-2">
                        <span class="material-icons">brightness_4</span>
                    </button>
                    <a href="feed.html" class="btn btn-ghost"><span class="material-icons">arrow_back</span></a>
                </div>
            </div>
        </nav>

        <!-- Main Content Area -->
        <main class="feed-container container">
            <h2 class="page-title fade-in-up">Discover People & Content</h2>
            
            <section id="search-results" class="search-results-section fade-in-up delay-1">
                <div class="result-group">
                    <h4>Top User Results</h4>
                    <div class="user-result-list">
                        <!-- User Result 1 -->
                        <div class="user-card">
                            <div class="avatar-medium" style="background-image: url('https://via.placeholder.com/150/4a90e2/ffffff?text=U1');"></div>
                            <div class="user-info-result">
                                <a href="profile.html" class="username">@Priya_Sharma</a>
                                <p class="handle-info">IIT Bombay • 1.2k Followers</p>
                            </div>
                            <button class="btn btn-primary btn-small">Follow</button>
                        </div>
                        <!-- User Result 2 -->
                        <div class="user-card">
                            <div class="avatar-medium" style="background-image: url('https://via.placeholder.com/150/f5a623/ffffff?text=U2');"></div>
                            <div class="user-info-result">
                                <a href="profile.html" class="username">@Mod_Admin</a>
                                <p class="handle-info">Moderator • Verified</p>
                            </div>
                            <button class="btn btn-secondary btn-small">Follow</button>
                        </div>
                    </div>
                </div>

                <div class="result-group">
                    <h4>Top Post Results (Recent)</h4>
                    <!-- Mock Post Result 1 -->
                    <article class="post-card search-post-card">
                        <div class="post-header">
                            <div class="avatar-medium" style="background-image: url('https://via.placeholder.com/150/50e3c2/ffffff?text=U3');"></div>
                            <div class="user-info">
                                <a href="#" class="username">@NoteSharer</a>
                                <span class="timestamp">3 days ago · IIIT Delhi</span>
                            </div>
                            <button class="more-options"><span class="material-icons">more_vert</span></button>
                        </div>
                        <div class="post-content">
                            <p>Found this amazing cheat sheet for Data Structures! Highly recommend checking it out before the midterms. Link in comments.</p>
                        </div>
                        <div class="post-actions">
                            <button class="action-btn"><span class="material-icons">favorite_border</span> <span>55</span></button>
                            <button class="action-btn"><span class="material-icons">comment</span> <span>18</span></button>
                        </div>
                    </article>
                </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 active" 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>

Share this file: