ProTrack/index.html at main · Anuj-er/ProTrack · 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/x-icon" href="contents/images/favicon.png" />
  <title>ProTrack | Learning Management System</title>

  <!------ Font Awesome ------>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

  <!-- fontawesome.com icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!------ Google Fonts ------>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />

  <!-- Poppins font by google fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" />

  <!------ Stylesheet ------>
  <link rel="stylesheet" href="contents/css/style.css" />

  <!------ Queries ------>
  <link rel="stylesheet" href="contents/css/queries.css" />
</head>

<!------ Header ------>
<header>
  <nav>
    <div class="header">
      <img src="contents/images/logo.png" id="logo" alt="logo" />
      <h2 id="site-name" class="fs-2 m-0">ProTrack</h2>
    </div>
    <i class="fas fa-bars" id="ham-menu"></i>

    <ul id="nav-bar">
      <li id="user-nav-item">
        <button class="register-btn">Register</button>
      </li>
    </ul>
  </nav>
</header>

<!------ Body ------>

<body>

  <!-- Preloader -->
  <div id="preloader" class="preloader" ></div>

  <!------ Scroll To Top Button ------>
  <button id="scroll-top">
    <i class="fas fa-arrow-up"></i>
  </button>

  <!-- Darkmode Lightmode -->
  <button id="darkmode-toggle">
    <i class="fas fa-moon"></i>
  </button>


  <!------ Section: Hero ------>
  <section class="hero" id="home">
    <img src="contents/images/header-shape.svg" id="header-shape" />
    <div class="hero-content">
      <h1>Empower Your Academic Journey</h1>
      <p>
        Introducing our innovative Learning Management System (LMS), designed
        to help students at all levels manage their academic activities
        effectively. Track your classes, self-study hours, and extracurricular
        activities with ease. Enjoy interactive calendars, real-time
        analytics, and personalized goal-setting features to enhance your
        academic performance and cultivate disciplined study habits.
      </p>
      <div class="btn-container">
        <button class="primary-btn btn">Login</button>
        <button class="secondary-btn btn" id="explore-more-btn">
          Explore More
        </button>
      </div>
    </div>
    <div class="hero-img">
      <img src="contents/images/hero-image.svg" />
    </div>
  </section>

  <!------ Section: Features ------>
  <section class="features" id="features">
    <h2>Why Choose Our LMS</h2>
    <p class="section-desc">
      Our Learning Management System (LMS) is designed to provide a
      comprehensive academic tracking solution, offering unique features to
      enhance your learning journey. With real-time analytics, goal-setting
      tools, and customizable options, our LMS is tailored to help you achieve
      academic success and improve time management.
    </p>
    <div class="row">
      <div class="column">
        <i class="fas fa-calendar-alt"></i>
        <h3>Comprehensive Tracking</h3>
        <p>
          Track all aspects of your academic life, including classes,
          self-study hours, and extracurricular activities. Our LMS provides
          detailed insights into your engagement with specific subjects and
          activities.
        </p>
      </div>
      <div class="column">
        <i class="fas fa-chart-line"></i>
        <h3>Interactive Analytics</h3>
        <p>
          Gain valuable insights into your learning progress with real-time
          activity percentages, subject breakdowns, and monthly/yearly
          visualizations through an interactive calendar.
        </p>
      </div>
      <div class="column">
        <i class="fas fa-cogs"></i>
        <h3>Customizable Experience</h3>
        <p>
          Customize your LMS experience with theme options, including a dark
          mode toggle, and data export functionalities. Set academic goals and
          track your progress with tools designed to motivate and enhance your
          productivity.
        </p>
      </div>
    </div>
  </section>

  <!------ Section: Testimonial ------>
  <section class="testimonial" id="testimonial">
    <h2>What Our Students Say</h2>
    <p class="section-desc">
      Hear from students who have transformed their academic journeys with our
      LMS. Discover how our platform has helped them achieve their goals and
      improve their study habits.
    </p>
    <div class="row">
      <div class="column">
        <div class="testimonial-image">
          <img src="contents/images/student-1.jpg" alt="Student 1" />
        </div>
        <p>
          "Using this LMS has been a game-changer for my studies. The activity
          tracking and real-time analytics have helped me stay organized and
          focus on areas that need improvement. I've seen a significant boost
          in my academic performance."
        </p>
        <h3>Emily Johnson</h3>
      </div>
      <div class="column">
        <div class="testimonial-image">
          <img src="contents/images/student-2.jpg" alt="Student 2" />
        </div>
        <p>
          "This LMS has made managing my academic schedule so much easier. The
          interactive calendar and goal-setting features keep me motivated and
          on track. It's the perfect tool for any student looking to enhance
          their productivity and time management skills."
        </p>
        <h3>Daniel Martinez</h3>
      </div>
    </div>
  </section>

  <!------ Section: Courses ------>
  <section class="courses" id="courses">
    <h2>Track Your Academic Progress</h2>
    <p class="section-desc">
      Our LMS offers a range of features to help you monitor and enhance your
      academic journey. Explore key tools designed to support your learning,
      track your activities, and achieve your goals.
    </p>
    <div class="row">
      <div class="column">
        <img src="contents/images/tracking.jpg" alt="Activity Tracking" />
        <h3>Activity Tracking</h3>
        <p>
          Record and manage your class attendance, self-study hours, and
          extracurricular activities. Our LMS provides a comprehensive view of
          your academic and personal engagement.
        </p>
        <div class="courses-btn">
          <button class="btn secondary-btn">Explore Features</button>
        </div>
      </div>
      <div class="column">
        <img src="contents/images/calender.jpg" alt="Interactive Calendar" />
        <h3>Interactive Calendar</h3>
        <p>
          Visualize your activities and schedule with an interactive calendar.
          Easily manage and plan your academic commitments and track your
          progress throughout the year.
        </p>
        <div class="courses-btn">
          <button class="btn secondary-btn">Learn More</button>
        </div>
      </div>
      <div class="column">
        <img src="contents/images/analytics.jpg" alt="Activity Analytics" />
        <h3>Activity Analytics</h3>
        <p>
          Gain insights into your study habits with real-time analytics.
          Monitor subject-wise performance and overall activity percentages to
          identify areas for improvement and track your goals.
        </p>
        <div class="courses-btn">
          <button class="btn secondary-btn">See Analytics</button>
        </div>
      </div>
    </div>
  </section>

  <!------ Section: Download App ------>
  <section class="download-app" id="download-app">
    <h2>Download Our App</h2>
    <p class="section-desc">
      Unlock all new amazing features with our mobile app. Manage your
      academic journey on the go, track activities, set goals, and enhance
      your productivity.
    </p>
    <div class="row">
      <div class="column">
        <img src="contents/images/download-app.png" alt="Download Our App" />
      </div>
      <div class="column">
        <div class="app-feature">
          <div>
            <i class="fas fa-bell"></i>
            <h3>Set Reminders</h3>
          </div>
          <p>
            Never miss a class or study session again. Set personalized
            reminders for all your academic activities and stay on top of your
            schedule.
          </p>
        </div>
        <div class="app-feature">
          <div>
            <i class="fas fa-download"></i>
            <h3>Access Anywhere</h3>
          </div>
          <p>
            Download your academic resources and access them offline. Stay
            productive and learn on the go, whether you're online or offline.
          </p>
        </div>
        <div class="app-feature">
          <div>
            <i class="fas fa-chart-pie"></i>
            <h3>Real-Time Analytics</h3>
          </div>
          <p>
            Track your progress with real-time analytics. Get insights into
            your study habits, monitor your goals, and make data-driven
            decisions to optimize your learning.
          </p>
        </div>
        <div class="download-btns">
          <a href="#google-play">
            <img src="contents/images/google-play.png" alt="Download on Google Play" />
          </a>
          <a href="#app-store">
            <img src="contents/images/app-store.png" alt="Download on the App Store" />
          </a>
        </div>
      </div>
    </div>
  </section>

  <!------ Script ------>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script src="contents/js/script.js"></script>

  <!-- Script For opening Dashboard -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const darkModeToggle = document.getElementById('darkmode-toggle');
      const body = document.body;

      // Check for saved user preference in localStorage
      if (localStorage.getItem('dark-mode') === 'enabled') {
        body.classList.add('dark-mode');
      }

      // Toggle dark mode on button click
      darkModeToggle.addEventListener('click', () => {
        body.classList.toggle('dark-mode');

        // Save user preference in localStorage
        if (body.classList.contains('dark-mode')) {
          localStorage.setItem('dark-mode', 'enabled');
        } else {
          localStorage.setItem('dark-mode', 'disabled');
        }
      });
    });
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Check if a user is signed in
      const signedInUser = localStorage.getItem('signedInUser');
      const userNavItem = document.getElementById('user-nav-item');
      const btnContainer = document.querySelector('.btn-container');

      if (signedInUser) {
        // Replace the "Register" button with the username and logout button
        if (userNavItem) {
          userNavItem.innerHTML = `
                      <span>Welcome, ${signedInUser}!</span>
                      <button class="logout-btn" onclick="logout()">Logout</button>
                  `;
        }

        // Replace the buttons with "Open Dashboard"
        if (btnContainer) {
          btnContainer.innerHTML = `<button class="primary-btn btn" onclick="openDashboard()">Open Dashboard</button>`;
        }
      }
    });

    function openDashboard() {
      // Redirect to the dashboard page
      window.location.href = 'dashboard.html';
    }

    function logout() {
      // Remove the signed-in user from localStorage
      localStorage.removeItem('signedInUser');

      // Redirect to the sign-in page
      window.location.href = 'login.html';
    }
  </script>
