Wednesday, 15 July 2026

index.html

Mobile Tea/Coffee POS

Chai POS

Mobile Tea/Coffee & Snacks Billing

Today's Sales

₹0

Bills: 0

Items: 0

Total Collection

₹0

All Bills: 0

Cart

Bill #:

Subtotal ₹0

Discount (₹)

Grand Total ₹0

Sales History

Settings

Chai Corner

Bill #:

Subtotal

Discount

Total

Scan to Pay

Thank you! ☕

Made in Annamalai Nagar- Chai POS

Build a Tea Kadai Billing Software using ChatGPT & GitHub Pages

☕ Build a Tea Kadai Billing Software

Create a complete Mobile Billing Software using ChatGPT and publish it FREE using GitHub Pages.

Start Learning

Introduction

In this tutorial, you'll learn how to build a professional Tea Kadai Billing Software using ChatGPT with only HTML, CSS, and JavaScript. No backend, database, or hosting charges are required.

💡 The final application works completely offline using LocalStorage and can be hosted free on GitHub Pages.

What You'll Build

📱 Mobile Friendly

Works perfectly on Android, iPhone and Desktop.

🧾 Billing POS

Tea, Coffee, Snacks, QR Payments and Printing.

💾 Local Storage

No Database Required.

☁ GitHub Pages

Host completely FREE forever.

Step 1 - Generate Prompt Step 2 - Generate HTML Step 3 - Publish on GitHub Complete Source Code Frequently Asked Questions

STEP 1

Generate the Billing Software using ChatGPT

The quality of your application depends on the prompt you give to ChatGPT. A detailed prompt produces a better HTML application.

💡 Tip: Mention that you need only one HTML file with embedded CSS and JavaScript.

Prompt

Assume yourself a Mobile Friendly Full Stack Developer.

Create a Tea Kadai Billing Software using only ONE HTML file.

Requirements

✔ Mobile Responsive
✔ Tea / Coffee / Snacks Menu
✔ Item Images
✔ Shopping Cart
✔ Discount
✔ QR Code Payment
✔ Thermal Receipt Printing
✔ LocalStorage
✔ Dashboard
✔ Sales History
✔ Inventory
✔ Reports
✔ Dark Mode
✔ Offline Support

Everything should be inside one HTML file using
HTML + CSS + JavaScript.

The application should be directly deployable
on GitHub Pages.

STEP 2

Generate the HTML Code

Copy the above prompt into ChatGPT. After ChatGPT generates the application:

Copy the complete HTML code.
Open Notepad or Visual Studio Code.
Create a new file.
Paste the generated code.
Save it as:

index.html

Recommended Folder Structure

TeaKadaiBilling/

│

├── index.html

├── images/

│     tea.jpg

│     coffee.jpg

│     samosa.jpg

│     qr.png

│

└── logo.png

Open index.html in your browser. If everything works correctly, continue to publishing.

STEP 3

Publish FREE using GitHub Pages

Step 1 — Create GitHub Account

Visit

https://github.com

Step 2 — Create Repository

Click New Repository
Name it

tea-kadai-pos

Select Public
Create Repository

Step 3 — Upload HTML File

Add File
Upload Files
Select index.html
Commit Changes

Step 4 — Enable GitHub Pages

Settings
Pages
Deploy From Branch
Main Branch
Root Folder
Save

Your Website URL

https://YOUR_USERNAME.github.io/tea-kadai-pos/

Main Features

🧾 Billing

Create bills instantly.

📊 Reports

Daily collection and history.

💰 QR Payment

Google Pay, PhonePe & Paytm.

🖨 Print Receipt

58mm Thermal Printer Ready.

📦 Inventory

Manage tea and snack stock.

🌙 Dark Mode

One-click theme switching.

Next Step

Below is the complete source code of the Tea Kadai Billing Software. Paste your generated HTML into the textarea in the next section. Visitors can then:

📋 Copy the entire source code.
💾 Download it as index.html.
Open and modify it.
Host it on GitHub Pages.

SOURCE CODE

Complete Source Code

