DIKER/popa-launcher
1
0
Fork 0
Code Issues Pull Requests Packages Releases 9 Wiki Activity

restyle change skin

Browse Source
This commit is contained in:
aurinex
2025-12-14 13:16:01 +05:00
parent d1e64382a4
commit de616ee8ac
1 changed files with 203 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

366
src/renderer/pages/Profile.tsx
View File

@ -221,6 +221,9 @@ export default function Profile() {
} }
}; };
const GRADIENT =
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
return ( return (
<Box <Box
sx={{ sx={{
@ -298,170 +301,207 @@ export default function Profile() {
}} }}
> >
<Box <Box
sx={{ sx={{
width: '100%', width: '100%',
bgcolor: 'rgba(255, 255, 255, 0.05)', p: '2.2vw',
padding: '3vw', borderRadius: '1.2vw',
borderRadius: '1vw', flexShrink: 0,
flexShrink: 0, boxSizing: 'border-box',
boxSizing: 'border-box', minWidth: 0,
minWidth: 0, overflow: 'hidden',
}} position: 'relative',
> background:
<Box 'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.14), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.12), transparent 55%), rgba(10,10,20,0.86)',
sx={{ border: '1px solid rgba(255,255,255,0.08)',
border: '2px dashed', boxShadow: '0 1.2vw 3.2vw rgba(0,0,0,0.55)',
borderColor: isDragOver ? 'primary.main' : 'grey.400', backdropFilter: 'blur(14px)',
borderRadius: '1vw', }}
p: '1.5vw', >
mb: '1vw', {/* dropzone */}
textAlign: 'center', <Box
cursor: 'pointer', sx={{
bgcolor: isDragOver borderRadius: '1.1vw',
? 'rgba(25, 118, 210, 0.08)' p: '1.6vw',
: 'transparent', mb: '1.1vw',
transition: 'all 0.2s', textAlign: 'center',
}} cursor: 'pointer',
onDragOver={(e) => { position: 'relative',
e.preventDefault(); overflow: 'hidden',
setIsDragOver(true); background: 'rgba(255,255,255,0.04)',
}} border: '1px solid rgba(255,255,255,0.10)',
onDragLeave={() => setIsDragOver(false)} transition: 'transform 0.18s ease, border-color 0.18s ease, background 0.18s ease',
onDrop={handleFileDrop} '&:hover': {
onClick={() => fileInputRef.current?.click()} transform: 'scale(1.005)',
> borderColor: 'rgba(242,113,33,0.35)',
<input background: 'rgba(255,255,255,0.05)',
type="file" },
ref={fileInputRef} ...(isDragOver
accept=".png" ? {
style={{ display: 'none' }} borderColor: 'rgba(233,64,205,0.55)',
onChange={handleFileSelect} background:
/> 'linear-gradient(120deg, rgba(242,113,33,0.10), rgba(233,64,205,0.08), rgba(138,35,135,0.10))',
<Typography sx={{ color: 'white' }}> }
{skinFile : null),
? `Выбран файл: ${skinFile.name}`
: 'Перетащите PNG файл скина или кликните для выбора'}
</Typography>
</Box>
<FormControl // градиентная полоска слева (как акцент)
color="primary" '&:after': {
fullWidth content: '""',
sx={{ position: 'absolute',
mb: '1vw', left: 0,
color: 'white', top: 0,
'&:hover .MuiInputLabel-root': { bottom: 0,
color: 'rgb(255, 77, 77)', width: '0.35vw',
transition: 'all 0.3s ease-in-out', background: GRADIENT,
}, opacity: 0.9,
}} pointerEvents: 'none',
> },
<InputLabel }}
sx={{ onDragOver={(e) => {
fontFamily: 'Benzin-Bold', e.preventDefault();
color: 'white', setIsDragOver(true);
'&.Mui-focused': { }}
color: 'rgb(255, 77, 77)', onDragLeave={() => setIsDragOver(false)}
transition: 'all 0.3s ease-in-out', onDrop={handleFileDrop}
}, onClick={() => fileInputRef.current?.click()}
transform: 'translate(14px, -9px) scale(0.75)', >
'&.MuiInputLabel-shrink': { <input
transform: 'translate(14px, -9px) scale(0.75)', type="file"
transition: 'all 0.3s ease-in-out', ref={fileInputRef}
}, accept=".png"
}} style={{ display: 'none' }}
> onChange={handleFileSelect}
Модель скина />
</InputLabel>
<Select <Typography
value={skinModel} sx={{
label="Модель скина" color: 'rgba(255,255,255,0.92)',
onChange={(e) => setSkinModel(e.target.value)} fontWeight: 800,
displayEmpty }}
sx={{ >
border: 'none', {skinFile
'& .MuiSelect-select': { ? `Выбран файл: ${skinFile.name}`
fontFamily: 'Benzin-Bold', : 'Перетащите PNG файл скина или кликните для выбора'}
color: 'white', </Typography>
paddingTop: '1vw',
paddingBottom: '1vw', <Typography
transition: 'all 0.3s ease-in-out', sx={{
}, mt: 0.6,
'&:hover': { color: 'rgba(255,255,255,0.60)',
'& .MuiSelect-select': { fontWeight: 700,
color: 'rgb(255, 77, 77)', fontSize: '0.9vw',
transition: 'all 0.3s ease-in-out', }}
}, >
}, Только .png • Рекомендуется 64×64
'&.Mui-focused': { </Typography>
'& .MuiSelect-select': { </Box>
color: 'rgb(255, 77, 77)',
transition: 'all 0.3s ease-in-out', {/* select */}
}, <FormControl
}, fullWidth
'& .MuiOutlinedInput-notchedOutline': { size="small"
borderRadius: '5vw', sx={{
borderColor: 'rgb(255, 255, 255)', mb: '1.1vw',
transition: 'all 0.3s ease-in-out', '& .MuiInputLabel-root': {
}, color: 'rgba(255,255,255,0.75)',
'&:hover .MuiOutlinedInput-notchedOutline': { fontFamily: 'Benzin-Bold',
borderColor: 'rgb(255, 77, 77)', },
transition: 'all 0.3s ease-in-out', '& .MuiInputLabel-root.Mui-focused': {
}, color: 'rgba(242,113,33,0.95)',
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { },
borderColor: 'rgb(255, 77, 77)', }}
borderWidth: '2px', >
transition: 'all 0.3s ease-in-out', <InputLabel>Модель скина</InputLabel>
},
'& .MuiSelect-icon': { <Select
color: 'white', value={skinModel}
transition: 'all 0.3s ease-in-out', label="Модель скина"
}, onChange={(e) => setSkinModel(e.target.value)}
'&:hover .MuiSelect-icon': { MenuProps={{
color: 'rgb(255, 77, 77)', PaperProps: {
transition: 'all 0.3s ease-in-out', sx: {
}, bgcolor: 'rgba(10,10,20,0.96)',
'&.Mui-focused .MuiSelect-icon': { border: '1px solid rgba(255,255,255,0.10)',
color: 'rgb(255, 77, 77)', borderRadius: '1vw',
transition: 'all 0.3s ease-in-out', backdropFilter: 'blur(14px)',
}, '& .MuiMenuItem-root': {
}} color: 'rgba(255,255,255,0.9)',
> fontFamily: 'Benzin-Bold',
<MenuItem value="">По умолчанию</MenuItem> },
<MenuItem value="slim">Тонкая (Alex)</MenuItem> '& .MuiMenuItem-root.Mui-selected': {
<MenuItem value="classic">Классическая (Steve)</MenuItem> backgroundColor: 'rgba(242,113,33,0.16)',
</Select> },
</FormControl> '& .MuiMenuItem-root:hover': {
<Button backgroundColor: 'rgba(233,64,205,0.14)',
sx={{ },
color: 'white', },
borderRadius: '20px', },
p: '10px 25px', }}
backgroundColor: 'rgb(0, 134, 0)', sx={{
'&:hover': { borderRadius: '999px',
backgroundColor: 'rgba(0, 134, 0, 0.5)', bgcolor: 'rgba(255,255,255,0.04)',
}, color: 'rgba(255,255,255,0.92)',
fontFamily: 'Benzin-Bold', fontFamily: 'Benzin-Bold',
}} '& .MuiSelect-select': {
variant="contained" py: '0.9vw',
fullWidth px: '1.2vw',
onClick={handleUploadSkin} },
disabled={uploadStatus === 'loading' || !skinFile} '& .MuiOutlinedInput-notchedOutline': {
startIcon={ borderColor: 'rgba(255,255,255,0.14)',
uploadStatus === 'loading' ? ( },
<FullScreenLoader fullScreen={false} /> '&:hover .MuiOutlinedInput-notchedOutline': {
) : null borderColor: 'rgba(242,113,33,0.55)',
} },
> '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
{uploadStatus === 'loading' ? ( borderColor: 'rgba(233,64,205,0.65)',
<FullScreenLoader message="Загрузка..." /> borderWidth: '2px',
) : ( },
<Typography sx={{ color: 'white' }}> '& .MuiSelect-icon': {
Установить скин color: 'rgba(255,255,255,0.75)',
</Typography> },
)} }}
</Button> >
</Box> <MenuItem value="">По умолчанию</MenuItem>
<MenuItem value="slim">Тонкая (Alex)</MenuItem>
<MenuItem value="classic">Классическая (Steve)</MenuItem>
</Select>
</FormControl>
{/* button */}
<Button
variant="contained"
fullWidth
onClick={handleUploadSkin}
disabled={uploadStatus === 'loading' || !skinFile}
disableRipple
sx={{
borderRadius: '2.5vw',
py: '0.95vw',
fontFamily: 'Benzin-Bold',
color: '#fff',
background: GRADIENT,
boxShadow: '0 1.0vw 2.8vw rgba(0,0,0,0.45)',
transition: 'transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease',
'&:hover': {
transform: 'scale(1.01)',
filter: 'brightness(1.05)',
},
'&.Mui-disabled': {
background: 'rgba(255,255,255,0.10)',
color: 'rgba(255,255,255,0.55)',
},
}}
>
{uploadStatus === 'loading' ? (
<Typography sx={{ fontWeight: 900, color: 'rgba(255,255,255,0.9)' }}>
Загрузка...
</Typography>
) : (
<Typography sx={{ fontWeight: 900, color: 'rgba(255,255,255,0.95)' }}>
Установить скин
</Typography>
)}
</Button>
</Box>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',