wisecolt/imgPub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navbar eklendi

Browse Source
This commit is contained in:
szbk
2025-11-11 21:45:25 +03:00
parent 5436bb5890
commit 34c7365ab3
3 changed files with 128 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -4,6 +4,12 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Caudex:wght@700&display=swap"
/>
<title>imgPub - PDF OCR Sihirbazı</title> <title>imgPub - PDF OCR Sihirbazı</title>
</head> </head>
<body> <body>

125
src/App.jsx
View File

@@ -2,9 +2,12 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { import {
Alert, Alert,
Box, Box,
Button,
Container, Container,
Link,
Paper, Paper,
Snackbar, Snackbar,
Stack,
Step, Step,
StepLabel, StepLabel,
Stepper, Stepper,
@@ -39,33 +42,103 @@ const App = () => {
}, [location.pathname]); }, [location.pathname]);
return ( return (
<Container maxWidth="lg" sx={{ py: 4 }}> <>
<Box mb={4}> <Box
<Typography variant="h4" gutterBottom sx={{ color: '#29615D', fontWeight: 700 }}> component="header"
imgPub EPUB Sihirbazı sx={{
</Typography> position: 'sticky',
<Typography color="text.secondary"> top: 0,
Görselleri sırayla işle, OCR ile metne dönüştür ve EPUB formatında indir. zIndex: 1200,
</Typography> backgroundColor: '#FFFFFF',
borderBottom: '1px solid #E0DFDC',
boxShadow: '0 6px 12px rgba(0,0,0,0.04)',
}}
>
<Container maxWidth="lg">
<Stack direction="row" alignItems="center" justifyContent="space-between" py={0.5}>
<Typography
variant="h4"
sx={{
fontFamily: '"Caudex", serif',
color: '#1C1815',
fontWeight: 700,
letterSpacing: 1,
}}
>
imgpub
</Typography>
<Stack direction="row" spacing={3} alignItems="center">
<Typography
component="button"
type="button"
sx={{
background: 'none',
border: 'none',
color: '#2F2D28',
fontWeight: 600,
fontSize: '0.95rem',
cursor: 'pointer',
textTransform: 'uppercase',
letterSpacing: 0.5,
transition: 'color 0.2s ease',
'&:hover': { color: '#d7b16a' },
}}
>
Login
</Typography>
<Button variant="contained" color="primary" size="small">
Sign Up
</Button>
</Stack>
</Stack>
</Container>
</Box> </Box>
<Paper sx={{ p: { xs: 2, md: 4 }, mb: 4 }} elevation={0}> <Container maxWidth="lg" sx={{ py: 6 }}>
<Stepper activeStep={activeStep} alternativeLabel> <Box mb={5} textAlign="center">
{wizardSteps.map((step) => ( <Typography
<Step key={step.path} onClick={() => navigate(step.path)} sx={{ cursor: 'pointer' }}> variant="h3"
<StepLabel>{step.label}</StepLabel> sx={{
</Step> fontWeight: 700,
))} color: '#1C1815',
</Stepper> letterSpacing: -0.5,
</Paper> fontSize: { xs: '1.9rem', md: '2.6rem' },
<Paper sx={{ p: { xs: 2, md: 4 }, minHeight: 400 }} elevation={0}> }}
<Outlet /> >
</Paper> Tek ekranda görselden EPUB&apos;a kadar tüm sihirbaz adımları
<Snackbar open={Boolean(error)} autoHideDuration={4000} onClose={handleSnackbarClose}> </Typography>
<Alert onClose={handleSnackbarClose} severity="error" sx={{ width: '100%' }}> <Typography
{error} sx={{
</Alert> mt: 1.5,
</Snackbar> color: '#5A5751',
</Container> fontSize: { xs: '1rem', md: '1.2rem' },
lineHeight: 1.6,
maxWidth: 720,
mx: 'auto',
}}
>
Kapak seç, crop alanını belirle, OCR ile Türkçe metinleri koru ve sonucunu tek tıkla EPUB olarak indir.
imgpub tüm işlemleri tek bir akışta toplar, hızlı ve modern bir deneyim sunar.
</Typography>
</Box>
<Paper sx={{ p: { xs: 2, md: 4 }, mb: 4 }} elevation={0}>
<Stepper activeStep={activeStep} alternativeLabel>
{wizardSteps.map((step) => (
<Step key={step.path} onClick={() => navigate(step.path)} sx={{ cursor: 'pointer' }}>
<StepLabel>{step.label}</StepLabel>
</Step>
))}
</Stepper>
</Paper>
<Paper sx={{ p: { xs: 2, md: 4 }, minHeight: 400 }} elevation={0}>
<Outlet />
</Paper>
<Snackbar open={Boolean(error)} autoHideDuration={4000} onClose={handleSnackbarClose}>
<Alert onClose={handleSnackbarClose} severity="error" sx={{ width: '100%' }}>
{error}
</Alert>
</Snackbar>
</Container>
</>
); );
}; };

26
src/main.jsx
View File

@@ -51,8 +51,10 @@ const theme = createTheme({
borderRadius: 999, borderRadius: 999,
textTransform: 'none', textTransform: 'none',
boxShadow: '0 6px 20px rgba(231, 193, 121, 0.35)', boxShadow: '0 6px 20px rgba(231, 193, 121, 0.35)',
transition: 'background-color 0.2s ease, box-shadow 0.2s ease',
'&:hover': { '&:hover': {
backgroundColor: '#d7b16a', backgroundColor: '#d7b16a',
boxShadow: 'none',
}, },
}, },
}, },
@@ -60,9 +62,10 @@ const theme = createTheme({
MuiPaper: { MuiPaper: {
styleOverrides: { styleOverrides: {
root: { root: {
backgroundColor: '#FAF8F6', backgroundColor: '#FFFFFF',
boxShadow: '0 20px 45px rgba(0,0,0,0.08)', border: '1px solid #D2D2D2',
borderRadius: 24, borderRadius: '1.5px',
boxShadow: '0 10px 18px rgba(0,0,0,0.06)',
}, },
}, },
}, },
@@ -99,6 +102,23 @@ const theme = createTheme({
}, },
}, },
}, },
MuiStepLabel: {
styleOverrides: {
label: {
backgroundColor: '#FFFFFF',
border: '1px solid #D2D2D2',
borderRadius: '1.5px',
padding: '4px 10px',
color: '#1C1815',
boxShadow: '0 6px 12px rgba(0,0,0,0.05)',
fontWeight: 600,
'&.Mui-disabled': {
color: '#B5AD9A',
opacity: 0.8,
},
},
},
},
}, },
}); });