Initial commit: conference app with Flask
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ 'attendees'|t }} - NetEvents{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="attendees-page">
|
||||
<h1>{{ 'event_attendees'|t }}</h1>
|
||||
<p>{{ 'connect_with_attendees'|t }}</p>
|
||||
|
||||
{% if attendees %}
|
||||
<div class="attendees-grid">
|
||||
{% for att in attendees %}
|
||||
<div class="attendee-card">
|
||||
<div class="attendee-photo">
|
||||
{% if att.profile_picture %}
|
||||
<img src="{{ url_for('static', filename='uploads/' + att.profile_picture) }}" alt="Photo">
|
||||
{% else %}
|
||||
<div class="no-photo">{{ att.first_name[0] }}{{ att.last_name[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="attendee-info">
|
||||
<h3>{{ att.first_name }} {{ att.last_name }}</h3>
|
||||
<p class="attendee-org">{{ (att.organisation)|spacify if att.organisation else '' }}</p>
|
||||
<p class="attendee-role">{{ (att.role)|spacify if att.role else '' }}</p>
|
||||
{% if att.introduction %}
|
||||
<p class="attendee-intro">{{ att.introduction[:100] }}{% if att.introduction|length > 100 %}...{% endif %}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="attendee-actions">
|
||||
{% if att.my_status == 'accepted' %}
|
||||
<span class="badge badge-success">{{ 'connected'|t }}</span>
|
||||
{% elif att.my_status == 'pending' %}
|
||||
<span class="badge badge-pending">{{ 'request_pending'|t }}</span>
|
||||
{% elif att.my_status == 'rejected' %}
|
||||
<span class="badge badge-rejected">{{ 'rejected'|t }}</span>
|
||||
{% else %}
|
||||
<form method="POST" action="{{ url_for('create_connection') }}" class="connect-form">
|
||||
<input type="hidden" name="connected_attendee_id" value="{{ att.id }}">
|
||||
<button type="submit" class="btn btn-sm btn-primary">{{ 'connect'|t }}</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="no-attendees">{{ 'no_other_attendees'|t }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,85 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ 'breakout_sessions'|t }} - {{ event.name }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="breakout-sessions">
|
||||
<h1>{{ 'breakout_sessions'|t }} - {{ event.name }}</h1>
|
||||
|
||||
{% with messages = get_flashed_messages() %}
|
||||
{% if messages %}
|
||||
<div class="alert alert-info">
|
||||
{% for message in messages %}
|
||||
<p>{{ message }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
{% if sessions %}
|
||||
<div class="sessions-list">
|
||||
{% for session in sessions %}
|
||||
<div class="session-card" data-session-code="{{ session.code }}">
|
||||
<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="back-link">
|
||||
<a href="{{ url_for('attendee_dashboard') }}" class="btn btn-outline">{{ 'back_to_dashboard'|t }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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 %}
|
||||
@@ -0,0 +1,154 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ 'connection_requests'|t }} - NetEvents{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="connection-requests">
|
||||
<h1>{{ 'connection_requests'|t }}</h1>
|
||||
<p>{{ 'people_scanned_qr'|t }}</p>
|
||||
|
||||
{% with messages = get_flashed_messages() %}
|
||||
{% if messages %}
|
||||
<div class="alert alert-info">
|
||||
{% for message in messages %}
|
||||
<p>{{ message }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
{% if requests %}
|
||||
<div class="requests-list">
|
||||
{% for req in requests %}
|
||||
<div class="request-card">
|
||||
<div class="request-profile">
|
||||
{% if req.profile_picture %}
|
||||
<img src="{{ url_for('uploaded_file', filename=req.profile_picture) }}" alt="{{ req.first_name }}" class="profile-photo">
|
||||
{% else %}
|
||||
<div class="profile-photo-placeholder">{{ req.first_name[0] }}{{ req.last_name[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="request-info">
|
||||
<h3>{{ req.first_name }} {{ req.last_name }}</h3>
|
||||
<p class="request-email">{{ req.email }}</p>
|
||||
<p class="request-org">{{ (req.organisation)|spacify if req.organisation else '' }}{% if req.role %} - {{ (req.role)|spacify }}{% endif %}</p>
|
||||
{% if req.introduction %}
|
||||
<p class="request-intro">"{{ req.introduction }}"</p>
|
||||
{% endif %}
|
||||
<p class="request-time">{{ 'requested'|t }} {{ req.created_at|localized_date if req.created_at else 'recently' }}</p>
|
||||
</div>
|
||||
<div class="request-actions">
|
||||
<button class="btn btn-success respond-btn" data-connection-id="{{ req.id }}" data-action="approve">{{ 'approve'|t }}</button>
|
||||
<button class="btn btn-danger respond-btn" data-connection-id="{{ req.id }}" data-action="reject">{{ 'reject'|t }}</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="no-requests">{{ 'no_pending_requests'|t }}</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="back-link">
|
||||
<a href="{{ url_for('attendee_dashboard') }}" class="btn btn-outline">{{ 'back_to_dashboard'|t }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.respond-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async function() {
|
||||
const connectionId = this.dataset.connectionId;
|
||||
const action = this.dataset.action;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/attendee/connection-request/${connectionId}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: action })
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
location.reload();
|
||||
} else {
|
||||
alert(data.error || 'Error processing request');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error processing request');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.request-card {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 15px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.request-profile {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-photo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-photo-placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: #e2e8f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.request-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.request-info h3 {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.request-email {
|
||||
color: #64748b;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.request-org {
|
||||
color: #475569;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.request-intro {
|
||||
font-style: italic;
|
||||
color: #64748b;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.request-time {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.request-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,102 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ 'attendee_dashboard'|t }} - NetEvents{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard">
|
||||
<h1>{{ 'attendee_dashboard'|t }}</h1>
|
||||
|
||||
{% if event %}
|
||||
<section class="event-info">
|
||||
<h2>{{ 'current_event'|t }}</h2>
|
||||
<div class="event-card">
|
||||
<h3>{{ event.name }}</h3>
|
||||
<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 class="event-card-actions">
|
||||
<a href="{{ url_for('register_event', code=event.code) }}" class="btn btn-outline">{{ 'event_details'|t }}</a>
|
||||
<a href="{{ url_for('attendee_breakout_sessions') }}" class="btn btn-outline">{{ 'breakout_sessions'|t }}</a>
|
||||
<a href="{{ url_for('attendee_scan') }}" class="btn btn-primary">📷 {{ 'scan_qr_to_connect'|t }}</a>
|
||||
<a href="{{ url_for('download_badge') }}" class="btn btn-outline">📄 {{ 'download_badge'|t }}</a>
|
||||
<form method="POST" action="{{ url_for('email_badge') }}" style="display: inline;">
|
||||
<button type="submit" class="btn btn-outline">📧 {{ 'email_badge'|t }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if pending_connections %}
|
||||
<section class="pending-section">
|
||||
<h2>{{ 'incoming_connection_requests'|t }}</h2>
|
||||
<p><a href="{{ url_for('connection_requests') }}">{{ 'review_scan_requests'|t }}</a></p>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="connections-section">
|
||||
<h2>{{ 'my_connections'|t }}</h2>
|
||||
<div class="section-actions">
|
||||
<a href="{{ url_for('list_attendees') }}" class="btn btn-primary">{{ 'find_attendees'|t }}</a>
|
||||
</div>
|
||||
|
||||
{% if connections %}
|
||||
<div class="connections-grid">
|
||||
{% for conn in connections %}
|
||||
<div class="connection-card">
|
||||
<h4 style="margin-bottom: 12px;">{{ conn.first_name }} {{ conn.last_name }}</h4>
|
||||
<p class="connection-org" style="margin-bottom: 12px;">{{ (conn.organisation)|spacify if conn.organisation else '' }}</p>
|
||||
<p class="connection-role">{{ (conn.role)|spacify if conn.role else '' }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="no-data">{{ 'no_connections_yet'|t }}</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<section class="appointments-section">
|
||||
<h2>{{ 'my_appointments'|t }}</h2>
|
||||
<div class="section-actions">
|
||||
<a href="{{ url_for('list_attendees') }}" class="btn btn-outline">{{ 'schedule_appointment'|t }}</a>
|
||||
</div>
|
||||
|
||||
{% if appointments %}
|
||||
<div class="appointments-list">
|
||||
{% for apt in appointments %}
|
||||
<div class="appointment-item {% if apt.status %}status-{{ apt.status }}{% endif %}">
|
||||
<div class="apt-info">
|
||||
<p><strong>
|
||||
{% if apt.requester_id == session.user_id %}
|
||||
{{ 'with'|t }} {{ apt.target_first_name }} {{ apt.target_last_name }}
|
||||
{% else %}
|
||||
{{ 'with'|t }} {{ apt.requester_first_name }} {{ apt.requester_last_name }}
|
||||
{% endif %}
|
||||
</strong></p>
|
||||
<p><strong>{{ 'time'|t }}:</strong> {{ apt.appointment_time|localized_date if apt.appointment_time else 'TBD' }}</p>
|
||||
<p><strong>{{ 'location'|t }}:</strong> {{ apt.location or 'TBD' }}</p>
|
||||
<p class="apt-status status-{{ apt.status }}">{{ (apt.status)|spacify if apt.status else '' }}</p>
|
||||
</div>
|
||||
{% if apt.status == 'pending' and apt.target_id == session.user_id %}
|
||||
<div class="apt-actions">
|
||||
<form method="POST" action="{{ url_for('update_appointment', appointment_id=apt.id) }}" class="inline-form">
|
||||
<input type="hidden" name="status" value="accepted">
|
||||
<button type="submit" class="btn btn-sm btn-success">{{ 'accept'|t }}</button>
|
||||
</form>
|
||||
<form method="POST" action="{{ url_for('update_appointment', appointment_id=apt.id) }}" class="inline-form">
|
||||
<input type="hidden" name="status" value="rejected">
|
||||
<button type="submit" class="btn btn-sm btn-danger">{{ 'reject'|t }}</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="no-data">{{ 'no_appointments'|t }}</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,37 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ event.name }} - NetEvents{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="event-public">
|
||||
<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>
|
||||
<p><strong>{{ 'organizer'|t }}:</strong> {{ event.organizer_name }}</p>
|
||||
<p><strong>{{ 'attendees'|t }}:</strong> {{ event.attendee_count }}</p>
|
||||
{% if event.max_attendees %}
|
||||
<p><strong>{{ 'spots_remaining'|t }}:</strong> {{ event.max_attendees - event.attendee_count }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if event.description %}
|
||||
<div class="event-description-box">
|
||||
<h3>{{ 'about_this_event'|t }}</h3>
|
||||
<p>{{ event.description }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not session.user_id %}
|
||||
<div class="event-cta">
|
||||
<p>{{ 'want_to_attend'|t }}</p>
|
||||
<a href="{{ url_for('register_attendee', code=event.code) }}" class="btn btn-primary">{{ 'register_as_attendee'|t }}</a>
|
||||
<p class="login-link">{{ 'already_registered'|t }} <a href="{{ url_for('login') }}">{{ 'login'|t }}</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,488 @@
|
||||
{% 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 %}
|
||||
@@ -0,0 +1,191 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ 'payment'|t }} - {{ event.name }} - NetEvents{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.payment-page {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.payment-box {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.payment-box h1 {
|
||||
margin-bottom: 20px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
.order-summary {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.order-summary h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
.order-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.order-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.order-total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 15px;
|
||||
margin-top: 10px;
|
||||
border-top: 2px solid #ddd;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.price {
|
||||
color: #27ae60;
|
||||
font-weight: 500;
|
||||
}
|
||||
.payment-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.payment-form .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.payment-form label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.payment-form input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.card-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
.btn-pay {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.btn-pay:hover {
|
||||
background: #219a52;
|
||||
}
|
||||
.security-note {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
}
|
||||
.back-link {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="payment-page">
|
||||
<a href="{{ url_for('register_event', code=event.code) }}" class="back-link">← {{ 'back_to_registration'|t }}</a>
|
||||
|
||||
<div class="payment-box">
|
||||
<h1>{{ 'complete_payment'|t }}</h1>
|
||||
|
||||
<div class="order-summary">
|
||||
<h3>{{ 'order_summary'|t }}</h3>
|
||||
<div class="order-item">
|
||||
<span>{{ 'event_registration'|t }}</span>
|
||||
<span>{{ event.name }}</span>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<span>{{ 'attendee_type'|t }}:</span>
|
||||
<span>{{ pending.type_name }}</span>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<span>{{ 'attendee'|t }}:</span>
|
||||
<span>{{ pending.first_name }} {{ pending.last_name }}</span>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<span>{{ 'email'|t }}:</span>
|
||||
<span>{{ pending.email }}</span>
|
||||
</div>
|
||||
<div class="order-total">
|
||||
<span>{{ 'total'|t }}:</span>
|
||||
<span class="price">{{ pending.price|format_currency }} {{ get_currency_symbol() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="POST" class="payment-form">
|
||||
<div class="form-group">
|
||||
<label for="card_name">{{ 'name_on_card'|t }}</label>
|
||||
<input type="text" id="card_name" name="card_name" required placeholder="{{ 'john_doe'|t }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card_number">{{ 'card_number'|t }}</label>
|
||||
<input type="text" id="card_number" name="card_number" required placeholder="{{ '1234_5678_9012_3456'|t }}" maxlength="19">
|
||||
</div>
|
||||
|
||||
<div class="card-row">
|
||||
<div class="form-group">
|
||||
<label for="expiry">{{ 'expiry_date'|t }}</label>
|
||||
<input type="text" id="expiry" name="expiry" required placeholder="{{ 'mm/yy'|t }}" maxlength="5">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cvv">{{ 'cvv'|t }}</label>
|
||||
<input type="text" id="cvv" name="cvv" required placeholder="{{ '123'|t }}" maxlength="4">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-pay">{{ 'pay_now'|t }} - {{ pending.price|format_currency }} {{ get_currency_symbol() }}</button>
|
||||
</form>
|
||||
|
||||
<p class="security-note">{{ 'payment_secure'|t }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('card_number').addEventListener('input', function(e) {
|
||||
var value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
|
||||
var matches = value.match(/\d{4,16}/g);
|
||||
var match = matches && matches[0] || '';
|
||||
var parts = [];
|
||||
for (var i = 0, len = match.length; i < len; i += 4) {
|
||||
parts.push(match.substring(i, i + 4));
|
||||
}
|
||||
if (parts.length) {
|
||||
e.target.value = parts.join(' ');
|
||||
} else {
|
||||
e.target.value = value;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('expiry').addEventListener('input', function(e) {
|
||||
var value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
|
||||
if (value.length >= 2) {
|
||||
e.target.value = value.substring(0, 2) + '/' + value.substring(2, 4);
|
||||
} else {
|
||||
e.target.value = value;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,201 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ 'my_events'|t }} - NetEvents{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="personal-page">
|
||||
<h1>{{ 'welcome'|t }}, {{ attendee.first_name }}!</h1>
|
||||
<p class="welcome-subtitle">{{ 'registration_confirmed'|t }}</p>
|
||||
|
||||
{% for event in events %}
|
||||
<section class="event-section">
|
||||
<h2>{{ event.name }}</h2>
|
||||
<div class="event-details">
|
||||
<p><strong>{{ 'date'|t }}:</strong> {{ event.start_time|localized_date if event.start_time else 'TBD' }}</p>
|
||||
<p><strong>{{ 'location'|t }}:</strong> {{ event.location }}</p>
|
||||
<p><strong>{{ 'status'|t }}:</strong> <span class="status-registered">{{ 'registered'|t }}</span></p>
|
||||
</div>
|
||||
|
||||
<h3>{{ 'breakout_sessions'|t }}</h3>
|
||||
{% if event.breakout_sessions %}
|
||||
<div class="sessions-list">
|
||||
{% for session in event.breakout_sessions %}
|
||||
<div class="session-item {% if session.my_rsvp_status == 'registered' %}registered{% endif %}">
|
||||
<div class="session-info">
|
||||
<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.description %}
|
||||
<span class="session-description">{{ session.description }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="session-status">
|
||||
{% if session.my_rsvp_status == 'registered' %}
|
||||
<span class="badge badge-success">{{ 'registered'|t }}</span>
|
||||
{% else %}
|
||||
<span class="badge badge-secondary">{{ 'not_registered'|t }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="no-sessions">{{ 'no_breakout_sessions'|t }}</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
<div class="actions">
|
||||
<a href="{{ url_for('attendee_dashboard') }}" class="btn btn-primary">{{ 'go_to_dashboard'|t }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_styles %}
|
||||
<style>
|
||||
.personal-page {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.personal-page h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.event-section {
|
||||
background: #fff;
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.event-section h2 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #3498db;
|
||||
}
|
||||
|
||||
.event-details {
|
||||
background: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.event-details p {
|
||||
margin: 8px 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.status-registered {
|
||||
color: #27ae60;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.event-section h3 {
|
||||
color: #2c3e50;
|
||||
margin: 20px 0 15px 0;
|
||||
}
|
||||
|
||||
.sessions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #95a5a6;
|
||||
}
|
||||
|
||||
.session-item.registered {
|
||||
border-left-color: #27ae60;
|
||||
background: #f0f9f4;
|
||||
}
|
||||
|
||||
.session-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.session-info strong {
|
||||
display: block;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.session-info span {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.session-info .session-time {
|
||||
color: #3498db;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.session-info .session-location {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.session-info .session-description {
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.session-status {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background: #95a5a6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.no-sessions {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.actions .btn {
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,321 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ 'profile'|t }} - NetEvents{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="profile-page">
|
||||
<h1>{{ 'my_profile'|t }}</h1>
|
||||
|
||||
<div class="profile-container">
|
||||
<div class="profile-photo-section">
|
||||
<div class="current-photo" id="photo-container">
|
||||
{% if attendee.profile_picture %}
|
||||
<img src="{{ url_for('static', filename='uploads/' + attendee.profile_picture) }}" alt="{{ 'profile_photo'|t }}" class="profile-img" id="profile-preview">
|
||||
{% else %}
|
||||
<img src="" alt="{{ 'profile_preview'|t }}" class="profile-img" id="profile-preview" style="display: none;">
|
||||
<div class="no-photo" id="no-photo">{{ 'no_photo'|t }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<canvas id="crop-canvas" style="display: none;"></canvas>
|
||||
|
||||
<div class="zoom-controls">
|
||||
<button type="button" class="btn btn-sm btn-outline" onclick="adjustZoom(-0.25)">{{ 'zoom_out'|t }}</button>
|
||||
<span id="zoom-level">100%</span>
|
||||
<button type="button" class="btn btn-sm btn-outline" onclick="adjustZoom(0.25)">{{ 'zoom_in'|t }}</button>
|
||||
<button type="button" class="btn btn-sm btn-outline" onclick="resetImage()">{{ 'reset'|t }}</button>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('upload_photo') }}" enctype="multipart/form-data" class="photo-upload-form" id="photo-form">
|
||||
<div class="form-group">
|
||||
<label for="photo">{{ 'upload_photo'|t }}</label>
|
||||
<input type="file" id="photo" name="photo" accept="image/*">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-sm btn-primary" id="upload-btn">{{ 'upload'|t }}</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('attendee_profile') }}" class="profile-form">
|
||||
<div class="form-group">
|
||||
<label for="first_name">{{ 'first_name'|t }}</label>
|
||||
<input type="text" id="first_name" name="first_name" value="{{ attendee.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" value="{{ attendee.last_name }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="organisation">{{ 'organisation'|t }}</label>
|
||||
<input type="text" id="organisation" name="organisation" value="{{ attendee.organisation or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="role">{{ 'role_profession'|t }}</label>
|
||||
<input type="text" id="role" name="role" value="{{ attendee.role or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="introduction">{{ 'short_introduction'|t }}</label>
|
||||
<textarea id="introduction" name="introduction" rows="4">{{ attendee.introduction or '' }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">{{ 'update_profile'|t }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.current-photo {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.profile-img {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
cursor: move;
|
||||
}
|
||||
.no-photo, #no-photo {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
}
|
||||
.zoom-controls {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var zoomLevel = 1;
|
||||
var panX = 0;
|
||||
var panY = 0;
|
||||
var isDragging = false;
|
||||
var dragStartX = 0;
|
||||
var dragStartY = 0;
|
||||
var originalImage = null;
|
||||
var containerSize = 150;
|
||||
|
||||
var container, preview, photoInput;
|
||||
|
||||
function init() {
|
||||
container = document.getElementById('photo-container');
|
||||
preview = document.getElementById('profile-preview');
|
||||
photoInput = document.getElementById('photo');
|
||||
|
||||
if (photoInput) {
|
||||
photoInput.addEventListener('change', handleFileSelect);
|
||||
}
|
||||
|
||||
if (container && preview) {
|
||||
container.addEventListener('mousedown', startDrag);
|
||||
document.addEventListener('mousemove', doDrag);
|
||||
document.addEventListener('mouseup', endDrag);
|
||||
container.addEventListener('wheel', handleWheel);
|
||||
}
|
||||
|
||||
document.getElementById('photo-form').addEventListener('submit', handleFormSubmit);
|
||||
}
|
||||
|
||||
function handleFileSelect(e) {
|
||||
var file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(event) {
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
originalImage = img;
|
||||
resetImage();
|
||||
preview.src = event.target.result;
|
||||
preview.style.display = 'block';
|
||||
var noPhoto = document.getElementById('no-photo');
|
||||
if (noPhoto) noPhoto.style.display = 'none';
|
||||
updateDisplay();
|
||||
};
|
||||
img.src = event.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function adjustZoom(delta) {
|
||||
var newZoom = zoomLevel + delta;
|
||||
if (newZoom < 1) newZoom = 1;
|
||||
if (newZoom > 3) newZoom = 3;
|
||||
zoomLevel = newZoom;
|
||||
document.getElementById('zoom-level').textContent = Math.round(zoomLevel * 100) + '%';
|
||||
|
||||
if (zoomLevel === 1) {
|
||||
panX = 0;
|
||||
panY = 0;
|
||||
}
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
function resetImage() {
|
||||
zoomLevel = 1;
|
||||
panX = 0;
|
||||
panY = 0;
|
||||
document.getElementById('zoom-level').textContent = '100%';
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
function updateDisplay() {
|
||||
if (!preview || !originalImage) return;
|
||||
|
||||
var img = originalImage;
|
||||
var imgW = img.naturalWidth;
|
||||
var imgH = img.naturalHeight;
|
||||
var imgAspect = imgW / imgH;
|
||||
|
||||
// Calculate display size (object-fit: cover)
|
||||
var dispW, dispH;
|
||||
if (imgAspect > 1) {
|
||||
dispH = containerSize;
|
||||
dispW = dispH * imgAspect;
|
||||
} else {
|
||||
dispW = containerSize;
|
||||
dispH = dispW / imgAspect;
|
||||
}
|
||||
|
||||
// Center offset for object-fit: cover
|
||||
var offsetX = (containerSize - dispW) / 2;
|
||||
var offsetY = (containerSize - dispH) / 2;
|
||||
|
||||
// Apply pan (drag right = see right side of image)
|
||||
var totalX = offsetX + panX;
|
||||
var totalY = offsetY + panY;
|
||||
|
||||
preview.style.width = dispW + 'px';
|
||||
preview.style.height = dispH + 'px';
|
||||
preview.style.left = totalX + 'px';
|
||||
preview.style.top = totalY + 'px';
|
||||
preview.style.transform = 'scale(' + zoomLevel + ')';
|
||||
preview.style.transformOrigin = 'center center';
|
||||
}
|
||||
|
||||
function startDrag(e) {
|
||||
if (!originalImage) return;
|
||||
isDragging = true;
|
||||
dragStartX = e.clientX - panX;
|
||||
dragStartY = e.clientY - panY;
|
||||
preview.style.cursor = 'grabbing';
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function doDrag(e) {
|
||||
if (!isDragging) return;
|
||||
panX = e.clientX - dragStartX;
|
||||
panY = e.clientY - dragStartY;
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
function endDrag() {
|
||||
isDragging = false;
|
||||
if (preview) preview.style.cursor = 'move';
|
||||
}
|
||||
|
||||
function handleWheel(e) {
|
||||
e.preventDefault();
|
||||
if (e.deltaY < 0) {
|
||||
adjustZoom(0.1);
|
||||
} else {
|
||||
adjustZoom(-0.1);
|
||||
}
|
||||
}
|
||||
|
||||
function handleFormSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!originalImage) {
|
||||
alert('Please select an image first');
|
||||
return;
|
||||
}
|
||||
|
||||
var canvas = document.getElementById('crop-canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
canvas.width = 300;
|
||||
canvas.height = 300;
|
||||
|
||||
var img = originalImage;
|
||||
var imgW = img.naturalWidth;
|
||||
var imgH = img.naturalHeight;
|
||||
var imgAspect = imgW / imgH;
|
||||
|
||||
// Calculate display size (object-fit: cover)
|
||||
var dispW, dispH;
|
||||
if (imgAspect > 1) {
|
||||
dispH = containerSize;
|
||||
dispW = dispH * imgAspect;
|
||||
} else {
|
||||
dispW = containerSize;
|
||||
dispH = dispW / imgAspect;
|
||||
}
|
||||
|
||||
// Centering offsets
|
||||
var offsetX = (containerSize - dispW) / 2;
|
||||
var offsetY = (containerSize - dispH) / 2;
|
||||
|
||||
// Scale factors from display to image coordinates
|
||||
var scaleX = imgW / dispW;
|
||||
var scaleY = imgH / dispH;
|
||||
|
||||
// Source crop region
|
||||
var srcX = (offsetX + panX + containerSize / 2) / (scaleX * zoomLevel) - containerSize / (2 * scaleX);
|
||||
var srcY = (offsetY + panY + containerSize / 2) / (scaleY * zoomLevel) - containerSize / (2 * scaleY);
|
||||
var srcW = containerSize / (scaleX * zoomLevel);
|
||||
var srcH = containerSize / (scaleY * zoomLevel);
|
||||
|
||||
// Clamp to image bounds
|
||||
srcX = Math.max(0, srcX);
|
||||
srcY = Math.max(0, srcY);
|
||||
srcW = Math.min(imgW - srcX, srcW);
|
||||
srcH = Math.min(imgH - srcY, srcH);
|
||||
|
||||
// Draw with circular clip
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.beginPath();
|
||||
ctx.arc(150, 150, 150, 0, Math.PI * 2);
|
||||
ctx.clip();
|
||||
ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, 300, 300);
|
||||
|
||||
canvas.toBlob(function(blob) {
|
||||
var formData = new FormData();
|
||||
formData.append('photo', blob, 'profile.jpg');
|
||||
|
||||
fetch('{{ url_for("upload_photo") }}', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(function(response) {
|
||||
return response.json();
|
||||
}).then(function(data) {
|
||||
if (data.success) {
|
||||
location.reload();
|
||||
} else {
|
||||
alert(data.error || 'Upload failed');
|
||||
}
|
||||
}).catch(function(error) {
|
||||
alert('Error uploading photo');
|
||||
});
|
||||
}, 'image/jpeg', 0.9);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,229 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ 'scan_qr'|t }} - NetEvents{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="scan-page">
|
||||
<div class="scan-header">
|
||||
<h1>{{ 'scan_attendee'|t }}</h1>
|
||||
<p>{{ 'scan_qr_description'|t }}</p>
|
||||
<a href="{{ url_for('attendee_dashboard') }}" class="btn btn-outline">{{ 'back_to_dashboard'|t }}</a>
|
||||
</div>
|
||||
|
||||
<div class="scanner-container">
|
||||
<div id="qr-reader" class="qr-reader"></div>
|
||||
<div id="scan-result" class="scan-result hidden">
|
||||
<div class="result-icon" id="result-icon"></div>
|
||||
<h2 id="result-title"></h2>
|
||||
<p id="result-message"></p>
|
||||
<button id="scan-again" class="btn btn-primary">{{ 'scan_again'|t }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scan-info">
|
||||
<p>{{ 'scan_info_text'|t }}</p>
|
||||
<p><strong>{{ 'scan_info_warning'|t }}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scan-page {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.scan-header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.scan-header h1 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.scan-header p {
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.scanner-container {
|
||||
background: #000;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qr-reader {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qr-reader video {
|
||||
width: 100% !important;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.scan-result {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scan-result.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.result-icon.success::before {
|
||||
content: '✓';
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.result-icon.pending::before {
|
||||
content: '⏳';
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.result-icon.error::before {
|
||||
content: '✗';
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.result-icon.info::before {
|
||||
content: 'ℹ';
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
#result-title {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
#result-message {
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.scan-info {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scan-info p {
|
||||
margin: 10px 0;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.scan-info strong {
|
||||
color: #1e293b;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const myId = {{ session.user_id }};
|
||||
const myEventId = {{ session.event_id }};
|
||||
let html5QrCode;
|
||||
let scanning = true;
|
||||
|
||||
async function sendConnectionRequest(scannedId) {
|
||||
try {
|
||||
const response = await fetch('/attendee/scan-request', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ scanned_id: scannedId })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
const resultDiv = document.getElementById('scan-result');
|
||||
const icon = document.getElementById('result-icon');
|
||||
const title = document.getElementById('result-title');
|
||||
const message = document.getElementById('result-message');
|
||||
|
||||
icon.className = 'result-icon';
|
||||
|
||||
if (data.success) {
|
||||
document.getElementById('qr-reader').style.display = 'none';
|
||||
resultDiv.classList.remove('hidden');
|
||||
icon.classList.add('pending');
|
||||
title.textContent = '{{ "request_sent"|t }}';
|
||||
message.textContent = '{{ "request_sent_message"|t }}';
|
||||
} else {
|
||||
document.getElementById('qr-reader').style.display = 'none';
|
||||
resultDiv.classList.remove('hidden');
|
||||
icon.classList.add('error');
|
||||
title.textContent = '{{ "error"|t }}';
|
||||
message.textContent = data.error || '{{ "failed_send_request"|t }}';
|
||||
}
|
||||
|
||||
scanning = false;
|
||||
} catch (error) {
|
||||
console.error('Connection error:', error);
|
||||
alert('Error sending connection request');
|
||||
}
|
||||
}
|
||||
|
||||
function onScanSuccess(decodedText) {
|
||||
if (!scanning) return;
|
||||
|
||||
// Expected format: "NETEVENT:{event_id}:{attendee_id}"
|
||||
const parts = decodedText.split(':');
|
||||
if (parts.length === 3 && parts[0] === 'NETEVENT') {
|
||||
const eventId = parseInt(parts[1]);
|
||||
const attendeeId = parseInt(parts[2]);
|
||||
|
||||
if (eventId === myEventId) {
|
||||
if (attendeeId === myId) {
|
||||
alert('{{ "cannot_scan_own_qr"|t }}');
|
||||
return;
|
||||
}
|
||||
sendConnectionRequest(attendeeId);
|
||||
} else {
|
||||
alert('{{ "qr_different_event"|t }}');
|
||||
}
|
||||
} else {
|
||||
console.log('Unknown QR format:', decodedText);
|
||||
alert('{{ "unrecognized_qr"|t }}');
|
||||
}
|
||||
}
|
||||
|
||||
function startScanner() {
|
||||
html5QrCode = new Html5Qrcode("qr-reader");
|
||||
|
||||
html5QrCode.start(
|
||||
{ facingMode: "environment" },
|
||||
{
|
||||
fps: 10,
|
||||
qrbox: { width: 250, height: 250 }
|
||||
},
|
||||
onScanSuccess,
|
||||
(errorMessage) => {
|
||||
// Ignore scan errors
|
||||
}
|
||||
).catch(err => {
|
||||
console.error('Camera error:', err);
|
||||
alert('{{ "camera_permission_error"|t }}');
|
||||
});
|
||||
}
|
||||
|
||||
function resetScanner() {
|
||||
document.getElementById('qr-reader').style.display = 'block';
|
||||
document.getElementById('scan-result').classList.add('hidden');
|
||||
scanning = true;
|
||||
}
|
||||
|
||||
document.getElementById('scan-again').addEventListener('click', resetScanner);
|
||||
|
||||
window.addEventListener('DOMContentLoaded', startScanner);
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user