Copy the generated HTML and paste it inside the textarea below. Your visitors can then copy the code or download it as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Mobile Tea/Coffee POS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    :root {
      --bg: #0f172a;
      --bg-soft: #1e293b;
      --bg-softer: #020617;
      --fg: #e5e7eb;
      --accent: #22c55e;
      --accent-soft: #16a34a;
      --danger: #ef4444;
      --border: #334155;
      --card: #111827;
    }
    .light {
      --bg: #f3f4f6;
      --bg-soft: #e5e7eb;
      --bg-softer: #ffffff;
      --fg: #111827;
      --accent: #16a34a;
      --accent-soft: #15803d;
      --danger: #b91c1c;
      --border: #d1d5db;
      --card: #ffffff;
    }
    * {
      box-sizing: border-box;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
    }
    .app {
      max-width: 480px;
      margin: 0 auto;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: radial-gradient(circle at top, #1d283a, var(--bg-softer));
    }
    header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(90deg, #0f172a, #1e293b);
      position: sticky;
      top: 0;
      z-index: 10;
    }
    header .title {
      font-weight: 700;
      font-size: 18px;
    }
    header .subtitle {
      font-size: 11px;
      opacity: 0.7;
    }
    header .right {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .pill {
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .toggle {
      width: 40px;
      height: 22px;
      border-radius: 999px;
      border: 1px solid var(--border);
      padding: 2px;
      display: flex;
      align-items: center;
      cursor: pointer;
      background: var(--bg-soft);
    }
    .toggle-knob {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: var(--accent);
      transition: transform 0.2s;
    }
    .toggle.light-on .toggle-knob {
      transform: translateX(18px);
      background: #facc15;
    }
    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 8px;
      gap: 8px;
    }
    .cards-row {
      display: flex;
      gap: 8px;
    }
    .card {
      background: rgba(15, 23, 42, 0.9);
      border-radius: 12px;
      padding: 10px;
      border: 1px solid rgba(148, 163, 184, 0.3);
      backdrop-filter: blur(12px);
    }
    .card-soft {
      background: var(--card);
    }
    .card-title {
      font-size: 12px;
      opacity: 0.7;
      margin-bottom: 4px;
    }
    .card-value {
      font-size: 18px;
      font-weight: 700;
    }
    .chip-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .chip {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px dashed var(--border);
      opacity: 0.8;
    }
    .layout {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 8px;
    }
    @media (max-width: 640px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }
    .menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .menu-header h2 {
      font-size: 14px;
      margin: 0;
    }
    .menu-tabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .menu-tab {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      cursor: pointer;
      opacity: 0.8;
    }
    .menu-tab.active {
      background: var(--accent-soft);
      border-color: var(--accent-soft);
      color: #f9fafb;
      opacity: 1;
    }
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    @media (max-width: 400px) {
      .menu-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
    }
    .item-card {
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: linear-gradient(135deg, #020617, #111827);
      display: flex;
      flex-direction: column;
      cursor: pointer;
      position: relative;
    }
    .item-img {
      height: 80px;
      background-size: cover;
      background-position: center;
    }
    .item-body {
      padding: 6px 8px 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .item-name {
      font-size: 13px;
      font-weight: 600;
    }
    .item-meta {
      font-size: 11px;
      opacity: 0.7;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .item-price {
      font-weight: 600;
      color: var(--accent);
    }
    .item-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      gap: 4px;
    }
    .btn {
      border-radius: 999px;
      border: 1px solid var(--border);
      padding: 4px 8px;
      font-size: 11px;
      cursor: pointer;
      background: rgba(15, 23, 42, 0.9);
      color: var(--fg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .btn-primary {
      background: var(--accent-soft);
      border-color: var(--accent-soft);
      color: #f9fafb;
    }
    .btn-danger {
      background: var(--danger);
      border-color: var(--danger);
      color: #f9fafb;
    }
    .btn-sm {
      padding: 2px 6px;
      font-size: 10px;
    }
    .btn-full {
      width: 100%;
    }
    .cart-card {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .cart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cart-header h2 {
      font-size: 14px;
      margin: 0;
    }
    .cart-meta {
      font-size: 11px;
      opacity: 0.7;
    }
    .cart-list {
      max-height: 220px;
      overflow-y: auto;
      border-radius: 8px;
      border: 1px dashed var(--border);
      padding: 6px;
      background: rgba(15, 23, 42, 0.6);
    }
    .cart-empty {
      font-size: 11px;
      opacity: 0.7;
      text-align: center;
      padding: 12px 4px;
    }
    .cart-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      border-bottom: 1px dashed rgba(148, 163, 184, 0.3);
      gap: 6px;
    }
    .cart-item:last-child {
      border-bottom: none;
    }
    .cart-item-info {
      flex: 1;
    }
    .cart-item-name {
      font-size: 12px;
      font-weight: 600;
    }
    .cart-item-meta {
      font-size: 11px;
      opacity: 0.7;
    }
    .cart-item-controls {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }
    .qty-controls {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .qty-btn {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      background: var(--bg-soft);
    }
    .qty-value {
      font-size: 12px;
      min-width: 20px;
      text-align: center;
    }
    .cart-summary {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 12px;
    }
    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .summary-row strong {
      font-size: 13px;
    }
    .summary-row input {
      width: 80px;
      padding: 2px 4px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg-soft);
      color: var(--fg);
      font-size: 11px;
    }
    .actions-row {
      display: flex;
      gap: 6px;
      margin-top: 6px;
    }
    .actions-row .btn {
      flex: 1;
    }
    .section-tabs {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      flex-wrap: wrap;
    }
    .section-tab {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      cursor: pointer;
      opacity: 0.8;
    }
    .section-tab.active {
      background: var(--accent-soft);
      border-color: var(--accent-soft);
      color: #f9fafb;
      opacity: 1;
    }
    .section-panel {
      margin-top: 6px;
      border-radius: 10px;
      border: 1px solid var(--border);
      padding: 8px;
      background: rgba(15, 23, 42, 0.7);
      max-height: 220px;
      overflow-y: auto;
      font-size: 11px;
    }
    .history-search {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
    }
    .history-search input {
      flex: 1;
      padding: 4px 6px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--bg-soft);
      color: var(--fg);
      font-size: 11px;
    }
    .history-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .history-item {
      border-radius: 8px;
      border: 1px solid var(--border);
      padding: 6px;
      background: rgba(15, 23, 42, 0.8);
    }
    .history-top {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      margin-bottom: 4px;
    }
    .history-items {
      font-size: 11px;
      opacity: 0.8;
    }
    .history-total {
      font-size: 12px;
      font-weight: 600;
      margin-top: 4px;
    }
    .settings-form {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .settings-form label {
      font-size: 11px;
      opacity: 0.8;
    }
    .settings-form input {
      width: 100%;
      padding: 4px 6px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg-soft);
      color: var(--fg);
      font-size: 11px;
    }
    .qr-preview {
      margin-top: 6px;
      border-radius: 8px;
      border: 1px dashed var(--border);
      padding: 6px;
      text-align: center;
      font-size: 11px;
    }
    .qr-preview img {
      max-width: 120px;
      max-height: 120px;
      border-radius: 8px;
    }
    footer {
      padding: 6px 10px 10px;
      font-size: 10px;
      opacity: 0.6;
      text-align: center;
    }

/* Print styles for 58mm thermal */
    @media print {
      body {
        background: #ffffff;
        color: #000000;
      }
      .app,
      header,
      main,
      footer {
        display: none;
      }
      #print-area {
        display: block;
        width: 58mm;
        font-size: 11px;
        padding: 4px;
      }
      #print-area h1 {
        font-size: 13px;
        text-align: center;
        margin: 0 0 4px;
      }
      #print-area .line {
        border-top: 1px dashed #000;
        margin: 4px 0;
      }
      #print-area .row {
        display: flex;
        justify-content: space-between;
      }
      #print-area .items {
        margin-top: 4px;
      }
      #print-area .items div {
        display: flex;
        justify-content: space-between;
      }
    }
    #print-area {
      display: none;
    }
  </style>
