Hugging Face's logo

Spaces:
Kush26
/
kiit-kaffe
Sleeping

App Files Community
kiit-kaffe
File size: 9,819 Bytes
566304d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56fb0d1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
566304d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!-- ═══════════════════════════════════════
     INVOICE MODAL
═══════════════════════════════════════ -->
<div class="modal-overlay" id="invoice-modal">
  <div class="invoice-modal-box">
    <div class="inv-modal-top">
      <div>
        <h3>🍽 KIIT Kafe · Tax Invoice</h3>
        <div class="inv-ref" id="inv-modal-ref">Invoice #INV-10204D</div>
      </div>
      <button class="inv-close" onclick="closeModal('invoice-modal')">✕</button>
    </div>
    <div class="inv-modal-body">
      <div class="inv-meta-row"><span>Customer</span><span id="inv-m-customer">Saurabh Sharma</span></div>
      <div class="inv-meta-row"><span>Order ID</span><span id="inv-m-orderid">#10204D</span></div>
      <div class="inv-meta-row"><span>Date &amp; Time</span><span id="inv-m-date">—</span></div>
      <div class="inv-meta-row"><span>Payment Method</span><span id="inv-m-pay">UPI ✓</span></div>
      <div class="inv-meta-row"><span>Address</span><span>KP-25 Block A, KIIT University</span></div>
      <div class="inv-divider"></div>
      <div id="inv-m-items"></div>
      <div class="inv-divider"></div>
      <div class="inv-meta-row"><span>Item Total</span><span id="inv-m-subtotal">₹0</span></div>
      <div class="inv-meta-row"><span>Delivery</span><span>₹20</span></div>
      <div class="inv-meta-row"><span>GST (5%)</span><span id="inv-m-gst">₹0</span></div>
      <div class="inv-meta-row"><span>Discount</span><span id="inv-m-discount" style="color:#2d6a4f;">-₹0</span></div>
      <div class="inv-grand-row"><span>Grand Total</span><span id="inv-m-grand">₹0</span></div>
      <div class="inv-footer-note">Thank you for ordering with KIIT Kafe! 🙏<br><span>support@kiitkafe.in · Campus 25, KIIT University, Bhubaneswar</span><br><span style="font-size:10px;color:#ccc;">Developed by: Saurabh Sharma &amp; Team</span></div>
    </div>
    <div class="inv-modal-actions">
      <button class="inv-act print" onclick="window.print()">🖨 Print Invoice</button>
      <button class="inv-act close-inv" onclick="closeModal('invoice-modal')">Close</button>
    </div>
  </div>
</div>

<!-- COUPON MODAL -->
<div class="modal-overlay" id="coupon-modal">
  <div style="background:white;border-radius:20px;padding:32px;max-width:380px;width:100%;animation:popIn 0.3s ease both;">
    <h3 style="font-family:'Syne',sans-serif;font-size:18px;font-weight:900;color:#1a1a1a;margin-bottom:16px;">🏷 Apply Coupon</h3>
    <div style="display:flex;gap:10px;margin-bottom:12px;">
      <input id="coupon-input" type="text" placeholder="Enter coupon code" style="flex:1;padding:12px;border:1.5px solid #ddd;border-radius:8px;font-size:14px;outline:none;">
      <button onclick="applyCoupon()" style="padding:12px 20px;background:#2d6a4f;color:white;border-radius:8px;font-weight:800;font-size:14px;">Apply</button>
    </div>
    <div style="font-size:12px;color:#888;margin-bottom:20px;">Try: <strong>KIIT10</strong> (10% off) or <strong>STUDENT</strong> (₹50 off)</div>
    <button onclick="closeModal('coupon-modal')" style="width:100%;padding:12px;background:#f0f0f0;border-radius:8px;font-weight:700;color:#444;">Close</button>
  </div>
</div>

<!-- ACCOUNT MODAL -->
<div class="modal-overlay" id="account-modal">
  <div style="background:white;border-radius:20px;padding:32px;max-width:450px;width:100%;animation:popIn 0.3s ease both;max-height:80vh;overflow-y:auto;">
    <h3 style="font-family:'Syne',sans-serif;font-size:18px;font-weight:900;color:#1a1a1a;margin-bottom:16px;">👤 My Account</h3>
    <div style="margin-bottom:20px;">
      <div style="font-size:12px;color:#888;">Name</div>
      <div id="account-modal-name" style="font-size:16px;font-weight:700;color:#1a1a1a;">-</div>
    </div>
    <div style="margin-bottom:20px;">
      <div style="font-size:12px;color:#888;">Email</div>
      <div id="account-modal-email" style="font-size:14px;color:#1a1a1a;">-</div>
    </div>
    <div style="margin-bottom:20px;">
      <div style="font-size:12px;color:#888;">Phone</div>
      <div id="account-modal-phone" style="font-size:14px;color:#1a1a1a;">-</div>
    </div>
    <div style="display:flex;gap:10px;margin-bottom:20px;">
      <button onclick="updateProfile()" style="flex:1;padding:12px;background:#2d6a4f;color:white;border-radius:8px;font-weight:700;">Edit Profile</button>
      <button onclick="doLogout()" style="flex:1;padding:12px;background:#fee2e2;color:#ef4444;border-radius:8px;font-weight:700;">Logout</button>
    </div>
    
    <!-- Order History Section -->
    <div style="border-top:1px solid #eee;padding-top:20px;">
      <h4 style="font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:#1a1a1a;margin-bottom:12px;">📦 Order History</h4>
      <div id="order-history-list" style="max-height:300px;overflow-y:auto;">
        <div style="text-align:center;padding:20px;color:#888;font-size:13px;">Loading orders...</div>
      </div>
    </div>
    
    <button onclick="closeModal('account-modal')" style="width:100%;padding:12px;background:#f0f0f0;border-radius:8px;font-weight:700;color:#444;margin-top:16px;">Close</button>
  </div>
</div>

<!-- CASH WAITING MODAL -->
<div class="modal-overlay" id="cash-waiting-modal">
  <div style="background:white;border-radius:24px;padding:40px;max-width:400px;width:100%;text-align:center;animation:popIn 0.3s ease both;">
    <div style="font-size:60px;margin-bottom:20px;">💵</div>
    <h3 style="font-family:'Syne',sans-serif;font-size:22px;font-weight:900;color:#1a1a1a;margin-bottom:12px;">Waiting for Cash Payment</h3>
    <p style="color:#666;font-size:14px;line-height:1.6;margin-bottom:24px;">Please pay at the counter. Your order will be confirmed once the payment is received by the admin.</p>
    <div style="display:flex;align-items:center;justify-content:center;gap:12px;color:var(--green-mid);font-weight:700;font-size:14px;">
      <div class="spinner-sm" style="width:16px;height:16px;border:2px solid var(--green-mid);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;"></div>
      Verifying payment status...
    </div>
    <button onclick="cancelCashOrder()" style="margin-top:32px;width:100%;padding:14px;background:#f8f9fa;color:#888;border-radius:12px;font-weight:700;font-size:14px;">Cancel Order</button>
  </div>
</div>

<!-- LOW STOCK MODAL -->
<div class="modal-overlay" id="low-stock-modal">
  <div style="background:white;border-radius:20px;padding:32px;max-width:500px;width:100%;animation:popIn 0.3s ease both;">
    <h3 style="font-family:'Syne',sans-serif;font-size:18px;font-weight:900;color:#1a1a1a;margin-bottom:16px;">⚠️ Low Stock Items</h3>
    <div id="low-stock-list" style="max-height:400px; overflow-y:auto; margin-bottom:20px;">
      <!-- Low stock items will be injected here -->
    </div>
    <button onclick="closeModal('low-stock-modal')" style="width:100%;padding:12px;background:#f0f0f0;border-radius:8px;font-weight:700;color:#444;">Close</button>
  </div>
</div>

<!-- PAYMENT SUCCESS MODAL -->
<div class="modal-overlay" id="payment-success-modal">
  <div style="background:white;border-radius:24px;padding:40px;max-width:400px;width:100%;text-align:center;animation:popIn 0.3s ease both;">
    <div style="font-size:64px;margin-bottom:16px;">✅</div>
    <h3 style="font-family:'Syne',sans-serif;font-size:24px;font-weight:900;color:#1a1a1a;margin-bottom:8px;">Payment Successful!</h3>
    <p style="color:#666;font-size:14px;line-height:1.6;margin-bottom:24px;">Your order has been confirmed and is being prepared.</p>
    <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:16px;margin-bottom:24px;">
      <div style="font-size:12px;color:#166534;margin-bottom:4px;">Order ID</div>
      <div id="success-modal-order-id" style="font-size:18px;font-weight:800;color:#166534;">#1204D1</div>
    </div>
    <div style="display:flex;gap:10px;">
      <button onclick="viewInvoiceFromModal()" style="flex:1;padding:12px;background:#2d6a4f;color:white;border-radius:12px;font-weight:700;">📄 View Invoice</button>
      <button onclick="closeModal('payment-success-modal');nav('success')" style="flex:1;padding:12px;background:#f0f0f0;color:#444;border-radius:12px;font-weight:700;">Track Order</button>
    </div>
  </div>
</div>

<!-- PAYMENT FAILURE MODAL -->
<div class="modal-overlay" id="payment-failure-modal">
  <div style="background:white;border-radius:24px;padding:40px;max-width:400px;width:100%;text-align:center;animation:popIn 0.3s ease both;">
    <div style="font-size:64px;margin-bottom:16px;">❌</div>
    <h3 style="font-family:'Syne',sans-serif;font-size:24px;font-weight:900;color:#1a1a1a;margin-bottom:8px;">Payment Failed</h3>
    <p style="color:#666;font-size:14px;line-height:1.6;margin-bottom:24px;">Oops! Something went wrong with your payment. Please try again.</p>
    <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:16px;margin-bottom:24px;">
      <div style="font-size:12px;color:#991b1b;margin-bottom:4px;">Error</div>
      <div id="failure-modal-reason" style="font-size:14px;font-weight:700;color:#991b1b;">Payment gateway timeout</div>
    </div>
    <div style="display:flex;gap:10px;">
      <button onclick="closeModal('payment-failure-modal');nav('cart')" style="flex:1;padding:12px;background:#f0f0f0;color:#444;border-radius:12px;font-weight:700;">Back to Cart</button>
      <button onclick="closeModal('payment-failure-modal');nav('payment')" style="flex:1;padding:12px;background:#dc2626;color:white;border-radius:12px;font-weight:700;">Retry Payment</button>
    </div>
  </div>
</div>

<div class="toast" id="toast-el"></div>