Umkm pemagarsari
This commit is contained in:
Flatlogic Bot
parent
c0b1bcc2be
commit
c7ca043bea
Binary file not shown.
Binary file not shown.
@ -183,3 +183,6 @@ if EMAIL_USE_SSL:
|
||||
# https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
|
||||
|
||||
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
|
||||
|
||||
LOGIN_REDIRECT_URL = 'dashboard'
|
||||
LOGOUT_REDIRECT_URL = 'home'
|
||||
|
||||
@ -24,7 +24,6 @@ urlpatterns = [
|
||||
path("", include("core.urls")),
|
||||
]
|
||||
|
||||
if settings.DEBUG:
|
||||
urlpatterns += static("/assets/", document_root=settings.BASE_DIR / "assets")
|
||||
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
|
||||
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
|
||||
# Always serve media files in dev environment
|
||||
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
|
||||
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<nav class="navbar navbar-expand-lg sticky-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="{% url 'home' %}">
|
||||
<i class="fa-solid fa-shop text-emerald me-2"></i><span class="text-emerald">UMKM</span> Pemagarsari
|
||||
<i class="fa-solid fa-shop text-orange me-2"></i><span class="text-orange">UMKM</span> Pemagarsari
|
||||
</a>
|
||||
<button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
@ -61,7 +61,7 @@
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item ms-lg-3">
|
||||
<a class="btn btn-emerald rounded-pill px-4" href="{% url 'login' %}">
|
||||
<a class="btn btn-orange rounded-pill px-4" href="{% url 'login' %}">
|
||||
<i class="fa-solid fa-right-to-bracket me-2"></i>Masuk
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<label class="form-label fw-bold">Password</label>
|
||||
<input type="password" name="password" class="form-control rounded-3 shadow-none py-2" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-emerald w-100 rounded-pill py-3 mb-3">
|
||||
<button type="submit" class="btn btn-orange w-100 rounded-pill py-3 mb-3">
|
||||
Masuk Sekarang
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
<p class="text-muted mb-0">Kelola toko dan produk Anda di sini.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{% url 'shop_add' %}" class="btn btn-outline-emerald rounded-pill px-4">
|
||||
<a href="{% url 'shop_add' %}" class="btn btn-outline-orange rounded-pill px-4">
|
||||
<i class="fa-solid fa-shop me-2"></i>Tambah Toko
|
||||
</a>
|
||||
<a href="{% url 'product_add' %}" class="btn btn-emerald rounded-pill px-4">
|
||||
<a href="{% url 'product_add' %}" class="btn btn-orange rounded-pill px-4">
|
||||
<i class="fa-solid fa-plus me-2"></i>Tambah Produk
|
||||
</a>
|
||||
</div>
|
||||
@ -24,8 +24,8 @@
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card border-0 rounded-4 shadow-sm p-4">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="bg-emerald bg-opacity-10 p-2 rounded-3 me-3">
|
||||
<i class="fa-solid fa-shop text-emerald"></i>
|
||||
<div class="bg-orange bg-opacity-10 p-2 rounded-3 me-3">
|
||||
<i class="fa-solid fa-shop text-orange"></i>
|
||||
</div>
|
||||
<span class="text-muted small">Toko Anda</span>
|
||||
</div>
|
||||
@ -155,7 +155,7 @@
|
||||
<tr>
|
||||
<td colspan="6" class="text-center py-5">
|
||||
<p class="text-muted mb-3">Anda belum menambahkan produk.</p>
|
||||
<a href="{% url 'product_add' %}" class="btn btn-emerald btn-sm rounded-pill px-4">Tambah Sekarang</a>
|
||||
<a href="{% url 'product_add' %}" class="btn btn-orange btn-sm rounded-pill px-4">Tambah Sekarang</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
<small class="text-muted">Kosongkan jika tidak ingin mengubah foto.</small>
|
||||
</div>
|
||||
<div class="col-12 pt-3">
|
||||
<button type="submit" class="btn btn-emerald btn-lg w-100 rounded-pill py-3">
|
||||
<button type="submit" class="btn btn-orange btn-lg w-100 rounded-pill py-3">
|
||||
<i class="fa-solid fa-save me-2"></i>Simpan Produk
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
<input type="file" name="logo" class="form-control rounded-3 shadow-none">
|
||||
</div>
|
||||
<div class="col-12 pt-3">
|
||||
<button type="submit" class="btn btn-emerald btn-lg w-100 rounded-pill py-3">
|
||||
<button type="submit" class="btn btn-orange btn-lg w-100 rounded-pill py-3">
|
||||
<i class="fa-solid fa-save me-2"></i>Simpan Toko
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
{% block content %}
|
||||
<!-- Main Banner -->
|
||||
<div class="container-fluid px-0 mb-4">
|
||||
<div class="position-relative overflow-hidden" style="max-height: 450px;">
|
||||
<img src="{% static 'images/banner.png' %}" alt="Banner Desa Pemagarsari" class="w-100 h-100" style="object-fit: cover; object-position: center;">
|
||||
<div class="position-absolute bottom-0 start-0 w-100 p-4 bg-gradient-dark text-white d-md-none">
|
||||
<h3 class="fw-bold mb-0">Selamat Datang</h3>
|
||||
<div class="banner-wrapper">
|
||||
<img src="{% static 'images/banner.png' %}" alt="Banner Desa Pemagarsari" class="banner-img">
|
||||
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-25">
|
||||
<h2 class="text-white fw-bold d-md-none">Desa Pemagarsari</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -15,34 +15,34 @@
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<span class="badge bg-emerald mb-3 px-3 py-2 rounded-pill">Digitalisasi UMKM Desa</span>
|
||||
<div class="row align-items-center g-4">
|
||||
<div class="col-lg-6 order-2 order-lg-1">
|
||||
<div class="d-inline-block badge bg-orange mb-3 px-3 py-2 rounded-pill">Digitalisasi UMKM Desa</div>
|
||||
<h1 class="hero-title mb-4">Majukan Ekonomi Desa Pemagarsari</h1>
|
||||
<p class="lead text-muted mb-4">Temukan produk unggulan dari warga desa kami. Pesan langsung via WhatsApp tanpa ribet, dukung produk lokal hari ini.</p>
|
||||
<p class="lead text-muted mb-4 text-center text-lg-start">Temukan produk unggulan dari warga desa kami. Pesan langsung via WhatsApp tanpa ribet, dukung produk lokal hari ini.</p>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<form action="{% url 'home' %}" method="GET" class="mb-4">
|
||||
<div class="search-box p-2 bg-white rounded-pill shadow-sm d-flex">
|
||||
<input type="text" name="q" value="{{ query }}" class="form-control border-0 bg-transparent px-4 shadow-none" placeholder="Cari kerajinan, makanan, atau jasa...">
|
||||
<button type="submit" class="btn btn-emerald rounded-pill px-4">
|
||||
<i class="fa-solid fa-magnifying-glass me-2"></i>Cari
|
||||
<input type="text" name="q" value="{{ query|default:'' }}" class="form-control border-0 bg-transparent px-3 px-md-4 shadow-none" placeholder="Cari produk...">
|
||||
<button type="submit" class="btn btn-orange rounded-pill px-3 px-md-4">
|
||||
<i class="fa-solid fa-magnifying-glass"></i><span class="d-none d-md-inline ms-2">Cari</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<a href="#produk" class="btn btn-outline-emerald rounded-pill px-4">Jelajahi Produk</a>
|
||||
<div class="d-flex flex-wrap gap-3 justify-content-center justify-content-lg-start">
|
||||
<a href="#produk" class="btn btn-orange rounded-pill px-4">Jelajahi Produk</a>
|
||||
{% if query or selected_category %}
|
||||
<a href="{% url 'home' %}" class="btn btn-link text-muted text-decoration-none">Reset Filter</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 d-none d-lg-block text-center">
|
||||
<div class="position-relative p-4">
|
||||
<div class="bg-emerald rounded-circle position-absolute top-50 start-50 translate-middle opacity-10" style="width: 500px; height: 500px; filter: blur(60px);"></div>
|
||||
<div class="position-relative z-1 shadow-lg rounded-4 overflow-hidden border border-white border-4 transform-hover transition-all" style="aspect-ratio: 4/3;">
|
||||
<img src="https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&q=90&w=1000" alt="Pasar Tradisional Desa" class="w-100 h-100" style="object-fit: cover; object-position: center;">
|
||||
<div class="col-lg-6 order-1 order-lg-2">
|
||||
<div class="position-relative p-2 p-md-4">
|
||||
<div class="bg-orange rounded-circle position-absolute top-50 start-50 translate-middle opacity-10 d-none d-md-block" style="width: 100%; height: 100%; filter: blur(60px);"></div>
|
||||
<div class="position-relative z-1 shadow-lg rounded-4 overflow-hidden border border-white border-4 transform-hover transition-all mx-auto" style="max-width: 500px; aspect-ratio: 4/3;">
|
||||
<img src="https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&q=90&w=800" alt="Pasar Tradisional Desa" class="w-100 h-100 object-fit-cover">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -120,7 +120,7 @@
|
||||
<div class="bg-white p-5 rounded-4 shadow-sm">
|
||||
<i class="fa-solid fa-box-open fa-3x text-muted mb-3"></i>
|
||||
<p class="text-muted">Belum ada produk untuk ditampilkan.</p>
|
||||
<a href="/admin/core/product/add/" class="btn btn-emerald mt-3">Tambah Produk Pertama</a>
|
||||
<a href="/admin/core/product/add/" class="btn btn-orange mt-3">Tambah Produk Pertama</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@ -131,12 +131,12 @@
|
||||
<!-- Call to Action -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="p-5 rounded-4 text-white text-center position-relative overflow-hidden shadow-lg" style="background: linear-gradient(135deg, rgba(6, 78, 59, 0.85) 0%, rgba(16, 185, 129, 0.75) 100%), url('https://images.unsplash.com/photo-1516253593875-bd7ba052fbc5?auto=format&fit=crop&q=90&w=1200'); background-size: cover; background-position: center;">
|
||||
<div class="p-5 rounded-4 text-white text-center position-relative overflow-hidden shadow-lg" style="background: linear-gradient(135deg, rgba(30, 58, 138, 0.85) 0%, rgba(249, 115, 22, 0.75) 100%), url('https://images.unsplash.com/photo-1516253593875-bd7ba052fbc5?auto=format&fit=crop&q=90&w=1200'); background-size: cover; background-position: center;">
|
||||
<div class="position-relative z-1">
|
||||
<h2 class="fw-bold mb-3">Punya Usaha di Desa Pemagarsari?</h2>
|
||||
<p class="mb-4 opacity-75">Daftarkan toko Anda dan mulai jualan online hari ini. Mudah, gratis, dan langsung ke WhatsApp!</p>
|
||||
<div class="d-flex justify-content-center gap-3">
|
||||
<a href="{% if user.is_authenticated %}{% url 'dashboard' %}{% else %}{% url 'login' %}{% endif %}" class="btn btn-emerald btn-lg px-5 rounded-pill shadow-lg">Mulai Jualan Sekarang</a>
|
||||
<a href="{% if user.is_authenticated %}{% url 'dashboard' %}{% else %}{% url 'login' %}{% endif %}" class="btn btn-orange btn-lg px-5 rounded-pill shadow-lg">Mulai Jualan Sekarang</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb" class="mb-4">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-decoration-none text-emerald">Beranda</a></li>
|
||||
<li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-decoration-none text-orange">Beranda</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">{{ product.name }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
@ -27,11 +27,11 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="ps-lg-4">
|
||||
<span class="badge bg-emerald mb-2 px-3 py-2 rounded-pill">{{ product.category.name }}</span>
|
||||
<span class="badge bg-orange mb-2 px-3 py-2 rounded-pill">{{ product.category.name }}</span>
|
||||
<h1 class="fw-bold mb-3">{{ product.name }}</h1>
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="bg-light p-2 rounded-3 me-3">
|
||||
<i class="fa-solid fa-shop text-emerald"></i>
|
||||
<i class="fa-solid fa-shop text-orange"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0 small text-muted">Dijual oleh</p>
|
||||
@ -48,7 +48,7 @@
|
||||
|
||||
<div class="card border-0 bg-light rounded-4 p-4 mb-4">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<i class="fa-solid fa-circle-info text-emerald me-2"></i>
|
||||
<i class="fa-solid fa-circle-info text-orange me-2"></i>
|
||||
<h6 class="fw-bold mb-0">Cara Pemesanan</h6>
|
||||
</div>
|
||||
<p class="small text-muted mb-0">Klik tombol di bawah untuk terhubung langsung dengan WhatsApp penjual. Pesan otomatis akan terisi dengan detail produk ini.</p>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</div>
|
||||
<div class="row align-items-center position-relative z-1">
|
||||
<div class="col-md-auto mb-4 mb-md-0 text-center">
|
||||
<div class="bg-emerald rounded-circle d-flex align-items-center justify-content-center text-white mx-auto" style="width: 120px; height: 120px; overflow: hidden;">
|
||||
<div class="bg-orange rounded-circle d-flex align-items-center justify-content-center text-white mx-auto" style="width: 120px; height: 120px; overflow: hidden;">
|
||||
{% if shop.logo %}
|
||||
<img src="{{ shop.logo.url }}" alt="{{ shop.name }}" class="img-fluid w-100 h-100 object-fit-cover">
|
||||
{% else %}
|
||||
@ -29,7 +29,7 @@
|
||||
<span class="fw-bold">{{ shop.whatsapp_number }}</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center bg-light px-3 py-2 rounded-pill">
|
||||
<i class="fa-solid fa-box text-emerald me-2"></i>
|
||||
<i class="fa-solid fa-box text-orange me-2"></i>
|
||||
<span>{{ products.count }} Produk</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card border-0 rounded-4 shadow-sm h-100 overflow-hidden">
|
||||
<div class="row g-0 h-100">
|
||||
<div class="col-4 bg-emerald d-flex align-items-center justify-content-center text-white">
|
||||
<div class="col-4 bg-orange d-flex align-items-center justify-content-center text-white">
|
||||
{% if shop.logo %}
|
||||
<img src="{{ shop.logo.url }}" alt="{{ shop.name }}" class="img-fluid w-100 h-100 object-fit-cover">
|
||||
{% else %}
|
||||
@ -30,7 +30,7 @@
|
||||
<i class="fa-brands fa-whatsapp text-success me-2"></i>
|
||||
<span class="small text-muted">{{ shop.whatsapp_number }}</span>
|
||||
</div>
|
||||
<a href="{% url 'shop_detail' shop.slug %}" class="btn btn-outline-emerald btn-sm rounded-pill px-4">Kunjungi Toko</a>
|
||||
<a href="{% url 'shop_detail' shop.slug %}" class="btn btn-outline-orange btn-sm rounded-pill px-4">Kunjungi Toko</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
0
media/product_images/Golden_banana_chips_in_garden_sunshine_1.png
Normal file → Executable file
0
media/product_images/Golden_banana_chips_in_garden_sunshine_1.png
Normal file → Executable file
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
0
media/product_images/Golden_banana_chips_in_wooden_bowl.png
Normal file → Executable file
0
media/product_images/Golden_banana_chips_in_wooden_bowl.png
Normal file → Executable file
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
0
media/product_images/Jajanan_Pasar_Masakan_Nusantara.png
Normal file → Executable file
0
media/product_images/Jajanan_Pasar_Masakan_Nusantara.png
Normal file → Executable file
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
0
media/product_images/Laundry_Ibu_Tini_logo_design_1.png
Normal file → Executable file
0
media/product_images/Laundry_Ibu_Tini_logo_design_1.png
Normal file → Executable file
|
Before Width: | Height: | Size: 307 KiB After Width: | Height: | Size: 307 KiB |
0
media/product_images/Masakan_Nusantara_Ibu_Tini.png
Normal file → Executable file
0
media/product_images/Masakan_Nusantara_Ibu_Tini.png
Normal file → Executable file
|
Before Width: | Height: | Size: 398 KiB After Width: | Height: | Size: 398 KiB |
0
media/shop_logos/7819e47b-9455-4740-bb47-199007a1b8a4_fM25NsS.png
Normal file → Executable file
0
media/shop_logos/7819e47b-9455-4740-bb47-199007a1b8a4_fM25NsS.png
Normal file → Executable file
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
0
media/shop_logos/Kripik_Pisang_logo_design.png
Normal file → Executable file
0
media/shop_logos/Kripik_Pisang_logo_design.png
Normal file → Executable file
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
0
media/shop_logos/Logo_Masakan_Nusantara_Ibu_Tini.png
Normal file → Executable file
0
media/shop_logos/Logo_Masakan_Nusantara_Ibu_Tini.png
Normal file → Executable file
|
Before Width: | Height: | Size: 3.0 MiB After Width: | Height: | Size: 3.0 MiB |
167
static/css/custom.css
Normal file → Executable file
167
static/css/custom.css
Normal file → Executable file
@ -1,15 +1,23 @@
|
||||
:root {
|
||||
--emerald-primary: #10B981;
|
||||
--emerald-dark: #059669;
|
||||
--forest-deep: #064E3B;
|
||||
--primary-orange: #F97316; /* Orange 500 */
|
||||
--dark-orange: #EA580C; /* Orange 600 */
|
||||
--primary-blue: #2563EB; /* Blue 600 */
|
||||
--dark-blue: #1E40AF; /* Blue 800 */
|
||||
--deep-blue: #1E3A8A; /* Blue 900 */
|
||||
|
||||
/* Compatibility Mapping */
|
||||
--emerald-primary: var(--primary-orange);
|
||||
--emerald-dark: var(--dark-orange);
|
||||
--forest-deep: var(--deep-blue);
|
||||
|
||||
--amber-warm: #F59E0B;
|
||||
--glass-bg: rgba(255, 255, 255, 0.8);
|
||||
--soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
--glass-bg: rgba(255, 255, 255, 0.9);
|
||||
--soft-shadow: 0 10px 30px rgba(30, 58, 138, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f8fafc;
|
||||
background-color: #F0FDF4; /* Hijau Muda */
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
@ -17,46 +25,94 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
.text-emerald {
|
||||
color: var(--emerald-primary);
|
||||
/* Orange Styles */
|
||||
.text-orange, .text-emerald {
|
||||
color: var(--primary-orange);
|
||||
}
|
||||
|
||||
.bg-emerald {
|
||||
background-color: var(--emerald-primary);
|
||||
.bg-orange, .bg-emerald {
|
||||
background-color: var(--primary-orange);
|
||||
}
|
||||
|
||||
.btn-emerald {
|
||||
background-color: var(--emerald-primary);
|
||||
border-color: var(--emerald-primary);
|
||||
.btn-orange, .btn-emerald {
|
||||
background-color: var(--primary-orange);
|
||||
border-color: var(--primary-orange);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-emerald:hover {
|
||||
background-color: var(--emerald-dark);
|
||||
border-color: var(--emerald-dark);
|
||||
.btn-orange:hover, .btn-emerald:hover {
|
||||
background-color: var(--dark-orange);
|
||||
border-color: var(--dark-orange);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
|
||||
box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4);
|
||||
}
|
||||
|
||||
.btn-outline-orange, .btn-outline-emerald {
|
||||
color: var(--primary-orange);
|
||||
border: 2px solid var(--primary-orange);
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-outline-orange:hover, .btn-outline-emerald:hover {
|
||||
background-color: var(--primary-orange);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Blue Styles */
|
||||
.text-blue {
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background-color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
background-color: var(--primary-blue);
|
||||
border-color: var(--primary-blue);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-blue:hover {
|
||||
background-color: var(--dark-blue);
|
||||
border-color: var(--dark-blue);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid rgba(30, 58, 138, 0.05);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.5rem;
|
||||
color: var(--forest-deep);
|
||||
color: var(--deep-blue);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--deep-blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--primary-orange);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
padding: 100px 0;
|
||||
background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
|
||||
background: linear-gradient(135deg, #DCFCE7 0%, #F0FDF4 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -68,7 +124,7 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
right: -5%;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
||||
background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -76,7 +132,7 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
color: var(--forest-deep);
|
||||
color: var(--deep-blue);
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
@ -94,14 +150,14 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
|
||||
.category-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #ecfdf5;
|
||||
color: var(--emerald-primary);
|
||||
background: #fff7ed;
|
||||
color: var(--primary-orange);
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -122,7 +178,7 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);
|
||||
}
|
||||
|
||||
.product-img-wrapper {
|
||||
@ -152,14 +208,14 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: var(--emerald-primary);
|
||||
color: var(--primary-orange);
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.shop-badge {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
background: #eff6ff;
|
||||
color: var(--primary-blue);
|
||||
padding: 4px 12px;
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem;
|
||||
@ -193,7 +249,7 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
.transform-hover:hover {
|
||||
animation-play-state: paused;
|
||||
transform: scale(1.03) translateY(-5px);
|
||||
box-shadow: 0 30px 60px -12px rgba(16, 185, 129, 0.3) !important;
|
||||
box-shadow: 0 30px 60px -12px rgba(249, 115, 22, 0.3) !important;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
@ -202,18 +258,18 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
|
||||
/* Search Box */
|
||||
.search-box {
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border: 1px solid rgba(30, 58, 138, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
border-color: var(--emerald-primary);
|
||||
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
|
||||
border-color: var(--primary-orange);
|
||||
box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Categories Active State */
|
||||
.category-card.active {
|
||||
background: var(--forest-deep);
|
||||
background: var(--deep-blue);
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
@ -226,8 +282,49 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #F0FDF4;
|
||||
border-top: 1px solid rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-section {
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.banner-wrapper {
|
||||
height: 200px !important;
|
||||
}
|
||||
.category-card {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
.category-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.banner-wrapper {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.object-fit-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
BIN
static/images/banner.png
Executable file
BIN
static/images/banner.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
@ -1,15 +1,23 @@
|
||||
:root {
|
||||
--emerald-primary: #10B981;
|
||||
--emerald-dark: #059669;
|
||||
--forest-deep: #064E3B;
|
||||
--primary-orange: #F97316; /* Orange 500 */
|
||||
--dark-orange: #EA580C; /* Orange 600 */
|
||||
--primary-blue: #2563EB; /* Blue 600 */
|
||||
--dark-blue: #1E40AF; /* Blue 800 */
|
||||
--deep-blue: #1E3A8A; /* Blue 900 */
|
||||
|
||||
/* Compatibility Mapping */
|
||||
--emerald-primary: var(--primary-orange);
|
||||
--emerald-dark: var(--dark-orange);
|
||||
--forest-deep: var(--deep-blue);
|
||||
|
||||
--amber-warm: #F59E0B;
|
||||
--glass-bg: rgba(255, 255, 255, 0.8);
|
||||
--soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
--glass-bg: rgba(255, 255, 255, 0.9);
|
||||
--soft-shadow: 0 10px 30px rgba(30, 58, 138, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f8fafc;
|
||||
background-color: #F0FDF4; /* Hijau Muda */
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
@ -17,46 +25,94 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
.text-emerald {
|
||||
color: var(--emerald-primary);
|
||||
/* Orange Styles */
|
||||
.text-orange, .text-emerald {
|
||||
color: var(--primary-orange);
|
||||
}
|
||||
|
||||
.bg-emerald {
|
||||
background-color: var(--emerald-primary);
|
||||
.bg-orange, .bg-emerald {
|
||||
background-color: var(--primary-orange);
|
||||
}
|
||||
|
||||
.btn-emerald {
|
||||
background-color: var(--emerald-primary);
|
||||
border-color: var(--emerald-primary);
|
||||
.btn-orange, .btn-emerald {
|
||||
background-color: var(--primary-orange);
|
||||
border-color: var(--primary-orange);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-emerald:hover {
|
||||
background-color: var(--emerald-dark);
|
||||
border-color: var(--emerald-dark);
|
||||
.btn-orange:hover, .btn-emerald:hover {
|
||||
background-color: var(--dark-orange);
|
||||
border-color: var(--dark-orange);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
|
||||
box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4);
|
||||
}
|
||||
|
||||
.btn-outline-orange, .btn-outline-emerald {
|
||||
color: var(--primary-orange);
|
||||
border: 2px solid var(--primary-orange);
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-outline-orange:hover, .btn-outline-emerald:hover {
|
||||
background-color: var(--primary-orange);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Blue Styles */
|
||||
.text-blue {
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background-color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
background-color: var(--primary-blue);
|
||||
border-color: var(--primary-blue);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-blue:hover {
|
||||
background-color: var(--dark-blue);
|
||||
border-color: var(--dark-blue);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid rgba(30, 58, 138, 0.05);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.5rem;
|
||||
color: var(--forest-deep);
|
||||
color: var(--deep-blue);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--deep-blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--primary-orange);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
padding: 100px 0;
|
||||
background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
|
||||
background: linear-gradient(135deg, #DCFCE7 0%, #F0FDF4 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -68,7 +124,7 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
right: -5%;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
||||
background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -76,7 +132,7 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
color: var(--forest-deep);
|
||||
color: var(--deep-blue);
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
@ -94,14 +150,14 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
|
||||
.category-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #ecfdf5;
|
||||
color: var(--emerald-primary);
|
||||
background: #fff7ed;
|
||||
color: var(--primary-orange);
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -122,7 +178,7 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);
|
||||
}
|
||||
|
||||
.product-img-wrapper {
|
||||
@ -152,14 +208,14 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: var(--emerald-primary);
|
||||
color: var(--primary-orange);
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.shop-badge {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
background: #eff6ff;
|
||||
color: var(--primary-blue);
|
||||
padding: 4px 12px;
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem;
|
||||
@ -193,7 +249,7 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
.transform-hover:hover {
|
||||
animation-play-state: paused;
|
||||
transform: scale(1.03) translateY(-5px);
|
||||
box-shadow: 0 30px 60px -12px rgba(16, 185, 129, 0.3) !important;
|
||||
box-shadow: 0 30px 60px -12px rgba(249, 115, 22, 0.3) !important;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
@ -202,18 +258,18 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
|
||||
/* Search Box */
|
||||
.search-box {
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border: 1px solid rgba(30, 58, 138, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
border-color: var(--emerald-primary);
|
||||
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
|
||||
border-color: var(--primary-orange);
|
||||
box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Categories Active State */
|
||||
.category-card.active {
|
||||
background: var(--forest-deep);
|
||||
background: var(--deep-blue);
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
@ -226,8 +282,49 @@ h1, h2, h3, h4, .navbar-brand {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #F0FDF4;
|
||||
border-top: 1px solid rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-section {
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.banner-wrapper {
|
||||
height: 200px !important;
|
||||
}
|
||||
.category-card {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
.category-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.banner-wrapper {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.object-fit-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 144 KiB |
Loading…
x
Reference in New Issue
Block a user