Update templates and styles

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

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;

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)
+    // NEW CROP CALCULATION
-    // Container pixel (cx, cy) maps to source: sx = (cx - offsetX - translateX) / scale
+    // Display: translate(translateX + offsetX, translateY + offsetY) scale(zoomLevel) with transform-origin: center
-    // So container pixel (0,0) maps to source: srcX = -(offsetX + translateX) / scale
+    // Container pixel (cx, cy) maps to element point: (cx - tx - ox) / zoom + (ox + dispW/2)
-    var srcX = -(offsetX + translateX) / scale;
+    // Element point maps to source: element_point / scale
-    var srcY = -(offsetY + translateY) / 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 %}

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

templates/base.html

@@ -52,5 +52,6 @@
     </footer>
 
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    {% block extra_styles %}{% endblock %}
 </body>
 </html>

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>
+            <p>{{ 'already_have_account'|t }} <a href="{{ url_for('login') }}?type=organizer">{{ 'login_as_organiser'|t }}</a></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>
         </div>
     {% endif %}
 </div>
@@ -72,4 +67,5 @@
     </div>
 </section>
 {% endif %}
+</div>
 {% endblock %}