931 lines
46 KiB
Vue
931 lines
46 KiB
Vue
<script setup lang="ts">
|
|
import { Head, useForm, usePage } from '@inertiajs/vue3';
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import html2canvas from 'html2canvas';
|
|
import { useNotifications } from '@/composables/useNotifications';
|
|
import {
|
|
Flag, X, CheckCircle2, AlertCircle, ChevronRight, Loader2,
|
|
MessageSquareOff, UserX, ShieldAlert, BadgeDollarSign, HelpCircle
|
|
} from 'lucide-vue-next';
|
|
import UserLayout from '@/layouts/user/userlayout.vue';
|
|
|
|
const props = defineProps<{
|
|
profile: any;
|
|
isOwnProfile: boolean;
|
|
isFriend: boolean;
|
|
isPending?: boolean;
|
|
theyRequestedMe?: boolean;
|
|
friendRowId?: number | null;
|
|
hasLiked: boolean;
|
|
}>();
|
|
|
|
const { notify } = useNotifications();
|
|
const stats = props.profile.stats;
|
|
const bestWins = props.profile.best_wins || [];
|
|
const comments = ref(props.profile.comments || []);
|
|
|
|
// Animation for stats
|
|
const animatedWager = ref(0);
|
|
onMounted(() => {
|
|
const target = parseFloat(stats.wagered || 0);
|
|
const duration = 1500;
|
|
const start = performance.now();
|
|
|
|
const step = (timestamp: number) => {
|
|
const progress = Math.min((timestamp - start) / duration, 1);
|
|
animatedWager.value = target * (1 - Math.pow(1 - progress, 3));
|
|
if (progress < 1) requestAnimationFrame(step);
|
|
};
|
|
requestAnimationFrame(step);
|
|
});
|
|
|
|
// Rank & Role Logic
|
|
const vipLevelsConfig = [
|
|
{ name: 'Newbie', color: '#888888' },
|
|
{ name: 'Bronze', color: '#cd7f32' },
|
|
{ name: 'Silver', color: '#c0c0c0' },
|
|
{ name: 'Gold', color: '#ffd700' },
|
|
{ name: 'Platinum', color: '#00f2ff' },
|
|
{ name: 'Diamond', color: '#ff007a' },
|
|
{ name: 'Obsidian', color: '#ff3e3e' }
|
|
];
|
|
|
|
const currentVipStyle = computed(() => {
|
|
const level = props.profile.vip_level || 0;
|
|
const idx = Math.min(Math.max(level, 0), vipLevelsConfig.length - 1);
|
|
return vipLevelsConfig[idx];
|
|
});
|
|
|
|
const roleConfig = computed(() => {
|
|
const role = (props.profile.role || 'User').toLowerCase(); // Case insensitive check
|
|
let color = '#888';
|
|
let effectClass = '';
|
|
let displayName = props.profile.role || 'User';
|
|
|
|
if (role === 'admin') {
|
|
color = '#ff3e3e';
|
|
effectClass = 'role-admin';
|
|
displayName = 'ADMIN';
|
|
} else if (role === 'mod' || role === 'staff') {
|
|
color = '#00f2ff';
|
|
effectClass = 'role-staff';
|
|
displayName = 'STAFF';
|
|
} else if (role === 'streamer') {
|
|
color = '#a855f7';
|
|
effectClass = 'role-streamer';
|
|
displayName = 'STREAMER';
|
|
}
|
|
|
|
return { name: displayName, color, effectClass };
|
|
});
|
|
|
|
// Comment Logic
|
|
const commentForm = useForm({ content: '' });
|
|
const submitComment = () => {
|
|
if (!commentForm.content.trim()) return;
|
|
commentForm.post(`/profile/${props.profile.id}/comment`, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
commentForm.reset();
|
|
notify({ type: 'green', title: 'Posted', desc: 'Comment added.', icon: 'message-circle' });
|
|
}
|
|
});
|
|
};
|
|
|
|
// Report Logic
|
|
const isReportOpen = ref(false);
|
|
const reportReason = ref('');
|
|
const reportSubmitting = ref(false);
|
|
const reportDone = ref(false);
|
|
|
|
const reportReasons = [
|
|
{ value: 'spam', label: 'Spam', desc: 'Unerwünschte Werbung oder Wiederholungen', icon: MessageSquareOff, color: '#f59e0b' },
|
|
{ value: 'harassment', label: 'Belästigung', desc: 'Belästigendes oder feindseliges Verhalten', icon: UserX, color: '#ef4444' },
|
|
{ value: 'inappropriate', label: 'Unangemessenes Profil', desc: 'Anstößige Profilbilder oder Inhalte', icon: ShieldAlert, color: '#f97316' },
|
|
{ value: 'fake', label: 'Fake-Profil', desc: 'Vortäuschung einer anderen Identität', icon: BadgeDollarSign, color: '#a855f7' },
|
|
{ value: 'other', label: 'Sonstiges', desc: 'Anderer Verstoß gegen die Nutzungsregeln', icon: HelpCircle, color: '#6b7280' },
|
|
];
|
|
|
|
function openReportModal() {
|
|
isReportOpen.value = true;
|
|
reportReason.value = '';
|
|
reportDone.value = false;
|
|
}
|
|
|
|
function closeReportModal() {
|
|
isReportOpen.value = false;
|
|
}
|
|
|
|
const submitReport = async () => {
|
|
if (!reportReason.value || reportSubmitting.value) return;
|
|
reportSubmitting.value = true;
|
|
|
|
// Build snapshot + screenshot
|
|
const snapshot = {
|
|
id: props.profile.id,
|
|
username: props.profile.username,
|
|
avatar: props.profile.avatar,
|
|
banner: props.profile.banner,
|
|
bio: props.profile.bio,
|
|
role: props.profile.role,
|
|
vip_level: props.profile.vip_level,
|
|
clan_tag: props.profile.clan_tag,
|
|
stats: {
|
|
wagered: props.profile.stats?.wagered,
|
|
wins: props.profile.stats?.wins,
|
|
biggest_win: props.profile.stats?.biggest_win,
|
|
likes_count: props.profile.stats?.likes_count,
|
|
join_date: props.profile.stats?.join_date,
|
|
},
|
|
best_wins: bestWins.slice(0, 5),
|
|
comments: comments.value.slice(0, 10).map((c: any) => ({
|
|
id: c.id,
|
|
content: c.content,
|
|
created_at: c.created_at,
|
|
user: { id: c.user?.id, username: c.user?.username, avatar: c.user?.avatar },
|
|
})),
|
|
captured_at: new Date().toISOString(),
|
|
};
|
|
|
|
let screenshot: string | null = null;
|
|
try {
|
|
const profileEl = document.querySelector('.profile-page') as HTMLElement | null;
|
|
if (profileEl) {
|
|
const canvas = await html2canvas(profileEl, {
|
|
useCORS: true, allowTaint: false, scale: 1, backgroundColor: '#0a0a0c',
|
|
});
|
|
screenshot = canvas.toDataURL('image/png');
|
|
}
|
|
} catch { /* ignore */ }
|
|
|
|
const csrf = (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '';
|
|
try {
|
|
const res = await fetch(`/profile/${props.profile.id}/report`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-TOKEN': csrf,
|
|
},
|
|
body: JSON.stringify({ reason: reportReason.value, snapshot, screenshot }),
|
|
});
|
|
if (res.ok) {
|
|
reportDone.value = true;
|
|
setTimeout(closeReportModal, 1800);
|
|
}
|
|
} catch { /* ignore */ }
|
|
reportSubmitting.value = false;
|
|
};
|
|
|
|
// Like Logic
|
|
const toggleLike = () => {
|
|
useForm({}).post(`/profile/${props.profile.id}/like`, { preserveScroll: true });
|
|
};
|
|
|
|
// Tip Logic
|
|
const isTipOpen = ref(false);
|
|
const page = usePage();
|
|
const myWallets = computed(() => (page.props as any)?.auth?.user?.wallets || []);
|
|
const currencies = computed<string[]>(() => myWallets.value.map((w: any) => w.currency));
|
|
const tipForm = useForm<{ currency: string; amount: string | number; note?: string }>({
|
|
currency: '',
|
|
amount: '',
|
|
note: ''
|
|
});
|
|
|
|
// Friend request
|
|
const localPending = ref(!!props.isPending);
|
|
const localIsFriend = ref(props.isFriend);
|
|
const localTheyRequested = ref(!!props.theyRequestedMe);
|
|
|
|
const sendFriendRequest = () => {
|
|
if (localIsFriend.value || localPending.value) return;
|
|
useForm({ user_id: props.profile.id }).post('/friends/request', {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
localPending.value = true;
|
|
notify({ type: 'magenta', title: 'Friend request', desc: 'Request sent to ' + props.profile.username, icon: 'user-plus' });
|
|
},
|
|
onError: (e) => {
|
|
notify({ type: 'red', title: 'Error', desc: (e && Object.values(e)[0]) as any || 'Failed to send request', icon: 'alert-triangle' });
|
|
}
|
|
});
|
|
};
|
|
|
|
const acceptFriendRequest = () => {
|
|
if (!props.friendRowId) return;
|
|
useForm({}).post(`/friends/${props.friendRowId}/accept`, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
localTheyRequested.value = false;
|
|
localIsFriend.value = true;
|
|
notify({ type: 'green', title: 'Friends!', desc: `You and ${props.profile.username} are now friends.`, icon: 'user-check' });
|
|
},
|
|
onError: () => {
|
|
notify({ type: 'red', title: 'Error', desc: 'Could not accept request.', icon: 'x' });
|
|
}
|
|
});
|
|
};
|
|
|
|
const declineFriendRequest = () => {
|
|
if (!props.friendRowId) return;
|
|
useForm({}).post(`/friends/${props.friendRowId}/decline`, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
localTheyRequested.value = false;
|
|
notify({ type: 'gray', title: 'Declined', desc: 'Friend request declined.', icon: 'x' });
|
|
},
|
|
onError: () => {
|
|
notify({ type: 'red', title: 'Error', desc: 'Could not decline request.', icon: 'x' });
|
|
}
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
// Default to first available currency
|
|
if (currencies.value.length && !tipForm.currency) {
|
|
tipForm.currency = currencies.value[0];
|
|
}
|
|
});
|
|
|
|
const submitTip = () => {
|
|
// Basic client validation
|
|
const amt = parseFloat(String(tipForm.amount).replace(',', '.'));
|
|
if (!amt || amt <= 0) {
|
|
notify({ type: 'red', title: 'Invalid amount', desc: 'Please enter a positive amount.', icon: 'alert-triangle' });
|
|
return;
|
|
}
|
|
tipForm.amount = amt;
|
|
tipForm.post(`/profile/${props.profile.id}/tip`, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
isTipOpen.value = false;
|
|
tipForm.reset('amount', 'note');
|
|
notify({ type: 'green', title: 'Tip sent', desc: 'Your tip was sent successfully.', icon: 'send' });
|
|
},
|
|
onError: (errs) => {
|
|
const first = errs?.amount || Object.values(errs)[0] || 'Transfer failed';
|
|
notify({ type: 'red', title: 'Error', desc: String(first), icon: 'x' });
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<UserLayout>
|
|
<Head :title="`${profile.username}'s Profile`" />
|
|
|
|
<div class="profile-page" :class="roleConfig.effectClass">
|
|
<div class="bg-fx"></div>
|
|
|
|
<!-- Banner -->
|
|
<div class="banner" :style="{ backgroundImage: `url(${profile.banner || '/img/default-banner.jpg'})` }">
|
|
<div class="banner-overlay"></div>
|
|
</div>
|
|
|
|
<div class="content-container">
|
|
<!-- Header Section -->
|
|
<div class="profile-header">
|
|
<div class="avatar-wrapper">
|
|
<div class="avatar" :style="{ borderColor: roleConfig.effectClass ? roleConfig.color : currentVipStyle.color, boxShadow: `0 0 20px ${roleConfig.effectClass ? roleConfig.color : currentVipStyle.color}40` }">
|
|
<img v-if="profile.avatar" :src="profile.avatar" alt="Avatar">
|
|
<span v-else>{{ profile.username.charAt(0) }}</span>
|
|
</div>
|
|
<div class="online-status"></div>
|
|
</div>
|
|
|
|
<div class="header-info">
|
|
<div class="name-row">
|
|
<h1 class="username" :class="roleConfig.effectClass" :style="{ color: roleConfig.effectClass ? roleConfig.color : '#fff' }">
|
|
<span v-if="profile.clan_tag" class="clan-tag">[{{ profile.clan_tag }}]</span>
|
|
{{ profile.username }}
|
|
</h1>
|
|
<div class="badges">
|
|
<span class="badge vip" :style="{ color: currentVipStyle.color, borderColor: currentVipStyle.color, background: `${currentVipStyle.color}15` }">
|
|
VIP {{ profile.vip_level }}
|
|
</span>
|
|
<span class="badge role" :class="roleConfig.effectClass" :style="{ color: roleConfig.color, borderColor: roleConfig.color, background: `${roleConfig.color}15` }">
|
|
{{ roleConfig.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<p class="bio">{{ profile.bio || 'No bio provided.' }}</p>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
<button v-if="!isOwnProfile" class="btn-action like" :class="{ active: hasLiked }" @click="toggleLike">
|
|
<i data-lucide="heart" :class="{ 'fill-current': hasLiked }"></i>
|
|
<span>{{ stats.likes_count }}</span>
|
|
</button>
|
|
|
|
<!-- Incoming friend request: show Accept / Decline -->
|
|
<template v-if="!isOwnProfile && localTheyRequested">
|
|
<button class="btn-action friend accept" @click="acceptFriendRequest">
|
|
<i data-lucide="user-check"></i> Accept
|
|
</button>
|
|
<button class="btn-action friend decline" @click="declineFriendRequest">
|
|
<i data-lucide="x"></i> Decline
|
|
</button>
|
|
</template>
|
|
<!-- Already friends / outgoing request / no request -->
|
|
<button v-else-if="!isOwnProfile" class="btn-action friend" :class="{ added: localIsFriend || localPending }" @click="sendFriendRequest" :disabled="localIsFriend || localPending">
|
|
<i data-lucide="user-plus" v-if="!localIsFriend && !localPending"></i>
|
|
<i data-lucide="check" v-else></i>
|
|
{{ localIsFriend ? 'Friends' : (localPending ? 'Pending' : 'Add') }}
|
|
</button>
|
|
|
|
<button v-if="!isOwnProfile && isFriend" class="btn-action tip" @click="isTipOpen = true" title="Send Tip">
|
|
<i data-lucide="coins"></i>
|
|
Tip
|
|
</button>
|
|
|
|
<button v-if="!isOwnProfile" class="btn-action report" @click="openReportModal" title="Report Profile">
|
|
<i data-lucide="flag"></i>
|
|
</button>
|
|
|
|
<a :href="isOwnProfile ? '/trophy' : `/trophy/${profile.username}`" class="btn-action trophy" title="Trophy Room">
|
|
<i data-lucide="trophy"></i>
|
|
</a>
|
|
|
|
<a href="/settings" v-if="isOwnProfile" class="btn-edit">
|
|
<i data-lucide="edit-2"></i> Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card highlight">
|
|
<div class="stat-icon"><i data-lucide="coins"></i></div>
|
|
<div class="stat-data">
|
|
<div class="stat-label">Total Wagered</div>
|
|
<div class="stat-value">${{ animatedWager.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon"><i data-lucide="trophy"></i></div>
|
|
<div class="stat-data">
|
|
<div class="stat-label">Total Wins</div>
|
|
<div class="stat-value">{{ stats.wins }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon"><i data-lucide="star"></i></div>
|
|
<div class="stat-data">
|
|
<div class="stat-label">Biggest Win</div>
|
|
<div class="stat-value text-gold">${{ parseFloat(stats.biggest_win || 0).toFixed(2) }}</div>
|
|
<div class="stat-sub" v-if="stats.biggest_win_game">in {{ stats.biggest_win_game }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon"><i data-lucide="calendar"></i></div>
|
|
<div class="stat-data">
|
|
<div class="stat-label">Joined</div>
|
|
<div class="stat-value">{{ stats.join_date }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Columns -->
|
|
<div class="profile-cols">
|
|
<!-- Left: Wins -->
|
|
<div class="col-wins">
|
|
<h3><i data-lucide="crown" class="text-gold"></i> Best Wins</h3>
|
|
<div class="wins-grid">
|
|
<div v-for="(win, index) in bestWins" :key="index" class="win-card">
|
|
<div class="win-img" :style="{ backgroundImage: `url('${win.image}')` }"></div>
|
|
<div class="win-info">
|
|
<div class="win-amount text-gold">${{ win.amount.toFixed(2) }}</div>
|
|
<div class="win-game">{{ win.game }}</div>
|
|
<div class="win-multi">{{ win.multiplier }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="bestWins.length === 0" class="win-card empty">
|
|
<i data-lucide="ghost"></i>
|
|
<span>No big wins yet</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Comments -->
|
|
<div class="col-comments">
|
|
<h3><i data-lucide="message-square"></i> Comments</h3>
|
|
|
|
<div class="comment-input" v-if="!isOwnProfile">
|
|
<textarea v-model="commentForm.content" placeholder="Write a comment..." rows="2"></textarea>
|
|
<button @click="submitComment" :disabled="commentForm.processing"><i data-lucide="send"></i></button>
|
|
</div>
|
|
|
|
<div class="comments-list">
|
|
<div v-for="comment in comments" :key="comment.id" class="comment-item">
|
|
<div class="c-avatar">
|
|
<img v-if="comment.user?.avatar" :src="comment.user.avatar">
|
|
<span v-else>{{ (comment.user?.username || '?').charAt(0) }}</span>
|
|
</div>
|
|
<div class="c-content">
|
|
<div class="c-head">
|
|
<span class="c-name">{{ comment.user?.username || '?' }}</span>
|
|
<span class="c-time">Just now</span>
|
|
</div>
|
|
<div class="c-text">{{ comment.content }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="comments.length === 0" class="no-comments">No comments yet. Be the first!</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Tip Modal -->
|
|
<div v-if="isTipOpen" class="modal-overlay" @click.self="isTipOpen = false">
|
|
<div class="modal-card">
|
|
<h3>Send Tip to {{ profile.username }}</h3>
|
|
<div class="form-row" style="display:grid; grid-template-columns: 120px 1fr; gap:10px; align-items:center; margin-bottom:10px;">
|
|
<label class="lbl">Currency</label>
|
|
<select v-model="tipForm.currency">
|
|
<option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row" style="display:grid; grid-template-columns: 120px 1fr; gap:10px; align-items:center; margin-bottom:10px;">
|
|
<label class="lbl">Amount</label>
|
|
<input v-model="tipForm.amount" type="number" min="0" step="0.00000001" placeholder="0.00" class="input" />
|
|
</div>
|
|
<div class="form-row" style="margin-bottom:10px;">
|
|
<textarea v-model="tipForm.note" rows="2" placeholder="Add a note (optional)" class="input"></textarea>
|
|
</div>
|
|
<div v-if="tipForm.errors && Object.keys(tipForm.errors).length" class="msg err">{{ tipForm.errors.amount || Object.values(tipForm.errors)[0] }}</div>
|
|
<div class="modal-actions">
|
|
<button @click="isTipOpen = false" class="btn-cancel">Cancel</button>
|
|
<button @click="submitTip" class="btn-confirm" :disabled="tipForm.processing">{{ tipForm.processing ? 'Sending...' : 'Send Tip' }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Modal (teleported to body) -->
|
|
<teleport to="body">
|
|
<transition name="modal-fade">
|
|
<div v-if="isReportOpen" class="gc-report-overlay" @click.self="closeReportModal">
|
|
<div class="gc-report-modal" role="dialog" aria-modal="true" aria-labelledby="pr-title">
|
|
|
|
<!-- Success -->
|
|
<div v-if="reportDone" class="report-success">
|
|
<div class="success-ring">
|
|
<CheckCircle2 :size="36" />
|
|
</div>
|
|
<h3>Erfolgreich gemeldet</h3>
|
|
<p>Danke für deinen Hinweis.<br>Unser Moderationsteam wird den Fall prüfen.</p>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<!-- Header -->
|
|
<div class="rm-head">
|
|
<div class="rm-head-left">
|
|
<div class="rm-head-icon">
|
|
<Flag :size="16" />
|
|
</div>
|
|
<span id="pr-title" class="rm-title">Profil melden</span>
|
|
</div>
|
|
<button class="rm-close" @click="closeReportModal" aria-label="Schließen">
|
|
<X :size="15" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- User card -->
|
|
<div class="rm-user">
|
|
<div class="rm-avatar-wrap">
|
|
<div class="rm-avatar">
|
|
<img v-if="profile.avatar" :src="profile.avatar" :alt="profile.username" />
|
|
<div v-else class="rm-avatar-fallback">{{ profile.username[0].toUpperCase() }}</div>
|
|
</div>
|
|
<div class="rm-avatar-glow"></div>
|
|
</div>
|
|
<div class="rm-user-info">
|
|
<span class="rm-username">@{{ profile.username }}</span>
|
|
<div class="rm-badges">
|
|
<span v-if="profile.role === 'admin'" class="rm-badge admin">ADMIN</span>
|
|
<span v-else-if="profile.role === 'staff' || profile.role === 'mod'" class="rm-badge staff">STAFF</span>
|
|
<span v-else-if="profile.role === 'streamer'" class="rm-badge streamer">STREAMER</span>
|
|
<span v-else class="rm-badge user">USER</span>
|
|
<span v-if="profile.vip_level > 0" class="rm-badge vip">★ VIP {{ profile.vip_level }}</span>
|
|
<span v-if="profile.clan_tag" class="rm-badge clan">[{{ profile.clan_tag }}]</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reason grid -->
|
|
<div class="rm-section">
|
|
<div class="rm-section-label">
|
|
<Flag :size="12" />
|
|
Meldegrund auswählen
|
|
</div>
|
|
<div class="rm-reasons">
|
|
<button
|
|
v-for="r in reportReasons"
|
|
:key="r.value"
|
|
class="rm-reason-btn"
|
|
:class="{ selected: reportReason === r.value }"
|
|
:style="reportReason === r.value ? `--reason-color: ${r.color}` : ''"
|
|
@click="reportReason = r.value"
|
|
>
|
|
<div class="reason-icon-wrap" :style="`color: ${r.color}`">
|
|
<component :is="r.icon" :size="18" />
|
|
</div>
|
|
<div class="reason-text">
|
|
<span class="reason-label">{{ r.label }}</span>
|
|
<span class="reason-desc">{{ r.desc }}</span>
|
|
</div>
|
|
<div class="reason-check-wrap" v-if="reportReason === r.value">
|
|
<CheckCircle2 :size="16" />
|
|
</div>
|
|
<ChevronRight v-else :size="14" class="reason-chevron" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="rm-actions">
|
|
<button class="rm-btn-cancel" @click="closeReportModal">
|
|
<X :size="14" />
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
class="rm-btn-submit"
|
|
:disabled="!reportReason || reportSubmitting"
|
|
@click="submitReport"
|
|
>
|
|
<Loader2 v-if="reportSubmitting" :size="15" class="rm-spin" />
|
|
<Flag v-else :size="15" />
|
|
{{ reportSubmitting ? 'Wird gesendet…' : 'Jetzt melden' }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</teleport>
|
|
|
|
</div>
|
|
</UserLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.profile-page { min-height: 100vh; background: #050505; padding-bottom: 60px; position: relative; overflow: hidden; }
|
|
|
|
/* Role Effects & Backgrounds */
|
|
.bg-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.5s; }
|
|
|
|
.role-admin .bg-fx {
|
|
opacity: 1;
|
|
background:
|
|
radial-gradient(circle at 20% 30%, rgba(255, 62, 62, 0.15), transparent 60%),
|
|
radial-gradient(circle at 80% 70%, rgba(255, 62, 62, 0.1), transparent 60%);
|
|
animation: pulse-bg-red 4s infinite alternate;
|
|
}
|
|
.role-staff .bg-fx {
|
|
opacity: 1;
|
|
background:
|
|
radial-gradient(circle at 20% 30%, rgba(0, 242, 255, 0.15), transparent 60%),
|
|
radial-gradient(circle at 80% 70%, rgba(0, 242, 255, 0.1), transparent 60%);
|
|
animation: pulse-bg-cyan 4s infinite alternate;
|
|
}
|
|
|
|
@keyframes pulse-bg-red { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } }
|
|
@keyframes pulse-bg-cyan { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } }
|
|
|
|
/* Glitter Text */
|
|
.username.role-admin {
|
|
text-shadow: 0 0 20px rgba(255, 62, 62, 0.8);
|
|
animation: glitter-red 2s infinite alternate;
|
|
}
|
|
.username.role-staff {
|
|
text-shadow: 0 0 20px rgba(0, 242, 255, 0.8);
|
|
animation: glitter-cyan 2s infinite alternate;
|
|
}
|
|
|
|
/* Badge Glitter */
|
|
.badge.role.role-admin {
|
|
box-shadow: 0 0 15px rgba(255, 62, 62, 0.5);
|
|
animation: border-pulse-red 1.5s infinite;
|
|
background: rgba(255, 62, 62, 0.15) !important;
|
|
}
|
|
.badge.role.role-staff {
|
|
box-shadow: 0 0 15px rgba(0, 242, 255, 0.5);
|
|
animation: border-pulse-cyan 1.5s infinite;
|
|
background: rgba(0, 242, 255, 0.15) !important;
|
|
}
|
|
|
|
@keyframes glitter-red { 0% { filter: brightness(1); text-shadow: 0 0 10px rgba(255,62,62,0.5); } 100% { filter: brightness(1.5); text-shadow: 0 0 25px rgba(255,62,62,1); } }
|
|
@keyframes glitter-cyan { 0% { filter: brightness(1); text-shadow: 0 0 10px rgba(0,242,255,0.5); } 100% { filter: brightness(1.5); text-shadow: 0 0 25px rgba(0,242,255,1); } }
|
|
@keyframes border-pulse-red { 0% { border-color: rgba(255,62,62,0.4); box-shadow: 0 0 5px rgba(255,62,62,0.2); } 100% { border-color: rgba(255,62,62,1); box-shadow: 0 0 20px rgba(255,62,62,0.6); } }
|
|
@keyframes border-pulse-cyan { 0% { border-color: rgba(0,242,255,0.4); box-shadow: 0 0 5px rgba(0,242,255,0.2); } 100% { border-color: rgba(0,242,255,1); box-shadow: 0 0 20px rgba(0,242,255,0.6); } }
|
|
|
|
.banner { height: 280px; background-size: cover; background-position: center; position: relative; z-index: 1; }
|
|
.banner-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, #050505 100%); }
|
|
|
|
.content-container { max-width: 1100px; margin: -100px auto 0; padding: 0 20px; position: relative; z-index: 10; }
|
|
|
|
/* Header */
|
|
.profile-header { display: flex; align-items: flex-end; gap: 30px; margin-bottom: 50px; }
|
|
|
|
.avatar-wrapper { position: relative; }
|
|
.avatar {
|
|
width: 160px; height: 160px; border-radius: 50%; border: 6px solid #050505; background: #111;
|
|
overflow: hidden; display: flex; align-items: center; justify-content: center;
|
|
font-size: 56px; font-weight: 900; color: #333; transition: 0.3s;
|
|
}
|
|
.avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.online-status { position: absolute; bottom: 12px; right: 12px; width: 24px; height: 24px; background: #00ff9d; border: 4px solid #050505; border-radius: 50%; box-shadow: 0 0 10px #00ff9d; }
|
|
|
|
.header-info { flex: 1; padding-bottom: 15px; }
|
|
.name-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
|
|
.username { font-size: 36px; font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1; display: flex; align-items: center; gap: 10px; }
|
|
.clan-tag { color: inherit; opacity: 0.8; font-size: 0.6em; background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); vertical-align: middle; }
|
|
|
|
.badges { display: flex; gap: 8px; }
|
|
.badge { font-size: 11px; font-weight: 900; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; border: 1px solid transparent; letter-spacing: 0.5px; }
|
|
|
|
.bio { color: #888; font-size: 15px; max-width: 600px; line-height: 1.6; }
|
|
|
|
.header-actions { display: flex; gap: 12px; padding-bottom: 20px; }
|
|
.btn-action, .btn-edit { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-weight: 800; font-size: 13px; cursor: pointer; transition: 0.2s; border: none; }
|
|
.btn-action { background: #111; border: 1px solid #333; color: #fff; }
|
|
.btn-action:hover { background: #1a1a1a; border-color: #555; }
|
|
.btn-action.like.active { color: #ff007a; border-color: #ff007a; background: rgba(255,0,122,0.1); }
|
|
.btn-action.friend { background: #ff007a; color: #fff; border-color: #ff007a; }
|
|
.btn-action.friend:hover { background: #d40065; }
|
|
.btn-action.friend.added { background: #111; border-color: #333; color: #fff; }
|
|
.btn-action.friend.accept { background: #00c853; border-color: #00c853; }
|
|
.btn-action.friend.accept:hover { background: #00a844; }
|
|
.btn-action.friend.decline { background: #111; border-color: #ff3e3e; color: #ff3e3e; }
|
|
.btn-action.friend.decline:hover { background: rgba(255,62,62,0.1); }
|
|
.btn-action.report:hover { color: #ff3e3e; border-color: #ff3e3e; }
|
|
.btn-action.trophy:hover { color: #ffd700; border-color: #ffd700; }
|
|
|
|
.btn-edit { background: #111; border: 1px solid #333; color: #fff; text-decoration: none; }
|
|
.btn-edit:hover { background: #1a1a1a; border-color: #444; }
|
|
|
|
/* Stats Grid */
|
|
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 50px; }
|
|
.stat-card { background: #0f0f0f; border: 1px solid #1f1f1f; padding: 24px; border-radius: 20px; display: flex; align-items: center; gap: 16px; transition: 0.3s; position: relative; overflow: hidden; }
|
|
.stat-card:hover { transform: translateY(-4px); border-color: #333; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); }
|
|
.stat-card.highlight { background: linear-gradient(135deg, rgba(255,0,122,0.05), transparent); border-color: rgba(255,0,122,0.2); }
|
|
.stat-icon { width: 52px; height: 52px; background: #18181b; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #666; flex-shrink: 0; }
|
|
.stat-card.highlight .stat-icon { color: #ff007a; background: rgba(255,0,122,0.1); }
|
|
.stat-label { font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px; }
|
|
.stat-value { font-size: 20px; font-weight: 900; color: #fff; }
|
|
.stat-sub { font-size: 11px; color: #555; margin-top: 2px; }
|
|
.text-magenta { color: #ff007a; }
|
|
.text-gold { color: #ffd700; }
|
|
|
|
/* Columns */
|
|
.profile-cols { display: grid; grid-template-columns: 1fr 350px; gap: 30px; }
|
|
|
|
/* Wins Section */
|
|
.col-wins h3, .col-comments h3 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
|
|
.wins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
|
|
|
|
.win-card { background: #0f0f0f; border: 1px solid #1f1f1f; border-radius: 16px; overflow: hidden; transition: 0.3s; position: relative; }
|
|
.win-card:hover { transform: translateY(-4px); border-color: #ffd700; box-shadow: 0 10px 40px -10px rgba(255, 215, 0, 0.15); }
|
|
.win-img { height: 140px; background-size: cover; background-position: center; position: relative; }
|
|
.win-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, #0f0f0f); }
|
|
|
|
.win-info { padding: 16px; position: relative; z-index: 2; margin-top: -40px; }
|
|
.win-amount { font-size: 20px; font-weight: 900; margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
|
|
.win-game { font-size: 12px; color: #ccc; font-weight: 600; }
|
|
.win-multi { position: absolute; top: 16px; right: 16px; background: rgba(255, 215, 0, 0.1); color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.3); padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; }
|
|
|
|
.win-card.empty { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #333; border: 1px dashed #222; }
|
|
.win-card.empty i { width: 32px; height: 32px; }
|
|
|
|
/* Comments */
|
|
.comment-input { display: flex; gap: 10px; background: #111; padding: 10px; border-radius: 12px; border: 1px solid #222; margin-bottom: 20px; }
|
|
.comment-input textarea { flex: 1; background: transparent; border: none; color: #fff; font-size: 13px; resize: none; outline: none; }
|
|
.comment-input button { background: #ff007a; color: #fff; border: none; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
|
.comment-input button:hover { background: #d40065; }
|
|
|
|
.comments-list { display: flex; flex-direction: column; gap: 16px; }
|
|
.comment-item { display: flex; gap: 12px; }
|
|
.c-avatar { width: 36px; height: 36px; border-radius: 10px; background: #222; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0; }
|
|
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.c-content { background: #111; padding: 12px; border-radius: 12px; border: 1px solid #222; flex: 1; }
|
|
.c-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
|
|
.c-name { font-size: 12px; font-weight: 700; color: #fff; }
|
|
.c-time { font-size: 10px; color: #555; }
|
|
.c-text { font-size: 13px; color: #ccc; line-height: 1.4; }
|
|
.no-comments { text-align: center; color: #444; font-size: 12px; padding: 20px; }
|
|
|
|
/* Modal */
|
|
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 100; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
|
|
.modal-card { background: #111; border: 1px solid #333; padding: 24px; border-radius: 16px; width: 100%; max-width: 400px; }
|
|
.modal-card h3 { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 16px; }
|
|
.modal-card select { width: 100%; background: #000; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; margin-bottom: 20px; outline: none; }
|
|
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
|
|
.btn-cancel { background: transparent; border: 1px solid #333; color: #ccc; padding: 10px 16px; border-radius: 8px; cursor: pointer; }
|
|
.btn-confirm { background: #ff3e3e; border: none; color: #fff; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; }
|
|
|
|
@media (max-width: 900px) {
|
|
.stats-grid { grid-template-columns: 1fr 1fr; }
|
|
.profile-cols { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.profile-header { flex-direction: column; align-items: center; text-align: center; margin-top: -80px; }
|
|
.header-info { padding-bottom: 0; width: 100%; }
|
|
.name-row { justify-content: center; }
|
|
.header-actions { width: 100%; justify-content: center; flex-wrap: wrap; }
|
|
.avatar { width: 120px; height: 120px; font-size: 40px; }
|
|
.banner { height: 200px; }
|
|
}
|
|
|
|
/* Extra small phones */
|
|
@media (max-width: 420px) {
|
|
.username { font-size: clamp(18px, 7vw, 24px); word-break: break-word; }
|
|
.bio { font-size: 14px; }
|
|
.wins-grid { grid-template-columns: 1fr; }
|
|
.stats-grid { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
|
|
/* ===== Report Modal ===== */
|
|
.gc-report-overlay {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
backdrop-filter: blur(8px) saturate(0.8);
|
|
-webkit-backdrop-filter: blur(8px) saturate(0.8);
|
|
z-index: 2147483647;
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: 16px;
|
|
}
|
|
.gc-report-modal {
|
|
background: #0c0c0e;
|
|
border: 1px solid rgba(255,255,255,0.07);
|
|
border-radius: 22px;
|
|
width: 100%; max-width: 460px;
|
|
box-shadow: 0 40px 100px rgba(0,0,0,0.9), 0 0 0 1px rgba(223,0,106,0.05);
|
|
overflow: hidden;
|
|
animation: modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
@keyframes modal-pop {
|
|
from { opacity: 0; transform: scale(0.9) translateY(16px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
.modal-fade-enter-active { transition: opacity 0.25s ease; }
|
|
.modal-fade-leave-active { transition: opacity 0.15s ease; }
|
|
.modal-fade-enter-from, .modal-fade-leave-to { opacity: 0; }
|
|
|
|
.rm-head {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 16px 18px;
|
|
background: linear-gradient(135deg, rgba(223,0,106,0.12), rgba(0,0,0,0));
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
.rm-head-left { display: flex; align-items: center; gap: 10px; }
|
|
.rm-head-icon {
|
|
width: 30px; height: 30px; border-radius: 9px;
|
|
background: rgba(223,0,106,0.18); border: 1px solid rgba(223,0,106,0.35);
|
|
color: #df006a; display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.rm-title { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 0.2px; }
|
|
.rm-close {
|
|
width: 28px; height: 28px; border-radius: 8px;
|
|
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
|
|
color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
|
transition: 0.2s; flex-shrink: 0;
|
|
}
|
|
.rm-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
|
|
|
|
.rm-user {
|
|
display: flex; align-items: center; gap: 14px;
|
|
padding: 14px 18px;
|
|
background: rgba(255,255,255,0.02);
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
.rm-avatar-wrap { position: relative; flex-shrink: 0; }
|
|
.rm-avatar {
|
|
width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
|
|
border: 2px solid rgba(255,255,255,0.08); background: #151515; position: relative; z-index: 1;
|
|
}
|
|
.rm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.rm-avatar-fallback {
|
|
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
|
|
font-size: 20px; font-weight: 900; color: #555;
|
|
}
|
|
.rm-avatar-glow {
|
|
position: absolute; inset: -4px; border-radius: 18px; z-index: 0;
|
|
background: radial-gradient(circle, rgba(223,0,106,0.25), transparent 70%);
|
|
filter: blur(6px);
|
|
}
|
|
.rm-user-info { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
|
|
.rm-username { font-size: 15px; font-weight: 800; color: #fff; }
|
|
.rm-badges { display: flex; gap: 5px; flex-wrap: wrap; }
|
|
.rm-badge {
|
|
font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 5px;
|
|
text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid;
|
|
}
|
|
.rm-badge.admin { color: #ff3e3e; border-color: rgba(255,62,62,0.35); background: rgba(255,62,62,0.08); }
|
|
.rm-badge.staff { color: #3b82f6; border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.08); }
|
|
.rm-badge.streamer { color: #a855f7; border-color: rgba(168,85,247,0.35); background: rgba(168,85,247,0.08); }
|
|
.rm-badge.user { color: #555; border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
|
|
.rm-badge.vip { color: #ffd700; border-color: rgba(255,215,0,0.35); background: rgba(255,215,0,0.08); }
|
|
.rm-badge.clan { color: #00f2ff; border-color: rgba(0,242,255,0.35); background: rgba(0,242,255,0.08); }
|
|
|
|
.rm-section { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.05); }
|
|
.rm-section-label {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 10px; font-weight: 700; text-transform: uppercase;
|
|
letter-spacing: 0.7px; color: #444; margin-bottom: 10px;
|
|
}
|
|
|
|
.rm-reasons { display: flex; flex-direction: column; gap: 7px; }
|
|
.rm-reason-btn {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 11px 14px; border-radius: 12px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
color: #888; cursor: pointer; transition: all 0.18s ease;
|
|
text-align: left; width: 100%;
|
|
}
|
|
.rm-reason-btn:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
border-color: rgba(255,255,255,0.12);
|
|
color: #ddd;
|
|
transform: translateX(2px);
|
|
}
|
|
.rm-reason-btn.selected {
|
|
background: rgba(var(--reason-color, 223 0 106) / 0.1);
|
|
border-color: color-mix(in srgb, var(--reason-color, #df006a) 50%, transparent);
|
|
color: #fff;
|
|
}
|
|
.reason-icon-wrap {
|
|
width: 34px; height: 34px; border-radius: 10px;
|
|
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
|
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
transition: 0.18s;
|
|
}
|
|
.rm-reason-btn.selected .reason-icon-wrap {
|
|
background: rgba(var(--reason-color, 223 0 106) / 0.15);
|
|
border-color: color-mix(in srgb, var(--reason-color, #df006a) 40%, transparent);
|
|
}
|
|
.reason-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
|
|
.reason-label { font-size: 13px; font-weight: 700; color: inherit; }
|
|
.reason-desc { font-size: 11px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.rm-reason-btn.selected .reason-desc { color: #888; }
|
|
.reason-check-wrap { color: #22c55e; flex-shrink: 0; }
|
|
.reason-chevron { color: #333; flex-shrink: 0; transition: 0.18s; }
|
|
.rm-reason-btn:hover .reason-chevron { color: #555; transform: translateX(2px); }
|
|
|
|
.rm-actions {
|
|
display: flex; gap: 10px;
|
|
padding: 14px 18px 18px;
|
|
}
|
|
.rm-btn-cancel {
|
|
flex: 1; padding: 11px 14px; border-radius: 11px;
|
|
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
|
|
color: #888; cursor: pointer; font-size: 13px; font-weight: 700;
|
|
transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 7px;
|
|
}
|
|
.rm-btn-cancel:hover { background: rgba(255,255,255,0.08); color: #ccc; }
|
|
.rm-btn-submit {
|
|
flex: 2; padding: 11px 14px; border-radius: 11px;
|
|
background: linear-gradient(135deg, #df006a, #a8004e);
|
|
border: 1px solid rgba(223,0,106,0.5);
|
|
color: #fff; cursor: pointer; font-size: 13px; font-weight: 800;
|
|
transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
box-shadow: 0 4px 20px rgba(223,0,106,0.25);
|
|
}
|
|
.rm-btn-submit:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #f2007a, #c0005c);
|
|
box-shadow: 0 6px 30px rgba(223,0,106,0.45);
|
|
transform: translateY(-1px);
|
|
}
|
|
.rm-btn-submit:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
|
|
.rm-spin { animation: rm-spin 0.8s linear infinite; }
|
|
@keyframes rm-spin { to { transform: rotate(360deg); } }
|
|
|
|
.report-success {
|
|
padding: 44px 24px 40px;
|
|
display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
|
|
}
|
|
.success-ring {
|
|
width: 64px; height: 64px; border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(34,197,94,0.2), rgba(34,197,94,0.05));
|
|
border: 2px solid rgba(34,197,94,0.4);
|
|
color: #22c55e; display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 0 30px rgba(34,197,94,0.25);
|
|
animation: success-bounce 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
@keyframes success-bounce {
|
|
0% { transform: scale(0); opacity: 0; }
|
|
60% { transform: scale(1.12); }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
.report-success h3 { font-size: 18px; font-weight: 900; color: #fff; margin: 0; }
|
|
.report-success p { font-size: 13px; color: #666; margin: 0; line-height: 1.6; }
|
|
|
|
@media (max-width: 480px) {
|
|
.gc-report-overlay { align-items: flex-end; padding: 0; }
|
|
.gc-report-modal { border-radius: 22px 22px 0 0; max-width: 100%; }
|
|
.reason-desc { display: none; }
|
|
}
|
|
</style>
|