MockWebiste/calendar.html at master · RedInfinityPro/MockWebiste · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Lander University Food Program Calendar</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="./public/assets/css/index-style.css" rel="stylesheet">
    <link href="./public/assets/css/main.css" rel="stylesheet">
    <link href="./public/assets/css/calendar-style.css" rel="stylesheet">
</head>

<body>
    <header class="header" id="header">
        <a href="./index.html" class="logo-container">
            <div class="logo">
                <img src="./public/assets/img/logos/LanderLogo.png" width="50" height="50">
                <defs>
                    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#e4dd00e2;stop-opacity:1" />
                    </linearGradient>
                </defs>
                <rect x="10" y="25" width="15" height="50" fill="url(#grad1)" transform="rotate(-15 17.5 50)" />
                <rect x="35" y="15" width="15" height="70" fill="url(#grad1)" />
                <rect x="60" y="25" width="15" height="50" fill="url(#grad1)" transform="rotate(15 67.5 50)" />
                <circle cx="50" cy="50" r="45" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.5" />
                </svg>
            </div>
            <div class="logo-text">Lander University Food Program Calendar</div>
        </a>

         <nav class="main-menu" id="mainMenu">
            <a href="./index.html" class="menu-item">Home</a>
            <a href="./calendar.html" class="menu-item active">Calendar</a>
            <a href="./tools.html" class="menu-item">Tools</a>
            <a href="./staff.html" class="menu-item">Staff</a>
            <a href="https://github.com/RedInfinityPro/MockWebiste" target="_blank" rel="noopener noreferrer"
                class="menu-item external">GitHub</a>
        </nav>

        <div class="menu-toggle" id="menuToggle">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </header>

    <section class="page-section">
        <div class="info">
            <h2>Calendar Events</h2>
            <p>Search, find and create events for Lander University.</p>
            <hr width="100%" size="2" style="margin-top: 10px; margin-bottom: 10px; color: transparent;">
        </div>
    </section>

    <section class="calendar-section">
        <div class="calendar-list">
            <div class="search-container">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="Search..." id="calendarSearch">
                <div class="dropdown" style="margin-left: 10px;">
                    <button><i class="fas fa-filter"></i> Filter</button>
                    <div class="content" id="calendarFilter">
                        <a href="#" data-sort="az"><i class="fas fa-sort-alpha-down"></i> A-Z</a>
                        <a href="#" data-sort="za"><i class="fas fa-sort-alpha-up"></i> Z-A</a>
                        <a href="#" data-sort="new"><i class="fas fa-clock"></i> New-Old</a>
                        <a href="#" data-sort="old"><i class="fas fa-history"></i> Old-New</a>
                    </div>
                </div>
                <!-- calendar items -->
            </div>
    </section>

    <div id="createEvent" class="popup-form">
        <div class="form-container">
            <span class="close-btn" onclick="closeForm('createEvent')">&times;</span>
            <h2>Create an Event</h2>
            <form isd="eventFormContent">
                <div class="form-group">
                    <label for="enentEmail">Your Email</label>
                    <input type="email" id="fEmail" name="fEmail" required>
                </div>
                <div class="form-group">
                    <label for="eventName">Event Name</label>
                    <input type="text" id="fName" name="fName" required>
                </div>
                <div class="form-group">
                    <label for="eventDay">Event Day</label>
                    <input type="date" id="fDay" name="fName" required>
                </div>
                <div class="form-group">
                    <label for="enentAbout">What is the event about</label>
                    <textarea id="fAbout" name="fAbout"></textarea>
                </div>
                <div class="form-group">
                    <label for="eventImage">Event Image</label>
                     <input type="file" id="image-upload" name="image-upload" accept="image/*">
                </div>
                <button type="submit" class="btn-primary">Create Event</button>
            </form>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-copyright">
                © 2025 3D Coverflow. All rights reserved. | Designed by <a href="https://templatemo.com" target="_blank"
                    rel="noopener noreferrer">TemplateMo</a>
            </div>
            <div class="footer-links">
                <a href="#privacy" onclick="event.preventDefault(); alert('Privacy Policy page would go here');">Privacy
                    Policy</a>
                <a href="#terms" onclick="event.preventDefault(); alert('Terms of Service page would go here');">Terms
                    of Service</a>
            </div>
        </div>
    </footer>
    <!-- Scroll to top button -->
    <div class="scroll-to-top" id="scrollToTop">
        <span>↑</span>
    </div>

    <script src="./public/assets/js/load-calendar.js"></script>
</body>