Update templates and styles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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 %}

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 {

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) {

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 %}