t2t-platform/view-projects.html at main · tracet2t/t2t-platform · GitHub

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
156
157
158
159
<!DOCTYPE html>
<html>
  <head>
    <title>Project List</title>
    <link rel="icon" type="image/x-icon" href="images/favicon.ico" />

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/navbar.css" />
    <link rel="stylesheet" href="css/view-projects.css" />
    <script src="js/globals.js"></script>
  </head>
  <body>
    <header class="header">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="navbar-logo">
          <a href="#">TRACE T2T</a>
        </div>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div
          class="collapse navbar-collapse justify-content-end"
          id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link active" href="#"
                >Home <span class="sr-only">(current)</span></a
              >
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
                Register
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="index.html"
                  >Register as a Student</a
                >
                <a class="dropdown-item" href="add-mentor.html"
                  >Register as a Mentor</a
                >
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="view-projects.html">Apply Now</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Add Project</a>
            </li>
            <li class="nav-item">
              <a class="nav-link custom-nav-link" href="#" class="active"
                >Contact Us</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link custom-nav-link" href="#" class="active"
                >About Us</a
              >
            </li>
          </ul>
        </div>
      </nav>
      <div class="header-image-container">
        <img
          src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
          alt="Tech Projects"
          class="header-image"
        />
        <div class="header-text-container">
          <h1 class="header-title">Explore Projects</h1>
        </div>
      </div>
    </header>

    <section class="description">
      <div class="description-container">
        <div class="description-text-container">
          <p class="description-text">
            <span class="italic-text">
              "The only way to do great work is to love what you do."
            </span>
            - Steve Jobs -
          </p>
          <p class="description-text">
            Welcome to our pool of projects! Explore a diverse range of
            opportunities spanning web development, data analysis, and more.
            Submit your expression of interest (EOI) to embark on an enriching
            journey of learning and discovery. Join us in solving problems!
          </p>
        </div>
      </div>
    </section>
    <!-- <div class="header-buttons-container">
      <a href="#">
        <button class="header-button">Add New Project</button>
      </a>
    </div> -->
    <section class="search-bar">
      <!-- Search bar -->
      <input type="text" id="search-bar" placeholder="Search projects..." />
    </section>
    <section class="projects">
      <!-- Project list -->
      <ul class="project-list">
        <!-- Project list items added by JS -->
        <span class="loading-dots">Please wait, loading projects</span>
      </ul>
    </section>
    <div class="pagination">
      <!-- Pagination controls will be dynamically added here -->
    </div>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
    <script src="js/projects-fetch.js"></script>
    <script src="js/search.js"></script>
  </body>
</html>