|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Private California Domestic Partnership</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
.floating-form { |
|
position: fixed; |
|
bottom: 20px; |
|
right: 20px; |
|
z-index: 1000; |
|
transition: all 0.3s ease; |
|
} |
|
.floating-buttons { |
|
position: fixed; |
|
bottom: 20px; |
|
right: 20px; |
|
z-index: 1000; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 12px; |
|
} |
|
.form-container { |
|
display: none; |
|
position: fixed; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
width: 90%; |
|
max-width: 800px; |
|
max-height: 90vh; |
|
overflow-y: auto; |
|
z-index: 1001; |
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
} |
|
.appointment-container { |
|
display: none; |
|
position: fixed; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
width: 90%; |
|
max-width: 500px; |
|
max-height: 90vh; |
|
overflow-y: auto; |
|
z-index: 1001; |
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
} |
|
.overlay { |
|
display: none; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: rgba(0, 0, 0, 0.5); |
|
z-index: 1000; |
|
} |
|
.form-section { |
|
margin-bottom: 1.5rem; |
|
padding-bottom: 1rem; |
|
border-bottom: 1px solid #e2e8f0; |
|
} |
|
.form-title { |
|
font-size: 1.25rem; |
|
font-weight: bold; |
|
margin-bottom: 1rem; |
|
color: #2c5282; |
|
} |
|
.required-field::after { |
|
content: " *"; |
|
color: #e53e3e; |
|
} |
|
@media print { |
|
.no-print { |
|
display: none !important; |
|
} |
|
body { |
|
background: white !important; |
|
color: black !important; |
|
} |
|
.form-container { |
|
position: static; |
|
transform: none; |
|
width: 100%; |
|
max-width: 100%; |
|
max-height: none; |
|
box-shadow: none; |
|
} |
|
} |
|
.floating-button { |
|
transition: all 0.3s ease; |
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
} |
|
.floating-button:hover { |
|
transform: translateY(-3px); |
|
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); |
|
} |
|
.floating-button:active { |
|
transform: translateY(1px); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
<header class="bg-blue-900 text-white py-6"> |
|
<div class="container mx-auto px-4"> |
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
<div class="mb-4 md:mb-0"> |
|
<h1 class="text-3xl font-bold">Private California Domestic Household</h1> |
|
<p class="text-blue-200">Under California Family Code Section 297.1</p> |
|
</div> |
|
<img src="" alt="Logo" class="h-20"> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
<div class="bg-white rounded-lg shadow-md p-6 mb-8"> |
|
<h2 class="text-2xl font-bold text-blue-800 mb-4">About Domestic Partnerships</h2> |
|
<p class="mb-4">Domestic partnerships in California are available to opposite-sex couples, as established under California Family Code Section 297.1.</p> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
<h3 class="text-lg font-semibold text-blue-700 mb-2">Eligibility Requirements</h3> |
|
<ul class="list-disc pl-5 space-y-1"> |
|
<li>Both partners must be at least 18 years old</li> |
|
<li>Not married or in another domestic partnership</li> |
|
<li>Not closely related by blood</li> |
|
<li>Share a common residence</li> |
|
<li>Mutually responsible for each other's welfare</li> |
|
</ul> |
|
</div> |
|
<div class="bg-green-50 p-4 rounded-lg"> |
|
<h3 class="text-lg font-semibold text-green-700 mb-2">Benefits</h3> |
|
<ul class="list-disc pl-5 space-y-1"> |
|
<li>Health insurance coverage</li> |
|
<li>Hospital visitation rights</li> |
|
<li>Tax benefits</li> |
|
<li>Inheritance rights</li> |
|
<li>Parental rights and responsibilities</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<h3 class="text-xl font-semibold text-blue-800 mb-3">How to Register</h3> |
|
<ol class="list-decimal pl-5 space-y-2 mb-6"> |
|
<li>Complete the Declaration of Confidential Domestic Partnership form (DP-1A)</li> |
|
<li>Both partners must sign the form in front of a notary public</li> |
|
<li>Submit the form with the required fee to the Secretary of State</li> |
|
<li>Receive your Certificate of Domestic Partnership</li> |
|
</ol> |
|
|
|
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"> |
|
<div class="flex"> |
|
<div class="flex-shrink-0"> |
|
<i class="fas fa-exclamation-circle text-yellow-500 mt-1"></i> |
|
</div> |
|
<div class="ml-3"> |
|
<h3 class="text-sm font-medium text-yellow-800">Important Notice</h3> |
|
<div class="mt-2 text-sm text-yellow-700"> |
|
<p>Domestic partnerships are legally binding. Termination requires filing a Notice of Termination of Domestic Partnership (Form DP-3) with the Secretary of State or through the court system.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
<h2 class="text-2xl font-bold text-blue-800 mb-4">Frequently Asked Questions</h2> |
|
|
|
<div class="space-y-4"> |
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
<button class="faq-question w-full px-4 py-3 text-left font-medium text-blue-700 bg-gray-50 hover:bg-gray-100 focus:outline-none"> |
|
<span class="flex items-center justify-between"> |
|
<span>What is the difference between marriage and domestic partnership?</span> |
|
<i class="fas fa-chevron-down transition-transform duration-200"></i> |
|
</span> |
|
</button> |
|
<div class="faq-answer px-4 py-3 bg-white hidden"> |
|
<p class="text-gray-700">While both provide legal recognition of a relationship, domestic partnerships Today, remain an option for couples who prefer not to marry or for opposite-sex couples where at least one partner is 62 or older.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
<button class="faq-question w-full px-4 py-3 text-left font-medium text-blue-700 bg-gray-50 hover:bg-gray-100 focus:outline-none"> |
|
<span class="flex items-center justify-between"> |
|
<span>How much does it cost to register a domestic partnership?</span> |
|
<i class="fas fa-chevron-down transition-transform duration-200"></i> |
|
</span> |
|
</button> |
|
<div class="faq-answer px-4 py-3 bg-white hidden"> |
|
<p class="text-gray-700">The current filing fee is $33. Additional certified copies of the Certificate of Domestic Partnership are $13 each.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
<button class="faq-question w-full px-4 py-3 text-left font-medium text-blue-700 bg-gray-50 hover:bg-gray-100 focus:outline-none"> |
|
<span class="flex items-center justify-between"> |
|
<span>How long does it take to process the registration?</span> |
|
<i class="fas fa-chevron-down transition-transform duration-200"></i> |
|
</span> |
|
</button> |
|
<div class="faq-answer px-4 py-3 bg-white hidden"> |
|
<p class="text-gray-700">Processing typically takes 6-8 weeks from the date the Secretary of State receives your completed form and payment. Expedited processing is not available.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
|
|
|
|
<div class="floating-buttons no-print"> |
|
<button id="appointmentButton" class="floating-button bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-full shadow-lg flex items-center"> |
|
<i class="fas fa-calendar-check mr-2"></i> |
|
<span class="hidden sm:inline">Schedule Signing</span> |
|
</button> |
|
<button id="formButton" class="floating-button bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-full shadow-lg flex items-center"> |
|
<i class="fas fa-file-alt mr-2"></i> |
|
<span class="hidden sm:inline">Start DP-1A Form</span> |
|
</button> |
|
</div> |
|
|
|
|
|
<div id="overlay" class="overlay"></div> |
|
|
|
|
|
<div id="formContainer" class="form-container bg-white rounded-lg no-print"> |
|
<div class="p-6"> |
|
<div class="flex justify-between items-center mb-6"> |
|
<h2 class="text-2xl font-bold text-blue-800">Confidential Declaration of Domestic Partnership</h2> |
|
<button id="closeForm" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times text-2xl"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="bg-blue-50 p-4 rounded-lg mb-6"> |
|
<p class="text-blue-800 font-medium">California Family Code Section 297.1</p> |
|
<p class="text-sm">This form is used to establish a domestic partnership in California. Both partners must sign in the presence of a notary public.</p> |
|
</div> |
|
|
|
<form id="domesticPartnershipForm"> |
|
|
|
<div class="form-section"> |
|
<div class="form-title">Partner A Information</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="partnerA_firstName" class="block text-sm font-medium text-gray-700 required-field">First Name</label> |
|
<input type="text" id="partnerA_firstName" name="partnerA_firstName" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
<div> |
|
<label for="partnerA_middleName" class="block text-sm font-medium text-gray-700">Middle Name</label> |
|
<input type="text" id="partnerA_middleName" name="partnerA_middleName" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="partnerA_lastName" class="block text-sm font-medium text-gray-700 required-field">Last Name</label> |
|
<input type="text" id="partnerA_lastName" name="partnerA_lastName" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
<div> |
|
<label for="partnerA_suffix" class="block text-sm font-medium text-gray-700">Suffix</label> |
|
<input type="text" id="partnerA_suffix" name="partnerA_suffix" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="partnerA_dob" class="block text-sm font-medium text-gray-700 required-field">Date of Birth</label> |
|
<input type="date" id="partnerA_dob" name="partnerA_dob" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
<div> |
|
<label for="partnerA_gender" class="block text-sm font-medium text-gray-700 required-field">Gender</label> |
|
<select id="partnerA_gender" name="partnerA_gender" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
<option value="">Select</option> |
|
<option value="male">Male</option> |
|
<option value="female">Female</option> |
|
<option value="non-binary">Non-binary</option> |
|
<option value="other">Other</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label for="partnerA_ssn" class="block text-sm font-medium text-gray-700">Social Security Number (last 4 digits) (Not Required here - Form Requirements differ</label> |
|
<input type="text" id="partnerA_ssn" name="partnerA_ssn" maxlength="4" class="mt-1 block w-24 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label for="partnerA_address" class="block text-sm font-medium text-gray-700 required-field">Current Address</label> |
|
<textarea id="partnerA_address" name="partnerA_address" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required></textarea> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="form-section"> |
|
<div class="form-title">Partner B Information</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="partnerB_firstName" class="block text-sm font-medium text-gray-700 required-field">First Name</label> |
|
<input type="text" id="partnerB_firstName" name="partnerB_firstName" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
<div> |
|
<label for="partnerB_middleName" class="block text-sm font-medium text-gray-700">Middle Name</label> |
|
<input type="text" id="partnerB_middleName" name="partnerB_middleName" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="partnerB_lastName" class="block text-sm font-medium text-gray-700 required-field">Last Name</label> |
|
<input type="text" id="partnerB_lastName" name="partnerB_lastName" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
<div> |
|
<label for="partnerB_suffix" class="block text-sm font-medium text-gray-700">Suffix</label> |
|
<input type="text" id="partnerB_suffix" name="partnerB_suffix" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="partnerB_dob" class="block text-sm font-medium text-gray-700 required-field">Date of Birth</label> |
|
<input type="date" id="partnerB_dob" name="partnerB_dob" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
<div> |
|
<label for="partnerB_gender" class="block text-sm font-medium text-gray-700 required-field">Gender</label> |
|
<select id="partnerB_gender" name="partnerB_gender" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
<option value="">Select</option> |
|
<option value="male">Male</option> |
|
<option value="female">Female</option> |
|
<option value="non-binary">Non-binary</option> |
|
<option value="other">Other</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label for="partnerB_ssn" class="block text-sm font-medium text-gray-700">Social Security Number (last 4 digits) (Not Required here - Form Requirements differ</label> |
|
<input type="text" id="partnerB_ssn" name="partnerB_ssn" maxlength="4" class="mt-1 block w-24 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label for="partnerB_address" class="block text-sm font-medium text-gray-700 required-field">Current Address</label> |
|
<textarea id="partnerB_address" name="partnerB_address" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required></textarea> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="form-section"> |
|
<div class="form-title">Confidential Domestic Partnership Information</div> |
|
|
|
<div class="mb-4"> |
|
<label for="shared_residence" class="block text-sm font-medium text-gray-700 required-field">Shared Residence Address</label> |
|
<textarea id="shared_residence" name="shared_residence" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required></textarea> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="date_established" class="block text-sm font-medium text-gray-700 required-field">Date Domestic Partnership Established</label> |
|
<input type="date" id="date_established" name="date_established" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
<div> |
|
<label for="date_signed" class="block text-sm font-medium text-gray-700 required-field">Date Signed</label> |
|
<input type="date" id="date_signed" name="date_signed" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label class="block text-sm font-medium text-gray-700 required-field">Are you and your partner:</label> |
|
<div class="mt-2 space-y-2"> |
|
<div class="flex items-center"> |
|
<input id="same_sex" name="relationship_type" type="radio" value="same_sex" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" required> |
|
<label for="same_sex" class="ml-2 block text-sm text-gray-700">Option not available</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="opposite_sex" name="relationship_type" type="radio" value="opposite_sex" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"> |
|
<label for="opposite_sex" class="ml-2 block text-sm text-gray-700">Opposite-sex partners with at least one partner 62 or older</label> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="form-section"> |
|
<div class="form-title">Notary Section</div> |
|
|
|
<div class="mb-4"> |
|
<label for="notary_name" class="block text-sm font-medium text-gray-700">Notary Public Name</label> |
|
<input type="text" id="notary_name" name="notary_name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="notary_commission" class="block text-sm font-medium text-gray-700">Notary Commission Number</label> |
|
<input type="text" id="notary_commission" name="notary_commission" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
|
</div> |
|
<div> |
|
<label for="notary_expires" class="block text-sm font-medium text-gray-700">Notary Commission Expires</label> |
|
<input type="date" id="notary_expires" name="notary_expires" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="form-section"> |
|
<div class="form-title">Signatures</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
<div> |
|
<div class="mb-2"> |
|
<label for="partnerA_signature" class="block text-sm font-medium text-gray-700 required-field">Partner A Signature</label> |
|
<input type="text" id="partnerA_signature" name="partnerA_signature" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
<div class="mb-2"> |
|
<label for="partnerA_signature_date" class="block text-sm font-medium text-gray-700 required-field">Date Signed</label> |
|
<input type="date" id="partnerA_signature_date" name="partnerA_signature_date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="mb-2"> |
|
<label for="partnerB_signature" class="block text-sm font-medium text-gray-700 required-field">Partner B Signature</label> |
|
<input type="text" id="partnerB_signature" name="partnerB_signature" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
<div class="mb-2"> |
|
<label for="partnerB_signature_date" class="block text-sm font-medium text-gray-700 required-field">Date Signed</label> |
|
<input type="date" id="partnerB_signature_date" name="partnerB_signature_date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"> |
|
<div class="flex"> |
|
<div class="flex-shrink-0"> |
|
<i class="fas fa-exclamation-circle text-yellow-500 mt-1"></i> |
|
</div> |
|
<div class="ml-3"> |
|
<h3 class="text-sm font-medium text-yellow-800">Signature Requirements</h3> |
|
<div class="mt-2 text-sm text-yellow-700"> |
|
<p>Both partners must sign this form in the presence of a notary public. The notary will complete the notary section after verifying identities and witnessing signatures.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row justify-between space-y-4 sm:space-y-0 sm:space-x-4"> |
|
<button type="button" id="printForm" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
<i class="fas fa-print mr-2"></i> Print Form |
|
</button> |
|
<div class="space-x-4"> |
|
<button type="button" id="resetForm" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
<i class="fas fa-redo mr-2"></i> Reset Form |
|
</button> |
|
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
<i class="fas fa-paper-plane mr-2"></i> Submit Form |
|
</button> |
|
</div> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="appointmentContainer" class="appointment-container bg-white rounded-lg no-print"> |
|
<div class="p-6"> |
|
<div class="flex justify-between items-center mb-6"> |
|
<h2 class="text-2xl font-bold text-purple-800">Schedule Signing Appointment</h2> |
|
<button id="closeAppointment" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times text-2xl"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="bg-purple-50 p-4 rounded-lg mb-6"> |
|
<p class="text-purple-800 font-medium">Notary Public Signing Service</p> |
|
<p class="text-sm">Schedule an appointment with a notary public to sign your Domestic Partnership Agreement. Both partners must be present with valid photo identification.</p> |
|
</div> |
|
|
|
<form id="appointmentForm"> |
|
<div class="form-section"> |
|
<div class="form-title">Appointment Details</div> |
|
|
|
<div class="mb-4"> |
|
<label for="appointment_date" class="block text-sm font-medium text-gray-700 required-field">Preferred Date</label> |
|
<input type="date" id="appointment_date" name="appointment_date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label for="appointment_time" class="block text-sm font-medium text-gray-700 required-field">Preferred Time</label> |
|
<select id="appointment_time" name="appointment_time" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required> |
|
<option value="">Select a time</option> |
|
<option value="09:00">9:00 AM</option> |
|
<option value="10:00">10:00 AM</option> |
|
<option value="11:00">11:00 AM</option> |
|
<option value="12:00">12:00 PM</option> |
|
<option value="13:00">1:00 PM</option> |
|
<option value="14:00">2:00 PM</option> |
|
<option value="15:00">3:00 PM</option> |
|
<option value="16:00">4:00 PM</option> |
|
</select> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label for="appointment_location" class="block text-sm font-medium text-gray-700 required-field">Location Preference</label> |
|
<select id="appointment_location" name="appointment_location" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required> |
|
<option value="">Select a location</option> |
|
<option value="office">Our Office (123 Legal St, Sacramento)</option> |
|
<option value="mobile">Mobile Notary (We come to you)</option> |
|
<option value="virtual">Virtual Notarization (Online)</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<div class="form-section"> |
|
<div class="form-title">Contact Information</div> |
|
|
|
<div class="mb-4"> |
|
<label for="contact_name" class="block text-sm font-medium text-gray-700 required-field">Primary Contact Name</label> |
|
<input type="text" id="contact_name" name="contact_name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="contact_phone" class="block text-sm font-medium text-gray-700 required-field">Phone Number</label> |
|
<input type="tel" id="contact_phone" name="contact_phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required> |
|
</div> |
|
<div> |
|
<label for="contact_email" class="block text-sm font-medium text-gray-700 required-field">Email Address</label> |
|
<input type="email" id="contact_email" name="contact_email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label for="special_requests" class="block text-sm font-medium text-gray-700">Special Requests or Notes</label> |
|
<textarea id="special_requests" name="special_requests" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500"></textarea> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-purple-50 border-l-4 border-purple-400 p-4 mb-6"> |
|
<div class="flex"> |
|
<div class="flex-shrink-0"> |
|
<i class="fas fa-info-circle text-purple-500 mt-1"></i> |
|
</div> |
|
<div class="ml-3"> |
|
<h3 class="text-sm font-medium text-purple-800">What to Bring</h3> |
|
<div class="mt-2 text-sm text-purple-700"> |
|
<ul class="list-disc pl-5 space-y-1"> |
|
<li>Completed DP-1A form (if applicable)</li> |
|
<li>Valid government-issued photo ID for both partners</li> |
|
<li>Payment for notary services ($15 standard fee)</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4"> |
|
<button type="button" id="cancelAppointment" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
<i class="fas fa-times mr-2"></i> Cancel |
|
</button> |
|
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
<i class="fas fa-calendar-check mr-2"></i> Schedule Appointment |
|
</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
<div class="container mx-auto px-4"> |
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
<div> |
|
<h3 class="text-lg font-semibold mb-4">Contact Information</h3> |
|
<p class="mb-2"><i class="fas fa-map-marker-alt mr-2"></i> Private Household</p> |
|
<p class="mb-2"><i class="fas fa-building mr-2"></i> Confidential Domestic Partnership</p> |
|
<p class="mb-2"><i class="fas fa-phone mr-2"></i> </p> |
|
<p><i class="fas fa-envelope mr-2"></i> </p> |
|
</div> |
|
<div> |
|
<h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
|
<ul class="space-y-2"> |
|
<li><a href="https://www.sos.ca.gov/registries/domestic-partners-registry" class="text-blue-300 hover:text-blue-100" target="_blank">Private Website</a></li> |
|
<li><a href="https://leginfo.legislature.ca.gov/faces/codes_displaySection.xhtml?lawCode=FAM§ionNum=297.1" class="text-blue-300 hover:text-blue-100" target="_blank">Family Code Section 297.1</a></li> |
|
<li><a href="#" class="text-blue-300 hover:text-blue-100">Termination of Partnership</a></li> |
|
<li><a href="#" class="text-blue-300 hover:text-blue-100">Frequently Asked Questions</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h3 class="text-lg font-semibold mb-4">Additional Resources</h3> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-blue-300 hover:text-blue-100">Legal Rights and Benefits</a></li> |
|
<li><a href="#" class="text-blue-300 hover:text-blue-100">Tax Information</a></li> |
|
<li><a href="#" class="text-blue-300 hover:text-blue-100">Health Insurance Guidance</a></li> |
|
<li><a href="#" class="text-blue-300 hover:text-blue-100">Parental Rights</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="border-t border-gray-700 mt-8 pt-6 text-sm text-gray-400"> |
|
<p>© 2025. All rights reserved.</p> |
|
<p class="mt-2">This website is for informational purposes only and is not a substitute for legal advice.</p> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
document.querySelectorAll('.faq-question').forEach(button => { |
|
button.addEventListener('click', () => { |
|
const answer = button.nextElementSibling; |
|
const icon = button.querySelector('i'); |
|
|
|
answer.classList.toggle('hidden'); |
|
icon.classList.toggle('transform'); |
|
icon.classList.toggle('rotate-180'); |
|
}); |
|
}); |
|
|
|
|
|
const formButton = document.getElementById('formButton'); |
|
const formContainer = document.getElementById('formContainer'); |
|
const appointmentButton = document.getElementById('appointmentButton'); |
|
const appointmentContainer = document.getElementById('appointmentContainer'); |
|
const overlay = document.getElementById('overlay'); |
|
const closeForm = document.getElementById('closeForm'); |
|
const closeAppointment = document.getElementById('closeAppointment'); |
|
|
|
formButton.addEventListener('click', () => { |
|
formContainer.style.display = 'block'; |
|
overlay.style.display = 'block'; |
|
document.body.style.overflow = 'hidden'; |
|
}); |
|
|
|
appointmentButton.addEventListener('click', () => { |
|
appointmentContainer.style.display = 'block'; |
|
overlay.style.display = 'block'; |
|
document.body.style.overflow = 'hidden'; |
|
}); |
|
|
|
closeForm.addEventListener('click', () => { |
|
formContainer.style.display = 'none'; |
|
overlay.style.display = 'none'; |
|
document.body.style.overflow = 'auto'; |
|
}); |
|
|
|
closeAppointment.addEventListener('click', () => { |
|
appointmentContainer.style.display = 'none'; |
|
overlay.style.display = 'none'; |
|
document.body.style.overflow = 'auto'; |
|
}); |
|
|
|
overlay.addEventListener('click', () => { |
|
formContainer.style.display = 'none'; |
|
appointmentContainer.style.display = 'none'; |
|
overlay.style.display = 'none'; |
|
document.body.style.overflow = 'auto'; |
|
}); |
|
|
|
|
|
const form = document.getElementById('domesticPartnershipForm'); |
|
const printButton = document.getElementById('printForm'); |
|
const resetButton = document.getElementById('resetForm'); |
|
|
|
printButton.addEventListener('click', () => { |
|
window.print(); |
|
}); |
|
|
|
resetButton.addEventListener('click', () => { |
|
if (confirm('Are you sure you want to reset all form fields?')) { |
|
form.reset(); |
|
} |
|
}); |
|
|
|
form.addEventListener('submit', (e) => { |
|
e.preventDefault(); |
|
|
|
|
|
let isValid = true; |
|
document.querySelectorAll('[required]').forEach(field => { |
|
if (!field.value.trim()) { |
|
field.classList.add('border-red-500'); |
|
isValid = false; |
|
} else { |
|
field.classList.remove('border-red-500'); |
|
} |
|
}); |
|
|
|
if (!isValid) { |
|
alert('Please fill in all required fields marked with *.'); |
|
return; |
|
} |
|
|
|
|
|
alert('Form submitted successfully! In a real application, this would be sent to the server.'); |
|
|
|
|
|
formContainer.style.display = 'none'; |
|
overlay.style.display = 'none'; |
|
document.body.style.overflow = 'auto'; |
|
}); |
|
|
|
|
|
const appointmentForm = document.getElementById('appointmentForm'); |
|
const cancelAppointment = document.getElementById('cancelAppointment'); |
|
|
|
cancelAppointment.addEventListener('click', () => { |
|
appointmentContainer.style.display = 'none'; |
|
overlay.style.display = 'none'; |
|
document.body.style.overflow = 'auto'; |
|
}); |
|
|
|
appointmentForm.addEventListener('submit', (e) => { |
|
e.preventDefault(); |
|
|
|
|
|
let isValid = true; |
|
appointmentForm.querySelectorAll('[required]').forEach(field => { |
|
if (!field.value.trim()) { |
|
field.classList.add('border-red-500'); |
|
isValid = false; |
|
} else { |
|
field.classList.remove('border-red-500'); |
|
} |
|
}); |
|
|
|
if (!isValid) { |
|
alert('Please fill in all required fields marked with *.'); |
|
return; |
|
} |
|
|
|
|
|
const formData = new FormData(appointmentForm); |
|
const appointmentData = Object.fromEntries(formData.entries()); |
|
|
|
|
|
alert(`Appointment scheduled successfully!\n\nDate: ${appointmentData.appointment_date}\nTime: ${appointmentData.appointment_time}\nLocation: ${appointmentData.appointment_location}\n\nWe will contact you shortly to confirm.`); |
|
|
|
|
|
appointmentContainer.style.display = 'none'; |
|
overlay.style.display = 'none'; |
|
document.body.style.overflow = 'auto'; |
|
|
|
|
|
appointmentForm.reset(); |
|
}); |
|
|
|
|
|
const today = new Date(); |
|
const tomorrow = new Date(today); |
|
tomorrow.setDate(tomorrow.getDate() + 1); |
|
|
|
const dd = String(tomorrow.getDate()).padStart(2, '0'); |
|
const mm = String(tomorrow.getMonth() + 1).padStart(2, '0'); |
|
const yyyy = tomorrow.getFullYear(); |
|
|
|
const minDate = yyyy + '-' + mm + '-' + dd; |
|
document.getElementById('appointment_date').min = minDate; |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/priv-cadp-vbeta1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
