Hugging Face's logo

Spaces:
huggingfacejs
/
static-variables
Running

App Files Community
5
static-variables / jweb /ac1 /src /pages /daily-product.php
fellybikush's picture
fellybikush
Upload 99 files
628740b verified
raw
history blame
19.8 kB
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// Start session and check if user is logged in
session_start();
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
 header('Location: ../../index.php');
 exit;
}
// Get user data from session
$username = $_SESSION['username'];
$email = $_SESSION['email'];
$tier = $_SESSION['tier'];
$package = $_SESSION['package'];
$balance = $_SESSION['balance'];
$total_deposits = $_SESSION['total_deposits'];
$total_withdrawals = $_SESSION['total_withdrawals'];
$rewards = $_SESSION['rewards'];
$earnings = $total_deposits - $total_withdrawals;
?>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Japanese Motors— Daily Product</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <style>
 :root {
 --bg: #7b848d;
 --card: #7a2f3b;
 --card-2: #6f2630;
 --accent: #efdf2d;
 --muted: rgba(255,255,255,0.6);
 --glass: rgba(255,255,255,0.04);
 --promo-gradient: linear-gradient(180deg,#a13df0 0%, #ff2a79 50%, #d70b1a 100%);
 font-family: 'Poppins', system-ui, Arial;
 --banner-gradient-start: #a855f7;
 --banner-gradient-end: #ec4899;
 --spacing-unit: 1rem;
 --accent-primary: #7c3aed;
 --accent-secondary: #a855f7;
 --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1);
 --premium-gold: #d97706;
 }
body {
 background: var(--bg);
 font-family: 'Poppins', sans-serif;
 transition: all 0.3s ease;
 min-height: 100vh;
 }
.sidebar {
 width: 250px;
 height: 100vh;
 background: #0d1321;
 color: #fff;
 position: fixed;
 top: 0;
 left: -250px;
 transition: all 0.3s ease;
 z-index: 1000;
 overflow-y: auto;
 }
.sidebar.active {
 left: 0;
 }
#content {
 margin-left: 0;
 transition: all 0.3s ease;
 }
.sidebar.active ~ #content {
 margin-left: 250px;
 }
header {
 background: #222;
 color: white;
 padding: 15px 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 z-index: 900;
 transition: all 0.3s ease;
 }
.sidebar.active ~ #content header {
 margin-left: 250px;
 }
.menu-toggle {
 background: transparent;
 border: none;
 color: white;
 font-size: 1.5rem;
 cursor: pointer;
 }
.logo-section {
 padding: 15px;
 border-bottom: 1px solid #1c2230;
 display: flex;
 align-items: center;
 gap: 10px;
 }
.brand {
 font-size: 1.2rem;
 font-weight: 700;
 color: #ff9800;
 }
.subtitle {
 font-size: 0.75rem;
 color: #aaa;
 }
.menu {
 list-style: none;
 padding: 0;
 margin: 0;
 }
.menu li a {
 display: flex;
 align-items: center;
 padding: 12px 20px;
 color: white;
 text-decoration: none;
 transition: background 0.3s;
 }
.menu li a:hover {
 background: #1c2230;
 }
.menu li a i {
 margin-right: 12px;
 }
.user-footer {
 padding: 15px;
 background: #222;
 display: flex;
 align-items: center;
 gap: 10px;
 position: sticky;
 bottom: 0;
 }
.avatar {
 width: 35px;
 height: 35px;
 background: #444;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 color: white;
 }
.banner {
 max-width: 450px;
 margin: 0 auto calc(var(--spacing-unit) * 2);
 background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
 border-radius: 12px;
 padding: calc(var(--spacing-unit) * 1.5);
 text-align: center;
 box-shadow: var(--shadow-hover);
 animation: fadeIn 0.5s ease;
 }
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
 }
@keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 0.3; }
 100% { opacity: 1; }
 }
.banner .title {
 font-size: 1.25rem;
 margin-bottom: calc(var(--spacing-unit) * 1);
 color: #ffffff;
 font-weight: 700;
 animation: blink 1.5s infinite;
 }
.banner p {
 font-size: 0.95rem;
 line-height: 1.6;
 margin-bottom: calc(var(--spacing-unit) * 1);
 color: var(--premium-gold);
 animation: blink 1.5s infinite;
 }
.banner .footer {
 font-size: 0.75rem;
 color: rgba(255, 255, 255, 0.9);
 font-style: italic;
 animation: blink 1.5s infinite;
 }
.promo .inner {
 background: rgba(255,255,255,0.06);
 padding: 14px;
 border-radius: 10px;
 margin: 6px 0;
 }
.card {
 background: var(--card);
 border-radius: 12px;
 padding: 26px;
 color: white;
 box-shadow: 0 6px 0 rgba(0,0,0,0.08) inset;
 flex: 1;
 }
