new style CaseRoulette
This commit is contained in:
@ -343,66 +343,182 @@ export default function Shop() {
|
||||
<Grid container spacing={2} sx={{ mb: 4 }}>
|
||||
{cases.map((c) => (
|
||||
<Grid item xs={12} sm={6} md={4} lg={3} key={c.id}>
|
||||
{/* НОВАЯ КАРТОЧКА */}
|
||||
<Card
|
||||
sx={{
|
||||
bgcolor: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1vw',
|
||||
position: 'relative',
|
||||
bgcolor: 'rgba(5, 5, 15, 0.96)',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.08)',
|
||||
boxShadow: '0 18px 45px rgba(0, 0, 0, 0.8)',
|
||||
overflow: 'hidden',
|
||||
transition:
|
||||
'transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-6px)',
|
||||
boxShadow: '0 26px 60px rgba(0, 0, 0, 0.95)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.18)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* верхний “свет” */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
pointerEvents: 'none',
|
||||
background:
|
||||
'radial-gradient(circle at top, rgba(255,255,255,0.13), transparent 55%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{c.image_url && (
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={c.image_url}
|
||||
alt={c.name}
|
||||
<Box
|
||||
sx={{
|
||||
minWidth: '10vw',
|
||||
minHeight: '10vw',
|
||||
maxHeight: '10vw',
|
||||
objectFit: 'cover',
|
||||
p: '0.5vw',
|
||||
borderRadius: '1vw 1vw 0 0',
|
||||
position: 'relative',
|
||||
p: '0.9vw',
|
||||
pb: 0,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: '16px',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid rgba(255, 255, 255, 0.12)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(40,40,80,0.9), rgba(15,15,35,0.9))',
|
||||
}}
|
||||
>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={c.image_url}
|
||||
alt={c.name}
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '11vw',
|
||||
minHeight: '140px',
|
||||
objectFit: 'cover',
|
||||
filter: 'saturate(1.1)',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* маленький бейдж сверху картинки */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '1.2vw',
|
||||
left: '1.6vw',
|
||||
px: 1.2,
|
||||
py: 0.4,
|
||||
borderRadius: '999px',
|
||||
fontSize: '0.7rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.6,
|
||||
bgcolor: 'rgba(0, 0, 0, 0.6)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.4)',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
Кейс
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
<CardContent>
|
||||
<Typography variant="h6" color="white">
|
||||
|
||||
<CardContent
|
||||
sx={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
pt: c.image_url ? '0.9vw' : '1.4vw',
|
||||
pb: '1.3vw',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="white"
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.05rem',
|
||||
mb: 0.8,
|
||||
}}
|
||||
>
|
||||
{c.name}
|
||||
</Typography>
|
||||
|
||||
{c.description && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.7 }}
|
||||
sx={{
|
||||
opacity: 0.75,
|
||||
fontSize: '0.85rem',
|
||||
mb: 1.5,
|
||||
minHeight: '40px',
|
||||
}}
|
||||
>
|
||||
{c.description}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography variant="body2" color="white" sx={{ mt: 1 }}>
|
||||
Цена: {c.price} монет
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.8, fontSize: '0.85rem' }}
|
||||
>
|
||||
Цена
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
px: 1.6,
|
||||
py: 0.4,
|
||||
borderRadius: '999px',
|
||||
fontSize: '0.8rem',
|
||||
bgcolor: 'rgba(255, 77, 77, 0.16)',
|
||||
border: '1px solid rgba(255, 77, 77, 0.85)',
|
||||
color: 'white',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
}}
|
||||
>
|
||||
{c.price} поп
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{typeof c.items_count === 'number' && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.7 }}
|
||||
sx={{ opacity: 0.6, fontSize: '0.8rem', mb: 1.4 }}
|
||||
>
|
||||
Предметов в кейсе: {c.items_count}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
mt: '1vw',
|
||||
borderRadius: '20px',
|
||||
p: '0.3vw 0vw',
|
||||
mt: 0.5,
|
||||
borderRadius: '999px',
|
||||
py: '0.45vw',
|
||||
color: 'white',
|
||||
backgroundColor: 'rgb(255, 77, 77)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgb(255, 77, 77), rgb(255, 120, 100))',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255, 77, 77, 0.5)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(255, 77, 77, 0.85), rgba(255, 120, 100, 0.9))',
|
||||
},
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1vw',
|
||||
fontSize: '0.9rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.8,
|
||||
}}
|
||||
disabled={!isOnline || isOpening}
|
||||
onClick={() => handleOpenCase(c)}
|
||||
|
||||
Reference in New Issue
Block a user