</head>
<body class="dark">
  <div class="app">
    <header>
      <div>
        <div class="title">Chai POS</div>
        <div class="subtitle">Mobile Tea/Coffee & Snacks Billing</div>
      </div>
      <div class="right">
        <div class="pill">
          <span id="today-date"></span>
        </div>
        <div class="toggle" id="themeToggle">
          <div class="toggle-knob"></div>
        </div>
      </div>
    </header>

<main>
      
      <div class="cards-row">
        <div class="card card-soft" style="flex: 1;">
          <div class="card-title">Today's Sales</div>
          <div class="card-value" id="todaySales">₹0</div>
          <div class="chip-row">
            <div class="chip">
              Bills: <span id="todayBills">0</span>
            </div>
            <div class="chip">
              Items: <span id="todayItems">0</span>
            </div>
          </div>
        </div>
        <div class="card card-soft" style="flex: 1;">
          <div class="card-title">Total Collection</div>
          <div class="card-value" id="totalCollection">₹0</div>
          <div class="chip-row">
            <div class="chip">
              All Bills: <span id="totalBills">0</span>
            </div>
          </div>
        </div>
      </div>

<div class="layout">
        
        <div class="card card-soft">
          <div class="menu-header">
            <h2>Menu</h2>
            <button class="btn btn-sm" id="addItemBtn">+ Add Item</button>
          </div>
          <div class="menu-tabs" id="categoryTabs">
            <div class="menu-tab active" data-cat="All">All</div>
            <div class="menu-tab" data-cat="Tea">Tea</div>
            <div class="menu-tab" data-cat="Coffee">Coffee</div>
            <div class="menu-tab" data-cat="Snacks">Snacks</div>
          </div>
          <div class="menu-grid" id="menuGrid"></div>
        </div>