.product-card {
 background: rgba(255,255,255,0.05);
 border-radius: 12px;
 padding: 20px;
 margin-bottom: 16px;
 transition: all 0.3s ease;
 }
.product-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.2);
 }
.product-badge {
 position: absolute;
 top: -8px;
 right: -8px;
 background: var(--accent);
 color: #111;
 padding: 4px 10px;
 border-radius: 20px;
 font-size: 12px;
 font-weight: bold;
 }
.btn {
 display: inline-block;
 padding: 14px 24px;
 border-radius: 10px;
 background: var(--accent);
 color: #111;
 font-weight: 700;
 border: none;
 cursor: pointer;
 width: 100%;
 }
.muted {
 color: rgba(255,255,255,0.6);
 }
@media (max-width: 768px) {
 .promo {
 width: 92%;
 }
 }
 </style>
</head>
<body>
 <!-- Sidebar -->
 <aside class="sidebar" id="sidebar">
 <div class="logo-section">
 <i data-feather="zap" class="text-yellow-400"></i>
 <div>
 <h2 class="brand">JMOTORS</h2>
 <p class="subtitle">Marketing Platform</p>
 </div>
 </div>
 <ul class="menu">
 <li><a href="index.php"><i data-feather="home"></i> Dashboard</a></li>
 <li><a href="meta-uploads.php"><i data-feather="upload"></i> Meta Uploads</a></li>
 <li><a href="transactions.php"><i data-feather="repeat"></i> Transactions</a></li>
 <li><a href="transfer.php"><i data-feather="send"></i> Transfer</a></li>
 <li><a href="daily-product.php"><i data-feather="shopping-bag"></i> Daily Product</a></li>
 <li><a href="withdraw.php"><i data-feather="dollar-sign"></i> Withdraw</a></li>
 <li><a href="packages.php"><i data-feather="package"></i> Packages</a></li>
 <li><a href="loan.php"><i data-feather="credit-card"></i> Loan</a></li>
 <li><a href="recharge.php"><i data-feather="battery-charging"></i> Recharge</a></li>
 <li><a href="agent-approval.php" class="active-page"><i data-feather="user-check"></i> Agent Approval</a></li>
 <li><a href="access-token.php"><i data-feather="key"></i> Access Token</a></li>
 <li><a href="agent-claim.php"><i data-feather="tag"></i> Agent Claim</a></li>
 <li><a href="team.php"><i data-feather="users"></i> Team</a></li>
 </ul>
 <ul class="menu bottom">
 <li><a href="profile.php"><i data-feather="user"></i> Profile</a></li>
 <li><a href="settings.php"><i data-feather="settings"></i> Settings</a></li>
 <li><a href="whatsapp-channel.php"><i data-feather="message-square"></i> Whatsapp Channel</a></li>
 <li><a href="customer-care.php"><i data-feather="headphones"></i> Customer Care</a></li>
 </ul>
 <div class="user-footer">
 <div class="avatar"><?php echo substr($username, 0, 2); ?></div>
 <div>
 <h4><?php echo $username; ?></h4>
 <p><?php echo $tier; ?> - Marketer</p>
 </div>
 </div>
 </aside>
 <!-- Main Content -->
 <div id="content">
 <header class="bg-gray-800 text-white p-4">
 <div class="flex items-center">
 <button class="menu-toggle" id="menu-toggle">
 <i data-feather="menu"></i>
 </button>
 <div class="ml-4 font-bold text-xl">Jmotors</div>
 </div>
 <nav class="flex items-center space-x-6">
 <a href="transfer.php" class="hover:text-yellow-300">Transfer</a>
 <a href="loan.php" class="hover:text-yellow-300">Loans</a>
 <a href="dailyproduct.php" class="hover:text-yellow-300">New Product</a>
 <div class="flex items-center">
 <span class="mr-2">Balance: </span>
 <span id="user-balance" class="font-bold">KES <?php echo number_format($balance, 2); ?></span>
 </div>
 <div class="w-9 h-9 rounded-full bg-gradient-to-r from-yellow-300 to-orange-400 flex items-center justify-center font-bold">MI</div>
 </nav>
 </header>
 <main class="p-4">
 <div class="banner">
 <div class="title">🔥 Tuesday Special Offer! Limited Time Only</div>
 <p>Purchase the <strong>💎 DIAMOND PACKAGE</strong> at <strong>KES 2,500.00</strong> and receive <strong>KES 7,500.00</strong> cashback instantly!</p>
 <div class="footer">⚡ Instant rewards &nbsp; • &nbsp; Fast processing &nbsp; • &nbsp; Powered by MetaWave</div>
 </div>
 <div class="max-w-4xl mx-auto">
 <div class="card">
 <div class="flex items-center gap-3 mb-6">
 <div class="w-11 h-11 rounded-lg bg-gray-800 bg-opacity-30 flex items-center justify-center text-2xl">🛍️</div>
 <div>
 <h3 class="text-2xl font-bold">Today's Featured Products</h3>
 <small class="text-gray-300">Special offers updated daily</small>
 </div>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <!-- Product 1 - Add data-product-id attribute -->
 <div class="product-card relative" data-product-id="1">
 <div class="flex items-start gap-4">
 <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-2xl">💎</div>
 <div>
 <h4 class="font-bold">Diamond Package</h4>
 <p class="text-sm text-gray-300 mt-1">Premium investment with high returns</p>
 <div class="flex items-center justify-between mt-3">
 <span class="font-bold text-yellow-400">KES 2,500</span>
 <button class="px-3 py-1 bg-yellow-400 text-black rounded-lg text-sm font-bold">Buy Now</button>
 </div>
 </div>
 </div>
 </div>
 <!-- Product 2 -->
 <div class="product-card relative" data-product-id="2">
 <div class="flex items-start gap-4">
 <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-blue-500 to-teal-400 flex items-center justify-center text-2xl">✨</div>
 <div>
 <h4 class="font-bold">Starlight Bundle</h4>
 <p class="text-sm text-gray-300 mt-1">Mid-range investment option</p>
 <div class="flex items-center justify-between mt-3">
 <span class="font-bold text-yellow-400">KES 1,000</span>
 <button class="px-3 py-1 bg-yellow-400 text-black rounded-lg text-sm font-bold">Buy Now</button>
 </div>
 </div>
 </div>
 </div>
 <!-- Product 3 -->
 <div class="product-card relative" data-product-id="3">
 <div class="flex items-start gap-4">
 <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-green-500 to-emerald-400 flex items-center justify-center text-2xl">🌱</div>
 <div>
 <h4 class="font-bold">Starter Pack</h4>
 <p class="text-sm text-gray-300 mt-1">Perfect for new investors</p>
 <div class="flex items-center justify-between mt-3">
 <span class="font-bold text-yellow-400">KES 500</span>
 <button class="px-3 py-1 bg-yellow-400 text-black rounded-lg text-sm font-bold">Buy Now</button>
 </div>
 </div>
 </div>
 </div>
 <!-- Product 4 -->
 <div class="product-card relative" data-product-id="4">
 <div class="flex items-start gap-4">
 <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-red-500 to-orange-400 flex items-center justify-center text-2xl">🔥</div>
 <div>
 <h4 class="font-bold">Hot Deal</h4>
 <p class="text-sm text-gray-300 mt-1">Limited time exclusive offer</p>
 <div class="flex items-center justify-between mt-3">
 <span class="font-bold text-yellow-400">KES 3,500</span>
 <button class="px-3 py-1 bg-yellow-400 text-black rounded-lg text-sm font-bold">Buy Now</button>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="mt-8 text-center">
 <button class="btn">View All Products <i data-feather="arrow-right" class="ml-1"></i></button>
 </div>
 </div>
 </div>
 <footer class="text-center text-gray-500 text-sm mt-8">
 Products and offers are subject to availability. Japanese Motors © 2023
 </footer>
 </main>
 </div>
 <script>
 // Initialize feather icons
 feather.replace();
