Spaces:
Running
Running
| /** | |
| * UrbanFlow — templates.js | |
| * Stores large HTML string templates extracted from shared.js and auth.js | |
| */ | |
| const TEMPLATES = { | |
| authOverlay: ` | |
| <div class="auth-card"> | |
| <div class="auth-card-header"> | |
| <h2 class="auth-title">Sign In</h2> | |
| <p class="auth-subtitle">Authenticate with your Google account to continue</p> | |
| </div> | |
| <div id="auth-google-btn" class="auth-google-btn"></div> | |
| <p class="auth-error hidden"></p> | |
| <p class="auth-footer">Your data is handled per our <button onclick="openAppModal('privacyModal')" class="auth-link">Privacy Policy</button></p> | |
| </div> | |
| `, | |
| authGoogleBtn: ` | |
| <button class="gsi-custom-btn" onclick="_triggerGoogleSignInPopup()"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/> | |
| <path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/> | |
| <path fill="#FBBC05" d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"/> | |
| <path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z"/> | |
| </svg> | |
| <span>Continue with Google</span> | |
| </button> | |
| `, | |
| logoutModal: ` | |
| <div class="auth-card" style="max-width:340px"> | |
| <h2 class="auth-title" style="margin-bottom:8px">Sign Out</h2> | |
| <p class="auth-subtitle" style="margin-bottom:24px">Are you sure you want to sign out of UrbanFlow?</p> | |
| <div style="display:flex;gap:12px"> | |
| <button onclick="hideLogoutConfirm()" class="auth-cancel-btn" style="flex:1;text-align:center;padding:12px 0">Cancel</button> | |
| <button onclick="executeLogout()" style="flex:1;padding:12px 0;background:rgba(220,38,38,0.15);color:#ef4444;border:1px solid rgba(220,38,38,0.4);border-radius:10px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:background 0.2s" onmouseover="this.style.background='rgba(220,38,38,0.3)'" onmouseout="this.style.background='rgba(220,38,38,0.15)'">Yes</button> | |
| </div> | |
| </div> | |
| `, | |
| consentModal: ` | |
| <div class="auth-card" style="max-width:400px"> | |
| <div style="text-align:center;margin-bottom:20px"> | |
| <i class="fa-solid fa-shield-halved" style="font-size:28px;color:var(--cocoa-l);margin-bottom:12px;display:block"></i> | |
| <h2 class="auth-title" style="margin-bottom:6px">Before you continue</h2> | |
| <p class="auth-subtitle" style="margin-bottom:0">Please review and accept our policies to use UrbanFlow.</p> | |
| </div> | |
| <label id="consent-label" style="display:flex;align-items:flex-start;gap:12px;padding:16px;background:#111;border:1px solid #222;border-radius:12px;cursor:pointer;margin-bottom:20px;transition:border-color 0.2s"> | |
| <input type="checkbox" id="consent-checkbox" onchange="onConsentCheckboxChange()" style="margin-top:3px;accent-color:var(--cocoa-l);width:18px;height:18px;flex-shrink:0;cursor:pointer"> | |
| <span style="font-size:12px;color:#a89f97;line-height:1.6"> | |
| I have read and agree to the | |
| <button onclick="event.preventDefault();openAppModal('privacyModal')" style="color:var(--cocoa-l);background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:700;text-decoration:underline;padding:0">Privacy Policy</button> | |
| and | |
| <button onclick="event.preventDefault();openAppModal('termsModal')" style="color:var(--cocoa-l);background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:700;text-decoration:underline;padding:0">Terms & Conditions</button>. | |
| </span> | |
| </label> | |
| <button id="consent-accept-btn" onclick="acceptConsent()" disabled | |
| style="width:100%;padding:14px 0;background:#1a1a1a;color:#555;border:1px solid #222;border-radius:12px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;cursor:not-allowed;transition:all 0.3s"> | |
| Agree & Continue | |
| </button> | |
| </div> | |
| ` | |
| }; | |
| function getPrivacyModalTemplate(p) { | |
| return ` | |
| <div id="appModal-privacyModal" class="modal-overlay" onclick="if(event.target===this)closeAppModal('privacyModal')"> | |
| <div class="modal-card" style="max-width: 600px; max-height: 85vh; overflow-y: auto;"> | |
| <button class="modal-close-btn" onclick="closeAppModal('privacyModal')">×</button> | |
| <h2 class="modal-title">${p.title}</h2> | |
| <p class="modal-subtitle mb-6" style="margin-bottom: 24px;">${p.subtitle}</p> | |
| <div class="legal-document text-xs text-slate-300 space-y-4" style="line-height: 1.6; font-size: 12px; color: #cbd5e1; display: flex; flex-direction: column; gap: 16px; text-align: left;"> | |
| ${p.content} | |
| </div> | |
| </div> | |
| </div>`; | |
| } | |
| function getTermsModalTemplate(t) { | |
| return ` | |
| <div id="appModal-termsModal" class="modal-overlay" onclick="if(event.target===this)closeAppModal('termsModal')"> | |
| <div class="modal-card" style="max-width: 600px; max-height: 85vh; overflow-y: auto;"> | |
| <button class="modal-close-btn" onclick="closeAppModal('termsModal')">×</button> | |
| <h2 class="modal-title">${t.title}</h2> | |
| <p class="modal-subtitle mb-6" style="margin-bottom: 24px;">${t.subtitle}</p> | |
| <div class="legal-document text-xs text-slate-300 space-y-4" style="line-height: 1.6; font-size: 12px; color: #cbd5e1; display: flex; flex-direction: column; gap: 16px; text-align: left;"> | |
| ${t.content} | |
| </div> | |
| </div> | |
| </div>`; | |
| } | |
| function getShortcutsModalTemplate(rows) { | |
| return ` | |
| <div id="appModal-shortcutsModal" class="modal-overlay" onclick="if(event.target===this)closeAppModal('shortcutsModal')"> | |
| <div class="modal-card modal-card-sm"> | |
| <button class="modal-close-btn" onclick="closeAppModal('shortcutsModal')">×</button> | |
| <h2 class="modal-title" style="font-size:1rem"> | |
| <i class="fa-solid fa-keyboard text-accent" style="margin-right:6px"></i>Keyboard Shortcuts | |
| </h2> | |
| <p class="text-muted" style="font-size:10px;margin-bottom:16px">Navigate faster with these shortcuts</p> | |
| <div style="display:flex;flex-direction:column;gap:8px">${rows}</div> | |
| <p style="color:#333;font-size:9px;margin-top:14px;text-align:center">Press <strong style="color:#555">Esc</strong> to close</p> | |
| </div> | |
| </div>`; | |
| }; | |
| function getOnboardFormTemplate(user) { | |
| return ` | |
| <div class="auth-card-header"> | |
| <img src="${user.picture}" alt="" class="auth-avatar" referrerpolicy="no-referrer"> | |
| <h2 class="auth-title">Welcome</h2> | |
| <p class="auth-subtitle">Choose a display name for your account</p> | |
| </div> | |
| <div class="auth-onboard-form"> | |
| <label class="auth-label">Display Name</label> | |
| <input id="auth-username-input" type="text" class="auth-input" maxlength="30" | |
| placeholder="e.g. Aarav" value="${user.name.split(' ')[0] || ''}" autocomplete="off"> | |
| <p id="auth-onboard-error" class="auth-error hidden"></p> | |
| <button id="auth-onboard-submit" class="auth-submit-btn" onclick="_submitOnboarding()"> | |
| Continue | |
| </button> | |
| </div> | |
| `; | |
| } | |