-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathevent-detail.html
More file actions
169 lines (158 loc) · 7.42 KB
/
event-detail.html
File metadata and controls
169 lines (158 loc) · 7.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Details - Community Hub</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>
<header>
<nav class="navbar">
<div class="nav-brand">
<h1><a href="index.html" style="text-decoration: none; color: inherit;">Community Hub</a></h1>
</div>
<div class="nav-links">
<a href="index.html">Home</a>
<a href="events.html">All Events</a>
<a href="organizer-login.html">For Organizers</a>
</div>
</nav>
</header>
<main>
<div class="event-detail-container">
<!-- Back to Events -->
<div class="back-nav">
<a href="events.html" class="back-link">← Back to All Events</a>
</div>
<!-- Event Header -->
<section class="event-header">
<div class="event-hero-image" id="eventHeroImage">
<!-- Image will be loaded by JavaScript -->
</div>
<div class="event-basic-info">
<div class="event-category-badge" id="eventCategory"></div>
<h1 id="eventTitle">Event Title</h1>
<div class="event-meta">
<div class="meta-item">
<span class="meta-icon">📅</span>
<span id="eventDateTime">Date and Time</span>
</div>
<div class="meta-item">
<span class="meta-icon">📍</span>
<span id="eventLocation">Location</span>
</div>
<div class="meta-item">
<span class="meta-icon">💰</span>
<span id="eventPrice">Price</span>
</div>
<div class="meta-item">
<span class="meta-icon">👤</span>
<span id="eventOrganizer">Organizer</span>
</div>
</div>
<div class="event-actions">
<a href="#" id="externalLink" class="cta-button primary" target="_blank">Get Tickets</a>
<button id="shareButton" class="cta-button secondary">Share Event</button>
<button id="saveButton" class="cta-button secondary">Save Event</button>
</div>
</div>
</section>
<!-- Main Content -->
<section class="event-content">
<div class="event-details">
<div class="detail-section">
<h3>About This Event</h3>
<div id="eventDescription" class="event-description">
<!-- Description will be loaded by JavaScript -->
</div>
</div>
<div class="detail-section">
<h3>Location & Directions</h3>
<div class="location-details">
<div id="eventAddress" class="event-address"></div>
<div id="map" class="event-map"></div>
<div class="transport-options">
<h4>Getting There</h4>
<div class="transport-icons">
<span class="transport-icon" title="Public Transit">🚌</span>
<span class="transport-icon" title="Parking Available">🅿️</span>
<span class="transport-icon" title="Bike Parking">🚲</span>
</div>
</div>
</div>
</div>
<div class="detail-section">
<h3>Organizer Information</h3>
<div class="organizer-info">
<div id="organizerDetails" class="organizer-details"></div>
<a href="#" id="organizerContact" class="contact-link">Contact Organizer</a>
</div>
</div>
</div>
<div class="event-sidebar">
<div class="sidebar-card">
<h4>Event Details</h4>
<div class="detail-list">
<div class="detail-item">
<strong>Date:</strong>
<span id="sidebarDate"></span>
</div>
<div class="detail-item">
<strong>Time:</strong>
<span id="sidebarTime"></span>
</div>
<div class="detail-item">
<strong>Category:</strong>
<span id="sidebarCategory"></span>
</div>
<div class="detail-item">
<strong>Price:</strong>
<span id="sidebarPrice"></span>
</div>
</div>
</div>
<div class="sidebar-card">
<h4>Share This Event</h4>
<div class="share-buttons">
<button class="share-btn facebook" data-platform="facebook">Facebook</button>
<button class="share-btn twitter" data-platform="twitter">Twitter</button>
<button class="share-btn linkedin" data-platform="linkedin">LinkedIn</button>
<button class="share-btn copy-link" data-platform="copy">Copy Link</button>
</div>
</div>
<div class="sidebar-card">
<h4>Similar Events</h4>
<div id="similarEvents" class="similar-events">
<!-- Similar events will be loaded here -->
</div>
</div>
</div>
</section>
</div>
</main>
<!-- Share Modal -->
<div id="shareModal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h3>Share This Event</h3>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<p>Share this event with your friends and community!</p>
<div class="share-options">
<input type="text" id="shareUrl" readonly class="share-url">
<button id="copyUrl" class="cta-button">Copy Link</button>
</div>
</div>
</div>
</div>
<footer>
<p>© 2024 Community Hub. All rights reserved.</p>
</footer>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="js/event-detail.js"></script>
<script src="js/event-manager.js"></script>
</body>
</html>