// Sidebar toggle functionality
 document.addEventListener('DOMContentLoaded', function() {
 const toggleBtn = document.getElementById('menu-toggle');
 const sidebar = document.getElementById('sidebar');
 const content = document.getElementById('content');
toggleBtn.addEventListener('click', function() {
 sidebar.classList.toggle('active');
 content.classList.toggle('active');
 });
// Product purchase handling
 document.querySelectorAll('.product-card button').forEach(button => {
 button.addEventListener('click', function() {
 const productCard = this.closest('.product-card');
 const productName = productCard.querySelector('h4').textContent;
 const productPrice = productCard.querySelector('span').textContent;
// Get product ID from data attribute (you'll need to add this to your HTML)
 const productId = productCard.dataset.productId;
if (confirm(`Confirm purchase of ${productName} for ${productPrice}?`)) {
 // Send AJAX request to purchase product
 const formData = new FormData();
 formData.append('product_id', productId);
fetch('../api/purchase-product.php', {
 method: 'POST',
 body: formData
 })
 .then(response => response.json())
 .then(data => {
 if (data.success) {
 alert(`Successfully purchased ${productName}!`);
 // Update balance display (you'll need to add a balance element with ID)
 document.getElementById('user-balance').textContent = `KES ${data.new_balance.toFixed(2)}`;
// Redirect to package page if this is a package
 if (data.redirect_url) {
 window.location.href = data.redirect_url;
 }
 } else {
 alert(`Error: ${data.message}`);
 }
 })
 .catch(error => {
 console.error('Error:', error);
 alert('An error occurred during purchase.');
 });
 }
 });
 });
 });
 </script>
</body>
</html>