miracle-worker-forms/index.html at development · UnfilteredResults/miracle-worker-forms · 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
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Miracle Worker - Paperwork Portal</title>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-purple-500 to-indigo-600 min-h-screen py-8 px-4">
    <div class="max-w-7xl mx-auto">
        <!-- Main Card -->
        <div class="card bg-base-100 shadow-2xl">
            <div class="card-body p-6 md:p-12">
                <!-- Header -->
                <div class="text-center mb-8 pb-6 border-b-4 border-primary">
                    <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-3">Clemson Little Theatre</h1>
                    <h2 class="text-3xl md:text-4xl font-bold text-primary mb-2">The Miracle Worker</h2>
                    <p class="text-xl text-gray-600 mb-1">Digital Paperwork Portal</p>
                    <p class="text-sm text-gray-500">Complete and submit your required forms online</p>
                </div>

                <!-- Snow Cancellation Survey Alert -->
                <div class="alert alert-warning mb-8 shadow-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
                    <div class="flex-1">
                        <h3 class="font-bold text-lg">⚠️ URGENT: Makeup Show Availability Survey</h3>
                        <p class="text-sm">Due to the snow this weekend, we need to reschedule cancelled shows. <strong>All cast and crew must respond!</strong></p>
                    </div>
                    <a href="makeup_show_availability.html" target="_blank" class="btn btn-sm btn-error">Take Survey →</a>
                </div>

                <!-- Welcome Section -->
                <div class="alert alert-info mb-8">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    <div>
                        <h3 class="font-bold text-lg mb-2">Welcome, Cast & Crew!</h3>
                        <p class="mb-2">Thank you for being part of The Miracle Worker. To ensure everyone's safety and compliance with CLT policies, please complete all required paperwork below.</p>
                        <div class="mt-3">
                            <p class="font-semibold mb-2">How it works:</p>
                            <ul class="list-disc ml-6 space-y-1">
                                <li>Find your section below (Adults or Youth)</li>
                                <li>Click on each form card to open it</li>
                                <li>Fill out all required fields (marked with <span class="text-error font-bold">*</span>)</li>
                                <li>Sign using your mouse, trackpad, or finger (on touch devices)</li>
                                <li>Click Submit - forms are emailed automatically to Mike Shipley</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Adult and Youth Forms Side by Side -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                    <!-- Adults Section -->
                    <div class="border-2 border-accent rounded-lg p-6 bg-accent/5">
                        <div class="flex items-center justify-center mb-6">
                            <div class="badge badge-accent badge-lg text-lg py-4 px-6">Adults (18+)</div>
                        </div>

                        <div class="space-y-4">
                            <!-- Emergency Contact - Adults -->
                            <div class="card bg-base-200 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1 cursor-pointer" onclick="window.open('emergency_contact.html', '_blank')">
                                <div class="card-body p-4">
                                    <div class="badge badge-primary mb-2">Required</div>
                                    <h3 class="card-title text-sm text-primary">Emergency Contact Form</h3>
                                    <p class="text-xs">Emergency contact information for all participants.</p>
                                    <div class="card-actions justify-end mt-2">
                                        <a href="emergency_contact.html" target="_blank" class="btn btn-primary btn-xs" onclick="event.stopPropagation()">
                                            Fill Out Form →
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- Adult Agreement -->
                            <div class="card bg-base-200 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1 cursor-pointer" onclick="window.open('adult_cast_crew_agreement.html', '_blank')">
                                <div class="card-body p-4">
                                    <div class="badge badge-primary mb-2">Required</div>
                                    <h3 class="card-title text-sm text-primary">Adult Cast/Crew Agreement</h3>
                                    <p class="text-xs">Participation agreement and media release for adult cast and crew members.</p>
                                    <div class="card-actions justify-end mt-2">
                                        <a href="adult_cast_crew_agreement.html" target="_blank" class="btn btn-primary btn-xs" onclick="event.stopPropagation()">
                                            Fill Out Form →
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- Youth Protection Policy - Adults -->
                            <div class="card bg-base-200 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1 cursor-pointer" onclick="window.open('youth_protection_policy.html', '_blank')">
                                <div class="card-body p-4">
                                    <div class="badge badge-primary mb-2">Required</div>
                                    <h3 class="card-title text-sm text-primary">Youth Protection Policy & Background Check</h3>
                                    <p class="text-xs">Policy acknowledgment and background check authorization. Required for all adults.</p>
                                    <div class="card-actions justify-end mt-2">
                                        <a href="youth_protection_policy.html" target="_blank" class="btn btn-primary btn-xs" onclick="event.stopPropagation()">
                                            Fill Out Form →
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Youth Section -->
                    <div class="border-2 border-error rounded-lg p-6 bg-error/5">
                        <div class="flex items-center justify-center mb-6">
                            <div class="badge badge-error badge-lg text-lg py-4 px-6">Youth (Under 18)</div>
                        </div>

                        <div class="space-y-4">
                            <!-- Emergency Contact - Youth -->
                            <div class="card bg-base-200 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1 cursor-pointer" onclick="window.open('emergency_contact.html', '_blank')">
                                <div class="card-body p-4">
                                    <div class="badge badge-primary mb-2">Required</div>
                                    <h3 class="card-title text-sm text-primary">Emergency Contact Form</h3>
                                    <p class="text-xs">Emergency contact information for all participants.</p>
                                    <div class="card-actions justify-end mt-2">
                                        <a href="emergency_contact.html" target="_blank" class="btn btn-primary btn-xs" onclick="event.stopPropagation()">
                                            Fill Out Form →
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- Youth Agreement -->
                            <div class="card bg-base-200 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1 cursor-pointer" onclick="window.open('youth_cast_crew_agreement.html', '_blank')">
                                <div class="card-body p-4">
                                    <div class="badge badge-primary mb-2">Required</div>
                                    <h3 class="card-title text-sm text-primary">Youth Cast/Crew Agreement</h3>
                                    <p class="text-xs">Must be completed by parent/guardian. Includes participation agreement and media release.</p>
                                    <div class="card-actions justify-end mt-2">
                                        <a href="youth_cast_crew_agreement.html" target="_blank" class="btn btn-primary btn-xs" onclick="event.stopPropagation()">
                                            Fill Out Form →
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Info Section -->
                <div class="divider divider-primary text-xl font-bold">Important Information</div>

                <div class="alert alert-info mb-8">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    <div>
                        <h4 class="font-bold mb-2">Youth Protection Policy & Background Check</h4>
                        <p class="text-sm">All adults (18+) involved in the production must complete the Youth Protection Policy & Background Check form. This comprehensive form includes both the policy acknowledgment and background check authorization in one document. You can access it from the Adults section above or click below:</p>
                        <div class="mt-3">
                            <a href="youth_protection_policy.html" target="_blank" class="btn btn-primary btn-sm">
                                Fill Out Form
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Quick Reference Checklist -->
                <div class="divider"></div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div class="card bg-accent/10 border-2 border-accent">
                        <div class="card-body">
                            <h3 class="card-title text-accent">✓ Adults (18+) Checklist</h3>
                            <ul class="list-disc ml-6 space-y-1 text-sm">
                                <li>Emergency Contact Form</li>
                                <li>Adult Cast/Crew Agreement</li>
                                <li>Youth Protection Policy & Background Check</li>
                            </ul>
                            <p class="text-xs mt-2 italic">All three forms are required for all adults.</p>
                        </div>
                    </div>

                    <div class="card bg-error/10 border-2 border-error">
                        <div class="card-body">
                            <h3 class="card-title text-error">✓ Youth (Under 18) Checklist</h3>
                            <ul class="list-disc ml-6 space-y-1 text-sm">
                                <li>Emergency Contact Form</li>
                                <li>Youth Cast/Crew Agreement <span class="text-xs italic">(completed by parent/guardian)</span></li>
                            </ul>
                            <p class="text-xs mt-2 italic">Both forms are required for all youth participants.</p>
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="divider"></div>
                <div class="text-center text-gray-600">
                    <p class="mb-2"><strong>Questions?</strong> Contact Mike Shipley at <a href="mailto:mike.shipley@clemsonlittletheatre.com" class="link link-primary">mike.shipley@clemsonlittletheatre.com</a></p>
                    <p class="text-sm text-gray-500">Clemson Little Theatre - The Miracle Worker Production</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>