Skip to content

Commit

Permalink
Merge pull request #1 from cfra321/newbranch
Browse files Browse the repository at this point in the history 
fixing name header and image
  • Loading branch information
@cfra321
cfra321 authored Aug 11, 2024
2 parents dbf550a + 5355327 commit 7b5ced3
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 25 deletions.
Binary file added foto_manakan/pecelMadiun.webp
View file
Binary file not shown.
60 changes: 44 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,51 +11,69 @@

<body class="bg-gray-100 min-h-screen">
<!-- Header -->
<header class="bg-blue-500 text-white p-4">
<header class="bg-blue-500 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">POS Penjualan Warung Mbah Karmi</h1>
<h1 class="text-2xl font-bold">Warung Mbah Karmi</h1>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="menu-btn" class="focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- Navbar -->
<nav class="space-x-4">
<nav id="menu" class="hidden md:flex space-x-4">
<a href="index.html" class="hover:text-gray-200">Penjualan</a>
<a href="pesanan_proses.html" class="hover:text-gray-200">Pesanan di Proses</a>
<a href="transaksi_total.html" class="hover:text-gray-200">Total Transaksi Berhasil</a>
</nav>
</div>
</header>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-blue-500 text-white p-4 space-y-2">
<a href="index.html" class="block hover:text-gray-200">Penjualan</a>
<a href="pesanan_proses.html" class="block hover:text-gray-200">Pesanan di Proses</a>
<a href="transaksi_total.html" class="block hover:text-gray-200">Total Transaksi Berhasil</a>
</div>
<!-- Main Content -->
<div class="container mx-auto py-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Daftar Produk -->
<div class="bg-white p-6 shadow rounded col-span-1 sm:col-span-2 lg:col-span-2">
<h2 class="text-xl font-bold mb-4">Daftar Produk</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4" id="product-list">
<!-- Produk Item -->
<div class="bg-gray-200 p-4 rounded">
<img src="foto_manakan/Rawon.webp" alt="Product Image" class="w-full mb-2 rounded product-image">
<h3 class="text-lg font-semibold">Rawon Daging</h3>
<p class="text-gray-600">Rp 20,000</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-2 rounded text-xs" onclick="addToCart('Rawon Daging', 20000)">Tambahkan</button>
</div>
<!-- Produk Item -->
<div class="bg-gray-200 p-4 rounded">
<!-- Produk Item -->
<div class="bg-gray-200 p-4 rounded">
<img src="foto_manakan/Ayampenyet.webp" alt="Product Image" class="w-full mb-2 rounded product-image">
<h3 class="text-lg font-semibold">Ayam Penyet</h3>
<p class="text-gray-600">Rp 18,000</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-2 rounded text-xs" onclick="addToCart('Ayam Penyet', 18000)">Tambahkan</button>
</div>

<!-- Produk Item -->
<div class="bg-gray-200 p-4 rounded">
<img src="foto_manakan/soto.webp" alt="Product Image" class="w-full mb-2 rounded product-image">
<h3 class="text-lg font-semibold">Soto Madiun</h3>
<p class="text-gray-600">Rp 12,000</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-2 rounded text-xs" onclick="addToCart('Soto Madiun', 12000)">Tambahkan</button>
</div>

<!-- Produk Item -->
<div class="bg-gray-200 p-4 rounded">
<img src="foto_manakan/Rawon.webp" alt="Product Image" class="w-full mb-2 rounded product-image">
<h3 class="text-lg font-semibold">Rawon Daging</h3>
<p class="text-gray-600">Rp 20,000</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-2 rounded text-xs" onclick="addToCart('Rawon Daging', 20000)">Tambahkan</button>
</div>


<!-- Produk Item -->
<div class="bg-gray-200 p-4 rounded">
<img src="foto_manakan/sopiga.webp" alt="Product Image" class="w-full mb-2 rounded product-image">
<h3 class="text-lg font-semibold">Sop Iga Sapi</h3>
<p class="text-gray-600">Rp 22,000</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-2 rounded text-xs" onclick="addToCart('Sop Iga Sapi', 22000)">Tambahkan</button>
<img src="foto_manakan/pecelMadiun.webp" alt="Product Image" class="w-full mb-2 rounded product-image">
<h3 class="text-lg font-semibold">Pecel Madiun</h3>
<p class="text-gray-600">Rp 8,000</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-2 rounded text-xs" onclick="addToCart('Pecel Madiun', 8000)">Tambahkan</button>
</div>
<!-- Produk Item -->
<div class="bg-gray-200 p-4 rounded">
Expand Down Expand Up @@ -85,6 +103,7 @@ <h3 class="text-lg font-semibold">Es Jeruk Manis</h3>
<p class="text-gray-600">Rp 7,000</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-2 rounded text-xs" onclick="addToCart('Es Jeruk Manis', 7000)">Tambahkan</button>
</div>

