mirror of
https://github.com/narrrl/holy-flavor-rater.git
synced 2026-11-03 16:41:27 +01:00
updated impressium for variables
This commit is contained in:
nvrl committed
1 parent
63753c65fd
commit
8af87d8104
5 files changed
+138
-242
No files matched your search
@@ -31,3 +31,9 @@ EMAIL_HOST_PASSWORD=your-app-specific-password
|
||||
# The base URL of the backend API (e.g., https://holy.narl.io/api/)
|
||||
VITE_API_URL=http://localhost:8000/api/
|
||||
VITE_ALLOWED_HOSTS=localhost
|
||||
|
||||
# --- Impressum / Contact Details (Legal) ---
|
||||
VITE_IMPRESSUM_NAME="Your Name or Project Name"
|
||||
VITE_IMPRESSUM_STREET="Your Street Address"
|
||||
VITE_IMPRESSUM_CITY="Postal Code and City"
|
||||
VITE_IMPRESSUM_EMAIL="your-support@email.com"
|
||||
@@ -29,6 +29,10 @@ services:
|
||||
context: ./frontend
|
||||
args:
|
||||
- VITE_API_URL=https://holy.narl.io/api/
|
||||
- VITE_IMPRESSUM_NAME=${VITE_IMPRESSUM_NAME}
|
||||
- VITE_IMPRESSUM_STREET=${VITE_IMPRESSUM_STREET}
|
||||
- VITE_IMPRESSUM_CITY=${VITE_IMPRESSUM_CITY}
|
||||
- VITE_IMPRESSUM_EMAIL=${VITE_IMPRESSUM_EMAIL}
|
||||
container_name: holy-frontend
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
|
||||
@@ -7,7 +7,16 @@ COPY . .
|
||||
|
||||
# Pass VITE environment variables during build
|
||||
ARG VITE_API_URL
|
||||
ARG VITE_IMPRESSUM_NAME
|
||||
ARG VITE_IMPRESSUM_STREET
|
||||
ARG VITE_IMPRESSUM_CITY
|
||||
ARG VITE_IMPRESSUM_EMAIL
|
||||
|
||||
ENV VITE_API_URL=${VITE_API_URL}
|
||||
ENV VITE_IMPRESSUM_NAME=${VITE_IMPRESSUM_NAME}
|
||||
ENV VITE_IMPRESSUM_STREET=${VITE_IMPRESSUM_STREET}
|
||||
ENV VITE_IMPRESSUM_CITY=${VITE_IMPRESSUM_CITY}
|
||||
ENV VITE_IMPRESSUM_EMAIL=${VITE_IMPRESSUM_EMAIL}
|
||||
|
||||
RUN npm run build
|
||||
|
||||
|
||||
@@ -47,16 +47,16 @@ const About: React.FC = () => {
|
||||
<Typography variant="h4" gutterBottom sx={{ fontWeight: 'bold' }}>Impressum</Typography>
|
||||
<Typography variant="body2" sx={{ lineHeight: 2 }}>
|
||||
<strong>Angaben gemäß § 5 TMG:</strong><br />
|
||||
[Your Name or Project Name]<br />
|
||||
[Your Street Address]<br />
|
||||
[Postal Code and City]<br />
|
||||
{import.meta.env.VITE_IMPRESSUM_NAME || '[Your Name or Project Name]'}<br />
|
||||
{import.meta.env.VITE_IMPRESSUM_STREET || '[Your Street Address]'}<br />
|
||||
{import.meta.env.VITE_IMPRESSUM_CITY || '[Postal Code and City]'}<br />
|
||||
Germany
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mt: 3 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>Kontakt:</Typography>
|
||||
<Typography variant="body2">
|
||||
E-Mail: [Your Support Email Address]<br />
|
||||
E-Mail: {import.meta.env.VITE_IMPRESSUM_EMAIL || '[Your Support Email Address]'}<br />
|
||||
Internet: holy.narl.io
|
||||
</Typography>
|
||||
</Box>
|
||||
@@ -64,9 +64,9 @@ const About: React.FC = () => {
|
||||
<Box sx={{ mt: 3 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</Typography>
|
||||
<Typography variant="body2">
|
||||
[Your Name]<br />
|
||||
[Your Street Address]<br />
|
||||
[Postal Code and City]
|
||||
{import.meta.env.VITE_IMPRESSUM_NAME || '[Your Name]'}<br />
|
||||
{import.meta.env.VITE_IMPRESSUM_STREET || '[Your Street Address]'}<br />
|
||||
{import.meta.env.VITE_IMPRESSUM_CITY || '[Postal Code and City]'}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
|
||||
+112
-235
@@ -210,246 +210,123 @@ const MainPage: React.FC = () => {
|
||||
const currentTop = topFlavors[activeIndex];
|
||||
const featuredReview = currentTop?.ratings?.find(r => r.comment) || null;
|
||||
|
||||
return (
|
||||
|
||||
<Box sx={{ width: '100%' }}>
|
||||
|
||||
{/* 1. Hero Section / Activity Feed */}
|
||||
|
||||
{isLoggedIn ? (
|
||||
|
||||
<Box sx={{
|
||||
|
||||
py: { xs: 4, md: 8 },
|
||||
|
||||
px: { xs: 2, sm: 4, md: 6 },
|
||||
|
||||
background: (theme) => theme.palette.mode === 'dark'
|
||||
|
||||
? 'linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%)'
|
||||
|
||||
: 'linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%)',
|
||||
|
||||
borderBottom: '1px solid',
|
||||
|
||||
borderColor: 'divider',
|
||||
|
||||
mb: 4
|
||||
|
||||
}}>
|
||||
|
||||
<Container maxWidth="lg">
|
||||
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', mb: 4, flexWrap: 'wrap', gap: 2 }}>
|
||||
|
||||
<Box>
|
||||
|
||||
<Typography variant="h3" sx={{ fontWeight: 'bold', mb: 1, fontSize: { xs: '2rem', md: '3rem' } }}>Community Activity</Typography>
|
||||
|
||||
<Typography variant="body1" color="text.secondary">Latest reviews from people you follow</Typography>
|
||||
|
||||
</Box>
|
||||
|
||||
<Button component={Link} to="/community" variant="outlined" sx={{ borderRadius: 2, textTransform: 'none' }}>
|
||||
|
||||
View Full Feed
|
||||
|
||||
</Button>
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{/* Hero Section / Activity Feed */}
|
||||
{isLoggedIn ? (
|
||||
<Box sx={{
|
||||
py: { xs: 4, md: 8 },
|
||||
px: { xs: 2, sm: 4, md: 6 },
|
||||
background: (theme) => theme.palette.mode === 'dark'
|
||||
? 'linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%)'
|
||||
: 'linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%)',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
mb: 4
|
||||
}}>
|
||||
<Container maxWidth="lg">
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', mb: 4, flexWrap: 'wrap', gap: 2 }}>
|
||||
<Box>
|
||||
<Typography variant="h3" sx={{ fontWeight: 'bold', mb: 1, fontSize: { xs: '2rem', md: '3rem' } }}>Community Activity</Typography>
|
||||
<Typography variant="body1" color="text.secondary">Latest reviews from people you follow</Typography>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
{feedRatings.length === 0 ? (
|
||||
|
||||
<Paper sx={{ p: 4, textAlign: 'center', borderRadius: 4, bgcolor: 'action.hover', border: '2px dashed', borderColor: 'divider', elevation: 0 }}>
|
||||
|
||||
<Typography variant="h6">Your feed is a bit quiet</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Follow more users to see their activity here!</Typography>
|
||||
|
||||
<Button variant="contained" component={Link} to="/" size="small" sx={{ borderRadius: 2 }}>Explore Flavors</Button>
|
||||
|
||||
</Paper>
|
||||
|
||||
) : (
|
||||
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }, gap: 3 }}>
|
||||
|
||||
{feedRatings.map(rating => (
|
||||
|
||||
<Card key={rating.id} sx={{ borderRadius: 3, transition: 'transform 0.2s', '&:hover': { transform: 'translateY(-4px)' } }}>
|
||||
|
||||
<CardContent sx={{ p: { xs: 1.5, sm: 2 } }}>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
|
||||
|
||||
<Link to={`/profile/${rating.user}`} style={{ textDecoration: 'none', color: 'inherit', display: 'flex', alignItems: 'center' }}>
|
||||
|
||||
<Avatar src={rating.user_avatar || undefined} sx={{ width: 24, height: 24, mr: 1 }}>
|
||||
|
||||
{!rating.user_avatar && rating.user.charAt(0).toUpperCase()}
|
||||
|
||||
</Avatar>
|
||||
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 'bold', fontSize: '0.8rem' }}>{rating.user}</Typography>
|
||||
|
||||
</Link>
|
||||
|
||||
<Typography variant="caption" color="text.secondary" sx={{ ml: 0.5 }}>rated</Typography>
|
||||
|
||||
<Box sx={{ flexGrow: 1 }} />
|
||||
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
|
||||
{new Date(rating.created_at).toLocaleDateString()}
|
||||
|
||||
</Typography>
|
||||
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
|
||||
|
||||
<Box
|
||||
|
||||
component="img"
|
||||
|
||||
src={rating.flavor_image || undefined}
|
||||
|
||||
sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover', border: '1px solid', borderColor: 'divider' }}
|
||||
|
||||
/>
|
||||
|
||||
<Box sx={{ minWidth: 0, flex: 1 }}>
|
||||
|
||||
<Link to={`/flavor/${rating.flavor}`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
|
||||
<Typography variant="body2" sx={{ fontWeight: 'bold', display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden', fontSize: '0.85rem', mb: 0.5 }}>
|
||||
|
||||
{rating.flavor_name}
|
||||
|
||||
</Typography>
|
||||
|
||||
</Link>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
|
||||
{/* Compact rating for anything below Large desktop to prevent cutoffs */}
|
||||
|
||||
<Box sx={{ display: { xs: 'flex', lg: 'none' }, alignItems: 'center', gap: 0.5 }}>
|
||||
|
||||
<StarIcon sx={{ fontSize: '1rem', color: 'primary.main' }} />
|
||||
|
||||
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>{rating.score}/10</Typography>
|
||||
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: { xs: 'none', lg: 'flex' }, alignItems: 'center' }}>
|
||||
|
||||
<MuiRating value={rating.score} readOnly size="small" max={10} />
|
||||
|
||||
<Typography variant="caption" sx={{ ml: 1, fontWeight: 'bold' }}>{rating.score}/10</Typography>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
|
||||
))}
|
||||
|
||||
</Box>
|
||||
|
||||
)}
|
||||
|
||||
</Container>
|
||||
|
||||
</Box>
|
||||
|
||||
) : (
|
||||
|
||||
<Paper
|
||||
|
||||
elevation={0}
|
||||
|
||||
sx={{
|
||||
|
||||
p: { xs: 4, md: 10 },
|
||||
|
||||
mb: 4,
|
||||
|
||||
borderRadius: 0,
|
||||
|
||||
background: (theme) => theme.palette.mode === 'dark'
|
||||
|
||||
? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
|
||||
|
||||
: 'linear-gradient(135deg, #fdf6f7 0%, #f8e1e5 100%)',
|
||||
|
||||
textAlign: 'center',
|
||||
|
||||
borderBottom: '1px solid rgba(255,255,255,0.1)',
|
||||
|
||||
width: '100%',
|
||||
|
||||
boxSizing: 'border-box',
|
||||
|
||||
overflow: 'hidden'
|
||||
|
||||
}}
|
||||
|
||||
>
|
||||
|
||||
<Typography variant="h2" component="h1" gutterBottom sx={{ fontWeight: 'bold', fontSize: { xs: '2.2rem', sm: '3rem', md: '4.5rem' }, overflowWrap: 'break-word', px: 2 }}>
|
||||
|
||||
The Ultimate Holy Archive
|
||||
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h5" color="text.secondary" sx={{ mb: 4, maxWidth: 800, mx: 'auto', px: 2 }}>
|
||||
|
||||
Browse every flavor ever released, discover new favorites, and share your ratings with the community.
|
||||
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, flexWrap: 'wrap', px: 2 }}>
|
||||
|
||||
<Button variant="contained" size="large" component={Link} to="/login" sx={{ px: 4, py: 1.5, borderRadius: 2 }}>
|
||||
|
||||
Join Community
|
||||
|
||||
<Button component={Link} to="/community" variant="outlined" sx={{ borderRadius: 2, textTransform: 'none' }}>
|
||||
View Full Feed
|
||||
</Button>
|
||||
|
||||
<Button variant="outlined" size="large" component={Link} to="/about" sx={{ px: 4, py: 1.5, borderRadius: 2 }}>
|
||||
|
||||
What is this for?
|
||||
|
||||
</Button>
|
||||
|
||||
</Box>
|
||||
|
||||
</Paper>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
|
||||
<Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, pb: 8 }}>
|
||||
|
||||
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', xl: 'row' }, gap: 6, mb: 10 }}>
|
||||
|
||||
|
||||
|
||||
|
||||
{feedRatings.length === 0 ? (
|
||||
<Paper sx={{ p: 4, textAlign: 'center', borderRadius: 4, bgcolor: 'action.hover', border: '2px dashed', borderColor: 'divider', elevation: 0 }}>
|
||||
<Typography variant="h6">Your feed is a bit quiet</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Follow more users to see their activity here!</Typography>
|
||||
<Button variant="contained" component={Link} to="/" size="small" sx={{ borderRadius: 2 }}>Explore Flavors</Button>
|
||||
</Paper>
|
||||
) : (
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }, gap: 3 }}>
|
||||
{feedRatings.map(rating => (
|
||||
<Card key={rating.id} sx={{ borderRadius: 3, transition: 'transform 0.2s', '&:hover': { transform: 'translateY(-4px)' } }}>
|
||||
<CardContent sx={{ p: { xs: 1.5, sm: 2 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
|
||||
<Link to={`/profile/${rating.user}`} style={{ textDecoration: 'none', color: 'inherit', display: 'flex', alignItems: 'center' }}>
|
||||
<Avatar src={rating.user_avatar || undefined} sx={{ width: 24, height: 24, mr: 1 }}>
|
||||
{!rating.user_avatar && rating.user.charAt(0).toUpperCase()}
|
||||
</Avatar>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 'bold', fontSize: '0.8rem' }}>{rating.user}</Typography>
|
||||
</Link>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ ml: 0.5 }}>rated</Typography>
|
||||
<Box sx={{ flexGrow: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{new Date(rating.created_at).toLocaleDateString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
|
||||
<Box
|
||||
component="img"
|
||||
src={rating.flavor_image || undefined}
|
||||
sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover', border: '1px solid', borderColor: 'divider' }}
|
||||
/>
|
||||
<Box sx={{ minWidth: 0, flex: 1 }}>
|
||||
<Link to={`/flavor/${rating.flavor}`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 'bold', display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden', fontSize: '0.85rem', mb: 0.5 }}>
|
||||
{rating.flavor_name}
|
||||
</Typography>
|
||||
</Link>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{/* Compact rating for anything below Large desktop to prevent cutoffs */}
|
||||
<Box sx={{ display: { xs: 'flex', lg: 'none' }, alignItems: 'center', gap: 0.5 }}>
|
||||
<StarIcon sx={{ fontSize: '1rem', color: 'primary.main' }} />
|
||||
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>{rating.score}/10</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: { xs: 'none', lg: 'flex' }, alignItems: 'center' }}>
|
||||
<MuiRating value={rating.score} readOnly size="small" max={10} />
|
||||
<Typography variant="caption" sx={{ ml: 1, fontWeight: 'bold' }}>{rating.score}/10</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Container>
|
||||
</Box>
|
||||
) : (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: { xs: 4, md: 10 },
|
||||
mb: 4,
|
||||
borderRadius: 0,
|
||||
background: (theme) => theme.palette.mode === 'dark'
|
||||
? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
|
||||
: 'linear-gradient(135deg, #fdf6f7 0%, #f8e1e5 100%)',
|
||||
textAlign: 'center',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.1)',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h2" component="h1" gutterBottom sx={{ fontWeight: 'bold', fontSize: { xs: '2.2rem', sm: '3rem', md: '4.5rem' }, overflowWrap: 'break-word', px: 2 }}>
|
||||
The Ultimate Holy Archive
|
||||
</Typography>
|
||||
<Typography variant="h5" color="text.secondary" sx={{ mb: 4, maxWidth: 800, mx: 'auto', px: 2 }}>
|
||||
Browse every flavor ever released, discover new favorites, and share your ratings with the community.
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, flexWrap: 'wrap', px: 2 }}>
|
||||
<Button variant="contained" size="large" component={Link} to="/login" sx={{ px: 4, py: 1.5, borderRadius: 2 }}>
|
||||
Join Community
|
||||
</Button>
|
||||
<Button variant="outlined" size="large" component={Link} to="/about" sx={{ px: 4, py: 1.5, borderRadius: 2 }}>
|
||||
What is this for?
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
<Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, pb: 8 }}>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', xl: 'row' }, gap: 6, mb: 10 }}>
|
||||
{/* Hall of Fame Carousel - SIDE BY SIDE */}
|
||||
{topFlavors.length > 0 && currentTop && (
|
||||
|
||||
Reference in new issue
Block a user