- Katılım
- 6 Kas 2021
- Mesajlar
- 3,276
- Tepkime puanı
- 4,783
- Puanları
- 113
- Yaş
- 31
- Konum
- Türkiye
- Dc
- fatihbulut
Öne Çıkan Özellikler
- Profesyonel Tasarım
- Modern gradient renk şeması
- Responsive ve mobil uyumlu
- Hover animasyonları ve geçiş efektleri
- Şık kart gölgeleri
- Gelişmiş İşlevsellik
- Çoklu ürün seçimi (checkbox)
- Adet bazlı fiyat hesaplama
- Anlık toplam güncelleme
- Sepet özet paneli
- Kullanıcı Deneyimi
- Form kontrolleri (minimum adet)
- Boş sepet uyarısı
- Animasyonlu geçişler
- Odaklanma (focus) efektleri
- Teknik Detaylar
- Temiz JavaScript kodu (ES6)
- Dinamik DOM manipülasyonu
- Local veri yönetimi
- Responsive tablo yapısı
- Gerçek ürün görselleri eklemek için placeholder.com linklerini değiştirin
- Fiyatları kendi ürünlerinize göre güncelleyin
- CSS değişkenlerini
root içindeki) kendi marka renklerinize göre ayarlayın - Daha fazla ürün eklemek için tablo satırlarını çoğaltın
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Ürün Seçim Tablosu</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--accent: #4cc9f0;
--dark: #212529;
--light: #f8f9fa;
--success: #4bb543;
--border: #e9ecef;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: #f5f7fa;
color: var(--dark);
padding: 40px;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
h1 {
text-align: center;
margin-bottom: 30px;
color: var(--primary);
font-size: 2.5rem;
font-weight: 700;
}
.product-table {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
margin-bottom: 30px;
transition: all 0.3s;
}
.product-table:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
}
th {
padding: 18px 15px;
text-align: left;
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.5px;
}
th:first-child {
border-top-left-radius: 12px;
}
th:last-child {
border-top-right-radius: 12px;
}
tbody tr {
border-bottom: 1px solid var(--border);
transition: all 0.2s;
}
tbody tr:last-child {
border-bottom: none;
}
tbody tr:hover {
background-color: #f8f9fa;
}
td {
padding: 15px;
vertical-align: middle;
}
.product-info {
display: flex;
align-items: center;
gap: 15px;
}
.product-img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
transition: transform 0.3s;
}
.product-img:hover {
transform: scale(1.05);
}
.product-name {
font-weight: 600;
margin-bottom: 5px;
}
.product-desc {
font-size: 0.85rem;
color: #6c757d;
}
.price {
font-weight: 700;
color: var(--primary);
}
.select-checkbox {
width: 22px;
height: 22px;
cursor: pointer;
accent-color: var(--primary);
transform: scale(1.2);
transition: all 0.2s;
}
.select-checkbox:hover {
transform: scale(1.3);
}
.quantity-input {
width: 70px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
text-align: center;
font-weight: 600;
transition: all 0.2s;
}
.quantity-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
outline: none;
}
.summary-card {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: var(--shadow);
display: flex;
justify-content: space-between;
align-items: center;
animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.summary-item {
display: flex;
flex-direction: column;
align-items: center;
}
.summary-label {
font-size: 0.9rem;
color: #6c757d;
margin-bottom: 5px;
}
.summary-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
}
.checkout-btn {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border: none;
border-radius: 8px;
padding: 12px 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
font-size: 1rem;
}
.checkout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(67, 97, 238, 0.4);
}
.checkout-btn:active {
transform: translateY(0);
}
/* Responsive Tasarım */
@media (max-width: 768px) {
body {
padding: 20px;
}
h1 {
font-size: 2rem;
}
.product-info {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.product-img {
width: 50px;
height: 50px;
}
th, td {
padding: 12px 8px;
}
.summary-card {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
@media (max-width: 576px) {
table {
display: block;
overflow-x: auto;
}
.quantity-input {
width: 50px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Ürün Seçim Tablosu</h1>
<div class="product-table">
<table>
<thead>
<tr>
<th style="width: 5%;">Seç</th>
<th style="width: 45%;">Ürün Bilgisi</th>
<th style="width: 20%;">Fiyat</th>
<th style="width: 20%;">Adet</th>
<th style="width: 10%;">Tutar</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select-checkbox" data-price="149.99"></td>
<td>
<div class="product-info">
<img src="https://via.placeholder.com/60" alt="Ürün 1" class="product-img">
<div>
<div class="product-name">Profesyonel Klavye</div>
<div class="product-desc">Mekanik RGB aydınlatmalı</div>
</div>
</div>
</td>
<td class="price">149.99 TL</td>
<td><input type="number" min="1" value="1" class="quantity-input"></td>
<td class="item-total">149.99 TL</td>
</tr>
<tr>
<td><input type="checkbox" class="select-checkbox" data-price="89.50"></td>
<td>
<div class="product-info">
<img src="https://via.placeholder.com/60" alt="Ürün 2" class="product-img">
<div>
<div class="product-name">Kablosuz Mouse</div>
<div class="product-desc">2400 DPI, ergonomik</div>
</div>
</div>
</td>
<td class="price">89.50 TL</td>
<td><input type="number" min="1" value="1" class="quantity-input"></td>
<td class="item-total">89.50 TL</td>
</tr>
<tr>
<td><input type="checkbox" class="select-checkbox" data-price="199.00"></td>
<td>
<div class="product-info">
<img src="https://via.placeholder.com/60" alt="Ürün 3" class="product-img">
<div>
<div class="product-name">Oyuncu Kulaklık</div>
<div class="product-desc">7.1 surround ses</div>
</div>
</div>
</td>
<td class="price">199.00 TL</td>
<td><input type="number" min="1" value="1" class="quantity-input"></td>
<td class="item-total">199.00 TL</td>
</tr>
<tr>
<td><input type="checkbox" class="select-checkbox" data-price="249.99"></td>
<td>
<div class="product-info">
<img src="https://via.placeholder.com/60" alt="Ürün 4" class="product-img">
<div>
<div class="product-name">Gaming Mouse Pad</div>
<div class="product-desc">XXL boyut, RGB aydınlatma</div>
</div>
</div>
</td>
<td class="price">249.99 TL</td>
<td><input type="number" min="1" value="1" class="quantity-input"></td>
<td class="item-total">249.99 TL</td>
</tr>
</tbody>
</table>
</div>
<div class="summary-card" id="summary">
<div class="summary-item">
<span class="summary-label">Toplam Adet</span>
<span class="summary-value" id="total-quantity">0</span>
</div>
<div class="summary-item">
<span class="summary-label">Toplam Tutar</span>
<span class="summary-value" id="total-price">0.00 TL</span>
</div>
<button class="checkout-btn" id="checkout-btn">SEPETİ ONAYLA</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Elementleri seçme
const checkboxes = document.querySelectorAll('.select-checkbox');
const quantityInputs = document.querySelectorAll('.quantity-input');
const totalQuantityEl = document.getElementById('total-quantity');
const totalPriceEl = document.getElementById('total-price');
const checkoutBtn = document.getElementById('checkout-btn');
// Event listener'ları ekleme
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', updateTotals);
});
quantityInputs.forEach(input => {
input.addEventListener('change', function() {
updateRowTotal(this);
updateTotals();
});
});
checkoutBtn.addEventListener('click', function() {
const totalQuantity = parseInt(totalQuantityEl.textContent);
if (totalQuantity === 0) {
alert('Lütfen en az bir ürün seçiniz!');
return;
}
alert(`Siparişiniz alındı!\nToplam: ${totalPriceEl.textContent}`);
});
// Satır toplamını güncelleme
function updateRowTotal(input) {
const row = input.closest('tr');
const price = parseFloat(row.querySelector('.select-checkbox').dataset.price);
const quantity = parseInt(input.value);
const total = (price * quantity).toFixed(2);
row.querySelector('.item-total').textContent = `${total} TL`;
}
// Genel toplamları güncelleme
function updateTotals() {
let totalQuantity = 0;
let totalPrice = 0;
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
const row = checkbox.closest('tr');
const quantity = parseInt(row.querySelector('.quantity-input').value);
const price = parseFloat(checkbox.dataset.price);
totalQuantity += quantity;
totalPrice += price * quantity;
}
});
totalQuantityEl.textContent = totalQuantity;
totalPriceEl.textContent = `${totalPrice.toFixed(2)} TL`;
// Sepet boşsa butonu devre dışı bırak
checkoutBtn.style.opacity = totalQuantity === 0 ? '0.7' : '1';
checkoutBtn.style.cursor = totalQuantity === 0 ? 'not-allowed' : 'pointer';
}
// İlk yüklemede toplamları güncelle
updateTotals();
});
</script>
</body>
</html>