Lock-Tin/features.html at main · Axion2900/Lock-Tin · 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
<!--
Product Features Page
By: Xavier Malara, Daniel Shan, Waaberi Ibrahim
Created: 2025-09-30
Last Updated: 2025-11-01
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Features - Lock-Tin</title>

    <!-- CSS -->
    <link rel="stylesheet" href="./styles/index.css">
    <link rel="stylesheet" href="./styles/Navigation.css">
    <link rel="stylesheet" href="./styles/Home.css">
  </head>
  <body>
    <navigation-bar current-page="features"></navigation-bar>

    <div class="page-container">
      <section class="full-features-section">
        <div class="container">
          <div class="full-features-header">
            <h1 class="full-features-title" data-i18n="features.page.title">All Features</h1>
            <p class="full-features-subtitle" data-i18n="features.page.subtitle">Discover everything Lock-Tin has to offer to enhance your campus life</p>
          </div>

          <div class="card-features-grid">
            <feature-card
              icon="📅"
              title="Event Calendar"
              description="Never miss important campus events again with our comprehensive event calendar system. Access real-time information about school events, club activities, and social gatherings all in one place."
              card-class="feature-card-1"
              features="View all school and club events in one calendar|Filter events by category, date, or location|Set personalized reminders|Sync with your device calendar|RSVP and track attendance|Share events with friends">
            </feature-card>

            <feature-card
              icon="🍽️"
              title="Dining Hall Menu"
              description="Check what's available at the dining hall before you go. Our real-time menu system helps you decide whether to visit the cafeteria based on what's actually being served."
              card-class="feature-card-2"
              features="Real-time menu updates with photos|Dietary restriction filters (vegan, gluten-free, etc.)|Student ratings & reviews|Nutritional information|Save favorite meals|Get notified when favorites are served">
            </feature-card>

            <feature-card
              icon="🚗"
              title="Campus Traffic"
              description="Navigate campus efficiently with real-time traffic updates. Avoid delays and plan your routes based on current campus conditions and construction updates."
              card-class="feature-card-3"
              features="Live traffic conditions|Construction alerts & detours|Parking availability updates|Smart route optimization|Walking time estimates|Bus schedule integration">
            </feature-card>

            <feature-card
              icon="👥"
              title="Community Contributions"
              description="Contribute to the community by uploading valuable campus information. Help fellow students by sharing event details, menu items, traffic updates, and other useful campus data."
              card-class="feature-card-4"
              features="Share dining hall menu items and photos|Upload event information with time slots|Report campus traffic conditions|Earn points for helpful contributions|Level up your contributor status|Redeem rewards">
            </feature-card>

            <feature-card
              icon="🔔"
              title="Smart Notifications"
              description="Stay informed with intelligent notifications that learn your preferences and schedule. Get alerts about events, menu updates, and traffic conditions that matter to you."
              card-class="feature-card-5"
              features="Personalized event reminders|Favorite meal alerts|Traffic delay warnings|Custom notification schedules|Do not disturb modes|Smart notification filtering">
            </feature-card>

            <feature-card
              icon="🎓"
              title="Study Groups & Meetups"
              description="Find study partners and organize meetups for your courses. Connect with classmates, form study groups, and coordinate meeting times and locations."
              card-class="feature-card-6"
              features="Find study partners by course|Create and join study groups|Schedule group meetings|Share study materials|Rate study locations|Integrated chat functionality">
            </feature-card>

            <feature-card
              icon="🏋️"
              title="Campus Facilities"
              description="Check availability and wait times for campus facilities like gyms, libraries, and computer labs. Plan your visits during off-peak hours for the best experience."
              card-class="feature-card-7"
              features="Real-time gym occupancy|Library seat availability|Computer lab status|Equipment availability|Reserve facilities in advance|Facility hour updates">
            </feature-card>

            <feature-card
              icon="🎯"
              title="Personalized Dashboard"
              description="Your customizable home base for all campus information. See what matters most to you at a glance with widgets and shortcuts to your favorite features."
              card-class="feature-card-8"
              features="Customizable widget layout|Quick access shortcuts|Today's schedule overview|Upcoming events feed|Recent notifications|Favorite locations">
            </feature-card>
          </div>

          <div class="features-cta">
            <h2>Ready to transform your campus experience?</h2>
            <p>Join thousands of students already using Lock-Tin</p>
            <a href="./index.html" class="cta-card-primary">Back to Home</a>
          </div>
        </div>
      </section>
    </div>

    <!-- Quote Rotator -->
    <quote-rotator></quote-rotator>

    <!-- Translation Handler (load first) -->
    <script type="module" src="./scripts/i18n/domTranslator.js"></script>

    <!-- Web Components -->
    <script type="module" src="./components/NavigationBar.js"></script>
    <script type="module" src="./components/FeatureCard.js"></script>
    <script type="module" src="./components/QuoteRotator.js"></script>

    <!-- Typewriter Effect -->
    <script type="module" src="./scripts/Typewriter.js"></script>
  </body>
</html>