From 39695863c6c71a685edb569f1f8e0ea428adc5cc Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 15 Feb 2026 11:53:55 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Jeglide=20Couture=20l=C3=BCks=20abiye?= =?UTF-8?q?=20e-ticaret=20HTML=20template?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - index.html: Ürün detay sayfası (slider, renk seçenekleri, beden, sepet modal, benzer ürünler) - iletisim.html: İletişim formu ve bilgileri - uyelik.html: Firma üyelik başvuru formu - siparis-onay.html: Sipariş onay sayfası - assets/css/style.css: Altın/krem lüks tema, responsive tasarım - assets/js/main.js: Sepet, slider, form ve etkileşim işlemleri - Bootstrap 5.3 ile mobil ve masaüstü uyumlu - Tüm arayüz dili Türkçe Co-authored-by: Sefa AYDIN --- assets/css/style.css | 1565 ++++++++++++++++++++++++++++++++++++++++++ assets/js/main.js | 292 ++++++++ iletisim.html | 269 ++++++++ index.html | 455 ++++++++++++ siparis-onay.html | 263 +++++++ uyelik.html | 258 +++++++ 6 files changed, 3102 insertions(+) create mode 100644 assets/css/style.css create mode 100644 assets/js/main.js create mode 100644 iletisim.html create mode 100644 index.html create mode 100644 siparis-onay.html create mode 100644 uyelik.html diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..39282ab --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,1565 @@ +/* ============================================ + JEGLIDE COUTURE - Lüks Abiye E-Ticaret Teması + Renk Paleti: + - Altın/Bronz: #b8965e + - Koyu Altın: #96794b + - Krem Arka Plan: #faf6f1 + - Açık Krem: #f5efe8 + - Koyu Metin: #4a3728 + - Orta Metin: #7a6455 + - Bordo Vurgu: #8b1a1a + ============================================ */ + +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Poppins:wght@300;400;500;600&display=swap'); + +/* ============ GENEL ============ */ +:root { + --gold: #b8965e; + --gold-dark: #96794b; + --gold-light: #d4b88a; + --cream: #faf6f1; + --cream-dark: #f0e8de; + --cream-light: #fdfbf8; + --text-dark: #4a3728; + --text-medium: #7a6455; + --text-light: #a08d7e; + --bordo: #8b1a1a; + --white: #ffffff; + --shadow-soft: 0 2px 15px rgba(184, 150, 94, 0.12); + --shadow-card: 0 4px 20px rgba(74, 55, 40, 0.08); + --gold-gradient: linear-gradient(135deg, #d4b88a 0%, #b8965e 30%, #96794b 70%, #b8965e 100%); + --border-gold: 1px solid rgba(184, 150, 94, 0.25); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background-color: var(--cream); + color: var(--text-dark); + font-size: 14px; + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Playfair Display', serif; + color: var(--text-dark); +} + +.font-script { + font-family: 'Cormorant Garamond', serif; +} + +a { + color: var(--text-dark); + text-decoration: none; + transition: color 0.3s ease; +} + +a:hover { + color: var(--gold); +} + +img { + max-width: 100%; + height: auto; +} + +/* ============ SCROLLBAR ============ */ +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: var(--cream); +} + +::-webkit-scrollbar-thumb { + background: var(--gold-light); + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--gold); +} + +/* ============ BUTONLAR ============ */ +.btn-gold { + background: var(--gold-gradient); + color: var(--white); + border: none; + padding: 12px 36px; + border-radius: 25px; + font-family: 'Poppins', sans-serif; + font-weight: 500; + font-size: 14px; + letter-spacing: 1.5px; + text-transform: uppercase; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 3px 12px rgba(184, 150, 94, 0.3); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.btn-gold:hover { + transform: translateY(-1px); + box-shadow: 0 5px 20px rgba(184, 150, 94, 0.45); + color: var(--white); +} + +.btn-gold:active { + transform: translateY(0); +} + +.btn-outline-gold { + background: transparent; + color: var(--text-dark); + border: 1.5px solid var(--gold-light); + padding: 10px 30px; + border-radius: 25px; + font-family: 'Poppins', sans-serif; + font-weight: 400; + font-size: 13px; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-outline-gold:hover { + border-color: var(--gold); + color: var(--gold-dark); + background: rgba(184, 150, 94, 0.05); +} + +.btn-outline-gold.active, +.btn-outline-gold:focus { + border-color: var(--gold); + color: var(--gold-dark); + background: rgba(184, 150, 94, 0.08); + box-shadow: 0 0 0 2px rgba(184, 150, 94, 0.15); +} + +/* ============ HEADER / NAVBAR ============ */ +.navbar-jeglide { + background-color: var(--cream-light); + border-bottom: var(--border-gold); + padding: 10px 0; + position: sticky; + top: 0; + z-index: 1050; + backdrop-filter: blur(10px); +} + +.navbar-brand-logo { + font-family: 'Playfair Display', serif; + font-size: 24px; + font-weight: 600; + color: var(--text-dark) !important; + letter-spacing: 3px; + text-transform: uppercase; + line-height: 1; +} + +.navbar-brand-logo small { + display: block; + font-family: 'Cormorant Garamond', serif; + font-size: 11px; + letter-spacing: 5px; + color: var(--gold); + text-transform: uppercase; + font-weight: 400; +} + +.navbar-jeglide .nav-link { + color: var(--text-dark); + font-size: 13px; + font-weight: 400; + padding: 8px 16px !important; + letter-spacing: 0.5px; + transition: color 0.3s ease; +} + +.navbar-jeglide .nav-link:hover, +.navbar-jeglide .nav-link.active { + color: var(--gold); +} + +.navbar-icons a { + color: var(--text-dark); + font-size: 18px; + margin-left: 18px; + position: relative; + transition: color 0.3s; +} + +.navbar-icons a:hover { + color: var(--gold); +} + +.cart-badge { + position: absolute; + top: -6px; + right: -8px; + background: var(--gold); + color: var(--white); + font-size: 10px; + width: 18px; + height: 18px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; +} + +.navbar-toggler { + border: none; + padding: 4px 8px; +} + +.navbar-toggler:focus { + box-shadow: none; +} + +.navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234a3728' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; +} + +/* ============ HERO / ÜRÜN GÖRSEL SLIDER ============ */ +.product-hero { + position: relative; + background: linear-gradient(to bottom, var(--cream-dark), var(--cream)); + overflow: hidden; +} + +.product-hero .carousel-item img { + width: 100%; + height: 480px; + object-fit: cover; + object-position: top center; +} + +@media (min-width: 768px) { + .product-hero .carousel-item img { + height: 600px; + } +} + +.product-hero .carousel-indicators [data-bs-target] { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: var(--white); + border: 1px solid var(--gold-light); + opacity: 0.6; +} + +.product-hero .carousel-indicators .active { + background-color: var(--gold); + opacity: 1; +} + +/* ============ ÜRÜN DETAY ============ */ +.product-detail-section { + padding: 30px 0 20px; + text-align: center; +} + +.product-name { + font-family: 'Playfair Display', serif; + font-size: 28px; + font-weight: 500; + color: var(--text-dark); + margin-bottom: 4px; +} + +.product-code { + font-size: 13px; + color: var(--text-medium); + margin-bottom: 16px; + font-weight: 400; +} + +.product-price-box { + display: inline-flex; + align-items: center; + gap: 0; + margin-bottom: 24px; +} + +.price-label { + background: var(--gold-gradient); + color: var(--white); + padding: 6px 18px; + border-radius: 20px 0 0 20px; + font-size: 13px; + font-weight: 500; + letter-spacing: 1px; +} + +.price-value { + background: var(--cream-dark); + color: var(--text-dark); + padding: 6px 22px; + border-radius: 0 20px 20px 0; + font-size: 18px; + font-weight: 600; + border: 1px solid rgba(184, 150, 94, 0.2); + border-left: none; +} + +.price-old { + text-decoration: line-through; + color: var(--text-light); + font-size: 14px; + margin-right: 8px; +} + +.price-new { + color: var(--bordo); + font-weight: 600; + font-size: 16px; +} + +/* ============ RENK SEÇENEKLERİ ============ */ +.color-options-section { + padding: 10px 0 20px; + position: relative; +} + +.color-carousel-wrapper { + position: relative; + padding: 0 30px; +} + +.color-carousel { + display: flex; + gap: 12px; + overflow-x: auto; + scroll-behavior: smooth; + padding: 8px 4px; + -ms-overflow-style: none; + scrollbar-width: none; +} + +.color-carousel::-webkit-scrollbar { + display: none; +} + +.color-option { + flex: 0 0 auto; + text-align: center; + cursor: pointer; + transition: transform 0.3s; +} + +.color-option:hover { + transform: translateY(-3px); +} + +.color-option img { + width: 90px; + height: 120px; + object-fit: cover; + border-radius: 10px; + border: 2px solid transparent; + transition: border-color 0.3s; + box-shadow: var(--shadow-soft); +} + +.color-option.active img, +.color-option:hover img { + border-color: var(--gold); +} + +.color-option span { + display: block; + font-size: 11px; + color: var(--text-medium); + margin-top: 6px; + font-weight: 400; +} + +.color-nav-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 28px; + height: 28px; + border-radius: 50%; + background: var(--white); + border: 1px solid var(--gold-light); + color: var(--gold); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 2; + font-size: 14px; + transition: all 0.3s; + box-shadow: var(--shadow-soft); +} + +.color-nav-btn:hover { + background: var(--gold); + color: var(--white); +} + +.color-nav-btn.prev { + left: 0; +} + +.color-nav-btn.next { + right: 0; +} + +/* ============ BEDEN SEÇİMİ ============ */ +.size-section { + padding: 10px 0 20px; + text-align: center; +} + +.size-section-title { + font-size: 13px; + color: var(--text-medium); + letter-spacing: 1px; + margin-bottom: 14px; + text-transform: uppercase; +} + +.size-section-title::before, +.size-section-title::after { + content: '•'; + margin: 0 8px; + color: var(--gold-light); +} + +.size-options { + display: flex; + justify-content: center; + gap: 14px; + flex-wrap: wrap; +} + +.size-btn { + min-width: 120px; +} + +/* ============ SEPETE EKLE BUTONU ============ */ +.add-to-cart-section { + padding: 10px 0 30px; + text-align: center; +} + +.btn-add-cart { + padding: 14px 48px; + font-size: 15px; + letter-spacing: 2px; +} + +.btn-add-cart i { + font-size: 16px; +} + +/* ============ ÜRÜN AÇIKLAMASI ============ */ +.product-description-section { + padding: 30px 0; + text-align: center; +} + +.description-title { + font-family: 'Playfair Display', serif; + font-size: 22px; + font-weight: 500; + margin-bottom: 14px; + color: var(--text-dark); +} + +.description-text { + color: var(--text-medium); + font-size: 13px; + line-height: 1.8; + max-width: 600px; + margin: 0 auto; +} + +.read-more-link { + color: var(--gold); + font-size: 13px; + cursor: pointer; +} + +.read-more-link:hover { + color: var(--gold-dark); +} + +/* ============ BENZER ÜRÜNLER ============ */ +.similar-products-section { + padding: 30px 0 40px; +} + +.section-title { + font-family: 'Playfair Display', serif; + font-size: 22px; + text-align: center; + margin-bottom: 24px; + color: var(--text-dark); +} + +.product-card { + background: var(--white); + border-radius: 14px; + overflow: hidden; + box-shadow: var(--shadow-card); + transition: transform 0.3s, box-shadow 0.3s; + position: relative; + margin-bottom: 20px; +} + +.product-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 30px rgba(74, 55, 40, 0.12); +} + +.product-card-img { + width: 100%; + height: 260px; + object-fit: cover; + object-position: top; +} + +.product-card-body { + padding: 14px 16px; + text-align: center; +} + +.product-card-title { + font-family: 'Playfair Display', serif; + font-size: 15px; + font-weight: 500; + margin-bottom: 6px; + color: var(--text-dark); +} + +.product-card-price { + font-size: 15px; + font-weight: 600; + color: var(--gold-dark); +} + +.product-card .wishlist-btn { + position: absolute; + top: 12px; + right: 12px; + width: 36px; + height: 36px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.9); + border: none; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-light); + font-size: 16px; + cursor: pointer; + transition: all 0.3s; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.product-card .wishlist-btn:hover, +.product-card .wishlist-btn.active { + color: var(--bordo); +} + +/* ============ FOOTER ============ */ +.footer-jeglide { + background: linear-gradient(180deg, var(--cream-dark) 0%, #ede5da 100%); + padding: 50px 0 0; + border-top: var(--border-gold); +} + +.footer-logo { + font-family: 'Playfair Display', serif; + font-size: 30px; + font-weight: 600; + color: var(--text-dark); + letter-spacing: 4px; + text-transform: uppercase; + text-align: center; + margin-bottom: 2px; +} + +.footer-logo small { + display: block; + font-family: 'Cormorant Garamond', serif; + font-size: 13px; + letter-spacing: 6px; + color: var(--gold); + text-transform: uppercase; + font-weight: 400; +} + +.footer-tagline { + text-align: center; + font-family: 'Cormorant Garamond', serif; + font-size: 16px; + color: var(--text-medium); + font-style: italic; + margin: 10px 0 30px; +} + +.footer-columns { + border: var(--border-gold); + border-radius: 12px; + padding: 24px; + margin-bottom: 30px; + background: rgba(255, 255, 255, 0.3); +} + +.footer-col-title { + font-family: 'Playfair Display', serif; + font-size: 17px; + font-weight: 600; + margin-bottom: 14px; + color: var(--text-dark); +} + +.footer-links { + list-style: none; + padding: 0; + margin: 0; +} + +.footer-links li { + margin-bottom: 8px; +} + +.footer-links li::before { + content: '•'; + color: var(--gold-light); + margin-right: 8px; +} + +.footer-links a { + font-size: 13px; + color: var(--text-medium); + transition: color 0.3s; +} + +.footer-links a:hover { + color: var(--gold); +} + +.footer-service-links { + list-style: none; + padding: 0; + margin: 0; +} + +.footer-service-links li { + margin-bottom: 8px; +} + +.footer-service-links a { + font-size: 13px; + color: var(--text-medium); +} + +.footer-service-links a:hover { + color: var(--gold); +} + +.whatsapp-box { + border: var(--border-gold); + border-radius: 10px; + padding: 12px 18px; + display: inline-flex; + align-items: center; + gap: 10px; + background: rgba(255, 255, 255, 0.5); + margin-bottom: 16px; + transition: all 0.3s; +} + +.whatsapp-box:hover { + border-color: #25d366; + box-shadow: 0 2px 10px rgba(37, 211, 102, 0.15); +} + +.whatsapp-box i { + color: #25d366; + font-size: 22px; +} + +.whatsapp-box .wp-title { + font-size: 14px; + font-weight: 500; + color: var(--text-dark); +} + +.whatsapp-box .wp-subtitle { + font-size: 11px; + color: var(--gold); +} + +.footer-social-handle { + font-size: 13px; + color: var(--text-medium); + margin-bottom: 10px; +} + +.footer-social-icons a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + border-radius: 50%; + background: rgba(184, 150, 94, 0.1); + color: var(--gold); + font-size: 16px; + margin-right: 8px; + transition: all 0.3s; +} + +.footer-social-icons a:hover { + background: var(--gold); + color: var(--white); +} + +.footer-trust { + text-align: center; + padding: 20px 0; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + color: var(--text-medium); + font-size: 13px; + letter-spacing: 1px; +} + +.footer-trust i { + color: var(--gold); + font-size: 16px; +} + +.footer-trust .visa-text { + font-weight: 700; + font-size: 16px; + letter-spacing: 2px; + color: var(--text-dark); +} + +.footer-copyright { + text-align: center; + padding: 18px 0; + border-top: var(--border-gold); + font-size: 13px; + color: var(--text-medium); +} + +.footer-copyright strong { + color: var(--text-dark); +} + +/* ============ MOBIL ALT NAVİGASYON ============ */ +.bottom-nav { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--white); + border-top: var(--border-gold); + display: flex; + justify-content: space-around; + align-items: center; + padding: 8px 0 env(safe-area-inset-bottom, 6px); + z-index: 1040; + box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.06); +} + +.bottom-nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; + font-size: 10px; + color: var(--text-medium); + text-decoration: none; + position: relative; + padding: 4px 8px; + transition: color 0.3s; +} + +.bottom-nav-item i { + font-size: 20px; +} + +.bottom-nav-item.active { + color: var(--gold); +} + +.bottom-nav-item .badge-dot { + position: absolute; + top: 0; + right: 2px; + width: 18px; + height: 18px; + border-radius: 50%; + background: var(--bordo); + color: var(--white); + font-size: 10px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; +} + +@media (min-width: 992px) { + .bottom-nav { + display: none; + } +} + +/* Bottom nav için body padding (mobilde) */ +@media (max-width: 991.98px) { + body { + padding-bottom: 68px; + } +} + +/* ============ İLETİŞİM SAYFASI ============ */ +.contact-hero { + background: linear-gradient(to bottom, var(--cream-dark), var(--cream)); + text-align: center; + padding: 40px 20px 30px; + position: relative; + overflow: hidden; +} + +.contact-hero::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 120px; + height: 120px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='15' y='25' width='70' height='50' rx='5' fill='%23f0e8de' stroke='%23b8965e' stroke-width='1.5'/%3E%3Cpolygon points='15,25 50,50 85,25' fill='none' stroke='%23b8965e' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center; + opacity: 0.6; +} + +.contact-hero-title { + font-family: 'Cormorant Garamond', serif; + font-size: 32px; + font-weight: 500; + color: var(--text-dark); + margin-top: 80px; + margin-bottom: 10px; +} + +.contact-hero-subtitle { + font-size: 13px; + color: var(--text-medium); +} + +.contact-form-section { + padding: 30px 0 40px; +} + +.contact-form-card { + background: var(--white); + border-radius: 16px; + padding: 30px; + box-shadow: var(--shadow-card); + border: var(--border-gold); +} + +.form-label-icon { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + color: var(--text-medium); + margin-bottom: 8px; +} + +.form-label-icon i { + color: var(--gold-light); + font-size: 16px; +} + +.form-control-jeglide { + border: 1px solid #e0d8cf; + border-radius: 8px; + padding: 10px 14px; + font-size: 13px; + color: var(--text-dark); + background: var(--cream-light); + transition: border-color 0.3s, box-shadow 0.3s; +} + +.form-control-jeglide:focus { + border-color: var(--gold-light); + box-shadow: 0 0 0 3px rgba(184, 150, 94, 0.1); + background: var(--white); +} + +.form-control-jeglide::placeholder { + color: var(--text-light); +} + +textarea.form-control-jeglide { + min-height: 120px; + resize: vertical; +} + +.contact-info-card { + background: var(--white); + border-radius: 16px; + padding: 30px; + box-shadow: var(--shadow-card); + border: var(--border-gold); + text-align: center; +} + +.contact-info-item { + margin-bottom: 28px; +} + +.contact-info-item:last-child { + margin-bottom: 0; +} + +.contact-info-item i { + font-size: 28px; + color: var(--gold); + margin-bottom: 8px; + display: block; +} + +.contact-info-item h5 { + font-family: 'Poppins', sans-serif; + font-size: 15px; + font-weight: 600; + margin-bottom: 4px; +} + +.contact-info-item p { + font-size: 13px; + color: var(--text-medium); + margin: 0; +} + +.phone-input-group { + display: flex; + gap: 8px; +} + +.phone-prefix { + width: 60px; + text-align: center; + flex-shrink: 0; +} + +/* ============ SEPET MODAL ============ */ +.cart-modal .modal-content { + border: none; + border-radius: 16px; + overflow: hidden; +} + +.cart-modal .modal-header { + background: var(--cream-light); + border-bottom: var(--border-gold); + padding: 16px 20px; +} + +.cart-modal .modal-title { + font-family: 'Playfair Display', serif; + font-size: 18px; + font-weight: 500; +} + +.cart-modal .modal-body { + padding: 0; + max-height: 60vh; + overflow-y: auto; +} + +.cart-item { + display: flex; + align-items: center; + gap: 14px; + padding: 16px 20px; + border-bottom: 1px solid rgba(184, 150, 94, 0.1); +} + +.cart-item-img { + width: 70px; + height: 90px; + object-fit: cover; + border-radius: 8px; + flex-shrink: 0; +} + +.cart-item-info { + flex: 1; + min-width: 0; +} + +.cart-item-code { + font-weight: 600; + font-size: 14px; + color: var(--text-dark); +} + +.cart-item-detail { + font-size: 11px; + color: var(--text-medium); +} + +.cart-item-price { + font-weight: 700; + font-size: 15px; + color: var(--text-dark); + margin-top: 2px; +} + +.qty-control { + display: inline-flex; + align-items: center; + border: 1px solid #e0d8cf; + border-radius: 8px; + overflow: hidden; +} + +.qty-control button { + width: 32px; + height: 32px; + border: none; + background: transparent; + color: var(--text-dark); + font-size: 16px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s; +} + +.qty-control button:hover { + background: var(--cream-dark); +} + +.qty-control span { + width: 28px; + text-align: center; + font-weight: 600; + font-size: 14px; + border-left: 1px solid #e0d8cf; + border-right: 1px solid #e0d8cf; + padding: 4px 0; +} + +.cart-delete-btn { + background: none; + border: none; + color: var(--text-light); + font-size: 18px; + cursor: pointer; + padding: 6px; + transition: color 0.3s; +} + +.cart-delete-btn:hover { + color: var(--bordo); +} + +.cart-total-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 14px 20px; + border-top: 1px solid rgba(184, 150, 94, 0.15); + border-bottom: 1px solid rgba(184, 150, 94, 0.15); + background: var(--cream-light); +} + +.cart-total-label { + font-size: 14px; + color: var(--text-medium); +} + +.cart-total-price { + font-size: 20px; + font-weight: 700; + color: var(--text-dark); +} + +.cart-total-price small { + font-size: 14px; + font-weight: 500; + color: var(--text-medium); +} + +.cart-actions { + display: flex; + gap: 12px; + padding: 16px 20px; +} + +.cart-actions .btn { + flex: 1; +} + +.cart-suggestion { + padding: 16px 20px; + border-top: 1px solid rgba(184, 150, 94, 0.1); + display: flex; + align-items: center; + gap: 14px; +} + +.cart-suggestion-img { + width: 70px; + height: 90px; + object-fit: cover; + border-radius: 8px; + flex-shrink: 0; +} + +.cart-suggestion-info .code { + font-weight: 600; + font-size: 14px; +} + +.cart-suggestion-info .old-price { + text-decoration: line-through; + color: var(--text-light); + font-size: 13px; +} + +.cart-suggestion-info .new-price { + color: var(--bordo); + font-weight: 700; + font-size: 15px; + margin-left: 6px; +} + +/* ============ SİPARİŞ ONAY ============ */ +.order-confirm-section { + padding: 40px 0; + min-height: calc(100vh - 200px); + display: flex; + align-items: center; + justify-content: center; +} + +.order-confirm-card { + background: var(--white); + border-radius: 16px; + padding: 40px 30px; + text-align: center; + box-shadow: var(--shadow-card); + border: 2px solid var(--gold-light); + max-width: 500px; + margin: 0 auto; + position: relative; +} + +.order-confirm-card::before { + content: ''; + position: absolute; + top: -1px; + left: -1px; + right: -1px; + bottom: -1px; + border-radius: 18px; + border: 1px solid rgba(184, 150, 94, 0.3); + pointer-events: none; +} + +.order-icon { + width: 80px; + height: 80px; + margin: 0 auto 20px; + background: rgba(184, 150, 94, 0.1); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.order-icon i { + font-size: 36px; + color: var(--gold); +} + +.order-title { + font-family: 'Cormorant Garamond', serif; + font-size: 32px; + font-weight: 600; + color: var(--text-dark); + margin-bottom: 10px; + font-style: italic; +} + +.order-message { + font-size: 14px; + color: var(--text-medium); + margin-bottom: 20px; + line-height: 1.7; +} + +.order-number-label { + font-weight: 600; + font-size: 15px; + color: var(--text-dark); + margin-bottom: 4px; +} + +.order-number { + font-size: 30px; + font-weight: 700; + color: var(--text-dark); + letter-spacing: 2px; + margin-bottom: 20px; +} + +.order-note { + font-size: 13px; + color: var(--text-medium); + line-height: 1.7; + margin-bottom: 24px; +} + +/* Ornamental corners */ +.ornament-frame { + position: relative; + padding: 20px; +} + +.ornament-frame::before, +.ornament-frame::after { + content: '◆'; + position: absolute; + color: var(--gold-light); + font-size: 12px; +} + +.ornament-frame::before { + top: 0; + left: 50%; + transform: translateX(-50%); +} + +.ornament-frame::after { + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +/* ============ ÜYELİK BAŞVURUSU ============ */ +.membership-section { + padding: 40px 0; +} + +.membership-header { + text-align: center; + margin-bottom: 30px; +} + +.membership-title { + font-family: 'Cormorant Garamond', serif; + font-size: 32px; + font-weight: 600; + color: var(--text-dark); + margin-bottom: 10px; +} + +.membership-subtitle { + font-size: 13px; + color: var(--text-medium); + max-width: 500px; + margin: 0 auto; + line-height: 1.7; +} + +.membership-form-card { + background: var(--white); + border-radius: 16px; + padding: 30px; + box-shadow: var(--shadow-card); + border: var(--border-gold); +} + +.fieldset-title { + font-family: 'Playfair Display', serif; + font-size: 18px; + font-weight: 500; + color: var(--text-dark); + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: var(--border-gold); +} + +fieldset { + border: var(--border-gold); + border-radius: 12px; + padding: 24px; + margin-bottom: 24px; +} + +fieldset legend { + font-family: 'Playfair Display', serif; + font-size: 18px; + font-weight: 500; + color: var(--text-dark); + padding: 0 10px; + width: auto; + float: none; +} + +.input-with-icon { + position: relative; +} + +.input-with-icon i { + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + color: var(--gold-light); + font-size: 16px; +} + +.input-with-icon .form-control-jeglide { + padding-left: 38px; +} + +.form-check-gold .form-check-input:checked { + background-color: var(--gold); + border-color: var(--gold); +} + +.form-check-gold .form-check-input:focus { + box-shadow: 0 0 0 3px rgba(184, 150, 94, 0.2); +} + +.form-check-gold .form-check-label { + font-size: 13px; + color: var(--text-medium); +} + +.form-check-gold .form-check-label a { + color: var(--gold); + font-weight: 500; +} + +/* ============ DIVIDER ORNAMENTLER ============ */ +.divider-ornament { + text-align: center; + margin: 20px 0; + position: relative; +} + +.divider-ornament::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(to right, transparent, var(--gold-light), transparent); +} + +.divider-ornament span { + display: inline-block; + background: var(--cream); + padding: 0 16px; + position: relative; + color: var(--gold-light); + font-size: 14px; +} + +/* ============ SAYFA GEÇİŞLERİ ============ */ +.page-transition { + animation: fadeInUp 0.4s ease; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(15px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ============ RESPONSİF AYARLAR ============ */ + +/* Mobil */ +@media (max-width: 575.98px) { + .product-name { + font-size: 24px; + } + + .color-option img { + width: 75px; + height: 100px; + } + + .size-btn { + min-width: 100px; + padding: 8px 16px; + font-size: 12px; + } + + .footer-columns { + padding: 20px 16px; + } + + .contact-form-card, + .contact-info-card { + padding: 20px; + } + + .membership-form-card { + padding: 20px; + } + + fieldset { + padding: 16px; + } +} + +/* Tablet ve üstü */ +@media (min-width: 768px) { + .product-hero .carousel-item img { + height: 550px; + } + + .product-name { + font-size: 34px; + } + + .color-option img { + width: 100px; + height: 135px; + } +} + +/* Masaüstü */ +@media (min-width: 992px) { + .product-hero .carousel-item img { + height: 650px; + } + + .product-name { + font-size: 38px; + } + + .product-detail-wrapper { + display: flex; + gap: 40px; + align-items: flex-start; + } + + .product-detail-wrapper .product-gallery { + flex: 0 0 55%; + max-width: 55%; + } + + .product-detail-wrapper .product-info { + flex: 1; + text-align: left; + padding-top: 20px; + position: sticky; + top: 80px; + } + + .product-detail-wrapper .product-info .product-price-box, + .product-detail-wrapper .product-info .size-options { + justify-content: flex-start; + } + + .product-detail-wrapper .product-info .add-to-cart-section { + text-align: left; + } +} + +/* Placeholder resimler için */ +.placeholder-img { + background: linear-gradient(135deg, var(--cream-dark) 0%, #e8ddd0 100%); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-light); + font-size: 14px; + font-style: italic; +} + +/* ============ YARDIMCI SINIFLAR ============ */ +.text-gold { + color: var(--gold) !important; +} + +.bg-cream { + background-color: var(--cream) !important; +} + +.bg-cream-dark { + background-color: var(--cream-dark) !important; +} + +.border-gold { + border-color: var(--gold-light) !important; +} + +.fw-playfair { + font-family: 'Playfair Display', serif; +} + +.fw-cormorant { + font-family: 'Cormorant Garamond', serif; +} + +.ls-1 { + letter-spacing: 1px; +} + +.ls-2 { + letter-spacing: 2px; +} + +/* Sepet sayfa stili (tam sayfa) */ +.cart-page-section { + padding: 30px 0 40px; +} + +/* Input select stili */ +.form-select-jeglide { + border: 1px solid #e0d8cf; + border-radius: 8px; + padding: 10px 14px; + font-size: 13px; + color: var(--text-dark); + background-color: var(--cream-light); + transition: border-color 0.3s, box-shadow 0.3s; +} + +.form-select-jeglide:focus { + border-color: var(--gold-light); + box-shadow: 0 0 0 3px rgba(184, 150, 94, 0.1); +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..89f18ff --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,292 @@ +/** + * Jeglide Couture - Ana JavaScript Dosyası + * Sepet, slider, form işlemleri ve diğer etkileşimler + */ + +document.addEventListener('DOMContentLoaded', function () { + initColorOptions(); + initSizeButtons(); + initWishlistButtons(); + initSmoothAnimations(); +}); + +/* ========================================== + RENK CAROUSEL KAYDIRMA + ========================================== */ +function scrollColors(direction) { + const carousel = document.getElementById('colorCarousel'); + if (!carousel) return; + const scrollAmount = 110; + carousel.scrollBy({ + left: direction * scrollAmount, + behavior: 'smooth' + }); +} + +/* ========================================== + RENK SEÇENEKLERİ + ========================================== */ +function initColorOptions() { + const colorOptions = document.querySelectorAll('.color-option'); + colorOptions.forEach(function (option) { + option.addEventListener('click', function () { + colorOptions.forEach(function (o) { o.classList.remove('active'); }); + option.classList.add('active'); + // Seçilen renk bilgisi + const colorName = option.querySelector('span'); + if (colorName) { + showToast('Renk seçildi: ' + colorName.textContent); + } + }); + }); +} + +/* ========================================== + BEDEN BUTONLARI + ========================================== */ +function initSizeButtons() { + const sizeButtons = document.querySelectorAll('.size-btn'); + sizeButtons.forEach(function (btn) { + btn.addEventListener('click', function () { + sizeButtons.forEach(function (b) { b.classList.remove('active'); }); + btn.classList.add('active'); + }); + }); +} + +/* ========================================== + FAVORİ BUTONU + ========================================== */ +function initWishlistButtons() { + const wishlistBtns = document.querySelectorAll('.wishlist-btn'); + wishlistBtns.forEach(function (btn) { + btn.addEventListener('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + btn.classList.toggle('active'); + const icon = btn.querySelector('i'); + if (btn.classList.contains('active')) { + icon.classList.remove('bi-heart'); + icon.classList.add('bi-heart-fill'); + showToast('Favorilere eklendi'); + } else { + icon.classList.remove('bi-heart-fill'); + icon.classList.add('bi-heart'); + showToast('Favorilerden çıkarıldı'); + } + }); + }); +} + +/* ========================================== + SEPETE EKLE + ========================================== */ +function addToCart() { + // Sepet badge güncelle + const badges = document.querySelectorAll('.cart-badge, .badge-dot'); + badges.forEach(function (badge) { + let count = parseInt(badge.textContent) || 0; + badge.textContent = count + 1; + }); + + // Animasyonlu bildirim + showToast('Ürün sepete eklendi!'); + + // Buton animasyonu + const btn = document.querySelector('.btn-add-cart'); + if (btn) { + btn.style.transform = 'scale(0.95)'; + setTimeout(function () { + btn.style.transform = 'scale(1)'; + }, 150); + } +} + +/* ========================================== + SEPET MİKTAR GÜNCELLEME + ========================================== */ +function updateQty(button, change) { + const control = button.closest('.qty-control'); + const qtySpan = control.querySelector('span'); + let qty = parseInt(qtySpan.textContent) || 1; + qty = Math.max(1, qty + change); + qtySpan.textContent = qty; + updateCartTotal(); +} + +/* ========================================== + SEPET ÜRÜNLERİNİ SİL + ========================================== */ +function removeCartItem(button) { + const item = button.closest('.cart-item'); + if (item) { + item.style.opacity = '0'; + item.style.transform = 'translateX(50px)'; + item.style.transition = 'all 0.3s ease'; + setTimeout(function () { + item.remove(); + updateCartTotal(); + // Badge güncelle + const badges = document.querySelectorAll('.cart-badge, .badge-dot'); + badges.forEach(function (badge) { + let count = parseInt(badge.textContent) || 0; + if (count > 0) badge.textContent = count - 1; + }); + }, 300); + } +} + +/* ========================================== + SEPET TOPLAMI GÜNCELLE + ========================================== */ +function updateCartTotal() { + // Basit toplam hesaplama simülasyonu + const items = document.querySelectorAll('.cart-item'); + let total = 0; + items.forEach(function (item) { + const priceText = item.querySelector('.cart-item-price'); + const qtyText = item.querySelector('.qty-control span'); + if (priceText && qtyText) { + const price = parseFloat( + priceText.textContent + .replace(/[^\d,]/g, '') + .replace(',', '.') + ) || 0; + const qty = parseInt(qtyText.textContent) || 1; + total += price * qty; + } + }); + + // Toplam güncelle + const totalEl = document.querySelector('.cart-total-price'); + if (totalEl) { + totalEl.innerHTML = formatPrice(total) + ' TL'; + } +} + +/* ========================================== + FİYAT FORMATLAMA + ========================================== */ +function formatPrice(price) { + return price.toLocaleString('tr-TR', { + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }); +} + +/* ========================================== + İLETİŞİM FORMU + ========================================== */ +function handleContactForm(event) { + event.preventDefault(); + showToast('Mesajınız başarıyla gönderildi! En kısa sürede size dönüş yapacağız.'); + event.target.reset(); +} + +/* ========================================== + ÜYELİK BAŞVURU FORMU + ========================================== */ +function handleMembershipForm(event) { + event.preventDefault(); + showToast('Üyelik başvurunuz alındı! Başvurunuz incelendikten sonra size bilgi verilecektir.'); + event.target.reset(); +} + +/* ========================================== + TOAST BİLDİRİM + ========================================== */ +function showToast(message) { + // Önceki toast varsa kaldır + const existingToast = document.querySelector('.jeglide-toast'); + if (existingToast) { + existingToast.remove(); + } + + const toast = document.createElement('div'); + toast.className = 'jeglide-toast'; + toast.innerHTML = ' ' + message; + + // Stil + Object.assign(toast.style, { + position: 'fixed', + top: '20px', + left: '50%', + transform: 'translateX(-50%) translateY(-20px)', + background: 'linear-gradient(135deg, #b8965e, #96794b)', + color: '#fff', + padding: '12px 24px', + borderRadius: '25px', + fontSize: '13px', + fontFamily: "'Poppins', sans-serif", + boxShadow: '0 4px 20px rgba(184, 150, 94, 0.4)', + zIndex: '9999', + opacity: '0', + transition: 'all 0.4s ease', + display: 'flex', + alignItems: 'center', + gap: '8px', + maxWidth: '90%', + textAlign: 'center' + }); + + document.body.appendChild(toast); + + // Göster + requestAnimationFrame(function () { + toast.style.opacity = '1'; + toast.style.transform = 'translateX(-50%) translateY(0)'; + }); + + // Gizle + setTimeout(function () { + toast.style.opacity = '0'; + toast.style.transform = 'translateX(-50%) translateY(-20px)'; + setTimeout(function () { + if (toast.parentNode) toast.remove(); + }, 400); + }, 3000); +} + +/* ========================================== + SCROLL ANİMASYONLARI + ========================================== */ +function initSmoothAnimations() { + // Sayfa yüklendiğinde elementleri yumuşak göster + const animElements = document.querySelectorAll( + '.product-card, .contact-form-card, .contact-info-card, .membership-form-card, .order-frame' + ); + + if ('IntersectionObserver' in window) { + const observer = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.1 }); + + animElements.forEach(function (el) { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; + observer.observe(el); + }); + } +} + +/* ========================================== + NAVBAR SCROLL ETKİSİ + ========================================== */ +window.addEventListener('scroll', function () { + const navbar = document.querySelector('.navbar-jeglide'); + if (!navbar) return; + if (window.scrollY > 50) { + navbar.style.boxShadow = '0 2px 20px rgba(74, 55, 40, 0.1)'; + navbar.style.background = 'rgba(253, 251, 248, 0.95)'; + } else { + navbar.style.boxShadow = 'none'; + navbar.style.background = ''; + } +}); diff --git a/iletisim.html b/iletisim.html new file mode 100644 index 0000000..87bf6f2 --- /dev/null +++ b/iletisim.html @@ -0,0 +1,269 @@ + + + + + + İletişim - Jeglide Couture + + + + + + + + + + + + + + + + +
+
+
JEGLIDE COUTURE
+ +
+
+ +
+
+ + +
+ + +
+
+ +
+

İletişim Formu

+

Bizimle iletişime geçmek için aşağıdaki formu doldurabilirsiniz.

+
+ + +
+
+
+ +
+
+
+ +
+ + +
+ + +
+ + +
+ + +
+ +
+ + +
+
+ + +
+ + +
+ + + +
+
+
+ + +
+
+ +
+ +
Adresimiz
+

Açık adresiniz, Şehriniz,
Ülkeniz

+
+ + +
+
+
+
Telefon
+

+90 555 555 55 55

+
+ + + +
+
+ + +
+
E-posta
+

info@siteniz.com

+
+ + +
+ ◇ +
+
+
+
+
+
+ +
+ + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..b0b27b7 --- /dev/null +++ b/index.html @@ -0,0 +1,455 @@ + + + + + + Jeglide Couture - Lüks Abiye Koleksiyonu + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + +
+ +
+ +
+
+ + +
+ +
+

Luna Drapeli Abiye

+

Ürün Kodu: F12345

+
+ Fiyat + 89 $ +
+
+ + +
+
+ + + +
+
+ + +
+

Beden Seçiniz

+
+ + +
+
+ + +
+ +
+ + +
+

Ürün Açıklaması

+

+ Bu bölümde abiye elbisenin özellikleri, kumaşı, tasarım detayları yer alır. + Ürün açıklaması bu alanda detaylı şekilde anlatılır. + > >> +

+
+
+ +
+
+ + +
+
+

Benzer Davet & Gece Elbiseleri

+
+
+
+ +
Ürün
+
+
Elara Abiye
+

129 $

+
+
+
+
+
+ +
Ürün
+
+
Sera Drapeli Abiye
+

99 $

+
+
+
+
+
+ +
Ürün
+
+
Nova Gece Elbisesi
+

149 $

+
+
+
+
+
+ +
Ürün
+
+
Bella Straplez Abiye
+

109 $

+
+
+
+
+
+
+ +
+ ◇ +
+ +
+ + + + + + + + + + + + + + + + diff --git a/siparis-onay.html b/siparis-onay.html new file mode 100644 index 0000000..d996454 --- /dev/null +++ b/siparis-onay.html @@ -0,0 +1,263 @@ + + + + + + Siparişiniz Alındı - Jeglide Couture + + + + + + + + + + + + + + + + + + +
+
+
JEGLIDE COUTURE
+ +
+
+ +
+
+ + +
+
+
+
+ + +
✦ ─── ✦
+ + +
+ +
+ + +
+ +
+ + +

Siparişiniz Alındı

+ + +

Teşekkür ederiz!

+

Siparişiniz başarıyla alınmıştır.

+ + +

Sipariş Numaranız :

+

979796061

+ + +

+ Sipariş durumunuzu "Hesabım" menüsündeki + "Siparişlerim" alanından takip edebilirsiniz.
+ Jeglide Couture ailesi olarak mutlu günler dileriz. +

+ + + + Siparişlerim + + + +
✦ ─── ✦
+ +
+
+
+
+ + + + + + + + diff --git a/uyelik.html b/uyelik.html new file mode 100644 index 0000000..02e05de --- /dev/null +++ b/uyelik.html @@ -0,0 +1,258 @@ + + + + + + Üyelik Başvurusu - Jeglide Couture + + + + + + + + + + + + + + + + +
+
+
JEGLIDE COUTURE
+ +
+
+ +
+
+ + +
+
+
+ +
+

Üyelik Başvurusu

+

+ Sadece firmalar üye olabilir. Üyelik başvurunuz tarafımızca onaylandıktan sonra sipariş verebileceksiniz. +

+
+ + +
+
+ + +
+ Firma Bilgileri +
+ +
+ +
+ + +
+ + +
+ +
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ + +
+
+ +
+
+ +
+
+
+
+ + +
+ +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
Bireysel Bilgiler
+ + +
+ +
+ + +
+
+ + +
+ +
+ + +
+
+
+
+
+
+ + +
+ + +
+ + +
+ +
+
+
+ + +
+
+ + + +
+
+ + +
+ + GÜVENLİ ALIŞVERİŞ + VISA +
+ +
+
+
+ + + + + + + +