AthletiLink/index.html at main · OptimaLPro/AthletiLink · 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
<!--
    This is the main HTML file for the AthletiLink website.
    It contains the structure and layout of the website, including the header, sidebar, search functionality, and content sections.
    The file also includes external CSS and JavaScript files for styling and interactivity.
    The website is designed for fitness enthusiasts to connect, share training plans, and participate in group workouts.
    Users can sign in, create posts, and manage their groups.
    The file is organized into different sections, each serving a specific purpose.
    Detailed comments are provided throughout the code to explain the functionality of each element.
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AthletiLink</title>
    <link rel="icon" type="image/x-icon" href="/assets/images/Favicon/Regular/favicon-32x32.png" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="assets/css/styles.css" />
    <script src="assets/js/index_js.js"></script>
    <script>
        fetch('http://localhost:5500/user_session')
            .then(response => {
                if (response.status === 401) {
                    redirectToSignin();
                }
            })
            .then(data => {
            })
            .catch(error => {
            });
    </script>
</head>

<body>
    <!-- Main Container -->
    <div id="container">
        <!-- Left Sidebar -->
        <div id="sidebar">
            <aside id="groups-sidebar" class="effect-fadeIn">
                <div class="text-white" style="font-weight: 500; margin-bottom: 15px; margin-top: 5px;"><img
                        src="assets/images/circle_logo.png" class="circle_logo">My Groups</div>
                <a href="index.html" style="margin-bottom: 14px;">Home</a>
                <hr />
                <!-- All the list group -->
                <div class="list-group"></div>
            </aside>
            <aside id="settings-sidebar">
                <!-- User settings form goes here -->
            </aside>
        </div>

        <!-- Main Content -->
        <div id="content" class="effect-fadeIn">
            <header id="header" class="effect-fadeIn">
                <!-- Profile Picture and Name -->
                <div class="col-md-4 d-flex align-items-center">
                    <div class="profile-circle effect-fadeIn" id="profileCircle"></div>
                    <div class="user-name effect-fadeIn" id="user-name"></div>
                </div>

                <!-- Logo Image -->
                <div class="col-md-4 d-flex justify-content-center">
                    <img src="assets/images/only_logo_white.png" alt="Logo" class="logo effect-fadeIn p-2" />
                </div>

                <!-- Admin and Create Post Buttons -->
                <div class="col-md-4 d-flex align-items-center justify-content-end">
                    <!-- <button type="submit" class="btn-sm btn-light" onclick="redirectToFitBot()"
                                style="outline: none; margin-right: 8px;">FitBot</button> -->
                    <img src="assets/images/FitBot.png" alt="Logo" class="effect-fadeIn p-2 fitbot"
                        onclick="redirectToFitBot()" />
                    <button type="submit" class="btn btn-outline-light admin"
                        style="display:none; margin-right: 6px;">Admin
                        <span id="post_badge" class="badge badge-danger"
                            style="font-size: small; margin-left: 2px;"></span></button>
                    <button type="submit" class="btn btn-outline-light" onclick="redirectToCreatePost()"
                        style="outline: none; margin-right: 8px;">Create Post</button>
                    <!-- Search Button -->
                    <i class="fa fa-search whitecolor icon btn btn-primary-outline effect-fadeIn search-icon"
                        id="searchIcon" aria-hidden="true"></i>
                    <button type="button" class="btn btn-primary-outline dropdown-toggle effect-fadeIn"
                        data-toggle="dropdown">
                        <i class="fa fa-cog whitecolor"></i>
                    </button>
                    <!-- Dropdown Menu -->
                    <div class="dropdown-menu" aria-labelledby="userDropdown">
                        <a class="dropdown-item" href="user_groups.html">My Groups</a>
                        <a class="dropdown-item" href="Update.html">Update</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" onclick="signout()">Sign out</a>
                    </div>
                </div>
            </header>
            <div id="searchContainer" class="justify-content-center">
                <div class="search-container input-group mb-3">
                    <div class="input-group-prepend">
                        <button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false" value="title" id="dropdownButton">By Title <i
                                class="fa fa-caret-down" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" id="search_dropdown">
                            <a class="dropdown-item" value="title">By Title</a>
                            <a class="dropdown-item" value="host">By Host</a>
                            <a class="dropdown-item" value="description">By Description</a>
                            <a class="dropdown-item" value="created">By Created</a>
                            <a class="dropdown-item" value="duration">By Duration</a>
                            <a class="dropdown-item" value="location">By Location</a>
                            <a class="dropdown-item" value="date">By Date</a>
                        </div>
                    </div>
                    <input type="text" class="form-control" id="searchText" placeholder="Search everything...">
                    <div class="input-group-append">
                        <button class="input-group-text btn btn-light dropdown-toggle" type="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="sortButton">
                            <i class="fa fa-sort" aria-hidden="true"></i>
                        </button>
                        <div class="dropdown-menu" id="sort_dropdown">
                            <a class="dropdown-item" value="when-closest">When - Closest</a>
                            <a class="dropdown-item" value="when-farest">When - Farest</a>
                            <a class="dropdown-item" value="created-newer">Created - Newer</a>
                            <a class="dropdown-item" value="created-older">Created - Older</a>
                        </div>
                        <span class="input-group-text" id="clearSearch">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </span>
                        <!-- Search Button -->
                        <button class="btn btn-dark" id="searchButton">Search</button>
                        <!-- Sort Dropdown -->
                    </div>
                </div>
            </div>
            <section id="section">
                <!-- This div will be shown only if the user has no groups -->
                <div id="noGroupsContent" style="height: 100%; display: none;">
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="text-center" style="width: 47%; margin-top: 5px; margin-left: 15px;">
                            <div class="welcome-section">
                                <p>
                                <h2><strong>🌟 Welcome to AthletiLink</strong></h2>The vibrant social media platform
                                dedicated
                                to
                                fitness enthusiasts like you! Whether you're a seasoned athlete or just starting
                                your
                                fitness journey, our community is here to inspire, motivate, and connect.</p>
                                <br>

                                <!-- <h3>🌟 Welcome to AthletiLink</h3>
                                        <p>the vibrant social media platform dedicated to fitness enthusiasts like you! Whether
                                            you're a seasoned athlete or just starting your fitness journey, our community is
                                            here to inspire, motivate, and connect.</p> -->

                                <h3>🏋️ Dive into a World of Sports</h3>
                                <p>From yoga to weightlifting, running to cycling, explore a diverse range of sports
                                    activities.
                                    <br>AthletiLink is your go-to destination for all things fitness.
                                </p>

                                <h3>🤝 Connect and Train Together</h3>
                                <p>Why train alone when you can join forces? Find local sports enthusiasts, make new
                                    friends, and enjoy group workouts. Share your passion for sports and fitness with
                                    like-minded individuals.</p>

                                <h3>📖 Share and Discover Training Plans</h3>
                                <p>Got a workout routine that works wonders? Share it with our community! Or if you're
                                    looking for new ideas, browse personal training plans shared by others. It's
                                    all
                                    about giving and gaining fitness inspiration.</p>

                                <h3>🌍 Real Life, Real Connections</h3>
                                <p>AthletiLink isn't just about virtual connections. We encourage members to meet up and
                                    train together, bringing the spirit of fitness to life in the real world.</p>

                                <p><strong>So, lace up your sneakers, grab your gear, and let's get moving! Join
                                        AthletiLink
                                        today
                                        and be a part of a community that's fitness-focused and fun-filled. Together,
                                        let's
                                        achieve our fitness goals!</strong></p>
                            </div>
                            <br>
                            <button onclick="window.location.href='user_groups.html'"
                                class="btn btn-primary btn-lg animated-button">
                                Click here to enter some sport groups!
                            </button>
                        </div>
                    </div>
                </div>
                <!-- Rendered post -->
            </section>

            <!-- Fixed Footer for Content -->
            <div id="footer">
                <div style="float: left;">© 2023 AthletiLink Inc.</div>
                <div style="clear: both;"></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deletePostModal" tabindex="-1" role="dialog" aria-labelledby="deletePostModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deletePostModalLabel">Confirm Deletion</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS and Popper.js -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

<script>

    // Search and Sort container
    document.getElementById('searchIcon').addEventListener('click', function () {
        var searchContainer = document.getElementById('searchContainer');
        if (searchContainer.style.display === 'none' || !searchContainer.style.display) {
            searchContainer.style.display = 'block';
            searchContainer.style.animation = 'slideDownAndUp 0.5s ease forwards';
        } else {
            searchContainer.style.display = 'none';
        }
    });
</script>