added new design
This commit is contained in:
Jonas Hinterdorfer
parent
f8dd36e91d
commit
19a433a420
@ -1,64 +1,64 @@
|
||||
.cart-overview {
|
||||
padding: 15px;
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
.cart-summary {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
background-color: #f7f9fc;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.count-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.food-count, .drink-count {
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
margin-top: 8px;
|
||||
color: #2c7be5;
|
||||
}
|
||||
|
||||
.clear-cart-button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #ff5252;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.calculate-change-button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #2c7be5;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.cart-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.calculate-change-button, .clear-cart-button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.calculate-change-button {
|
||||
background-color: #2c7be5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clear-cart-button {
|
||||
background-color: #ff5252;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calculate-change-button:active {
|
||||
background-color: #1b5eb5;
|
||||
background-color: #1b5eb5;
|
||||
}
|
||||
|
||||
.clear-cart-button:active {
|
||||
@ -68,49 +68,51 @@
|
||||
.cart-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
background-color: #f7f9fc;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
gap: 3px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.item-option {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-weight: bold;
|
||||
color: #2c7be5;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.item-quantity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item-quantity button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #2c7be5;
|
||||
@ -126,7 +128,8 @@
|
||||
|
||||
.empty-cart {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
color: #666;
|
||||
padding: 20px;
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@ -15,6 +15,9 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
|
||||
const { addToCart } = useCart();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Check if all options have the same price
|
||||
const hasSamePrice = product.options.every(option => option.price === product.options[0].price);
|
||||
|
||||
const handleAddToCart = () => {
|
||||
addToCart({
|
||||
productId: product.id,
|
||||
@ -26,12 +29,6 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const incrementQuantity = () => setQuantity(prev => prev + 1);
|
||||
const decrementQuantity = () => setQuantity(prev => Math.max(1, prev - 1));
|
||||
|
||||
// Check if all options have the same price
|
||||
const hasSamePrice = product.options.every(option => option.price === product.options[0].price);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="product-details"
|
||||
@ -53,18 +50,16 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
|
||||
</div>
|
||||
))}
|
||||
{hasSamePrice && (
|
||||
<div className="uniform-price">
|
||||
Preis: {product.options[0].price.toFixed(2)} €
|
||||
</div>
|
||||
<div className="uniform-price">Preis: {product.options[0].price.toFixed(2)} €</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="quantity-controls">
|
||||
<h3>Menge:</h3>
|
||||
<div className="quantity-buttons">
|
||||
<button onClick={decrementQuantity}>-</button>
|
||||
<button onClick={() => setQuantity(prev => Math.max(1, prev - 1))}>-</button>
|
||||
<span>{quantity}</span>
|
||||
<button onClick={incrementQuantity}>+</button>
|
||||
<button onClick={() => setQuantity(prev => prev + 1)}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,34 +1,35 @@
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
padding: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.product-item:active {
|
||||
transform: scale(0.98);
|
||||
transform: scale(0.99);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
color: #2c7be5;
|
||||
font-size: 1.1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
@ -1,37 +1,61 @@
|
||||
.home-page {
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background-color: #2c7be5;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 8px 0;
|
||||
font-size: 1.2rem;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid #2c7be5;
|
||||
}
|
||||
|
||||
.category-tabs {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.category-tabs button {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
background-color: #f5f5f5;
|
||||
border: none;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.category-tabs button.active {
|
||||
@ -39,14 +63,22 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.products-section, .cart-section {
|
||||
margin: 20px 0;
|
||||
.products-container {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.products-section h2, .cart-section h2 {
|
||||
margin: 0 10px 10px 10px;
|
||||
font-size: 1.3rem;
|
||||
color: #333;
|
||||
padding-left: 10px;
|
||||
border-left: 4px solid #2c7be5;
|
||||
.cart-container {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.main-container {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,23 +9,11 @@ const HomePage: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<'food' | 'drinks'>('drinks');
|
||||
|
||||
useEffect(() => {
|
||||
const loadProducts = async () => {
|
||||
try {
|
||||
const data = await import('../data/products.json');
|
||||
|
||||
// Sort both food and drinks by name
|
||||
const sortedData = {
|
||||
food: [...data.food].sort((a, b) => a.name.localeCompare(b.name)),
|
||||
drinks: [...data.drinks].sort((a, b) => a.name.localeCompare(b.name))
|
||||
};
|
||||
|
||||
setProductsData(sortedData);
|
||||
} catch (error) {
|
||||
console.error('Failed to load products:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadProducts();
|
||||
import('../data/products.json')
|
||||
.then(data => {
|
||||
setProductsData(data);
|
||||
})
|
||||
.catch(error => console.error('Failed to load products:', error));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@ -34,31 +22,34 @@ const HomePage: React.FC = () => {
|
||||
<h1>Preis Rechner</h1>
|
||||
</header>
|
||||
|
||||
<div className="category-tabs">
|
||||
<button
|
||||
className={activeTab === 'drinks' ? 'active' : ''}
|
||||
onClick={() => setActiveTab('drinks')}
|
||||
>
|
||||
Trinken
|
||||
</button>
|
||||
<button
|
||||
className={activeTab === 'food' ? 'active' : ''}
|
||||
onClick={() => setActiveTab('food')}
|
||||
>
|
||||
Essen
|
||||
</button>
|
||||
<div className="main-container">
|
||||
<div className="products-container">
|
||||
<div className="category-tabs">
|
||||
<button
|
||||
className={activeTab === 'drinks' ? 'active' : ''}
|
||||
onClick={() => setActiveTab('drinks')}
|
||||
>
|
||||
Getränke
|
||||
</button>
|
||||
<button
|
||||
className={activeTab === 'food' ? 'active' : ''}
|
||||
onClick={() => setActiveTab('food')}
|
||||
>
|
||||
Essen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h2 className="section-title">{activeTab === 'food' ? 'Essen' : 'Getränke'}</h2>
|
||||
<ProductList
|
||||
products={productsData[activeTab]}
|
||||
category={activeTab}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="products-section">
|
||||
<h2>{activeTab === 'food' ? 'Essen' : 'Getränke'}</h2>
|
||||
{activeTab === 'food' && <ProductList products={productsData.food} category="food" />}
|
||||
{activeTab === 'drinks' && <ProductList products={productsData.drinks} category="drinks" />}
|
||||
</div>
|
||||
|
||||
<div className="cart-section">
|
||||
<h2>Warenkorb</h2>
|
||||
<CartOverview />
|
||||
<div className="cart-container">
|
||||
<h2 className="section-title">Warenkorb</h2>
|
||||
<CartOverview />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user