<div class="card cart-card">
          <div class="cart-header">
            <h2>Cart</h2>
            <div class="cart-meta">
              Bill #: <span id="billNumber"></span>
            </div>
          </div>
          <div class="cart-list" id="cartList"></div>
          <div class="cart-summary">
            <div class="summary-row">
              <span>Subtotal</span>
              <span id="subtotal">₹0</span>
            </div>
            <div class="summary-row">
              <span>Discount (₹)</span>
              <input type="number" id="discountInput" min="0" value="0" />
            </div>
            <div class="summary-row">
              <strong>Grand Total</strong>
              <strong id="grandTotal">₹0</strong>
            </div>
          </div>
          <div class="actions-row">
            <button class="btn btn-danger" id="clearCartBtn">Clear</button>
            <button class="btn btn-primary" id="checkoutBtn">
              Checkout & Print
            </button>
          </div>
          <div class="section-tabs">
            <div class="section-tab active" data-section="history">
              Sales History
            </div>
            <div class="section-tab" data-section="settings">Settings</div>
          </div>
          <div class="section-panel" id="historyPanel">
            <div class="history-search">
              <input
                type="text"
                id="historySearch"
                placeholder="Search by bill # or date..."
              />
              <button class="btn btn-sm" id="historyTodayBtn">Today</button>
            </div>
            <div class="history-list" id="historyList"></div>
          </div>
          <div class="section-panel" id="settingsPanel" style="display: none;">
            <div class="settings-form">
              <label>Shop Name</label>
              <input type="text" id="shopNameInput" placeholder="Chai Corner" />
              <label>QR Payment Image</label>
              <input type="file" id="qrUpload" accept="image/*" />
              <div class="qr-preview">
                <div>QR Preview (upload your own)</div>
                <img id="qrImage" alt="QR Code" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

<footer>
      Works offline • LocalStorage POS • Upload to GitHub Pages as single HTML
    </footer>
  </div>

<div id="print-area">
    <h1 id="print-shop-name">Chai Corner</h1>
    <div class="row">
      <span>Bill #: <span id="print-bill-number"></span></span>
      <span id="print-date"></span>
    </div>
    <div class="line"></div>
    <div class="items" id="print-items"></div>
    <div class="line"></div>
    <div class="row">
      <span>Subtotal</span>
      <span id="print-subtotal"></span>
    </div>
    <div class="row">
      <span>Discount</span>
      <span id="print-discount"></span>
    </div>
    <div class="row">
      <strong>Total</strong>
      <strong id="print-total"></strong>
    </div>
    <div class="line"></div>
    <div style="text-align:center;margin-top:4px;">
      <div style="margin-bottom:2px;">Scan to Pay</div>
      <img id="print-qr" style="max-width:120px;max-height:120px;" />
      <div style="margin-top:4px;">Thank you! ☕</div>
    </div>
  </div>

// --- State ---
    let items = [];
    let cart = [];
    let sales = [];
    let settings = { shopName: "Chai Corner", qrDataUrl: "" };
    let currentCategory = "All";

// --- Helpers ---
    function loadFromStorage() {
      items = JSON.parse(localStorage.getItem(STORAGE_KEYS.ITEMS) || "[]");
      sales = JSON.parse(localStorage.getItem(STORAGE_KEYS.SALES) || "[]");
      const s = localStorage.getItem(STORAGE_KEYS.SETTINGS);
      if (s) settings = JSON.parse(s);
      const theme = localStorage.getItem(STORAGE_KEYS.THEME) || "dark";
      document.body.className = theme === "light" ? "light" : "dark";
      document
        .getElementById("themeToggle")
        .classList.toggle("light-on", theme === "light");
    }

function getNextBillNumber() {
      let num = parseInt(
        localStorage.getItem(STORAGE_KEYS.BILL_COUNTER) || "1000",
        10
      );
      num += 1;
      localStorage.setItem(STORAGE_KEYS.BILL_COUNTER, String(num));
      return num;
    }

function formatCurrency(v) {
      return "₹" + v.toFixed(2);
    }

function todayString() {
      const d = new Date();
      return d.toISOString().slice(0, 10);
    }

function isToday(dateStr) {
      return dateStr.slice(0, 10) === todayString();
    }

// --- Demo items if empty ---
    function ensureDemoItems() {
      if (items.length > 0) return;
      items = [
        {
          id: 1,
          name: "Masala Tea",
          category: "Tea",
          price: 15,
          img: "https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg?auto=compress&cs=tinysrgb&w=400",
        },
        {
          id: 2,
          name: "Ginger Tea",
          category: "Tea",
          price: 18,
          img: "https://images.pexels.com/photos/1417945/pexels-photo-1417945.jpeg?auto=compress&cs=tinysrgb&w=400",
        },
        {
          id: 3,
          name: "Filter Coffee",
          category: "Coffee",
          price: 20,
          img: "https://images.pexels.com/photos/312418/pexels-photo-312418.jpeg?auto=compress&cs=tinysrgb&w=400",
        },
        {
          id: 4,
          name: "Cold Coffee",
          category: "Coffee",
          price: 35,
          img: "https://images.pexels.com/photos/434213/pexels-photo-434213.jpeg?auto=compress&cs=tinysrgb&w=400",
        },
        {
          id: 5,
          name: "Samosa",
          category: "Snacks",
          price: 12,
          img: "https://images.pexels.com/photos/5908259/pexels-photo-5908259.jpeg?auto=compress&cs=tinysrgb&w=400",
        },
        {
          id: 6,
          name: "Vada",
          category: "Snacks",
          price: 10,
          img: "https://images.pexels.com/photos/5908258/pexels-photo-5908258.jpeg?auto=compress&cs=tinysrgb&w=400",
        },
      ];
      saveItems();
    }

// --- UI renderers ---
    function renderDate() {
      const d = new Date();
      const s =
        d.toLocaleDateString("en-IN", {
          day: "2-digit",
          month: "short",
          year: "numeric",
        }) +
        " • " +
        d.toLocaleTimeString("en-IN", { hour: "2-digit", minute: "2-digit" });
      document.getElementById("today-date").textContent = s;
    }

function renderBillNumber() {
      const num =
        localStorage.getItem(STORAGE_KEYS.BILL_COUNTER) || "1000";
      document.getElementById("billNumber").textContent = num;
    }

function renderDashboard() {
      let todaySales = 0;
      let todayBills = 0;
      let todayItems = 0;
      let totalCollection = 0;
      let totalBills = sales.length;

sales.forEach((s) => {
        totalCollection += s.total;
        if (isToday(s.date)) {
          todaySales += s.total;
          todayBills += 1;
          todayItems += s.items.reduce((sum, it) => sum + it.qty, 0);
        }
      });

document.getElementById("todaySales").textContent =
        formatCurrency(todaySales);
      document.getElementById("todayBills").textContent = todayBills;
      document.getElementById("todayItems").textContent = todayItems;
      document.getElementById("totalCollection").textContent =
        formatCurrency(totalCollection);
      document.getElementById("totalBills").textContent = totalBills;
    }

// --- Cart operations ---
    function addToCart(itemId) {
      const existing = cart.find((c) => c.itemId === itemId);
      if (existing) {
        existing.qty += 1;
      } else {
        cart.push({ itemId, qty: 1 });
      }
      renderCart();
    }

function removeFromCart(itemId) {
      cart = cart.filter((c) => c.itemId !== itemId);
      renderCart();
    }

function clearCart() {
      cart = [];
      document.getElementById("discountInput").value = "0";
      renderCart();
    }

// --- Item CRUD ---
    function addItemDialog() {
      const name = prompt("Item name:");
      if (!name) return;
      const category = prompt("Category (Tea/Coffee/Snacks):", "Tea") || "Tea";
      const price = parseFloat(prompt("Price (₹):", "10") || "0");
      const img = prompt("Image URL (optional):", "") || "";
      const id =
        items.length > 0 ? Math.max(...items.map((i) => i.id)) + 1 : 1;
      items.push({ id, name, category, price, img });
      saveItems();
      renderMenu();
    }

function editItem(id) {
      const item = items.find((i) => i.id === id);
      if (!item) return;
      const name = prompt("Item name:", item.name);
      if (!name) return;
      const category = prompt(
        "Category (Tea/Coffee/Snacks):",
        item.category
      );
      const price = parseFloat(
        prompt("Price (₹):", String(item.price)) || String(item.price)
      );
      const img = prompt("Image URL (optional):", item.img || "") || "";
      item.name = name;
      item.category = category || item.category;
      item.price = price;
      item.img = img;
      saveItems();
      renderMenu();
    }

function deleteItem(id) {
      if (!confirm("Delete this item?")) return;
      items = items.filter((i) => i.id !== id);
      saveItems();
      renderMenu();
    }

// --- Checkout & print ---
    function checkout() {
      if (cart.length === 0) {
        alert("Cart is empty.");
        return;
      }
      const subtotal = cart.reduce((sum, c) => {
        const item = items.find((i) => i.id === c.itemId);
        return sum + (item ? item.price * c.qty : 0);
      }, 0);
      const discount = parseFloat(
        document.getElementById("discountInput").value || "0"
      );
      const total = Math.max(subtotal - discount, 0);
      const billNumber = getNextBillNumber();
      const date = new Date().toISOString();
      const sale = {
        billNumber,
        date,
        subtotal,
        discount,
        total,
        items: cart.map((c) => {
          const item = items.find((i) => i.id === c.itemId);
          return {
            itemId: c.itemId,
            name: item ? item.name : "",
            price: item ? item.price : 0,
            qty: c.qty,
          };
        }),
      };
      sales.push(sale);
      saveSales();
      renderDashboard();
      renderBillNumber();
      renderHistory();

// Prepare print
      document.getElementById("print-bill-number").textContent = billNumber;
      document.getElementById("print-date").textContent = date.slice(0, 16);
      document.getElementById("print-subtotal").textContent =
        formatCurrency(subtotal);
      document.getElementById("print-discount").textContent =
        formatCurrency(discount);
      document.getElementById("print-total").textContent =
        formatCurrency(total);
      const itemsDiv = document.getElementById("print-items");
      itemsDiv.innerHTML = "";
      sale.items.forEach((it) => {
        const d = document.createElement("div");
        d.innerHTML = `<span>${it.name} × ${it.qty}</span><span>${formatCurrency(
          it.price * it.qty
        )}</span>`;
        itemsDiv.appendChild(d);
      });

window.print();
      clearCart();
    }

// --- Theme toggle ---
    function toggleTheme() {
      const current = document.body.className === "light" ? "light" : "dark";
      const next = current === "light" ? "dark" : "light";
      document.body.className = next;
      localStorage.setItem(STORAGE_KEYS.THEME, next);
      document
        .getElementById("themeToggle")
        .classList.toggle("light-on", next === "light");
    }

// --- Events ---
    function setupEvents() {
      document
        .getElementById("themeToggle")
        .addEventListener("click", toggleTheme);

document.getElementById("addItemBtn").addEventListener("click", () =>
        addItemDialog()
      );

document
        .getElementById("discountInput")
        .addEventListener("input", renderCart);

document
        .getElementById("clearCartBtn")
        .addEventListener("click", clearCart);

document
        .getElementById("checkoutBtn")
        .addEventListener("click", checkout);

document
        .getElementById("historySearch")
        .addEventListener("input", () => renderHistory(false));

document
        .getElementById("historyTodayBtn")
        .addEventListener("click", () => renderHistory(true));

document
        .getElementById("shopNameInput")
        .addEventListener("input", (e) => {
          settings.shopName = e.target.value || "Chai Corner";
          saveSettings();
          renderSettings();
        });

document.getElementById("qrUpload").addEventListener("change", (e) => {
        const file = e.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = (ev) => {
          settings.qrDataUrl = ev.target.result;
          saveSettings();
          renderSettings();
        };
        reader.readAsDataURL(file);
      });

document.querySelectorAll(".menu-tab").forEach((tab) => {
        tab.addEventListener("click", () => {
          document
            .querySelectorAll(".menu-tab")
            .forEach((t) => t.classList.remove("active"));
          tab.classList.add("active");
          currentCategory = tab.dataset.cat;
          renderMenu();
        });
      });

document.querySelectorAll(".section-tab").forEach((tab) => {
        tab.addEventListener("click", () => {
          document
            .querySelectorAll(".section-tab")
            .forEach((t) => t.classList.remove("active"));
          tab.classList.add("active");
          const section = tab.dataset.section;
          document.getElementById("historyPanel").style.display =
            section === "history" ? "block" : "none";
          document.getElementById("settingsPanel").style.display =
            section === "settings" ? "block" : "none";
        });
      });
    }

// --- Init ---
    function init() {
      loadFromStorage();
      ensureDemoItems();
      renderDate();
      renderMenu();
      renderCart();
      renderBillNumber();
      renderDashboard();
      renderHistory();
      renderSettings();
      setupEvents();
      setInterval(renderDate, 30000);
    }

document.addEventListener("DOMContentLoaded", init);
  </script>
</body>
</html>

How to Use the Source Code

Paste the generated HTML into the textarea above.
Click Copy Source Code to copy everything.
Click Download index.html to save the file.
Open the downloaded file in your browser.
Upload it to GitHub Pages.

Download Ready

The Download button automatically creates an index.html file from the textarea content. No server is required. Everything works completely inside your browser.

FAQ

Frequently Asked Questions

Can I host this project for free?

Yes. GitHub Pages provides free hosting for HTML, CSS and JavaScript websites.

Do I need PHP or a database?

No. This project uses LocalStorage, so no backend or database is required.

Will it work on mobile phones?

Yes. The billing application is fully responsive and optimized for Android and iPhone.

Can I customize the menu items?

Yes. You can edit or add Tea, Coffee, Snacks, Bakery items and prices directly from the application.

Can I use my own QR Code?

Yes. Upload your PhonePe, Google Pay or Paytm QR code from the Settings page.

Conclusion

Congratulations! 🎉 You have now learned how to create a complete Tea Kadai Billing Software using ChatGPT and publish it online for FREE using GitHub Pages. If you enjoyed this tutorial, consider sharing it with your friends or bookmarking it for future reference. Click Here for Live Working

How i made ChaiPOS in just 10 minutes

Build & Publish a Tea Kadai Billing App Using ChatGPT + GitHub Pages

Build a Tea Kadai Billing Software using ChatGPT

Complete Beginner Tutorial - HTML + GitHub Pages

Step 1

Generate the HTML using ChatGPT

Open ChatGPT and ask it to build your billing software. The better your prompt, the better your application.

Recommended Prompt

Assume yourself a Mobile Friendly Full Stack Developer.

Create a complete Tea Kadai Billing Software using only ONE HTML file.

Requirements

• Mobile responsive
• Beautiful UI
• Tea/Coffee/Snacks Menu
• Images for items
• Shopping Cart
• Bill Printing
• QR Code Payment
• LocalStorage
• Sales History
• Dashboard
• Daily Reports
• Dark Mode
• Offline Support
• Thermal Receipt
• Add/Edit/Delete Items
• Inventory
• Search Bills

Everything must be inside one HTML file
using HTML + CSS + JavaScript only.

The output should be directly hostable on GitHub Pages.

Copy the generated code and save it as:

index.html

Step 2

Create the HTML File

Open Notepad or Visual Studio Code.
Create a new file.
Paste the generated HTML code.
Save the file as index.html.

Folder Structure

TeaKadaiBilling/

│
├── index.html
├── images/
│     tea.png
│     coffee.png
│     samosa.png
│
└── logo.png

Double-click index.html to verify it opens correctly in your browser.

Step 3

Publish to GitHub Pages

1. Create a GitHub Account

Visit:

https://github.com

2. Create a Repository

Click New Repository
Name it:

tea-kadai-pos

Select Public
Click Create Repository

3. Upload Files

Add File
Upload Files
Select index.html
Commit Changes

4. Enable GitHub Pages

Open Repository
Settings
Pages
Source → Deploy from Branch
Branch → main
Folder → / (root)
Save

5. Wait 1 Minute

Your website will be published as:

https://YOUR_USERNAME.github.io/tea-kadai-pos/

Tips

Why GitHub Pages?

✔ Completely Free
✔ HTTPS Enabled
✔ No Hosting Charges
✔ Works on Mobile
✔ Great for Demo Projects
✔ Easy to Update
✔ Supports HTML/CSS/JavaScript

Updating Your Website

Edit index.html.
Upload the updated file to GitHub.
Commit the changes.
GitHub Pages automatically republishes your website in a minute or two.

What's Next?

In the next tutorial you can learn how to add:

✅ QR Code Payments
✅ Local Storage Database
✅ Thermal Receipt Printing
✅ Inventory Management
✅ Daily Sales Reports
✅ PWA (Install as Android App)
✅ Barcode Scanner
✅ CSV Backup & Restore

Wednesday, 15 July 2026

index.html

Menu

Cart

Chai Corner

Made in Annamalai Nagar- Chai POS

Introduction

What You'll Build

📱 Mobile Friendly

🧾 Billing POS

💾 Local Storage

☁ GitHub Pages

Table of Contents

Generate the Billing Software using ChatGPT

Prompt

Generate the HTML Code

Recommended Folder Structure

Publish FREE using GitHub Pages

Step 1 — Create GitHub Account

Step 2 — Create Repository

Step 3 — Upload HTML File

Step 4 — Enable GitHub Pages

Your Website URL

Main Features

🧾 Billing

📊 Reports

💰 QR Payment

🖨 Print Receipt

📦 Inventory

🌙 Dark Mode

Next Step

Complete Source Code

How to Use the Source Code

Download Ready

Frequently Asked Questions

Can I host this project for free?

Do I need PHP or a database?

Will it work on mobile phones?

Can I customize the menu items?

Can I use my own QR Code?

Conclusion

How i made ChaiPOS in just 10 minutes

Generate the HTML using ChatGPT

Recommended Prompt

Create the HTML File

Folder Structure

Publish to GitHub Pages

1. Create a GitHub Account

2. Create a Repository

3. Upload Files

4. Enable GitHub Pages

5. Wait 1 Minute

Why GitHub Pages?

Updating Your Website

What's Next?

index.html

Happy open and Distance Learning!

Blog Archive