-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprofile.html
More file actions
392 lines (370 loc) · 21.8 KB
/
profile.html
File metadata and controls
392 lines (370 loc) · 21.8 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile - IGNITE Part Share</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<i class="fas fa-robot"></i>
<span>IGNITE Part Share</span>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item auth-required" style="display: none;">
<a href="donate.html" class="nav-link">Donate Parts</a>
</li>
<li class="nav-item auth-required" style="display: none;">
<a href="request.html" class="nav-link">Request Parts</a>
</li>
<li class="nav-item auth-required" style="display: none;">
<a href="browse.html" class="nav-link">Browse Parts</a>
</li>
<li class="nav-item">
<a href="leaderboard.html" class="nav-link">Leaderboard</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">Contact</a>
</li>
</ul>
<div class="user-menu">
<a href="profile.html" class="profile-link">
<i class="fas fa-user"></i>
Profile
</a>
<button class="logout-btn" onclick="signOut()">Logout</button>
</div>
<div class="login-btn">
<a href="login.html" class="btn btn-primary">Login</a>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Page Header -->
<section class="page-header">
<div class="container">
<h1 class="page-title">Profile</h1>
<p class="page-subtitle">Create or join your FIRST team profile</p>
<p class="page-organization">A project of <a href="https://www.ignitepathways.org/" target="_blank" rel="noopener noreferrer" class="ignite-link">IGNITE Pathways</a></p>
</div>
</section>
<!-- Profile Landing Section -->
<div id="profile-landing" class="profile-landing" style="display: none;">
<div class="profile-landing-content">
<h2>Welcome to Your FIRST Team Profile</h2>
<p>To get started, please join your existing team or create a new team profile for your FIRST team.</p>
<!-- Team Search Section -->
<div class="team-search-section">
<h3>Search for Your Team First</h3>
<p>Not sure if your team already has a profile? Search by team number to check before creating or joining.</p>
<div class="search-form">
<div class="form-group">
<input type="text" id="landing-team-search" placeholder="Enter your team number (e.g., 12345)" class="search-input">
<button type="button" class="btn btn-outline" id="landing-search-btn">
<i class="fas fa-search"></i> Search
</button>
</div>
</div>
<div id="landing-search-results" class="search-results" style="display: none;">
<div id="landing-team-found" class="team-found" style="display: none;">
<div class="team-card">
<div class="team-info">
<h4 id="landing-found-team-name">Team Name</h4>
<p id="landing-found-team-location">Location</p>
<p id="landing-found-team-school">School/Organization</p>
</div>
<div class="team-actions">
<button class="btn btn-primary" onclick="joinFoundTeam()">Join This Team</button>
<button class="btn btn-secondary" onclick="createNewTeam()">Create Different Team</button>
</div>
</div>
</div>
<div id="landing-team-not-found" class="team-not-found" style="display: none;">
<div class="no-team-message">
<i class="fas fa-info-circle"></i>
<h4>No team found with that number</h4>
<p>It looks like your team doesn't have a profile yet. You can create one now!</p>
<button class="btn btn-primary" onclick="createNewTeam()">Create Team Profile</button>
</div>
</div>
</div>
</div>
<div class="profile-landing-actions">
<button class="btn btn-primary" id="landing-create-btn">Create Profile</button>
<button class="btn btn-secondary" id="landing-join-btn">Join Profile</button>
</div>
</div>
</div>
<!-- Profile Section -->
<section class="section">
<div class="container">
<!-- Welcome Message for New Users -->
<div id="welcome-message" class="welcome-container" style="display: none;">
<div class="welcome-content">
<h2>🎉 Welcome to IGNITE Part Share!</h2>
<p>Let's get you set up to start sharing parts with the FIRST community.</p>
<div class="onboarding-steps">
<div class="step-item">
<div class="step-number">1</div>
<div class="step-content">
<h3>Team Profile</h3>
<p>Create a new team profile or join an existing one</p>
</div>
</div>
<div class="step-item">
<div class="step-number">2</div>
<div class="step-content">
<h3>FIRST Verification</h3>
<p>Upload a screenshot of your FIRST Dashboard to verify your affiliation</p>
</div>
</div>
<div class="step-item">
<div class="step-number">3</div>
<div class="step-content">
<h3>Start Sharing</h3>
<p>Access all features to donate and request parts</p>
</div>
</div>
</div>
<button class="btn btn-primary" onclick="startOnboarding()">Get Started</button>
</div>
</div>
<div class="profile-container">
<!-- Profile Tabs -->
<div class="profile-tabs">
<button class="profile-tab active" data-tab="my-profile">My Profile</button>
<button class="profile-tab" data-tab="create-profile">Create Profile</button>
<button class="profile-tab" data-tab="join-profile">Join Profile</button>
</div>
<!-- My Profile Tab -->
<div class="profile-content active" id="my-profile-content">
<div class="my-profile-container">
<div id="my-profile-loading" class="loading-container">
<div class="loading-spinner"></div>
<p>Loading your profile...</p>
</div>
<div id="my-profile-content" class="my-profile-content" style="display: none;">
<div class="profile-header">
<div class="team-photo-section">
<div class="team-photo" id="my-team-photo">
<img id="my-team-photo-img" src="" alt="Team photo">
<div class="no-photo-placeholder" id="my-no-photo-placeholder">
<i class="fas fa-robot"></i>
</div>
</div>
</div>
<div class="team-info-section">
<h2 id="my-team-name">Team Name</h2>
<p class="team-number" id="my-team-number">Team #0000</p>
<p class="team-location" id="my-team-location">Location</p>
<p class="team-school" id="my-team-school">School/Organization</p>
</div>
<div class="profile-actions">
<button class="btn btn-secondary" onclick="editMyProfile()">
<i class="fas fa-edit"></i> Edit Profile
</button>
</div>
</div>
<div class="profile-details">
<div class="detail-section">
<h3>Team Mission</h3>
<p id="my-team-mission">No mission statement provided.</p>
</div>
<div class="detail-section">
<h3>About Our Team</h3>
<p id="my-team-description">No description provided.</p>
</div>
<div class="detail-section">
<h3>Team Members</h3>
<p id="my-team-members">No team members listed.</p>
</div>
<div class="detail-section">
<h3>Team Website</h3>
<p id="my-team-website">No website provided.</p>
</div>
</div>
</div>
<div id="my-profile-no-team" class="no-team-message" style="display: none;">
<div class="no-team-content">
<i class="fas fa-users"></i>
<h3>No Team Profile Found</h3>
<p>You haven't created or joined a team profile yet. Get started by creating a new team profile or joining an existing one.</p>
<div class="no-team-actions">
<button class="btn btn-primary" onclick="switchProfileTab('create-profile')">Create Profile</button>
<button class="btn btn-secondary" onclick="switchProfileTab('join-profile')">Join Profile</button>
</div>
</div>
</div>
</div>
</div>
<!-- Create Profile Tab -->
<div class="profile-content" id="create-profile-content">
<div class="profile-form-container">
<h2>Create Team Profile</h2>
<p class="profile-description">Set up your FIRST team's profile with all the details that make your team unique.</p>
<form id="team-profile-form" class="profile-form">
<div class="form-group">
<label for="team-name">Team Name *</label>
<input type="text" id="team-name" placeholder="e.g., Team X" required>
</div>
<div class="form-group">
<label for="team-number">Team Number *</label>
<input type="text" id="team-number" placeholder="e.g., 12345" required>
</div>
<div class="form-group">
<label for="team-location">Location</label>
<input type="text" id="team-location" placeholder="e.g., City, State">
</div>
<div class="form-group">
<label for="team-school">School/Organization</label>
<input type="text" id="team-school" placeholder="e.g., IGNITE Pathways">
</div>
<div class="form-group">
<label for="team-mission">Team Mission</label>
<textarea id="team-mission" placeholder="What is your team's mission or motto? What drives your team to succeed?"></textarea>
</div>
<div class="form-group">
<label for="team-description">Team Description</label>
<textarea id="team-description" placeholder="Tell us about your team's history, achievements, and what makes you special..."></textarea>
</div>
<div class="form-group">
<label for="team-photo">Team Photo</label>
<div class="image-upload-container">
<input type="file" id="team-photo" accept="image/*" class="image-upload-input">
<div class="image-upload-area" id="team-photo-upload-area">
<i class="fas fa-camera"></i>
<p>Click to upload team photo or drag image here</p>
<span class="image-upload-hint">Supports: JPG, PNG, GIF (Max 10MB)</span>
</div>
<div class="image-preview" id="team-photo-preview" style="display: none;">
<img id="team-photo-preview-img" src="" alt="Team photo preview">
<button type="button" class="remove-image-btn" onclick="removeTeamPhoto()">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</div>
<div class="form-group">
<label for="team-members">Team Members (Optional)</label>
<textarea id="team-members" placeholder="List team members, mentors, or key roles (e.g., Student Name - Team Captain, Mentor Name - Lead Programmer)"></textarea>
</div>
<div class="form-group">
<label for="team-website">Team Website</label>
<input type="url" id="team-website" placeholder="https://your-team-website.com">
</div>
<button type="submit" class="btn btn-primary">Create Team Profile</button>
</form>
</div>
</div>
<!-- Join Profile Tab -->
<div class="profile-content" id="join-profile-content">
<div class="join-team-container">
<h2>Join Existing Team</h2>
<p>If your team already has a profile, you can join it by entering the team number. Please ensure you're joining the correct team.</p>
<form id="join-team-form" class="profile-form">
<div class="form-group">
<label for="join-team-number">Team Number *</label>
<input type="text" id="join-team-number" placeholder="e.g., 12345" required>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="honesty-check" required>
<span class="checkmark"></span>
I solemnly swear that I am honestly joining my own team and will not attempt to join teams I do not belong to
</label>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="agree-team-terms" required>
<span class="checkmark"></span>
I understand that joining the wrong team may result in account suspension and I will respect the team's privacy
</label>
</div>
<button type="submit" class="btn btn-primary">Join Team</button>
</form>
<div class="team-search-results" id="team-search-results" style="display: none;">
<h3>Team Found</h3>
<div class="team-card">
<div class="team-info">
<h4 id="found-team-name">Team Name</h4>
<p id="found-team-location">Location</p>
<p id="found-team-school">School/Organization</p>
</div>
<button class="btn btn-secondary" onclick="confirmJoinTeam()">Confirm Join</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>IGNITE Part Share</h3>
<p>Building a stronger FIRST community through part sharing and collaboration.</p>
<p>A project of <a href="https://www.ignitepathways.org/" target="_blank" rel="noopener noreferrer" class="ignite-link">IGNITE Pathways</a></p>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="request.html">Request</a></li>
<li><a href="browse.html">Browse</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Legal</h4>
<ul>
<li><a href="terms.html">Terms of Service</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="cookies.html">Cookie Policy</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Connect</h4>
<div class="social-links">
<a href="https://www.ignitepathways.org/" target="_blank" rel="noopener noreferrer" title="IGNITE Pathways"><i class="fas fa-globe"></i></a>
<a href="#" onclick="openSocialMedia('Twitter')"><i class="fab fa-twitter"></i></a>
<a href="#" onclick="openSocialMedia('Facebook')"><i class="fab fa-facebook"></i></a>
<a href="#" onclick="openSocialMedia('Instagram')"><i class="fab fa-instagram"></i></a>
<a href="#" onclick="openDiscord()"><i class="fab fa-discord"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 IGNITE Part Share. All rights reserved. | <a href="terms.html">Terms</a> | <a href="privacy.html">Privacy</a> | <a href="disclaimer.html">Disclaimer</a></p>
</div>
</div>
</footer>
<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-storage-compat.js"></script>
<!-- Firebase Config -->
<script src="firebase-config.js"></script>
<!-- Auth Script -->
<script src="auth.js"></script>
<script src="script.js"></script>
<script src="profile.js"></script>
</body>
</html>