</body>

<!------ Footer ------>
<footer class="footer__container">
  <div class="footer_section1">
    <div>
      <h2 id="site-name" class="footer-text">ProTrack</h2>
    </div>

    <div class="section1__button_container">
      <button>
        <img src="contents/images/IndianFlag.jpg" alt="Indian Flag"
          style="width: 16px; height: 14px; padding-top: 2px;" />
        <select style="border: none; background: #e8e8e8; cursor: pointer">
          <option>India</option>
          <option>United States</option>
          <option>Australia</option>
          <option>New Zealand</option>
          <option>Spain</option>
          <option>England</option>
        </select>
      </button>
      <button>
        <i class="fa fa-globe"></i>
        <select style="border: none; background: #e8e8e8; cursor: pointer">
          <option>English</option>
          <option>Español</option>
          <option>Français</option>
          <option>Deutsch</option>
          <option>Italiano</option>
          <option>日本語</option>
        </select>
      </button>
    </div>
  </div>
  <div class="navigation_container">
    <div class="link_container">
      <h5>About ProTrack</h5>
      <div class="link_container_anchors">
        <a href="#">Who We Are</a>
        <a href="#">Blog</a>
        <a href="#">Careers</a>
        <a href="#">Press</a>
        <a href="#">Contact Us</a>
      </div>
    </div>

    <div class="link_container">
      <h5>Features</h5>
      <div class="link_container_anchors">
        <a href="#">Activity Tracking</a>
        <a href="#">Calendar Integration</a>
        <a href="#">Analytics</a>
        <a href="#">Customization</a>
        <a href="#">Goal Setting</a>
      </div>
    </div>

    <div class="link_container">
      <h5>Student Portal</h5>
      <div class="link_container_anchors">
        <a href="#">Dashboard Overview</a>
        <a href="#">Track Your Progress</a>
        <a href="#">Join Study Groups</a>
        <a href="#">Access Learning Materials</a>
      </div>
    </div>

    <div class="link_container">
      <h5>Learn More</h5>
      <div class="link_container_anchors">
        <a href="#">Privacy Policy</a>
        <a href="#">Security</a>
        <a href="#">Terms of Service</a>
        <a href="#">Sitemap</a>
      </div>
    </div>

    <div class="link_container">
      <h5>Follow Us</h5>
      <div class="social_media_icon_buttons">
        <button><i class="fa-brands fa-linkedin-in"></i></button>
        <button><i class="fa-brands fa-instagram"></i></button>
        <button><i class="fa-brands fa-twitter"></i></button>
        <button><i class="fa-brands fa-facebook"></i></button>
        <button><i class="fa-brands fa-youtube"></i></button>
        <div class="social_media_logos">
          <img src="contents/images/app-store.png" alt="Apple Store" />
          <img src="contents/images/google-play.png" alt="Play Store" id="img2" />
        </div>
      </div>
    </div>
  </div>
  <div class="disclaimer">
    By using ProTrack, you agree to our Terms of Service, Cookie Policy,
    Privacy Policy, and Content Policies. All trademarks are the property of
    their respective owners. © 2024 ProTrack™. All rights reserved.
  </div>
</footer>


</html>