diff --git a/backend/MarketPlace/static/carousel.js b/backend/MarketPlace/static/carousel.js new file mode 100644 index 0000000..f14d1cc --- /dev/null +++ b/backend/MarketPlace/static/carousel.js @@ -0,0 +1,64 @@ +document.addEventListener("DOMContentLoaded", () => { + // Swiper root element + const el = document.querySelector(".mySwiper"); + if (!el) return; + + // We always render a fixed number of slides (products + placeholders) + const totalSlides = el.querySelectorAll(".swiper-slide").length; + + // Init Swiper (single instance) + new Swiper(".mySwiper", { + // 3D coverflow look + effect: "coverflow", + grabCursor: true, + centeredSlides: true, + + // Visible slides + slidesPerView: 3, + spaceBetween: 30, + + // Move one slide at a time + slidesPerGroup: 1, + + // Infinite loop + loop: true, + loopedSlides: totalSlides, + loopAdditionalSlides: totalSlides, + + // Auto move every 5 seconds + autoplay: { + delay: 5000, + disableOnInteraction: false, + pauseOnMouseEnter: true, + }, + + // Allow clicking links inside slides + preventClicks: false, + preventClicksPropagation: false, + + // Transition speed + speed: 650, + + // Coverflow settings + coverflowEffect: { + rotate: 0, + stretch: 0, + depth: 140, + modifier: 1, + slideShadows: false, + }, + + // Arrow navigation + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + + // Responsive layout + breakpoints: { + 0: { slidesPerView: 1, spaceBetween: 20 }, + 768: { slidesPerView: 2, spaceBetween: 25 }, + 1024: { slidesPerView: 3, spaceBetween: 30 }, + }, + }); +}); diff --git a/backend/MarketPlace/static/images/logo.png b/backend/MarketPlace/static/images/logo.png new file mode 100644 index 0000000..0a4fee1 Binary files /dev/null and b/backend/MarketPlace/static/images/logo.png differ diff --git a/backend/MarketPlace/static/images/product-placeholder.jpg b/backend/MarketPlace/static/images/product-placeholder.jpg new file mode 100644 index 0000000..3dc75bd Binary files /dev/null and b/backend/MarketPlace/static/images/product-placeholder.jpg differ diff --git a/backend/MarketPlace/static/styles.css b/backend/MarketPlace/static/styles.css new file mode 100644 index 0000000..34cf28a --- /dev/null +++ b/backend/MarketPlace/static/styles.css @@ -0,0 +1,264 @@ +/* ========================= */ +/* BASE */ +/* ========================= */ + +/* Remove default browser margin */ +body { + margin: 0; +} + +/* ========================= */ +/* NAVBAR */ +/* ========================= */ + +/* Top navigation bar */ +.navbar { + height: 72px; + display: flex; + align-items: center; + overflow: hidden; + + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); + position: relative; + /* Needed for the bottom gradient line */ +} + +/* Subtle bottom line */ +.navbar::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 1px; + background: linear-gradient(to right, + transparent, + rgba(0, 0, 0, 0.08), + transparent); +} + +/* Navbar layout container */ +.nav-inner { + width: 100%; + padding: 0 24px; + display: flex; + align-items: center; + justify-content: space-between; +} + +/* Left block (logo) */ +.nav-left { + height: 100%; + max-width: 260px; + display: flex; + align-items: center; + overflow: hidden; +} + +/* Logo image (keep your size) */ +.logo { + height: 100%; + max-height: 98px; + width: auto; + object-fit: contain; +} + +/* Right block (icons + buttons) */ +.nav-right { + display: flex; + align-items: center; + gap: 22px; +} + +/* Icon button wrapper */ +.icon-btn { + background: none; + border: none; + padding: 6px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.25s ease, opacity 0.25s ease; + text-decoration: none; + /* So looks clean */ +} + +/* SVG icon style */ +.icon { + width: 22px; + height: 22px; + stroke: #000; + fill: none; + stroke-width: 1.8; +} + +/* Icon hover effect */ +.icon-btn:hover { + transform: translateY(-2px); + opacity: 0.75; +} + +/* Main nav buttons (profile / login / logout) */ +.login-btn { + height: 40px; + padding: 0 18px; + border: 2px solid #000; + border-radius: 6px; + background: transparent; + font-weight: 600; + font-size: 14px; + letter-spacing: 1px; + text-decoration: none; + color: #000; + display: flex; + align-items: center; + transition: all 0.25s ease; +} + +/* Button hover */ +.login-btn:hover { + background: #000; + color: #fff; + transform: translateY(-2px); +} + + +/* ========================= */ +/* HERO CAROUSEL (Swiper) */ +/* ========================= */ + +/* Carousel section wrapper */ +.hero-carousel { + width: 100%; + padding: 60px 0; + overflow: hidden; + position: relative; + /* For nav arrows positioning */ +} + +/* Swiper container */ +.mySwiper { + width: 100%; + margin: 0 auto; + padding: 20px 0 70px; + /* Top / bottom spacing */ +} + +/* Each slide card */ +.hero-carousel .swiper-slide { + height: 420px; + border-radius: 28px; + overflow: hidden; + position: relative; + background: #f2f2f2; +} + +/* Full-cover slide image */ +.hero-carousel .swiper-slide img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +/* Slide link covers the whole card */ +.slide-link { + width: 100%; + height: 100%; + display: block; + position: relative; + text-decoration: none; + color: inherit; +} + +/* Text overlay inside slide */ +.slide-info { + position: absolute; + bottom: 20px; + left: 0; + right: 0; + text-align: center; + color: #b6ff00; +} + +/* Title styling */ +.slide-info h2 { + font-size: 28px; + margin: 0; +} + +/* Price styling */ +.slide-info p { + font-size: 18px; + margin: 5px 0 0; +} + +/* Swiper arrows */ +.swiper-button-prev, +.swiper-button-next { + width: 48px; + height: 48px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.75); + backdrop-filter: blur(8px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); + + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 9999; + pointer-events: auto; + + opacity: 0; + /* Hidden until hover */ + transition: all 0.35s ease; +} + +/* Arrow positions */ +.swiper-button-prev { + left: 24px; +} + +.swiper-button-next { + right: 24px; +} + +/* Show arrows on carousel hover */ +.hero-carousel:hover .swiper-button-prev, +.hero-carousel:hover .swiper-button-next { + opacity: 1; +} + +/* Remove default Swiper arrow icon */ +.swiper-button-prev::after, +.swiper-button-next::after { + content: ""; +} + +/* Arrow hover effect */ +.swiper-button-prev:hover, +.swiper-button-next:hover { + transform: translateY(-50%) scale(1.15); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); +} + +/* Arrow active effect */ +.swiper-button-prev:active, +.swiper-button-next:active { + transform: translateY(-50%) scale(1.05); +} + +/* Mobile: smaller slide height */ +@media (max-width: 768px) { + .hero-carousel .swiper-slide { + height: 400px; + } + + .slide-info h2 { + font-size: 22px; + } +} \ No newline at end of file diff --git a/backend/MarketPlace/views.py b/backend/MarketPlace/views.py index e7d9fae..671d02b 100644 --- a/backend/MarketPlace/views.py +++ b/backend/MarketPlace/views.py @@ -277,20 +277,6 @@ def upgrade_success(request): return render(request, "upgrade_success.html") -from django.conf import settings -def product_detail(request, product_id): - product = get_object_or_404(Product, id=product_id) - - if not product.is_available or product.is_sold: - return render(request, "product_unavailable.html") - - return render(request, "product_detail.html", { - "product": product, - "STRIPE_PUBLIC_KEY": settings.STRIPE_PUBLIC_KEY - }) - - - @login_required def delete_product(request, product_id): product = get_object_or_404(Product, id=product_id) @@ -428,3 +414,5 @@ def multi_success(request): return render(request, "multi_success.html") + + diff --git a/backend/requirements.txt b/backend/requirements.txt index e9c832b..7bcd398 100644 --- a/backend/requirements.txt +++ b/backend/requirements.txt @@ -18,3 +18,4 @@ stripe supabase supabase-auth stripe +django-environ \ No newline at end of file diff --git a/backend/templates/main.html b/backend/templates/main.html index 4277d55..28dfc50 100644 --- a/backend/templates/main.html +++ b/backend/templates/main.html @@ -1,111 +1,183 @@ - - -

Looping Marketplace

- - + + -
+ + + - + + - + - - - \ No newline at end of file +