Threshawk/tinycheck-pediatric-forms

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>TinyCheck Pediatric Forms</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10    <script src="https://unpkg.com/feather-icons"></script>11    <script>12      tailwind.config = {13        theme: {14          extend: {15            colors: {16              primary: '#3b82f6',17              secondary: '#10b981'18            }19          }20        }21      }22    </script>23</head>24<body class="bg-gray-50 min-h-screen">25    <custom-header></custom-header>26    27    <main class="container mx-auto px-4 py-8">28        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 md:p-8">29            <div class="text-center mb-8">30                <h1 class="text-3xl font-bold text-primary">Sunshine Pediatrics Health Form</h1>31<p class="text-gray-600 mt-2">Please fill out this form for your child's medical records</p>32            </div>33            34            <form id="pediatricForm" class="space-y-6">35                <!-- Parent Information Section -->36                <div class="bg-pink-50 p-4 rounded-lg mb-6">37                    <h2 class="text-xl font-semibold text-primary mb-4 flex items-center">38                        <i data-feather="users" class="mr-2"></i> Parent/Guardian Information39                    </h2>40                    41                    <div class="grid md:grid-cols-2 gap-6">42                        <div>43                            <label for="parentName" class="block text-sm font-medium text-gray-700 mb-1">Full Name*</label>44                            <input type="text" id="parentName" name="parentName" required 45                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">46                        </div>47                        48                        <div>49                            <label for="parentDob" class="block text-sm font-medium text-gray-700 mb-1">Date of Birth*</label>50                            <input type="date" id="parentDob" name="parentDob" required 51                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">52                        </div>53 54                        <div>55                            <label for="parentAge" class="block text-sm font-medium text-gray-700 mb-1">Age*</label>56                            <input type="number" id="parentAge" name="parentAge" required 57                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">58                        </div>59 60                        <div>61                            <label for="insuranceType" class="block text-sm font-medium text-gray-700 mb-1">Insurance Type*</label>62                            <select id="insuranceType" name="insuranceType" required63                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">64                                <option value="">Select Insurance</option>65                                <option value="private">Private</option>66                                <option value="medicare">Medicare</option>67                                <option value="medicaid">Medicaid</option>68                                <option value="none">None</option>69                            </select>70                        </div>71                    </div>72                </div>73<!-- Personal Information Section -->74                <div class="bg-blue-50 p-4 rounded-lg">75                    <div class="flex items-center justify-between mb-4">76                        <h2 class="text-xl font-semibold text-primary flex items-center">77                            <i data-feather="user" class="mr-2"></i> Child's Information78                        </h2>79                        <div class="flex items-center space-x-2">80                            <label for="gender" class="text-sm font-medium text-gray-700">Gender:</label>81                            <select id="gender" name="gender" class="px-2 py-1 border border-gray-300 rounded-md">82                                <option value="male">Male</option>83                                <option value="female">Female</option>84                                <option value="other">Other</option>85                            </select>86                        </div>87                    </div>88<div class="grid md:grid-cols-2 gap-6">89                        <div>90                            <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First Name*</label>91                            <input type="text" id="firstName" name="firstName" required 92                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">93                        </div>94                        95                        <div>96                            <label for="middleInitial" class="block text-sm font-medium text-gray-700 mb-1">Middle Initial</label>97                            <input type="text" id="middleInitial" name="middleInitial" maxlength="1"98                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">99                        </div>100                        101                        <div>102                            <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name*</label>103                            <input type="text" id="lastName" name="lastName" required 104                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">105                        </div>106<div>107                            <label for="dob" class="block text-sm font-medium text-gray-700 mb-1">Date of Birth*</label>108                            <input type="date" id="dob" name="dob" required 109                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">110                        </div>111                    </div>112                </div>113                114                <!-- Medical Information Section -->115                <div class="bg-green-50 p-4 rounded-lg">116                    <h2 class="text-xl font-semibold text-primary mb-4 flex items-center">117                        <i data-feather="heart" class="mr-2"></i> Medical Information118                    </h2>119                    120                    <div class="space-y-4">121                        <div>122                            <label class="block text-sm font-medium text-gray-700 mb-2">Does your child have any allergies?*</label>123                            <div class="flex items-center space-x-4">124                                <label class="inline-flex items-center">125                                    <input type="radio" name="allergies" value="yes" class="form-radio text-primary focus:ring-primary" required>126                                    <span class="ml-2">Yes</span>127                                </label>128                                <label class="inline-flex items-center">129                                    <input type="radio" name="allergies" value="no" class="form-radio text-primary focus:ring-primary">130                                    <span class="ml-2">No</span>131                                </label>132                            </div>133                            <div id="allergyDetailsContainer" class="mt-2 hidden space-y-2">134                                <label class="block text-sm font-medium text-gray-700 mb-1">Please list allergies (add one per line):</label>135                                <div id="allergyList" class="space-y-2"></div>136                                <button type="button" onclick="addAllergyField()" class="text-sm text-primary hover:text-blue-700 flex items-center">137                                    <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add Allergy138                                </button>139                            </div>140</div>141                        142                        <div>143                            <label class="block text-sm font-medium text-gray-700 mb-2">Is your child currently taking any medication?*</label>144                            <div class="flex items-center space-x-4">145                                <label class="inline-flex items-center">146                                    <input type="radio" name="medication" value="yes" class="form-radio text-primary focus:ring-primary" required>147                                    <span class="ml-2">Yes</span>148                                </label>149                                <label class="inline-flex items-center">150                                    <input type="radio" name="medication" value="no" class="form-radio text-primary focus:ring-primary">151                                    <span class="ml-2">No</span>152                                </label>153                            </div>154                            <div id="medicationDetailsContainer" class="mt-2 hidden space-y-2">155                                <label class="block text-sm font-medium text-gray-700 mb-1">Please list medications (add one per line):</label>156                                <div id="medicationList" class="space-y-2"></div>157                                <button type="button" onclick="addMedicationField()" class="text-sm text-primary hover:text-blue-700 flex items-center">158                                    <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add Medication159                                </button>160                            </div>161</div>162                    </div>163                </div>164                165                <!-- Visit History Section -->166                <div class="bg-blue-50 p-4 rounded-lg">167                    <h2 class="text-xl font-semibold text-primary mb-4 flex items-center">168                        <i data-feather="calendar" class="mr-2"></i> Visit History169                    </h2>170                    171                    <div class="grid md:grid-cols-2 gap-6">172                        <div>173                            <label for="lastVisit" class="block text-sm font-medium text-gray-700 mb-1">When was your child's last visit to our office?</label>174                            <input type="date" id="lastVisit" name="lastVisit"175                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">176                        </div>177                        178                        <div>179                            <label for="lastVaccination" class="block text-sm font-medium text-gray-700 mb-1">When was your child's last vaccination?</label>180                            <input type="date" id="lastVaccination" name="lastVaccination"181                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">182                        </div>183                    </div>184                </div>185                186                <!-- Submit Button -->187                <div class="pt-4">188                    <button type="submit" class="w-full bg-primary hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-md transition flex items-center justify-center">189                        <i data-feather="send" class="mr-2"></i> Submit Form190                    </button>191                </div>192            </form>193        </div>194    </main>195    196    <custom-footer></custom-footer>197    198    <script src="components/header.js"></script>199    <script src="components/footer.js"></script>200    <script src="script.js"></script>201    <script>feather.replace();</script>202<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>203</body>204</html>