vibeSiteBuilder/esign.html at main · Mattjhagen/vibeSiteBuilder · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Signature & Disclosures - Packie Designs</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
</head>
<body>
    <div class="esign-container">
        <div class="esign-header">
            <h1><i class="fas fa-file-signature"></i> E-Signature & Disclosures</h1>
            <p>Please review and sign the following disclosures to complete your purchase</p>
        </div>

        <div class="esign-content">
            <!-- Service Agreement -->
            <div class="disclosure-section">
                <h2><i class="fas fa-handshake"></i> Service Agreement</h2>
                <div class="disclosure-text">
                    <p><strong>Service Description:</strong> Packie Designs will provide professional web design and development services as outlined in your selected package.</p>

                    <p><strong>Timeline:</strong> Project delivery timeline will be communicated within 48 hours of payment confirmation. Typical delivery times are:</p>
                    <ul>
                        <li>Basic Website: 2-3 weeks</li>
                        <li>Professional Website: 3-4 weeks</li>
                        <li>Premium Website: 4-6 weeks</li>
                    </ul>

                    <p><strong>Revisions:</strong> Your package includes the number of revisions specified in your selected plan. Additional revisions may incur extra charges.</p>

                    <p><strong>Support:</strong> Post-launch support is included as specified in your package. Support includes bug fixes and minor updates only.</p>
                </div>
            </div>

            <!-- Payment Terms -->
            <div class="disclosure-section">
                <h2><i class="fas fa-credit-card"></i> Payment Terms</h2>
                <div class="disclosure-text">
                    <p><strong>Payment:</strong> Full payment is required upfront before work begins. Payment is processed securely through Stripe.</p>

                    <p><strong>Refund Policy:</strong> Refunds are available within 7 days of payment if no work has commenced. Once development begins, refunds are prorated based on work completed.</p>

                    <p><strong>Additional Costs:</strong> Any additional features, revisions beyond the included amount, or third-party services (hosting, domains, etc.) will be billed separately.</p>
                </div>
            </div>

            <!-- Intellectual Property -->
            <div class="disclosure-section">
                <h2><i class="fas fa-copyright"></i> Intellectual Property</h2>
                <div class="disclosure-text">
                    <p><strong>Ownership:</strong> Upon full payment, you will own all custom code, designs, and content created specifically for your project.</p>

                    <p><strong>Third-Party Assets:</strong> Any third-party assets (fonts, images, plugins) remain subject to their respective licenses.</p>

                    <p><strong>Portfolio Rights:</strong> Packie Designs retains the right to showcase your completed project in our portfolio and marketing materials.</p>
                </div>
            </div>

            <!-- Privacy & Data -->
            <div class="disclosure-section">
                <h2><i class="fas fa-shield-alt"></i> Privacy & Data Protection</h2>
                <div class="disclosure-text">
                    <p><strong>Data Security:</strong> All client data and project information is handled with strict confidentiality and security measures.</p>

                    <p><strong>Information Sharing:</strong> We will not share your personal information or project details with third parties without your explicit consent.</p>

                    <p><strong>Data Retention:</strong> Project files and communications are retained for 2 years after project completion for support purposes.</p>
                </div>
            </div>

            <!-- E-Signature Section -->
            <div class="signature-section">
                <h2><i class="fas fa-signature"></i> Electronic Signature</h2>
                <p>By signing below, you acknowledge that you have read, understood, and agree to all terms and conditions outlined above.</p>

                <div class="signature-container">
                    <canvas id="signature-pad" width="600" height="200"></canvas>
                    <div class="signature-controls">
                        <button type="button" id="clear-signature" class="btn btn-outline">
                            <i class="fas fa-eraser"></i> Clear Signature
                        </button>
                    </div>
                </div>

                <div class="signature-info">
                    <div class="signature-details">
                        <div class="form-group">
                            <label for="signer-name">Full Name (as it appears on legal documents):</label>
                            <input type="text" id="signer-name" name="signer-name" required>
                        </div>
                        <div class="form-group">
                            <label for="signer-email">Email Address:</label>
                            <input type="email" id="signer-email" name="signer-email" required>
                        </div>
                        <div class="form-group">
                            <label for="signer-date">Date:</label>
                            <input type="date" id="signer-date" name="signer-date" required>
                        </div>
                    </div>
                </div>

                <div class="consent-checkbox">
                    <label class="checkbox-label">
                        <input type="checkbox" id="consent-checkbox" required>
                        <span class="checkmark"></span>
                        I agree to the terms and conditions and consent to electronic signature
                    </label>
                </div>

                <div class="esign-actions">
                    <button type="button" id="submit-esign" class="btn btn-primary" disabled>
                        <i class="fas fa-check"></i> Complete E-Signature
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Initialize signature pad
        const canvas = document.getElementById('signature-pad');
        const signaturePad = new SignaturePad(canvas, {
            backgroundColor: 'rgba(255, 255, 255, 0)',
            penColor: 'rgb(0, 0, 0)'
        });

        // Clear signature
        document.getElementById('clear-signature').addEventListener('click', function() {
            signaturePad.clear();
            updateSubmitButton();
        });

        // Update submit button state
        function updateSubmitButton() {
            const submitBtn = document.getElementById('submit-esign');
            const name = document.getElementById('signer-name').value.trim();
            const email = document.getElementById('signer-email').value.trim();
            const date = document.getElementById('signer-date').value;
            const consent = document.getElementById('consent-checkbox').checked;
            const hasSignature = !signaturePad.isEmpty();

            if (name && email && date && consent && hasSignature) {
                submitBtn.disabled = false;
            } else {
                submitBtn.disabled = true;
            }
        }

        // Add event listeners
        document.getElementById('signer-name').addEventListener('input', updateSubmitButton);
        document.getElementById('signer-email').addEventListener('input', updateSubmitButton);
        document.getElementById('signer-date').addEventListener('change', updateSubmitButton);
        document.getElementById('consent-checkbox').addEventListener('change', updateSubmitButton);
        signaturePad.addEventListener('endStroke', updateSubmitButton);

        // Set today's date
        document.getElementById('signer-date').value = new Date().toISOString().split('T')[0];

        // Submit e-signature
        document.getElementById('submit-esign').addEventListener('click', function() {
            const signatureData = signaturePad.toDataURL();
            const signerName = document.getElementById('signer-name').value;
            const signerEmail = document.getElementById('signer-email').value;
            const signerDate = document.getElementById('signer-date').value;

            // Show success message
            document.querySelector('.esign-content').innerHTML = `
                <div class="success-message">
                    <div class="success-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h2>E-Signature Complete!</h2>
                    <p>Thank you, ${signerName}. Your electronic signature has been recorded and your project will begin shortly.</p>
                    <div class="next-steps">
                        <h3>What's Next?</h3>
                        <ul>
                            <li><i class="fas fa-envelope"></i> You'll receive a confirmation email within 24 hours</li>
                            <li><i class="fas fa-calendar"></i> We'll schedule a project kickoff call within 48 hours</li>
                            <li><i class="fas fa-folder"></i> Project files and timeline will be shared via email</li>
                        </ul>
                    </div>
                    <div class="contact-info">
                        <p><strong>Questions?</strong> Contact us at <a href="mailto:hello@vibecodes.space">hello@vibecodes.space</a></p>
                    </div>
                </div>
            `;
        });

        // Responsive signature pad
        function resizeCanvas() {
            const ratio = Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = canvas.offsetHeight * ratio;
            canvas.getContext('2d').scale(ratio, ratio);
            signaturePad.clear();
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
    </script>
</body>
</html>