| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Party Planner - Guest Table Arranger</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| color: #333; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 20px; |
| } |
| |
| .header { |
| text-align: center; |
| color: white; |
| margin-bottom: 40px; |
| } |
| |
| .header h1 { |
| font-size: 2.5rem; |
| margin-bottom: 10px; |
| font-weight: 300; |
| } |
| |
| .header p { |
| font-size: 1.1rem; |
| opacity: 0.9; |
| } |
| |
| .card { |
| background: white; |
| border-radius: 12px; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
| padding: 30px; |
| margin-bottom: 30px; |
| } |
| |
| .upload-form { |
| max-width: 500px; |
| margin: 0 auto; |
| } |
| |
| .form-group { |
| margin-bottom: 20px; |
| } |
| |
| .form-group label { |
| display: block; |
| margin-bottom: 8px; |
| font-weight: 500; |
| color: #333; |
| } |
| |
| .file-upload-container { |
| border: 2px dashed #667eea; |
| border-radius: 8px; |
| padding: 40px 20px; |
| text-align: center; |
| background: #f8f9ff; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .file-upload-container:hover { |
| border-color: #5a6fd8; |
| background: #f0f2ff; |
| } |
| |
| .file-upload-container.dragover { |
| border-color: #5a6fd8; |
| background: #e8ecff; |
| } |
| |
| .file-upload-icon { |
| font-size: 3rem; |
| color: #667eea; |
| margin-bottom: 15px; |
| } |
| |
| .file-upload-text { |
| font-size: 1.1rem; |
| color: #667eea; |
| margin-bottom: 10px; |
| } |
| |
| .file-upload-hint { |
| font-size: 0.9rem; |
| color: #666; |
| } |
| |
| .file-input { |
| display: none; |
| } |
| |
| .btn { |
| background: #667eea; |
| color: white; |
| border: none; |
| padding: 12px 24px; |
| border-radius: 8px; |
| font-size: 16px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: background-color 0.3s ease; |
| width: 100%; |
| } |
| |
| .btn:hover { |
| background: #5a6fd8; |
| } |
| |
| .btn:disabled { |
| background: #ccc; |
| cursor: not-allowed; |
| } |
| |
| .btn-secondary { |
| background: #6c757d; |
| } |
| |
| .btn-secondary:hover { |
| background: #545b62; |
| } |
| |
| .btn-success { |
| background: #28a745; |
| } |
| |
| .btn-success:hover { |
| background: #1e7e34; |
| } |
| |
| .guests-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 20px; |
| margin-bottom: 30px; |
| } |
| |
| .guest-card { |
| border: 2px solid #e1e5e9; |
| border-radius: 8px; |
| padding: 20px; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .guest-card:hover { |
| border-color: #667eea; |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); |
| } |
| |
| .guest-card.selected { |
| border-color: #667eea; |
| background: #f8f9ff; |
| } |
| |
| .guest-checkbox { |
| margin-right: 12px; |
| transform: scale(1.2); |
| } |
| |
| .guest-name { |
| font-weight: 600; |
| font-size: 1.1rem; |
| margin-bottom: 8px; |
| color: #667eea; |
| } |
| |
| .guest-title { |
| color: #666; |
| font-size: 0.9rem; |
| line-height: 1.4; |
| } |
| |
| .tables-container { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); |
| gap: 40px; |
| margin-top: 30px; |
| } |
| |
| .table-card { |
| background: #f8f9fa; |
| border-radius: 12px; |
| padding: 25px; |
| border: 2px solid #e1e5e9; |
| } |
| |
| .table-header { |
| text-align: center; |
| margin-bottom: 30px; |
| padding-bottom: 15px; |
| border-bottom: 2px solid #667eea; |
| } |
| |
| .table-title { |
| font-size: 1.3rem; |
| font-weight: 600; |
| color: #667eea; |
| margin-bottom: 5px; |
| } |
| |
| .table-count { |
| color: #666; |
| font-size: 0.9rem; |
| } |
| |
| .circular-table { |
| position: relative; |
| width: 300px; |
| height: 300px; |
| margin: 0 auto 30px; |
| border-radius: 50%; |
| background: linear-gradient(145deg, #e6e6e6, #ffffff); |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); |
| border: 3px solid #667eea; |
| } |
| |
| .table-center { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 60px; |
| height: 60px; |
| background: #667eea; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-weight: 600; |
| font-size: 0.9rem; |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| } |
| |
| .seat { |
| position: absolute; |
| width: 50px; |
| height: 50px; |
| background: #28a745; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-size: 0.7rem; |
| font-weight: 600; |
| text-align: center; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .seat:hover { |
| transform: scale(1.1); |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); |
| } |
| |
| .seat-info { |
| position: absolute; |
| bottom: -60px; |
| left: 50%; |
| transform: translateX(-50%); |
| background: #333; |
| color: white; |
| padding: 8px 12px; |
| border-radius: 6px; |
| font-size: 0.8rem; |
| white-space: nowrap; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| pointer-events: none; |
| z-index: 10; |
| } |
| |
| .seat-info::before { |
| content: ''; |
| position: absolute; |
| top: -5px; |
| left: 50%; |
| transform: translateX(-50%); |
| border-left: 5px solid transparent; |
| border-right: 5px solid transparent; |
| border-bottom: 5px solid #333; |
| } |
| |
| .seat:hover .seat-info { |
| opacity: 1; |
| } |
| |
| .stats-panel { |
| background: #667eea; |
| color: white; |
| padding: 20px; |
| border-radius: 12px; |
| margin-bottom: 30px; |
| text-align: center; |
| } |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| gap: 20px; |
| margin-top: 15px; |
| } |
| |
| .stat-item { |
| text-align: center; |
| } |
| |
| .stat-number { |
| font-size: 2rem; |
| font-weight: 600; |
| margin-bottom: 5px; |
| } |
| |
| .stat-label { |
| font-size: 0.9rem; |
| opacity: 0.9; |
| } |
| |
| .loading { |
| text-align: center; |
| padding: 40px; |
| color: #666; |
| } |
| |
| .spinner { |
| border: 4px solid #f3f3f3; |
| border-top: 4px solid #667eea; |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| animation: spin 1s linear infinite; |
| margin: 0 auto 20px; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .error-message { |
| background: #f8d7da; |
| color: #721c24; |
| padding: 15px; |
| border-radius: 8px; |
| margin-bottom: 20px; |
| border: 1px solid #f5c6cb; |
| } |
| |
| .success-message { |
| background: #d4edda; |
| color: #155724; |
| padding: 15px; |
| border-radius: 8px; |
| margin-bottom: 20px; |
| border: 1px solid #c3e6cb; |
| } |
| |
| .csv-format-info { |
| background: #e7f3ff; |
| border: 1px solid #b3d9ff; |
| border-radius: 8px; |
| padding: 20px; |
| margin-bottom: 20px; |
| } |
| |
| .csv-format-info h3 { |
| color: #0056b3; |
| margin-bottom: 10px; |
| } |
| |
| .csv-format-info ul { |
| margin-left: 20px; |
| color: #333; |
| } |
| |
| .csv-format-info li { |
| margin-bottom: 5px; |
| } |
| |
| .hidden { |
| display: none; |
| } |
| |
| @media (max-width: 768px) { |
| .container { |
| padding: 10px; |
| } |
| |
| .header h1 { |
| font-size: 2rem; |
| } |
| |
| .guests-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .tables-container { |
| grid-template-columns: 1fr; |
| } |
| |
| .circular-table { |
| width: 250px; |
| height: 250px; |
| } |
| |
| .seat { |
| width: 40px; |
| height: 40px; |
| font-size: 0.6rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <h1>Party Planner</h1> |
| <p>Upload your guest list and arrange them into perfect networking tables</p> |
| </div> |
|
|
| |
| <div class="card" id="uploadSection"> |
| <div class="upload-form"> |
| <div class="csv-format-info"> |
| <h3>📋 CSV Format Requirements</h3> |
| <ul> |
| <li>Your CSV should have exactly 2 columns: name and message</li> |
| <li>The first column should contain guest names</li> |
| <li>The second column should contain descriptions, roles, or messages</li> |
| <li>Entries with blank names or descriptions will be automatically filtered out</li> |
| <li>No limit on the number of guests - tables will be created as needed</li> |
| </ul> |
| </div> |
|
|
| <div class="form-group"> |
| <div class="file-upload-container" id="fileUploadContainer"> |
| <div class="file-upload-icon">📁</div> |
| <div class="file-upload-text">Click to upload or drag and drop</div> |
| <div class="file-upload-hint">CSV files only</div> |
| <input type="file" id="csvFile" class="file-input" accept=".csv" /> |
| </div> |
| </div> |
|
|
| <button class="btn" id="uploadBtn" disabled>Upload Guest List</button> |
| </div> |
| </div> |
|
|
| |
| <div class="card hidden" id="loadingSection"> |
| <div class="loading"> |
| <div class="spinner"></div> |
| <p>Processing your guest list...</p> |
| </div> |
| </div> |
|
|
| |
| <div class="card hidden" id="guestSection"> |
| <h2 style="margin-bottom: 20px; color: #667eea;">Select Guests for Your Event</h2> |
| |
| <div class="stats-panel"> |
| <div class="stats-grid"> |
| <div class="stat-item"> |
| <div class="stat-number" id="totalGuests">0</div> |
| <div class="stat-label">Total Guests</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-number" id="selectedGuests">0</div> |
| <div class="stat-label">Selected</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-number" id="remainingSlots">0</div> |
| <div class="stat-label">Tables Needed</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div style="text-align: center; margin-bottom: 20px;"> |
| <button class="btn btn-secondary" id="selectAllBtn" style="width: auto; margin-right: 10px;">Select All</button> |
| <button class="btn btn-secondary" id="deselectAllBtn" style="width: auto;">Deselect All</button> |
| </div> |
|
|
| <div class="guests-grid" id="guestsGrid"> |
| |
| </div> |
|
|
| <div style="text-align: center; margin-top: 30px;"> |
| <button class="btn btn-success" id="arrangeBtn" disabled>Arrange Tables</button> |
| </div> |
| </div> |
|
|
| |
| <div class="card hidden" id="tablesSection"> |
| <h2 style="margin-bottom: 20px; color: #667eea;">Your Event Tables</h2> |
| |
| <div class="tables-container" id="tablesContainer"> |
| |
| </div> |
|
|
| <div style="text-align: center; margin-top: 30px;"> |
| <button class="btn btn-secondary" id="backToGuestsBtn">Back to Guest Selection</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| let guests = []; |
| let selectedGuests = []; |
| |
| |
| const fileUploadContainer = document.getElementById('fileUploadContainer'); |
| const csvFileInput = document.getElementById('csvFile'); |
| const uploadBtn = document.getElementById('uploadBtn'); |
| |
| fileUploadContainer.addEventListener('click', () => { |
| csvFileInput.click(); |
| }); |
| |
| fileUploadContainer.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| fileUploadContainer.classList.add('dragover'); |
| }); |
| |
| fileUploadContainer.addEventListener('dragleave', () => { |
| fileUploadContainer.classList.remove('dragover'); |
| }); |
| |
| fileUploadContainer.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| fileUploadContainer.classList.remove('dragover'); |
| |
| const files = e.dataTransfer.files; |
| if (files.length > 0) { |
| csvFileInput.files = files; |
| handleFileSelect(); |
| } |
| }); |
| |
| csvFileInput.addEventListener('change', handleFileSelect); |
| |
| function handleFileSelect() { |
| const file = csvFileInput.files[0]; |
| if (file) { |
| uploadBtn.disabled = false; |
| fileUploadContainer.querySelector('.file-upload-text').textContent = `Selected: ${file.name}`; |
| } else { |
| uploadBtn.disabled = true; |
| fileUploadContainer.querySelector('.file-upload-text').textContent = 'Click to upload or drag and drop'; |
| } |
| } |
| |
| uploadBtn.addEventListener('click', uploadCSV); |
| |
| async function uploadCSV() { |
| const file = csvFileInput.files[0]; |
| if (!file) return; |
| |
| const formData = new FormData(); |
| formData.append('file', file); |
| |
| showSection('loadingSection'); |
| |
| try { |
| const response = await fetch('/upload-csv', { |
| method: 'POST', |
| body: formData |
| }); |
| |
| const result = await response.json(); |
| |
| if (result.success) { |
| guests = result.guests; |
| selectedGuests = []; |
| displayGuests(); |
| showSection('guestSection'); |
| showMessage(result.message, 'success'); |
| } else { |
| showSection('uploadSection'); |
| showMessage(result.error, 'error'); |
| } |
| } catch (error) { |
| showSection('uploadSection'); |
| showMessage('Upload failed. Please try again.', 'error'); |
| } |
| } |
| |
| function displayGuests() { |
| const guestsGrid = document.getElementById('guestsGrid'); |
| guestsGrid.innerHTML = ''; |
| |
| guests.forEach(guest => { |
| const guestCard = document.createElement('div'); |
| guestCard.className = 'guest-card'; |
| guestCard.onclick = () => toggleGuestSelection(guest); |
| |
| guestCard.innerHTML = ` |
| <input type="checkbox" class="guest-checkbox" ${selectedGuests.includes(guest.id) ? 'checked' : ''}> |
| <div class="guest-name">${guest.name}</div> |
| <div class="guest-title">${guest.title}</div> |
| `; |
| |
| guestsGrid.appendChild(guestCard); |
| }); |
| |
| updateStats(); |
| } |
| |
| function toggleGuestSelection(guest) { |
| const index = selectedGuests.indexOf(guest.id); |
| if (index > -1) { |
| selectedGuests.splice(index, 1); |
| } else { |
| selectedGuests.push(guest.id); |
| } |
| |
| displayGuests(); |
| } |
| |
| function updateStats() { |
| document.getElementById('totalGuests').textContent = guests.length; |
| document.getElementById('selectedGuests').textContent = selectedGuests.length; |
| |
| |
| const numTables = Math.ceil(selectedGuests.length / 10); |
| document.getElementById('remainingSlots').textContent = numTables; |
| |
| document.getElementById('arrangeBtn').disabled = selectedGuests.length === 0; |
| } |
| |
| document.getElementById('arrangeBtn').addEventListener('click', arrangeTables); |
| |
| async function arrangeTables() { |
| const selectedGuestObjects = guests.filter(guest => selectedGuests.includes(guest.id)); |
| |
| try { |
| const response = await fetch('/arrange-tables', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify({ |
| selected_guests: selectedGuestObjects |
| }) |
| }); |
| |
| const result = await response.json(); |
| |
| if (result.success) { |
| displayTables(result.tables); |
| showSection('tablesSection'); |
| } else { |
| showMessage(result.error, 'error'); |
| } |
| } catch (error) { |
| showMessage('Failed to arrange tables. Please try again.', 'error'); |
| } |
| } |
| |
| function displayTables(tables) { |
| const tablesContainer = document.getElementById('tablesContainer'); |
| tablesContainer.innerHTML = ''; |
| |
| tables.forEach((table, index) => { |
| const tableCard = document.createElement('div'); |
| tableCard.className = 'table-card'; |
| |
| |
| const circularTable = createCircularTable(table, index + 1); |
| |
| tableCard.innerHTML = ` |
| <div class="table-header"> |
| <div class="table-title">Table ${index + 1}</div> |
| <div class="table-count">${table.length} guests</div> |
| </div> |
| ${circularTable} |
| `; |
| |
| tablesContainer.appendChild(tableCard); |
| }); |
| } |
| |
| function createCircularTable(guests, tableNumber) { |
| if (guests.length === 0) { |
| return '<div class="circular-table"><div class="table-center">Empty</div></div>'; |
| } |
| |
| const tableRadius = 120; |
| const seatRadius = 25; |
| const centerX = 150; |
| const centerY = 150; |
| |
| let tableHTML = ` |
| <div class="circular-table"> |
| <div class="table-center">Table ${tableNumber}</div> |
| `; |
| |
| |
| guests.forEach((guest, index) => { |
| const angle = (index / guests.length) * 2 * Math.PI - Math.PI / 2; |
| const x = centerX + tableRadius * Math.cos(angle); |
| const y = centerY + tableRadius * Math.sin(angle); |
| |
| |
| const initials = guest.name.split(' ').map(n => n[0]).join('').toUpperCase(); |
| |
| tableHTML += ` |
| <div class="seat" style="left: ${x - seatRadius}px; top: ${y - seatRadius}px;"> |
| ${initials} |
| <div class="seat-info"> |
| <strong>${guest.name}</strong><br> |
| ${guest.title} |
| </div> |
| </div> |
| `; |
| }); |
| |
| tableHTML += '</div>'; |
| return tableHTML; |
| } |
| |
| document.getElementById('backToGuestsBtn').addEventListener('click', () => { |
| showSection('guestSection'); |
| }); |
| |
| function showSection(sectionId) { |
| document.querySelectorAll('.card').forEach(card => { |
| card.classList.add('hidden'); |
| }); |
| document.getElementById(sectionId).classList.remove('hidden'); |
| } |
| |
| function showMessage(message, type) { |
| const existingMessage = document.querySelector('.error-message, .success-message'); |
| if (existingMessage) { |
| existingMessage.remove(); |
| } |
| |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = type === 'error' ? 'error-message' : 'success-message'; |
| messageDiv.textContent = message; |
| |
| const container = document.querySelector('.container'); |
| container.insertBefore(messageDiv, container.firstChild); |
| |
| setTimeout(() => { |
| messageDiv.remove(); |
| }, 5000); |
| } |
| |
| document.getElementById('selectAllBtn').addEventListener('click', () => { |
| selectedGuests = guests.map(guest => guest.id); |
| displayGuests(); |
| }); |
| |
| document.getElementById('deselectAllBtn').addEventListener('click', () => { |
| selectedGuests = []; |
| displayGuests(); |
| }); |
| </script> |
| </body> |
| </html> |