<!-- Tambahkan produk lain sesuai kebutuhan -->
</div>
</div>
Expand Down Expand Up @@ -220,6 +239,15 @@ <h2 class="text-xl font-bold mb-4">Keranjang Belanja</h2>
updateTotalPrice();
});
}

<!-- Script for Mobile Menu Toggle -->

const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');

menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>
</body>

Expand Down
49 changes: 42 additions & 7 deletions pesanan_proses.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,34 @@
</head>

<body class="bg-gray-100 min-h-screen">
<!-- Header -->
<header class="bg-blue-500 text-white p-4">
<!-- Header -->
<header class="bg-blue-500 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">POS Penjualan Warung Mbah Karmi</h1>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="menu-btn" class="focus:outline-none" aria-label="Toggle menu">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- Navbar -->
<nav class="space-x-4">
<nav id="menu" class="hidden md:flex space-x-4">
<a href="index.html" class="hover:text-gray-200">Penjualan</a>
<a href="pesanan_proses.html" class="hover:text-gray-200">Pesanan di Proses</a>
<a href="transaksi_total.html" class="hover:text-gray-200">Total Transaksi Berhasil</a>
</nav>
</div>
</header>

<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-blue-500 text-white p-4 space-y-2">
<a href="index.html" class="block hover:text-gray-200">Penjualan</a>
<a href="pesanan_proses.html" class="block hover:text-gray-200">Pesanan di Proses</a>
<a href="transaksi_total.html" class="block hover:text-gray-200">Total Transaksi Berhasil</a>
</div>

<!-- Main Content -->
<div class="container mx-auto py-6">
<div id="order-list" class="bg-white p-6 shadow rounded">
Expand All @@ -32,9 +47,9 @@ <h2 class="text-xl font-bold mb-4">Daftar Pesanan</h2>

<!-- Pagination -->
<div id="pagination" class="mt-6 flex justify-between">
<button id="prev-btn" class="bg-blue-500 text-white py-2 px-4 rounded" onclick="changePage(-1)">Sebelumnya</button>
<button id="prev-btn" aria-label="Previous page" class="bg-blue-500 text-white py-2 px-4 rounded" onclick="changePage(-1)">Sebelumnya</button>
<span id="page-info" class="font-semibold"></span>
<button id="next-btn" class="bg-blue-500 text-white py-2 px-4 rounded" onclick="changePage(1)">Selanjutnya</button>
<button id="next-btn" aria-label="Next page" class="bg-blue-500 text-white py-2 px-4 rounded" onclick="changePage(1)">Selanjutnya</button>
</div>
</div>

Expand All @@ -48,7 +63,13 @@ <h2 class="text-xl font-bold mb-4">Daftar Pesanan</h2>

function loadOrders() {
const orderList = document.getElementById('order-list');
const orders = JSON.parse(localStorage.getItem('orders')) || [];
let orders = [];

try {
orders = JSON.parse(localStorage.getItem('orders')) || [];
} catch (e) {
console.error('Failed to load orders:', e);
}

// Sort orders by most recent first
orders.sort((a, b) => new Date(b.time) - new Date(a.time));
Expand Down Expand Up @@ -120,7 +141,14 @@ <h2 class="text-xl font-bold mb-4">Daftar Pesanan</h2>
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
let orders = JSON.parse(localStorage.getItem('orders')) || [];
let orders = [];

try {
orders = JSON.parse(localStorage.getItem('orders')) || [];
} catch (e) {
console.error('Failed to load orders:', e);
}

orders = orders.filter(order => order.id !== orderId);
localStorage.setItem('orders', JSON.stringify(orders));
loadOrders();
Expand All @@ -134,6 +162,13 @@ <h2 class="text-xl font-bold mb-4">Daftar Pesanan</h2>
});
};
});

const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');

menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>
</body>

Expand Down
29 changes: 27 additions & 2 deletions transaksi_total.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,43 @@
</head>
<body class="bg-gray-100 min-h-screen">
<!-- Header -->
<header class="bg-blue-500 text-white p-4">
<header class="bg-blue-500 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">POS Penjualan Warung Mbah Karmi</h1>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="menu-btn" class="focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- Navbar -->
<nav class="space-x-4">
<nav id="menu" class="hidden md:flex space-x-4">
<a href="index.html" class="hover:text-gray-200">Penjualan</a>
<a href="pesanan_proses.html" class="hover:text-gray-200">Pesanan di Proses</a>
<a href="transaksi_total.html" class="hover:text-gray-200">Total Transaksi Berhasil</a>
</nav>
</div>
</header>

<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-blue-500 text-white p-4 space-y-2">
<a href="index.html" class="block hover:text-gray-200">Penjualan</a>
<a href="pesanan_proses.html" class="block hover:text-gray-200">Pesanan di Proses</a>
<a href="transaksi_total.html" class="block hover:text-gray-200">Total Transaksi Berhasil</a>
</div>


<!-- Script for Mobile Menu Toggle -->
<script>
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');

menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>


</body>
Expand Down

0 comments on commit 7b5ced3

Please sign in to comment.