Gifari Industries - BD Cyber Security Team
Home
/
home
/
u861052488
/
domains
/
invoice.techalphonic.com
/
public_html
/
✏️
Editing: index.html
<!DOCTYPE html> <html lang="zxx" dir="ltr"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Digital Invoica</title> <link href="assets/images/favicon/icon.png" rel="icon" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="assets/css/custom.css" /> <link rel="stylesheet" href="assets/css/media-query.css" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet" /> </head> <body> <section id="download_section" style="height: 1894.5px; position: relative;"> <section> <header style="color: white; background-color: #00264d; padding: 11px 0;"> <div class="container"> <div style="display: flex; justify-content: space-between; align-items: center;"> <div style="display: flex; justify-content: space-between; align-items: center;"> <img src="assets/images/logo/tech-new-logo2.png" alt="Company Logo" style="margin-right: 12px;" height="45" width="45"> <div> <h1 style="margin: 0; font-size: 28px; font-weight: 600; font-style: italic; font-family: 'Arial', sans-serif;"> Alphonic India Pvt. Ltd. </h1> <p style="margin: 0; font-size: 14px; font-style: italic;">Your Trusted IT Partner</p> </div> </div> <div> <h1 style="margin: 0; font-size: 35px; font-weight: 600; font-style: italic; font-family: 'Arial', sans-serif;"> INVOICE </h1> </div> </div> </div> </header> <!--Invoice wrap start here --> <div class="invoice_wrap agency1"> <div class="invoice-container"> <div class="invoice-content-wrap"> <!--Header start Here --> <section class="invoice-header" id="invo_header"> <div class="container"> <div class="agency-logo"> <input type="file" name="image" id="fileChooser" class="dropify dropify-event" data-default-file="" data-height="100" /> </div> <div class="invoice-agency-details"> <div class="invo-head-wrap"> <div class="dropdown"> <select class="form-control select2"> <option>Invoice</option> <option>Invoice Tax</option> <option>Commercial</option> <option>Proforma Invoice</option> <option>Bill</option> <option>Receipt</option> <option>Purchase Order</option> <option>Quote</option> <option>Estimate</option> </select> </div> <div class="font-md-grey color-grey wid-20"> <input type="text" class="form-control"> </div> </div> <div class="invo-head-wrap invoi-date-wrap invoi-date-wrap-agency"> <div class="color-light-black font-md wid-40"> Issue Date: </div> <div class="font-md-grey color-grey wid-20"> <input type="text" id="datePicker" class="form-control"> </div> </div> <div class="invo-head-wrap invoi-date-wrap invoi-date-wrap-agency mt-2"> <div class="color-light-black font-md wid-40"> Due Date: </div> <div class="font-md-grey color-grey wid-20"> <input type="text" id="datePicker" class="form-control"> </div> </div> </div> </div> </section> <!--Header end Here --> <!--Invoice content start here --> <section class="agency-service-content" id="agency_service"> <div class="container"> <!--Invoice owner name content start --> <div class="invoice-owner-conte-wrap pt-40"> <div class="invo-to-wrap"> <div class="invoice-to-content"> <div class="font-md color-light-black pop_up_form"> <h5 style="font-size: 18px;">To :</h5> <div class="sender d-flex"> <div class="sender-img"> <i class="bi bi-building"></i> </div> <div class="sender-details"> <h5>Receiver Name</h5> <h6>receiver Contact Details</h6> </div> </div> </div> </div> </div> <div class="popup_form_container" style="display: none;"> <div class="popup_form_content p-4 rounded bg-white"> <span class="close_popup">×</span> <h4 class="mb-4">Invoice To Details</h4> <form id="senderForm"> <div class="col-md-12 mb-3"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name">Company Name</label> <input type="text" class="form-control" id="senderName" placeholder="Enter your name"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="senderEmail" placeholder="Enter your email"> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="GST">GST NO:</label> <input type="text" class="form-control" id="senderGST" placeholder="Enter your GST NO"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="fullname">Full Name</label> <input type="text" class="form-control" id="senderFullname" placeholder="Enter your full name"> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="Address">Address</label> <input type="text" class="form-control" id="senderAddress" placeholder="Enter your Address"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" class="form-control" id="senderPhone" placeholder="Enter your phone number"> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="Country">Country</label> <input type="text" class="form-control" id="senderCountry" placeholder="Enter your Country"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="Pincode">Pincode</label> <input type="text" class="form-control" id="senderPincode" placeholder="Enter your Pincode"> </div> </div> </div> </div> <button type="submit" class="btn btn-primary btn-block">Submit</button> </form> </div> </div> <div class="invo-pay-to-wrap"> <div class="invoice-pay-content"> <div class="font-md color-light-black pop_up_form-2"> <h5 style="font-size: 18px;">From :</h5> <div class="receiver d-flex"> <div class="receiver-img"> <i class="bi bi-person-circle"></i> </div> <div class="receiver-details"> <h5>Sender Name</h5> <h6>Sender Contact Details</h6> </div> </div> </div> </div> </div> <div class="popup_form_container-2" style="display: none;"> <div class="popup_form_content p-4 rounded bg-white"> <span class="close_popup">×</span> <h4 class="mb-4">Pay To Details</h4> <form id="receiverForm"> <div class="col-md-12 mb-3"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name">Company Name</label> <input type="text" class="form-control" id="receiverName" placeholder="Enter your name"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="receiverEmail" placeholder="Enter your email"> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="GST">GST NO:</label> <input type="text" class="form-control" id="receiverGST" placeholder="Enter your GST NO"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="fullname">Bank Name</label> <input type="text" class="form-control" id="receiverBankname" placeholder="Enter your Bank Name"> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="Address">Bank Account Number</label> <input type="text" class="form-control" id="receiverAC" placeholder="Enter your Bank Account Number"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="phone">Bank IFSC Code</label> <input type="tel" class="form-control" id="receiverIFSC" placeholder="Enter your Bank IFSC Code"> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="Address">Address</label> <input type="text" class="form-control" id="receiverAddress" placeholder="Enter your Address"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" class="form-control" id="receiverPhone" placeholder="Enter your phone number"> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="Country">Country</label> <input type="text" class="form-control" id="receiverCountry" placeholder="Enter your Country"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="Pincode">Pincode</label> <input type="text" class="form-control" id="receiverPincode" placeholder="Enter your Pincode"> </div> </div> </div> </div> <button type="submit" class="btn btn-primary btn-block" id="submit">Submit</button> </form> </div> </div> </div> <!--Invoice owner name content End --> <!--Invoice table data start here --> <div class="table-wrapper agency-service-table pt-32"> <!-- Invoice Table --> <div class="card mt-4"> <div class="card-body"> <h5>Invoice Details</h5> <table class="upper-table table" id="invoice-table" border="1"> <thead> <tr class="head" style="color:white;border-radius: 8px 8px 0px 0px; overflow: hidden;"> <th>Name</th> <th>Quantity</th> <th>Unit Price</th> <th>Tax</th> <th>Subtotal</th> <th class="btn-container"> <button class="edit-btn" id="edit-btn">Edit</button> </th> </tr> </thead> <tbody> <!-- Saved items will be displayed here --> </tbody> </table> <table class="table table-bordered"> <tbody id="invoice-body"> <!-- Dynamically added rows will appear here --> </tbody> </table> <button id="addRowButton" class="add-row btn btn-outline-primary" onclick="addRow()">+ Add new invoice item</button> <p id="error-message" class="text-danger mt-2" style="display: none;">Please fill in all fields before adding a new item.</p> </div> </div> </div> <!--Invoice additional info start here --> <div class="invo-addition-wrap pt-20"> <div class="invo-add-info-content"> <h3 class="font-md color-light-black" contenteditable="true"> Additional Information: </h3> <p class="font-sm pt-10" contenteditable="true"> Click! Here For Fill Additional Information. </p> <button id="save-content" class="save-btn" style="display: none;">Save</button> <!-- Payment Status Box --> <div class="payment-status-box" id="payment-status-box"> Click to Select Payment Status </div> <!-- Stamp Display --> <div id="stamp-display"></div> <!-- Modal --> <div class="modal" id="payment-modal"> <div class="modal-content "> <h3>Select Payment Status</h3> <!-- Stamp Options --> <div class="payment-status-img"> <img src="./assets/images/stamp/pngwing.com.png" alt="Paid" class="stamp-option" id="stamp-paid" width="100"> <img src="./assets/images/stamp/vecteezy_unpaid-rubber-stamp-red-unpaid-rubber-grunge-stamp-seal_22355835.jpg" alt="Unpaid" class="stamp-option" id="stamp-unpaid" width="100"> <img src="./assets/images/stamp/BLOGGRAPHIC-AI-13.png" alt="Due" class="stamp-option" id="stamp-due" width="100"> </div> <button class="close-btn" id="close-modal">Close</button> </div> </div> </div> <div class="invo-bill-total width-30"> <div class="invoice-summary" style=" padding: 10px; color: white; background-color: rgb(0 38 77); margin-bottom: 13px;"> <h5 class="text-center">Invoice Summary</h5> <div class="currency" style="display: flex; justify-content: center; align-items: center;"> <select class="select2" id="currencySelect"> <option value="₹">INR (₹)</option> <option value="$">USD ($)</option> <option value="د.ك">KWD (د.ك)</option> <option value="ب.د">BHD (ب.د)</option> <option value="ر.ع.">OMR (ر.ع.)</option> <option value="د.أ">JOD (د.أ)</option> <option value="£">GIP (£)</option> <option value="£">GBP (£)</option> <option value="$">KYD ($)</option> <option value="CHF">CHF (CHF)</option> <option value="€">EUR (€)</option> </select> </div> </div> <!-- Display Totals --> <table class="invo-total-table"> <tbody> <tr> <td class="font-md color-light-black" id="subamount">Sub Total:</td> <td class="font-md-grey color-grey text-right pr-10" id="subTotal">₹ 0.00 </td> </tr> <tr class="tax-row"> <td class="font-md color-light-black" id="tax"><span class="final-tax color-light-black"></span></td> <td class="font-md-grey color-grey text-right pr-10" id="taxAmount"> </td> </tr> <tr class="invo-grand-total bg-info" style="background-color: #00264d !important; color: white;"> <td class="font-18-700 padding" id="grand-total">Grand Total:</td> <td class="font-18-500 text-right pr-10" id="grandTotal">₹ 0.00</td> </tr> </tbody> </table> <div class="payment-section"> <h3>Pay using QR Code</h3> <div class="qr-code"> <!-- Replace src with dynamically generated QR code --> <img src="assets/images/qr-code/Untitled.png" alt="Payment QR Code" style="width: 200px; height: 200px;"> </div> <p>Merchant Name: <strong>Alphonic India Private Limited</strong></p> <p>UPI ID: <strong>alphonic9.09@idfcbank</strong></p> <p>Scan with any UPI app to make the payment.</p> </div> </div> </div> </div> <!--Invoice additional info end here --> </div> </section> <footer style="background-color: #00264d; padding: 10px; position: absolute; bottom: 0; width: 100%;"> <div class="container"> <div style="display: flex; gap: 20px;"> <div style=" display: flex; align-items: center;"> <span style="font-size: 16px; color: white; margin-right: 5px;"><i class="bi bi-geo-alt-fill"></i></span> <span> <p style="font-size:14px; margin: 0; color: white;">C-203 (Sector-63), Noida, G.B Nagar, U.P (201301)</p> </span> </div> <div style="display: flex; align-items: center; text-align: center; margin-left: 10px;"> <span style="font-size: 12px; color: white; margin-right: 5px;"><i class="bi bi-envelope-at-fill"></i></span> <span> <p style="font-size:14px; margin: 0; color: white;">info@techalphonic.com</p> </span> </div> <div style="display: flex; align-items: center; text-align: center; margin-left: 10px;"> <span style="font-size: 12px; color: white; margin-right: 5px;"><i class="bi bi-receipt"></i></span> <span> <p style="font-size:14px; margin: 0; color: white;">09AATCA3970F1ZA</p> </span> </div> <div style="display: flex; align-items: center; text-align: center; margin-left: 10px;"> <span style="font-size: 12px; color: white; margin-right: 5px;"><i class="bi bi-telephone-fill"></i></span> <span> <p style="font-size: 14px; margin: 0; color: white;">+91 9899184918</p> </span> </div> <div style="display: flex; align-items: center; text-align: center; margin-left: 10px;"> <span style="font-size: 12px; color: white; margin-right: 5px;"><i class="bi bi-globe"></i></span> <span> <p style="font-size:14px; margin: 0; color: white;">www.techalphonic.com</p> </span> </div> </div> </div> </footer> </section> <!--Invoice content end here --> </div> <!--Bottom content start here --> <section class="agency-bottom-content d-print-none" id="agency_bottom"> <!--Print-download content start here --> <div class="invo-buttons-wrap"> <div class="invo-down-btn invo-btns"> <a class="download-btn" id="generatePDF"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_5_246)"> <path d="M4 17V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H18C18.5304 21 19.0391 20.7893 19.4142 20.4142C19.7893 20.0391 20 19.5304 20 19V17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M7 11L12 16L17 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 4V16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </g> <defs> <clippath id="clip0_5_246"> <rect width="24" height="24" fill="white" /> </clippath> </defs> </svg> <span class="inter-700 medium-font">Download</span> </a> </div> </div> <!--Print-download content end here --> <!--Note content start --> <div class="invo-note-wrap"> <div class="note-title"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_8_240)"> <path d="M14 3V7C14 7.26522 14.1054 7.51957 14.2929 7.70711C14.4804 7.89464 14.7348 8 15 8H19" stroke="#12151C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M17 21H7C6.46957 21 5.96086 20.7893 5.58579 20.4142C5.21071 20.0391 5 19.5304 5 19V5C5 4.46957 5.21071 3.96086 5.58579 3.58579C5.96086 3.21071 6.46957 3 7 3H14L19 8V19C19 19.5304 18.7893 20.0391 18.4142 20.4142C18.0391 20.7893 17.5304 21 17 21Z" stroke="#12151C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 7H10" stroke="#12151C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 13H15" stroke="#12151C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M13 17H15" stroke="#12151C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </g> <defs> <clippath id="clip0_8_240"> <rect width="24" height="24" fill="white" /> </clippath> </defs> </svg> <span class="font-md color-light-black">Note:</span> </div> <h3 class="font-md-grey color-grey note-desc"> This is computer generated receipt and does not require physical signature. </h3> </div> <!--Note content end --> </section> <!--Bottom content end here --> </div> </div> <!--Invoice wrap End here --> <script src="assets/js/new.js"></script> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jspdf.min.js"></script> <script src="assets/js/html2canvas.min.js"></script> <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> --> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script> <script src="assets/js/custom.js"></script> <!--https://we.tl/t-4ZlzwxT8yy--> </body> </html>
💾 Save
❌ Cancel