MAINHACK

Viewing / Editing File: quicksales-old.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick Sale Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

.container {
            max-width: 900px;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            overflow: hidden;
        }

.header {
            background-color: #007bff;
            color: #fff;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.header h2 {
            font-size: 1.5em;
            font-weight: 600;
            margin: 0;
        }

.switch-btn {
            background-color: #ffc107;
            color: #000;
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.switch-btn:hover {
            background-color: #e0a800;
        }

.form-body {
            padding: 20px;
        }

.row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }

.col {
            flex: 1;
            min-width: 300px;
        }

.input-group {
            display: flex;
            align-items: center;
            gap: 5px;
        }

.input-group label {
            background-color: #e9ecef;
            padding: 8px 15px;
            font-weight: 500;
            border-radius: 5px 0 0 5px;
            font-size: 0.9em;
        }

.input-group input,
        .input-group select {
            padding: 8px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            font-size: 0.9em;
            width: 100%;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
            transition: border-color 0.3s, box-shadow 0.3s;
        }

.input-group input:focus,
        .input-group select:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
            outline: none;
        }

.input-group input[readonly] {
            background-color: #fff;
            cursor: not-allowed;
        }

.table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            border-radius: 5px;
            overflow: hidden;
        }

.table thead {
            background-color: #007bff;
            color: #fff;
        }

.table th,
        .table td {
            padding: 10px;
            text-align: left;
            border: 1px solid #dee2e6;
            font-size: 0.9em;
        }

.table th {
            font-weight: 600;
        }

.table tbody tr {
            background-color: #fff;
        }

.table .delete-btn {
            background-color: #dc3545;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.table .delete-btn:hover {
            background-color: #c82333;
        }

.section-title {
            color: #1a73e8;
            font-size: 1.2em;
            font-weight: 600;
            margin-bottom: 15px;
        }

.btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

.btn {
            padding: 8px 15px;
            border: 1px solid #007bff;
            background-color: #fff;
            color: #007bff;
            font-weight: 500;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            font-size: 0.9em;
        }

.btn:hover {
            background-color: #007bff;
            color: #fff;
        }

.btn.primary {
            background-color: #007bff;
            color: #fff;
            border: none;
        }

.btn.primary:hover {
            background-color: #0056b3;
        }

.btn.secondary {
            background-color: #6c757d;
            color: #fff;
            border: none;
        }

.btn.secondary:hover {
            background-color: #5a6268;
        }

.discount-section .row {
            align-items: center;
        }

.billing-summary {
            background-color: #fff;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }

.billing-summary p {
            margin: 5px 0;
            font-size: 0.95em;
        }

.billing-summary p span {
            color: #1a73e8;
            font-weight: 500;
        }

.payable-amount {
            font-weight: 600;
            font-size: 1.1em;
        }

.btn-small {
            padding: 5px 10px;
            font-size: 0.85em;
        }

.text-right {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>Quick Sale</h2>
            <button class="switch-btn">Switch to old quick sale</button>
        </div>
        <div class="form-body">
            <form>
                
                <div class="row">
                    <div class="col">
                        <div class="input-group">
                            <label>Customer*</label>
                            <input type="text" value="+233" readonly>
                            <input type="text" placeholder="Search by mobile/name/customer id">
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group">
                            <label>Date</label>
                            <input type="text" value="10 Mar, 2025" readonly>
                        </div>
                    </div>
                </div>

<table class="table">
                    <thead>
                        <tr>
                            <th>Service*</th>
                            <th>Staff*</th>
                            <th>Qty.</th>
                            <th>Price (GHC)</th>
                            <th>Disc. (%)</th>
                            <th>Total (GHC)</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <select>
                                    <option selected>Hairstyles</option>
                                    <option value="merlin">Merlin</option>
                                </select>
                            </td>
                            <td><input type="text" value="Merlin" readonly></td>
                            <td><input type="number" value="1" min="1" readonly></td>
                            <td><input type="text" value="60.00" readonly></td>
                            <td><input type="number" value="0" min="0" max="100"></td>
                            <td><input type="text" value="61.80" readonly></td>
                            <td><button type="button" class="delete-btn">X</button></td>
                        </tr>
                    </tbody>
                </table>

<div class="row">
                    <div class="col">
                        <h5 class="section-title">Add Items</h5>
                        <div class="btn-group">
                            <button type="button" class="btn">Service</button>
                            <button type="button" class="btn">Product</button>
                            <button type="button" class="btn">Package</button>
                            <button type="button" class="btn">Gift Voucher</button>
                            <button type="button" class="btn">Ppdiaq</button>
                        </div>
                    </div>
                </div>

<div class="row discount-section">
                    <div class="col">
                        <h5 class="section-title">Discounts & Offers</h5>
                        <div class="row">
                            <div class="col">
                                <div class="input-group">
                                    <label>Disc. by Value</label>
                                    <input type="text" value="GHC 0" readonly>
                                </div>
                            </div>
                            <div class="col">
                                <div class="input-group">
                                    <label>Disc. by Percentage</label>
                                    <input type="text" value="0 %" readonly>
                                    <input type="text" placeholder="Eg: YKLVJEDAZ" style="max-width: 150px;">
                                </div>
                            </div>
                            <div class="col">
                                <button type="button" class="btn">Redeem Gift Voucher 👑</button>
                            </div>
                        </div>
                    </div>
                </div>

<div class="billing-summary">
                    <h5 class="section-title">Billing Summary</h5>
                    <div class="row">
                        <div class="col">
                            <p>Sub Total: <span>GHC 60.00</span></p>
                            <p>VAT: <span>GHC 1.80</span></p>
                            <p>Grand Total: <span>GHC 61.80</span></p>
                            <p>Change: <span>GHC 0.00</span></p>
                        </div>
                        <div class="col">
                            <p class="payable-amount">Payable Amount: <span>GHC 0</span></p>
                            <div class="input-group">
                                <label>Cash</label>
                                <input type="text" value="61.8" readonly>
                            </div>
                            <div class="input-group">
                                <label>Card</label>
                                <input type="text" value="0" readonly>
                            </div>
                            <button type="button" class="btn primary btn-small">Add Tip</button>
                        </div>
                    </div>
                </div>

<div class="row">
                    <div class="col text-right">
                        <button type="button" class="btn secondary">Reset</button>
                        <button type="submit" class="btn primary">Checkout</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: quicksales-old.php

Server Info

System Features

User Info