From 335658f2bf494c7069816711b6c7d1e0c435c96b Mon Sep 17 00:00:00 2001
From: Paul Bokel <paul.bokel@gmail.com>
Date: Wed, 29 Apr 2026 15:21:10 +0000
Subject: [PATCH] Update templates and styles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 static/css/style.css                      | 18 ++++++++++++++++++
 templates/attendee/breakout_sessions.html | 16 +++++++++++++---
 templates/attendee/personal.html          |  2 +-
 templates/attendee/profile.html           | 20 +++++++++++++-------
 templates/attendee/request_link.html      | 22 ++++++++++++++++++++++
 templates/auth/login.html                 |  5 +++++
 templates/base.html                       |  1 +
 templates/index.html                      | 12 ++++--------
 8 files changed, 77 insertions(+), 19 deletions(-)
 create mode 100644 templates/attendee/request_link.html

diff --git a/static/css/style.css b/static/css/style.css
index 05cd132..0f03ff0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -325,6 +325,24 @@ main {
     color: var(--text-muted);
 }
 
+.attendee-link-box {
+    background-color: #f0f7ff;
+    border: 2px solid var(--primary-color);
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+    text-align: center;
+}
+
+.attendee-link-box p {
+    margin: 0;
+    color: var(--text-color);
+}
+
+.attendee-link-box a {
+    color: var(--primary-color);
+}
+
 /* Forms */
 .form-group {
     margin-bottom: 1.25rem;
diff --git a/templates/attendee/breakout_sessions.html b/templates/attendee/breakout_sessions.html
index 28c4f57..86348ea 100644
--- a/templates/attendee/breakout_sessions.html
+++ b/templates/attendee/breakout_sessions.html
@@ -2,6 +2,16 @@
 
 {% block title %}{{ 'breakout_sessions'|t }} - {{ event.name }}{% endblock %}
 
+{% block extra_styles %}
+<style>
+.breakout-sessions {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 50px 40px;
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="breakout-sessions">
     <h1>{{ 'breakout_sessions'|t }} - {{ event.name }}</h1>
@@ -35,12 +45,12 @@
                 </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>
+                        <button class="btn btn-secondary rsvp-btn" data-session-code="{{ session.code }}" 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>
+                        <button class="btn btn-primary rsvp-btn" data-session-code="{{ session.code }}" 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>
+                            <button class="btn btn-primary rsvp-btn" data-session-code="{{ session.code }}" data-action="rsvp">{{ 'rsvp'|t }}</button>
                         {% else %}
                             <span class="full-label">{{ 'session_full'|t }}</span>
                         {% endif %}
diff --git a/templates/attendee/personal.html b/templates/attendee/personal.html
index a1afe75..7ab07e3 100644
--- a/templates/attendee/personal.html
+++ b/templates/attendee/personal.html
@@ -56,7 +56,7 @@
 .personal-page {
     max-width: 900px;
     margin: 0 auto;
-    padding: 30px 25px;
+    padding: 50px 40px;
 }
 
 .personal-page h1 {
diff --git a/templates/attendee/profile.html b/templates/attendee/profile.html
index dd3fe94..4a9a0a2 100644
--- a/templates/attendee/profile.html
+++ b/templates/attendee/profile.html
@@ -230,6 +230,10 @@ function updateDisplay() {
         offsetY = (containerSize - dispH) / 2;
     }
 
+    // Explicitly set layout dimensions so transform origin centers correctly
+    preview.style.width = dispW + 'px';
+    preview.style.height = dispH + 'px';
+
     preview.style.transform = 'translate(' + (translateX + offsetX) + 'px, ' + (translateY + offsetY) + 'px) scale(' + zoomLevel + ')';
 }
 
@@ -288,7 +292,6 @@ function handleFormSubmit(e) {
     var imgW = img.naturalWidth;
     var imgH = img.naturalHeight;
 
-    // Calculate how the image fits in the container (object-fit: cover)
     var scale, dispW, dispH, offsetX, offsetY;
     if (imgW >= imgH) {
         scale = containerSize / imgH;
@@ -304,21 +307,24 @@ function handleFormSubmit(e) {
         offsetY = (containerSize - dispH) / 2;
     }
 
-    // Display: translate(translateX + offsetX, translateY + offsetY) scale(zoomLevel)
-    // Container pixel (cx, cy) maps to source: sx = (cx - offsetX - translateX) / scale
-    // So container pixel (0,0) maps to source: srcX = -(offsetX + translateX) / scale
-    var srcX = -(offsetX + translateX) / scale;
-    var srcY = -(offsetY + translateY) / scale;
+    // NEW CROP CALCULATION
+    // Display: translate(translateX + offsetX, translateY + offsetY) scale(zoomLevel) with transform-origin: center
+    // Container pixel (cx, cy) maps to element point: (cx - tx - ox) / zoom + (ox + dispW/2)
+    // Element point maps to source: element_point / scale
+    // Simplifying: srcX = (cx - tx - ox) / zoom / scale + dispW/2 / scale
+    var srcX = (0 - translateX - offsetX) / scale / zoomLevel + dispW / 2 / scale;
+    var srcY = (0 - translateY - offsetY) / scale / zoomLevel + dispH / 2 / scale;
     var srcW = containerSize / scale / zoomLevel;
     var srcH = containerSize / scale / zoomLevel;
 
-    // Clamp to image bounds
+    // Clamp to image bounds to prevent out-of-bounds transparent drawing
     srcX = Math.max(0, Math.min(srcX, imgW - srcW));
     srcY = Math.max(0, Math.min(srcY, imgH - srcH));
     srcW = Math.min(srcW, imgW - srcX);
     srcH = Math.min(srcH, imgH - srcY);
 
     ctx.clearRect(0, 0, 300, 300);
+    // Draw exactly the visible area scaled up to the 300x300 canvas
     ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, 300, 300);
 
     canvas.toBlob(function(blob) {
diff --git a/templates/attendee/request_link.html b/templates/attendee/request_link.html
new file mode 100644
index 0000000..1e4d3ce
--- /dev/null
+++ b/templates/attendee/request_link.html
@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{% block title %}{{ 'request_profile_link'|t }} - NetEvents{% endblock %}
+
+{% block content %}
+<div class="auth-container">
+    <div class="auth-box">
+        <h2>{{ 'request_profile_link'|t }}</h2>
+        <p class="info-text">{{ 'request_link_description'|t }}</p>
+
+        <form method="POST" action="{{ url_for('request_attendee_link') }}">
+            <div class="form-group">
+                <label for="email">{{ 'email'|t }}</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+
+            <button type="submit" class="btn btn-primary btn-block">{{ 'send_link'|t }}</button>
+        </form>
+
+            </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/auth/login.html b/templates/auth/login.html
index 1427de9..b077e3c 100644
--- a/templates/auth/login.html
+++ b/templates/auth/login.html
@@ -27,6 +27,11 @@
             {{ 'dont_have_account'|t }}
             <a href="{{ url_for('register_organizer') }}">{{ 'register_as_organizer'|t }}</a>
         </p>
+
+        <div class="attendee-link-box">
+            <p>{{ 'attendee_profile_link'|t }}</p>
+            <p><a href="{{ url_for('request_attendee_link') }}"><strong>{{ 'click_here'|t }}</strong></a></p>
+        </div>
     </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 4718f94..cc6fe04 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -52,5 +52,6 @@
     </footer>
 
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    {% block extra_styles %}{% endblock %}
 </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index 453be74..45254f1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,21 +3,16 @@
 {% block title %}{{ 'welcome'|t }} - NetEvents{% endblock %}
 
 {% block content %}
+<div class="container">
 <div class="hero">
     <h1>{{ 'welcome'|t }}</h1>
     <p>{{ 'connect_with_professionals'|t }}</p>
     {% if not session.user_id %}
         <div class="hero-buttons">
-            <a href="{{ url_for('register_organizer') }}" class="btn btn-primary">{{ 'register_as_organizer'|t }}</a>
+            <p>{{ 'not_yet_registered'|t }} <a href="{{ url_for('register_organizer') }}">{{ 'register_for_free'|t }}</a></p>
         </div>
         <div class="login-options">
-            <p>{{ 'already_have_account'|t }}</p>
-            <div class="login-buttons">
-                <a href="{{ url_for('login') }}?type=breakout_organizer" class="btn btn-outline">{{ 'presenter'|t }}</a>
-                <a href="{{ url_for('login') }}?type=staff" class="btn btn-outline">{{ 'staff'|t }}</a>
-                <a href="{{ url_for('login') }}?type=attendee" class="btn btn-outline">{{ 'visitor'|t }}</a>
-                <a href="{{ url_for('login') }}?type=organizer" class="btn btn-outline">{{ 'organiser'|t }}</a>
-            </div>
+            <p>{{ 'already_have_account'|t }} <a href="{{ url_for('login') }}?type=organizer">{{ 'login_as_organiser'|t }}</a></p>
         </div>
     {% endif %}
 </div>
@@ -72,4 +67,5 @@
     </div>
 </section>
 {% endif %}
+</div>
 {% endblock %}