Awesome — here’s a **ready-to-paste master prompt** for Gemini Canvas that gives you:
2059161 verified | class DocWizard extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| max-width: 800px; | |
| margin: 2rem auto; | |
| padding: 1.5rem; | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| h2 { | |
| color: #4f46e5; | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1rem; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| color: #374151; | |
| } | |
| input, select, textarea { | |
| width: 100%; | |
| padding: 0.5rem; | |
| border: 1px solid #d1d5db; | |
| border-radius: 4px; | |
| font-size: 1rem; | |
| } | |
| .full-width { | |
| grid-column: 1 / -1; | |
| } | |
| button { | |
| background: #4f46e5; | |
| color: white; | |
| border: none; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| transition: background 0.2s; | |
| } | |
| button:hover { | |
| background: #4338ca; | |
| } | |
| .actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| } | |
| .error { | |
| color: #dc2626; | |
| margin-top: 0.25rem; | |
| font-size: 0.875rem; | |
| } | |
| </style> | |
| <h2>Document Generator Wizard</h2> | |
| <form id="docForm"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="agreement_date">Agreement Date</label> | |
| <input type="date" id="agreement_date" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="territory">Territory</label> | |
| <input type="text" id="territory" value="State of Qatar" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="vendor_name_en">Vendor Name (English)</label> | |
| <input type="text" id="vendor_name_en" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="vendor_name_ar">Vendor Name (Arabic)</label> | |
| <input type="text" id="vendor_name_ar" dir="rtl" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="vendor_cr">Vendor CR Number</label> | |
| <input type="text" id="vendor_cr" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="delivery_mode">Delivery Mode</label> | |
| <select id="delivery_mode" required> | |
| <option value="aldobi_delivery">Aldobi Delivery (30% commission)</option> | |
| <option value="vendor_delivery">Vendor Delivery (15% commission)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="commission_pct">Commission % (override)</label> | |
| <input type="number" id="commission_pct" min="0" max="100"> | |
| </div> | |
| <div class="form-group full-width"> | |
| <label for="vendor_address">Vendor Address</label> | |
| <textarea id="vendor_address" rows="2"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="start_date">Start Date</label> | |
| <input type="date" id="start_date" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="term_months">Contract Duration (months)</label> | |
| <input type="number" id="term_months" value="12" min="1" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="auto_renewal">Auto-Renewal</label> | |
| <select id="auto_renewal"> | |
| <option value="Yes">Yes</option> | |
| <option value="No" selected>No</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="payment_terms">Payment Terms</label> | |
| <input type="text" id="payment_terms" value="Net 15–30 days (preferred first week of month)"> | |
| </div> | |
| </div> | |
| <h3>Signatory Details</h3> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="aldobi_sign_name">Aldobi Signatory Name</label> | |
| <input type="text" id="aldobi_sign_name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="aldobi_sign_title">Aldobi Signatory Title</label> | |
| <input type="text" id="aldobi_sign_title" placeholder="e.g., Chairman"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="vendor_sign_name">Vendor Signatory Name</label> | |
| <input type="text" id="vendor_sign_name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="vendor_sign_title">Vendor Signatory Title</label> | |
| <input type="text" id="vendor_sign_title"> | |
| </div> | |
| </div> | |
| <div class="actions"> | |
| <button type="button" id="generateBtn">Generate Document</button> | |
| <button type="reset">Reset Form</button> | |
| </div> | |
| </form> | |
| `; | |
| this.shadowRoot.getElementById('generateBtn').addEventListener('click', this.handleGenerate.bind(this)); | |
| } | |
| handleGenerate() { | |
| const form = this.shadowRoot.getElementById('docForm'); | |
| if (!form.checkValidity()) { | |
| form.reportValidity(); | |
| return; | |
| } | |
| const formData = { | |
| agreement_date: this.shadowRoot.getElementById('agreement_date').value, | |
| territory: this.shadowRoot.getElementById('territory').value, | |
| vendor_name_en: this.shadowRoot.getElementById('vendor_name_en').value, | |
| vendor_name_ar: this.shadowRoot.getElementById('vendor_name_ar').value, | |
| vendor_cr: this.shadowRoot.getElementById('vendor_cr').value, | |
| vendor_address: this.shadowRoot.getElementById('vendor_address').value, | |
| delivery_mode: this.shadowRoot.getElementById('delivery_mode').value, | |
| commission_pct: this.shadowRoot.getElementById('commission_pct').value, | |
| payment_terms: this.shadowRoot.getElementById('payment_terms').value, | |
| start_date: this.shadowRoot.getElementById('start_date').value, | |
| term_months: this.shadowRoot.getElementById('term_months').value, | |
| auto_renewal: this.shadowRoot.getElementById('auto_renewal').value, | |
| aldobi_sign_name: this.shadowRoot.getElementById('aldobi_sign_name').value, | |
| aldobi_sign_title: this.shadowRoot.getElementById('aldobi_sign_title').value, | |
| vendor_sign_name: this.shadowRoot.getElementById('vendor_sign_name').value, | |
| vendor_sign_title: this.shadowRoot.getElementById('vendor_sign_title').value, | |
| enable_social_media: 'true', | |
| enable_data_minimization: 'true', | |
| enable_delay_policy: 'true', | |
| enable_dispute_policy: 'true' | |
| }; | |
| // Apply business rules for default values | |
| if (!formData.commission_pct) { | |
| formData.commission_pct = formData.delivery_mode === 'aldobi_delivery' ? '30' : '15'; | |
| } | |
| // Dispatch custom event with form data | |
| this.dispatchEvent(new CustomEvent('generate-document', { | |
| bubbles: true, | |
| composed: true, | |
| detail: formData | |
| })); | |
| } | |
| } | |
| customElements.define('doc-wizard', DocWizard); |