488 lines
15 KiB
HTML
488 lines
15 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ 'register_for'|t }} {{ event.name }} - NetEvents{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="event-registration-page">
|
|
<div class="event-header">
|
|
<h1>{{ event.name }}</h1>
|
|
<div class="event-meta-box">
|
|
<p><strong>{{ 'start'|t }}:</strong> {{ event.start_time|localized_date if event.start_time else 'TBD' }}</p>
|
|
{% if event.end_time %}
|
|
<p><strong>{{ 'end'|t }}:</strong> {{ event.end_time|localized_date }}</p>
|
|
{% endif %}
|
|
<p><strong>{{ 'location'|t }}:</strong> {{ event.location }}</p>
|
|
</div>
|
|
{% if event.description %}
|
|
<div class="event-description-box">
|
|
<p>{{ event.description }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="registration-content">
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
<div class="alert alert-info">
|
|
{% for message in messages %}
|
|
<p>{{ message }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% if not registered %}
|
|
<!-- Registration Form with Breakout Sessions -->
|
|
<div class="registration-form-section">
|
|
<h2>{{ 'register_as_attendee'|t }}</h2>
|
|
{% if preselected_type %}
|
|
<div style="background: #e8f4f8; border: 1px solid #b8daE3; border-radius: 5px; padding: 15px; margin-bottom: 20px;">
|
|
<p style="margin: 0;"><strong>{{ 'registration_type'|t }}:</strong> {{ preselected_type.name }}
|
|
{% if preselected_type.price and preselected_type.price > 0 %}
|
|
<span style="color: #27ae60; margin-left: 10px;">{{ preselected_type.price|format_currency }}</span>
|
|
{% else %}
|
|
<span style="color: #7f8c8d; margin-left: 10px;">{{ 'free'|t }}</span>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
<form method="POST" action="{{ url_for('register_event', code=event.code) }}" id="registration-form">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="first_name">{{ 'first_name'|t }}</label>
|
|
<input type="text" id="first_name" name="first_name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="last_name">{{ 'last_name'|t }}</label>
|
|
<input type="text" id="last_name" name="last_name" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">{{ 'email'|t }}</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="organisation">{{ 'organisation'|t }}</label>
|
|
<input type="text" id="organisation" name="organisation">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="role">{{ 'role_profession'|t }}</label>
|
|
<input type="text" id="role" name="role">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone">{{ 'phone'|t }}</label>
|
|
<input type="tel" id="phone" name="phone">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="linkedin">{{ 'linkedin'|t }}</label>
|
|
<input type="url" id="linkedin" name="linkedin" placeholder="https://linkedin.com/in/...">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="introduction">{{ 'about_me'|t }}</label>
|
|
<textarea id="introduction" name="introduction" maxlength="254" rows="3"></textarea>
|
|
<small class="char-count"><span id="introduction_count">0</span>/254</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">{{ 'password'|t }}</label>
|
|
<input type="password" id="password" name="password" required minlength="6">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="confirm_password">{{ 'confirm_password'|t }}</label>
|
|
<input type="password" id="confirm_password" name="confirm_password" required>
|
|
</div>
|
|
|
|
{% if sessions %}
|
|
<div class="form-group breakout-sessions-selection">
|
|
<label>{{ 'select_breakout_sessions'|t }}</label>
|
|
<p class="selection-hint">{{ 'select_breakout_sessions_hint'|t }}</p>
|
|
<div class="sessions-checkboxes">
|
|
{% for session in sessions %}
|
|
<div class="session-checkbox-item {% if session.max_attendees and session.rsvp_count >= session.max_attendees %}session-full{% endif %}">
|
|
<input type="checkbox" id="session_{{ session.id }}" name="breakout_sessions" value="{{ session.id }}"
|
|
{% if session.max_attendees and session.rsvp_count >= session.max_attendees %}disabled{% endif %}>
|
|
<label for="session_{{ session.id }}">
|
|
<strong>{{ session.name }}</strong>
|
|
<span class="session-time">{{ session.start_time|localized_date('%H:%M') if session.start_time else '' }} - {{ session.end_time|localized_date('%H:%M') if session.end_time else '' }}</span>
|
|
<span class="session-location">{{ session.location }}</span>
|
|
{% if session.max_attendees %}
|
|
<span class="session-capacity {% if session.rsvp_count >= session.max_attendees %}full{% endif %}">
|
|
{{ session.rsvp_count }}/{{ session.max_attendees }} {{ 'spots'|t }}
|
|
</span>
|
|
{% else %}
|
|
<span class="session-capacity">{{ session.rsvp_count }} {{ 'registered'|t }}</span>
|
|
{% endif %}
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<button type="submit" class="btn btn-primary btn-block">{{ 'register_for_event'|t }}</button>
|
|
</form>
|
|
<p class="login-link">{{ 'already_registered'|t }} <a href="{{ url_for('login') }}">{{ 'login'|t }}</a></p>
|
|
</div>
|
|
{% else %}
|
|
<!-- Breakout Sessions Section -->
|
|
<div class="breakout-sessions-section">
|
|
<h2>{{ 'breakout_sessions'|t }}</h2>
|
|
<p class="section-intro">{{ 'choose_sessions_intro'|t }}</p>
|
|
|
|
{% if sessions %}
|
|
<div class="sessions-list">
|
|
{% for session in sessions %}
|
|
<div class="session-card" data-session-code="{{ session.id }}">
|
|
<div class="session-info">
|
|
<h3>{{ session.name }}</h3>
|
|
<p><strong>{{ 'time'|t }}:</strong> {{ session.start_time|localized_date('%H:%M') if session.start_time else '' }} - {{ session.end_time|localized_date('%H:%M') if session.end_time else '' }}</p>
|
|
<p><strong>{{ 'location'|t }}:</strong> {{ session.location }}</p>
|
|
{% if session.max_attendees %}
|
|
<p><strong>{{ 'capacity'|t }}:</strong> <span class="rsvp-count">{{ session.rsvp_count }}</span> / {{ session.max_attendees }}</p>
|
|
{% else %}
|
|
<p><strong>{{ 'registered'|t }}:</strong> {{ session.rsvp_count }}</p>
|
|
{% endif %}
|
|
{% if session.description %}
|
|
<p>{{ session.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="session-actions">
|
|
{% if session.my_rsvp_status == 'registered' %}
|
|
<button class="btn btn-secondary rsvp-btn" data-session-code="{{ session.id }}" data-action="cancel">{{ 'cancel_rsvp'|t }}</button>
|
|
{% elif session.my_rsvp_status == 'cancelled' %}
|
|
<button class="btn btn-primary rsvp-btn" data-session-code="{{ session.id }}" data-action="rsvp">{{ 'rsvp'|t }}</button>
|
|
{% else %}
|
|
{% if not session.max_attendees or session.rsvp_count < session.max_attendees %}
|
|
<button class="btn btn-primary rsvp-btn" data-session-code="{{ session.id }}" data-action="rsvp">{{ 'rsvp'|t }}</button>
|
|
{% else %}
|
|
<span class="full-label">{{ 'session_full'|t }}</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="no-sessions">{{ 'no_breakout_sessions'|t }}</p>
|
|
{% endif %}
|
|
|
|
<div class="registration-complete">
|
|
<p>{{ 'you_are_registered'|t }} <strong>{{ event.name }}</strong>!</p>
|
|
<a href="{{ url_for('login') }}" class="btn btn-outline">{{ 'go_to_login'|t }}</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.event-registration-page {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.event-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 2px solid #eee;
|
|
}
|
|
|
|
.event-header h1 {
|
|
color: #2c3e50;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.event-meta-box {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.event-meta-box p {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.event-description-box {
|
|
margin-top: 15px;
|
|
color: #555;
|
|
}
|
|
|
|
.registration-content {
|
|
display: grid;
|
|
gap: 30px;
|
|
}
|
|
|
|
.registration-form-section {
|
|
background: #fff;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.registration-form-section h2 {
|
|
margin-bottom: 20px;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.char-count {
|
|
display: block;
|
|
text-align: right;
|
|
color: #888;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.btn-block {
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.login-link {
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
color: #666;
|
|
}
|
|
|
|
.breakout-sessions-section {
|
|
background: #fff;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.breakout-sessions-section h2 {
|
|
margin-bottom: 10px;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.section-intro {
|
|
color: #666;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.session-card {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #3498db;
|
|
}
|
|
|
|
.session-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.session-info h3 {
|
|
margin: 0 0 10px 0;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.session-info p {
|
|
margin: 5px 0;
|
|
color: #555;
|
|
}
|
|
|
|
.session-actions {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.full-label {
|
|
background: #e74c3c;
|
|
color: white;
|
|
padding: 8px 15px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.no-sessions {
|
|
text-align: center;
|
|
color: #888;
|
|
padding: 30px;
|
|
}
|
|
|
|
.registration-complete {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background: #d4edda;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.registration-complete p {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.registration-complete a {
|
|
display: inline-block;
|
|
}
|
|
|
|
.breakout-sessions-selection {
|
|
margin-top: 25px;
|
|
padding-top: 20px;
|
|
border-top: 2px solid #eee;
|
|
}
|
|
|
|
.breakout-sessions-selection > label {
|
|
font-size: 18px;
|
|
color: #2c3e50;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.selection-hint {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.sessions-checkboxes {
|
|
display: grid;
|
|
gap: 10px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.session-checkbox-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 12px;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
border: 1px solid #e0e0e0;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.session-checkbox-item:hover {
|
|
border-color: #3498db;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.session-checkbox-item.session-full {
|
|
opacity: 0.6;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.session-checkbox-item input[type="checkbox"] {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 12px;
|
|
margin-top: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.session-checkbox-item input[type="checkbox"]:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.session-checkbox-item label {
|
|
flex: 1;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
}
|
|
|
|
.session-checkbox-item label strong {
|
|
display: block;
|
|
color: #2c3e50;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.session-checkbox-item label span {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
.session-checkbox-item label .session-time {
|
|
color: #3498db;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.session-checkbox-item label .session-location {
|
|
color: #888;
|
|
}
|
|
|
|
.session-checkbox-item label .session-capacity {
|
|
margin-top: 5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.session-checkbox-item label .session-capacity.full {
|
|
color: #e74c3c;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var intro = document.getElementById('introduction');
|
|
var countEl = document.getElementById('introduction_count');
|
|
if (intro && countEl) {
|
|
intro.addEventListener('input', function() {
|
|
countEl.textContent = intro.value.length;
|
|
});
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.rsvp-btn').forEach(btn => {
|
|
btn.addEventListener('click', async function() {
|
|
const sessionCode = this.dataset.sessionCode;
|
|
const action = this.dataset.action;
|
|
const endpoint = action === 'rsvp'
|
|
? `/attendee/breakout-session/${sessionCode}/rsvp`
|
|
: `/attendee/breakout-session/${sessionCode}/cancel-rsvp`;
|
|
|
|
try {
|
|
const response = await fetch(endpoint, { method: 'POST' });
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert(data.error || '{{ "error_occurred"|t }}');
|
|
}
|
|
} catch (error) {
|
|
alert('{{ "error_processing_request"|t }}');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |