ciremai-cashier/index.html at main · zzdree/ciremai-cashier · GitHub

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>RM. Ciremai Semarang — Menu & Pemesanan Online Real-Time</title>
  <meta name="description" content="Pesan Magelangan, Nasi Goreng, dan Mie Dokdok khas RM. Ciremai UNNES Sekaran Semarang. Buka 24 jam, pesan mandiri dari meja via QR, otomatis terhubung ke kasir." />
  <meta name="theme-color" content="#204B33" />
  <script>
    (function() {
      try {
        const saved = localStorage.getItem('ciremai_theme');
        if (saved === 'dark') {
          document.documentElement.setAttribute('data-theme', 'dark');
        } else {
          document.documentElement.setAttribute('data-theme', 'light');
        }
      } catch(e) {
        document.documentElement.setAttribute('data-theme', 'light');
      }
    })();
  </script>
  <link rel="canonical" href="https://zzdree.github.io/ciremai-cashier/order" />

  <!-- Open Graph / Facebook / WhatsApp -->
  <meta property="og:type" content="restaurant.restaurant" />
  <meta property="og:url" content="https://zzdree.github.io/ciremai-cashier/order" />
  <meta property="og:title" content="RM. Ciremai Semarang — Menu & Pemesanan Online Real-Time" />
  <meta property="og:description" content="Magelangan, Nasi Goreng, Mie Dokdok hangat khas warung malam UNNES. Pesan mandiri dari meja, langsung masuk ke antrean kasir." />
  <meta property="og:site_name" content="RM. Ciremai" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="RM. Ciremai Semarang — Menu & Pemesanan Online" />
  <meta name="twitter:description" content="Pesan makanan dan minuman hangat khas RM. Ciremai UNNES Semarang 24 Jam." />

  <!-- Favicon -->
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23B83208'/><text x='50' y='68' font-size='52' text-anchor='middle'>🍛</text></svg>" />

  <!-- Performance & Fonts Preconnect -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="dns-prefetch" href="https://lnxprlvmyhqxkzarrzac.supabase.co" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" />
  <link rel="stylesheet" href="css/style.css" />

  <!-- Schema.org JSON-LD Structured Data for Restaurant -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Restaurant",
    "name": "RM. Ciremai",
    "description": "Warung makan khas Indonesia 24 jam di kawasan UNNES Semarang dengan menu andalan Magelangan, Nasi Goreng, dan Mie Dokdok.",
    "servesCuisine": "Indonesian",
    "priceRange": "$",
    "url": "https://zzdree.github.io/ciremai-cashier/order",
    "telephone": "+6281234567890",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Jl. Kalimasada, Sekaran, Kec. Gunung Pati",
      "addressLocality": "Kota Semarang",
      "addressRegion": "Jawa Tengah",
      "postalCode": "50229",
      "addressCountry": "ID"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": -7.0505,
      "longitude": 110.3956
    },
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": [
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
        ],
        "opens": "00:00",
        "closes": "23:59"
      }
    ],
    "hasMenu": {
      "@type": "Menu",
      "name": "Menu RM. Ciremai",
      "hasMenuItem": [
        {
          "@type": "MenuItem",
          "name": "Magelangan Spesial",
          "offers": { "@type": "Offer", "price": "15000", "priceCurrency": "IDR" }
        },
        {
          "@type": "MenuItem",
          "name": "Nasi Goreng Telur",
          "offers": { "@type": "Offer", "price": "14000", "priceCurrency": "IDR" }
        },
        {
          "@type": "MenuItem",
          "name": "Mie Dokdok Kuah Kental",
          "offers": { "@type": "Offer", "price": "13000", "priceCurrency": "IDR" }
        }
      ]
    }
  }
  </script>
</head>
<body>

  <!-- ============ HERO ============ -->
  <header class="hero" role="banner">
    <div class="container">
      <!-- Top Navbar (Full Width) -->
      <nav class="hero-nav" aria-label="Navigasi Utama">
        <div class="brand-mark">
          <div class="brand-badge" aria-hidden="true">C</div>
          <div>
            <div class="brand-name" id="brandNama">RM. Ciremai</div>
            <div class="brand-sub" id="brandKota">Semarang, Jawa Tengah</div>
          </div>
        </div>
        <div class="nav-actions">
          <button id="btnThemeToggle" class="theme-toggle-btn" aria-label="Ganti Mode Gelap atau Terang" title="Ganti Mode Gelap / Terang">
            <span class="theme-icon">🌙</span>
          </button>
          <a class="kasir-link" href="admin.html" aria-label="Buka Dashboard Admin dan Kasir">Admin</a>
        </div>
      </nav>

      <!-- Hero Content -->
      <div class="hero-inner">
        <div class="hero-copy">
          <h1>Laper tengah malam? Sini, kita masak.</h1>
          <p>Magelangan, nasi goreng, dan mie dokdok khas warung — dimasak dadakan saat kamu pesan.</p>
          <div class="hero-meta">
            <span class="meta-pill" aria-label="Jam operasional">🕒 <span id="jamBuka">Buka 24 Jam</span></span>
            <a class="meta-pill" href="#" id="gmapsLink" target="_blank" rel="noopener noreferrer" aria-label="Buka lokasi di Google Maps">📍 Lihat di Google Maps</a>
          </div>
        </div>

        <!-- Ilustrasi SVG hero -->
        <div class="hero-art" aria-hidden="true">
          <svg viewBox="0 0 380 260" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- meja -->
            <ellipse cx="190" cy="228" rx="170" ry="26" fill="#16321F"/>
            <!-- piring magelangan -->
            <ellipse cx="130" cy="180" rx="88" ry="34" fill="#FFFDF8"/>
            <ellipse cx="130" cy="174" rx="76" ry="27" fill="#F4EDDF"/>
            <path d="M78 172c10-18 40-28 56-24s30 14 46 10c8-2 12-6 14-9 2 14-8 30-32 35-30 6-72 4-84-12z" fill="#E9A23B"/>
            <circle cx="112" cy="164" r="11" fill="#C43C12"/>
            <circle cx="150" cy="158" r="7" fill="#27553B"/>
            <!-- telur mata sapi -->
            <ellipse cx="196" cy="150" rx="26" ry="19" fill="#FFFDF8"/>
            <circle cx="196" cy="149" r="8" fill="#E9A23B"/>
            <!-- gelas es teh -->
            <path d="M262 128l6 74c1 8 7 13 15 13h6c8 0 14-5 15-13l6-74z" fill="#FBF0DC"/>
            <path d="M265 148l4 54c1 8 7 12 14 12s13-4 14-12l4-54c-10 6-36 6-36 0z" fill="#D98A3E"/>
            <ellipse cx="285" cy="129" rx="23" ry="7" fill="#FFF"/>
            <rect x="296" y="96" width="5" height="60" rx="2.5" fill="#C43C12" transform="rotate(8 298 126)"/>
            <!-- uap -->
            <path d="M120 118c-6-8 4-14-2-24" stroke="#FBF7EF" stroke-opacity=".5" stroke-width="4" stroke-linecap="round"/>
            <path d="M140 112c-6-8 4-14-2-24" stroke="#FBF7EF" stroke-opacity=".35" stroke-width="4" stroke-linecap="round"/>
            <path d="M196 116c-6-8 4-14-2-24" stroke="#FBF7EF" stroke-opacity=".5" stroke-width="4" stroke-linecap="round"/>
            <!-- bintang/langit -->
            <circle cx="40" cy="36" r="2.5" fill="#FBF7EF" opacity=".7"/>
            <circle cx="330" cy="28" r="2" fill="#FBF7EF" opacity=".55"/>
            <circle cx="300" cy="58" r="1.6" fill="#FBF7EF" opacity=".4"/>
            <circle cx="70" cy="70" r="1.8" fill="#FBF7EF" opacity=".45"/>
            <!-- siluet gunung Ciremai -->
            <path d="M0 92l52-38 38 26 44-20 50 30H0z" fill="#1D402C"/>
            <path d="M200 90l60-34 46 22 42-14 32 26z" fill="#1D402C"/>
          </svg>
        </div>
      </div>
    </div>
  </header>

  <!-- ============ MENU SECTION ============ -->
  <main class="menu-section container" id="mainContent">
    <div class="search-wrap">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      <input type="search" id="searchInput" placeholder="Cari menu… misal: magelangan, es teh" autocomplete="off" aria-label="Cari menu makanan dan minuman" />
    </div>

    <nav class="chips" id="chips" role="tablist" aria-label="Kategori menu"></nav>

    <section id="menuList" aria-label="Daftar menu makanan dan minuman"><!-- dirender oleh js/app.js --></section>
  </main>

  <!-- ============ CART BAR ============ -->
  <aside class="cart-bar" id="cartBar" aria-live="polite">
    <div class="container cart-bar-inner">
      <div class="cart-bar-info">
        <strong id="cartBarTotal">Rp 0</strong>
        <small id="cartBarCount">0 item dipilih</small>
      </div>
      <button class="btn-cart-open" id="btnOpenCart" aria-label="Lihat isi keranjang dan checkout">
        🛒 Lihat Keranjang
        <span class="cart-count" id="cartBadge">0</span>
      </button>
    </div>
  </aside>

  <!-- ============ MODAL KERANJANG + CHECKOUT ============ -->
  <div class="modal-overlay" id="cartModal" role="dialog" aria-modal="true" aria-labelledby="cartHeading">
    <div class="modal">
      <div class="modal-head">
        <h2 id="cartHeading">Keranjangmu</h2>
        <button class="modal-close" id="btnCloseCart" aria-label="Tutup keranjang">✕</button>
      </div>

      <div id="cartItems" aria-label="Rincian item pesanan"><!-- isi keranjang --></div>

      <div class="cart-summary">
        <div class="summary-row"><span>Subtotal</span><span id="sumSubtotal">Rp 0</span></div>
        <div class="summary-row total"><span>Total</span><span id="sumTotal">Rp 0</span></div>
      </div>

      <form id="checkoutForm">
        <div class="field">
          <label id="labelMakan">Mau Makan di Mana?</label>
          <div class="order-type" role="radiogroup" aria-labelledby="labelMakan">
            <button type="button" class="type-btn active" data-type="Makan di Tempat" role="radio" aria-checked="true">🍽️ Makan di Tempat</button>
            <button type="button" class="type-btn" data-type="Bungkus" role="radio" aria-checked="false">🥡 Bungkus</button>
          </div>
        </div>

        <div class="field">
          <label for="custNote">Catatan <small style="color:var(--ink-soft);font-weight:500;">(opsional)</small></label>
          <textarea id="custNote" placeholder="misal: pedas level 3, tanpa timun…" maxlength="200"></textarea>
        </div>

        <button type="submit" class="btn-primary" id="btnWa">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.4 14.1c-.2.7-1.2 1.3-2 1.4-.5.1-1.2.2-3.4-.7-2.9-1.2-4.8-4.1-4.9-4.3-.1-.2-1.2-1.6-1.2-3s.7-2.1 1-2.4c.2-.3.6-.4.8-.4h.6c.2 0 .4-.1.7.5.2.6.8 2 .9 2.2.1.2.1.4 0 .6-.3.6-.6.8-.4 1.2.7 1.2 1.6 2.1 2.8 2.7.3.2.5.1.7-.1l1-1.1c.2-.3.4-.2.7-.1l2.2 1c.3.2.5.3.6.4.1.2.1.8-.1 1.5z"/></svg>
          Kirim Pesanan ke Kasir
        </button>
        <p class="wa-note">Pesanan otomatis masuk ke layar kasir.<br />Kasir akan mengonfirmasi, lalu kamu bayar tunai atau scan QRIS di warung.</p>

        <button type="button" class="btn-secondary" id="btnClearCart">🗑️ Kosongkan Keranjang</button>
      </form>
    </div>
  </div>

  <!-- ============ MODAL PESANAN TERKIRIM ============ -->
  <div class="modal-overlay" id="successModal" role="dialog" aria-modal="true" aria-labelledby="successTitle">
    <div class="modal modal-success">
      <div class="success-emoji" aria-hidden="true">✅</div>
      <h2 id="successTitle">Pesanan Terkirim!</h2>
      <p id="successBody" class="success-body">Pesanan sudah masuk ke layar kasir.</p>
      <div class="success-actions">
        <button type="button" class="btn-primary" id="btnEditOrder">✏️ Ubah/Tambah ke Pesanan Ini</button>
        <button type="button" class="btn-primary btn-outline" id="btnAddMore">➕ Pesan Baru Lagi</button>
        <button type="button" class="btn-secondary" id="btnDone">Selesai</button>
      </div>
    </div>
  </div>

  <!-- ============ FOOTER ============ -->
  <footer class="footer" role="contentinfo">
    <div class="container">
      <strong id="footNama">RM. Ciremai</strong> · <span id="footAlamat">Jl. Kalimasada, Sekaran, Kec. Gn. Pati, Kota Semarang, Jawa Tengah 50229</span><br />
      <span id="footJam">Setiap hari · Buka 24 Jam</span><br /><br />
      Dibuat dengan 🔥 untuk pecinta kuliner malam ·
      <a href="https://github.com/zzdree" target="_blank" rel="noopener noreferrer">@zzdree</a>
    </div>
  </footer>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="js/config.js"></script>
  <script src="js/data.js"></script>
  <script src="js/store.js"></script>
  <script src="js/db.js"></script>
  <script src="js/app.js"></script>
</body>
</html>