Initial commit: SIBU 2.0 MISSION
This commit is contained in:
720
frontend/src/views/ProfileView.vue
Normal file
720
frontend/src/views/ProfileView.vue
Normal file
@ -0,0 +1,720 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useCouponStore } from '@/stores/coupon'
|
||||
import { authService } from '@/services/authService'
|
||||
|
||||
const router = useRouter()
|
||||
const couponStore = useCouponStore()
|
||||
|
||||
const userName = ref(localStorage.getItem('user_name') || 'Usuario')
|
||||
const userEmail = ref(localStorage.getItem('user_email') || '')
|
||||
const userRole = ref(localStorage.getItem('user_role') || 'PASSENGER')
|
||||
const userPhoto = ref(localStorage.getItem('profile_photo_url') || '')
|
||||
|
||||
const showQRModal = ref(false)
|
||||
const showEditModal = ref(false)
|
||||
const isUpdating = ref(false)
|
||||
const selectedCode = ref('')
|
||||
const selectedTitle = ref('')
|
||||
|
||||
// Edit Form
|
||||
const editForm = ref({
|
||||
full_name: userName.value,
|
||||
password: '',
|
||||
profile_photo: null as File | null
|
||||
})
|
||||
const photoPreview = ref(userPhoto.value)
|
||||
|
||||
onMounted(async () => {
|
||||
await couponStore.loadMyCoupons()
|
||||
// Refresh user data from server to be sure
|
||||
try {
|
||||
const freshUser = await authService.getCurrentUser()
|
||||
userName.value = freshUser.full_name
|
||||
userEmail.value = freshUser.email
|
||||
userRole.value = freshUser.role
|
||||
userPhoto.value = freshUser.profile_photo_url || ''
|
||||
|
||||
localStorage.setItem('user_name', freshUser.full_name)
|
||||
localStorage.setItem('profile_photo_url', freshUser.profile_photo_url || '')
|
||||
photoPreview.value = userPhoto.value
|
||||
} catch (e) {
|
||||
console.error('Failed to refresh user data', e)
|
||||
}
|
||||
})
|
||||
|
||||
function handleLogout() {
|
||||
authService.logout()
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
function showQR(code: string, title: string) {
|
||||
selectedCode.value = code
|
||||
selectedTitle.value = title
|
||||
showQRModal.value = true
|
||||
}
|
||||
|
||||
function handlePhotoChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement
|
||||
if (target.files && target.files[0]) {
|
||||
const file = target.files[0]
|
||||
editForm.value.profile_photo = file
|
||||
photoPreview.value = URL.createObjectURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpdateProfile() {
|
||||
isUpdating.value = true
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('full_name', editForm.value.full_name)
|
||||
if (editForm.value.password) {
|
||||
formData.append('password', editForm.value.password)
|
||||
}
|
||||
if (editForm.value.profile_photo) {
|
||||
formData.append('profile_photo', editForm.value.profile_photo)
|
||||
}
|
||||
|
||||
const updatedUser = await authService.updateMe(formData)
|
||||
|
||||
// Update local state
|
||||
userName.value = updatedUser.full_name
|
||||
userPhoto.value = updatedUser.profile_photo_url || ''
|
||||
|
||||
// Update localStorage
|
||||
localStorage.setItem('user_name', updatedUser.full_name)
|
||||
localStorage.setItem('profile_photo_url', updatedUser.profile_photo_url || '')
|
||||
|
||||
showEditModal.value = false
|
||||
editForm.value.password = ''
|
||||
alert('Perfil actualizado correctamente')
|
||||
} catch (e: any) {
|
||||
alert('Error al actualizar: ' + (e.response?.data?.detail || e.message))
|
||||
} finally {
|
||||
isUpdating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusLabel(status: string) {
|
||||
switch (status) {
|
||||
case 'claimed': return 'Pendiente'
|
||||
case 'redeemed': return 'Canjeado'
|
||||
case 'expired': return 'Vencido'
|
||||
default: return status
|
||||
}
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
|
||||
function getFullUrl(path: string) {
|
||||
if (!path) return ''
|
||||
if (path.startsWith('http')) return path
|
||||
return `${API_URL}${path}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="profile-view">
|
||||
<header class="profile-header">
|
||||
<div class="profile-info-card">
|
||||
<div class="avatar-container">
|
||||
<div v-if="userPhoto" class="avatar-img" :style="{ backgroundImage: `url(${getFullUrl(userPhoto)})` }"></div>
|
||||
<div v-else class="avatar-placeholder">
|
||||
<span class="material-icons">person</span>
|
||||
</div>
|
||||
<button class="edit-badge" @click="showEditModal = true">
|
||||
<span class="material-icons">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<h1>{{ userName }}</h1>
|
||||
<p>{{ userEmail }}</p>
|
||||
<div class="badge-row">
|
||||
<span class="role-badge">{{ userRole }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<button class="logout-icon-btn" @click="handleLogout" title="Cerrar Sesión">
|
||||
<span class="material-icons">logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="my-coupons-section">
|
||||
<div class="section-header">
|
||||
<h2>Mis Cupones</h2>
|
||||
<span class="count">{{ couponStore.myCoupons.length }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="couponStore.myCoupons.length === 0" class="empty-coupons">
|
||||
<div class="empty-icon-circle">
|
||||
<span class="material-icons">confirmation_number</span>
|
||||
</div>
|
||||
<h3>No tienes cupones</h3>
|
||||
<p>Explora los beneficios que tenemos para ti por usar SIBU.</p>
|
||||
<button @click="router.push('/coupons')" class="btn-primary">Ver Ofertas</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="coupons-list">
|
||||
<div
|
||||
v-for="userCoupon in couponStore.myCoupons"
|
||||
:key="userCoupon.id"
|
||||
:class="['user-coupon-card', userCoupon.status]"
|
||||
>
|
||||
<div class="coupon-main">
|
||||
<div class="coupon-details">
|
||||
<h3>{{ userCoupon.coupon?.title || 'Cupón' }}</h3>
|
||||
<p class="biz-name">{{ userCoupon.coupon?.business_name || 'Comercio' }}</p>
|
||||
<div class="code-row">
|
||||
<span class="code">{{ userCoupon.redemption_code }}</span>
|
||||
<span :class="['status-tag', userCoupon.status]">{{ getStatusLabel(userCoupon.status) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="userCoupon.status === 'claimed'"
|
||||
class="btn-use"
|
||||
@click="showQR(userCoupon.redemption_code, userCoupon.coupon?.title || '')"
|
||||
>
|
||||
<span class="material-icons">qr_code_2</span>
|
||||
Ver Código
|
||||
</button>
|
||||
</div>
|
||||
<div class="coupon-footer">
|
||||
<span v-if="userCoupon.status === 'redeemed'">Usado el: {{ new Date(userCoupon.redeemed_at).toLocaleDateString() }}</span>
|
||||
<span v-else>Reclamado el: {{ new Date(userCoupon.claimed_at).toLocaleDateString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Edit Profile Modal -->
|
||||
<div v-if="showEditModal" class="modal-overlay" @click.self="showEditModal = false">
|
||||
<div class="edit-modal">
|
||||
<div class="modal-header">
|
||||
<h2>Editar Perfil</h2>
|
||||
<button class="close-btn" @click="showEditModal = false">
|
||||
<span class="material-icons">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleUpdateProfile" class="edit-form">
|
||||
<div class="photo-upload-section">
|
||||
<div class="photo-preview-container">
|
||||
<div v-if="photoPreview" class="preview-img" :style="{ backgroundImage: `url(${getFullUrl(photoPreview)})` }"></div>
|
||||
<div v-else class="preview-placeholder">
|
||||
<span class="material-icons">person</span>
|
||||
</div>
|
||||
<label for="photo-input" class="photo-label">
|
||||
<span class="material-icons">photo_camera</span>
|
||||
</label>
|
||||
</div>
|
||||
<input id="photo-input" type="file" @change="handlePhotoChange" accept="image/*" hidden>
|
||||
<p class="upload-hint">Foto opcional</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nombre Completo</label>
|
||||
<input v-model="editForm.full_name" type="text" placeholder="Tu nombre" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nueva Contraseña (Opcional)</label>
|
||||
<input v-model="editForm.password" type="password" placeholder="Mínimo 6 caracteres">
|
||||
<p class="field-hint">Déjalo en blanco si no quieres cambiarla.</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-cancel" @click="showEditModal = false">Cancelar</button>
|
||||
<button type="submit" class="btn-save" :disabled="isUpdating">
|
||||
<span v-if="isUpdating" class="material-icons spin">refresh</span>
|
||||
{{ isUpdating ? 'Guardando...' : 'Guardar Cambios' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Modal -->
|
||||
<div v-if="showQRModal" class="modal-overlay" @click.self="showQRModal = false">
|
||||
<div class="qr-modal">
|
||||
<button class="close-modal" @click="showQRModal = false">
|
||||
<span class="material-icons">close</span>
|
||||
</button>
|
||||
<div class="qr-header">
|
||||
<span class="material-icons">verified</span>
|
||||
<h3>Cupón de Descuento</h3>
|
||||
</div>
|
||||
<p class="promo-title">{{ selectedTitle }}</p>
|
||||
|
||||
<div class="qr-content">
|
||||
<div class="qr-placeholder">
|
||||
<span class="material-icons">qr_code_2</span>
|
||||
</div>
|
||||
<div class="redemption-box">
|
||||
<p>CÓDIGO DE REDENCIÓN</p>
|
||||
<code class="big-code">{{ selectedCode }}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="qr-instructions">Muestra este código al encargado del establecimiento para validar tu promoción.</p>
|
||||
|
||||
<button class="btn-done" @click="showQRModal = false">Entendido</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-view {
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-primary);
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.profile-info-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 28px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
box-shadow: 0 10px 30px var(--shadow);
|
||||
border: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar-img, .avatar-placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 24px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border: 3px solid var(--header-bg);
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-placeholder .material-icons {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.edit-badge {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.edit-badge .material-icons { font-size: 1rem; }
|
||||
|
||||
.info h1 { font-size: 1.4rem; margin-bottom: 2px; }
|
||||
.info p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 8px; }
|
||||
|
||||
.role-badge {
|
||||
background: var(--active-bg);
|
||||
color: var(--active-color);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.logout-icon-btn {
|
||||
background: #ffebf0;
|
||||
color: #d32f2f;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.logout-icon-btn:hover { background: #d32f2f; color: white; }
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-header h2 { font-size: 1.25rem; }
|
||||
|
||||
.section-header .count {
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
padding: 2px 10px;
|
||||
border-radius: 20px;
|
||||
font-weight: 800;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.empty-coupons {
|
||||
padding: 4rem 2rem;
|
||||
text-align: center;
|
||||
background: var(--card-bg);
|
||||
border-radius: 24px;
|
||||
border: 2px dashed var(--border-color);
|
||||
}
|
||||
|
||||
.empty-icon-circle {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-icon-circle .material-icons { font-size: 2.5rem; }
|
||||
|
||||
.btn-primary {
|
||||
margin-top: 1.5rem;
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.coupons-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.user-coupon-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 15px var(--shadow);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.user-coupon-card:hover { transform: scale(1.02); }
|
||||
|
||||
.coupon-main {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.coupon-details h3 { font-size: 1.1rem; margin-bottom: 4px; }
|
||||
.biz-name { font-size: 0.9rem; color: var(--active-color); font-weight: 700; }
|
||||
|
||||
.code-row {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
background: var(--bg-secondary);
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
border: 1px dashed var(--border-color);
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 0.7rem;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-tag.claimed { background: #e3f2fd; color: #1976d2; }
|
||||
.status-tag.redeemed { background: #e8f5e9; color: #2e7d32; opacity: 0.7; }
|
||||
|
||||
.btn-use {
|
||||
background: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
border: none;
|
||||
padding: 12px 18px;
|
||||
border-radius: 14px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.coupon-footer {
|
||||
padding: 10px 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Modal Base */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Edit Modal */
|
||||
.edit-modal {
|
||||
background: var(--card-bg);
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
border-radius: 32px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.close-btn, .close-modal {
|
||||
background: var(--bg-secondary);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.photo-upload-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.photo-preview-container {
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.preview-img, .preview-placeholder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 30px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border: 4px solid var(--header-bg);
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
background: var(--bg-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.preview-placeholder .material-icons { font-size: 4rem; color: var(--text-secondary); }
|
||||
|
||||
.photo-label {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
background: var(--active-color);
|
||||
color: white;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.field-hint, .upload-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
flex: 2;
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
border: none;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
flex: 1;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border: none;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* QR Modal Enhanced */
|
||||
.qr-modal {
|
||||
background: var(--card-bg);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border-radius: 40px;
|
||||
padding: 2.5rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qr-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.qr-header .material-icons { color: #4caf50; font-size: 3rem; }
|
||||
.qr-header h3 { font-size: 1.5rem; }
|
||||
|
||||
.promo-title {
|
||||
color: var(--active-color);
|
||||
font-weight: 800;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.qr-content {
|
||||
background: #f8f9fa;
|
||||
padding: 2rem;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.qr-placeholder {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: white;
|
||||
margin: 0 auto 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.qr-placeholder .material-icons { font-size: 6rem; color: #222; }
|
||||
|
||||
.redemption-box p { font-size: 0.7rem; font-weight: 800; color: #888; letter-spacing: 1px; margin-bottom: 4px; }
|
||||
|
||||
.big-code {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.qr-instructions {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.btn-done {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
border: none;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spin { animation: spin 1s linear infinite; }
|
||||
@keyframes spin { 100% { transform: rotate(360deg); } }
|
||||
</style>
|
||||
Reference in New Issue
Block a user