Joshua Ryder
1c2b80d837
Fixed incorrect date (was January 7, 2025) to the correct date of November 7, 2025 in both the terms modal and terms page. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
289 lines
13 KiB
Vue
289 lines
13 KiB
Vue
<template>
|
||
<!-- Modal Overlay -->
|
||
<Teleport to="body">
|
||
<Transition name="modal">
|
||
<div
|
||
v-if="modelValue"
|
||
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
|
||
@click.self="closeModal"
|
||
>
|
||
<!-- Modal Content -->
|
||
<div
|
||
class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col"
|
||
@click.stop
|
||
>
|
||
<!-- Modal Header -->
|
||
<div class="flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 sticky top-0 bg-white rounded-t-lg">
|
||
<h2 class="text-xl sm:text-2xl font-bold text-gray-900">Terms of Use & Privacy Policy</h2>
|
||
<button
|
||
@click="closeModal"
|
||
class="text-gray-400 hover:text-gray-600 transition-colors p-1"
|
||
aria-label="Close modal"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Modal Body (Scrollable) -->
|
||
<div class="overflow-y-auto p-4 sm:p-6 flex-1">
|
||
<!-- AI Disclaimer Section -->
|
||
<section class="mb-6 p-4 sm:p-6 bg-yellow-50 border-l-4 border-yellow-400 rounded">
|
||
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 flex items-center">
|
||
<span class="mr-2">⚠️</span> Important: AI-Generated Content Disclaimer
|
||
</h3>
|
||
<div class="space-y-3 text-sm sm:text-base text-gray-700">
|
||
<p class="font-semibold">
|
||
This website and application were created with artificial intelligence (AI) assistance.
|
||
</p>
|
||
<p>
|
||
<strong>Please be aware:</strong> AI technology, while powerful, is not perfect and can make mistakes.
|
||
This includes but is not limited to:
|
||
</p>
|
||
<ul class="list-disc list-inside ml-4 space-y-1">
|
||
<li>Errors in code or functionality</li>
|
||
<li>Unexpected behavior or bugs</li>
|
||
<li>Security vulnerabilities</li>
|
||
<li>Data processing or storage issues</li>
|
||
<li>Incorrect information display</li>
|
||
</ul>
|
||
<p class="font-semibold text-red-700 mt-3">
|
||
Users should not rely on this system as the sole repository for important information.
|
||
Always maintain backup copies of your sermon notes and important data.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Terms of Use -->
|
||
<section class="mb-6">
|
||
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Terms of Use</h3>
|
||
<div class="space-y-3 text-sm sm:text-base text-gray-700">
|
||
<p>
|
||
By accessing and using this website (the "Service"), you accept and agree to be bound by the
|
||
terms and provisions of this agreement.
|
||
</p>
|
||
|
||
<h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Purpose</h4>
|
||
<p>
|
||
This Service is provided by New Life Christian Church (the "Church") to assist members and
|
||
attendees in viewing sermon information and taking personal notes during services. The Service
|
||
is provided as-is for informational and organizational purposes only.
|
||
</p>
|
||
|
||
<h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Use at Your Own Risk</h4>
|
||
<p>
|
||
You acknowledge and agree that your use of this Service is at your sole risk. The Service
|
||
is provided on an "AS IS" and "AS AVAILABLE" basis without warranties of any kind, either
|
||
express or implied.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Limitation of Liability -->
|
||
<section class="mb-6">
|
||
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Limitation of Liability</h3>
|
||
<div class="space-y-3 text-sm sm:text-base text-gray-700">
|
||
<p class="font-semibold">
|
||
TO THE FULLEST EXTENT PERMITTED BY LAW, NEW LIFE CHRISTIAN CHURCH, ITS STAFF, VOLUNTEERS,
|
||
CONTRACTORS, AND AFFILIATES SHALL NOT BE LIABLE FOR ANY DAMAGES OF ANY KIND ARISING FROM
|
||
THE USE OF THIS SERVICE.
|
||
</p>
|
||
<p>This includes but is not limited to:</p>
|
||
<ul class="list-disc list-inside ml-4 space-y-1">
|
||
<li>Loss of data, including sermon notes or personal information</li>
|
||
<li>Service interruptions or downtime</li>
|
||
<li>Errors, bugs, or technical malfunctions</li>
|
||
<li>Security breaches or unauthorized access</li>
|
||
<li>Inaccurate or incomplete information</li>
|
||
<li>Any indirect, incidental, special, consequential, or punitive damages</li>
|
||
</ul>
|
||
<p class="mt-3">
|
||
The Church makes no guarantee regarding the availability, reliability, or accuracy of the
|
||
Service and reserves the right to modify, suspend, or discontinue the Service at any time
|
||
without notice.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Data & Privacy -->
|
||
<section class="mb-6">
|
||
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Privacy & Data</h3>
|
||
<div class="space-y-3 text-sm sm:text-base text-gray-700">
|
||
<h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Information We Collect</h4>
|
||
<p>When you register for an account, we collect:</p>
|
||
<ul class="list-disc list-inside ml-4 space-y-1">
|
||
<li>Username and password (password is encrypted)</li>
|
||
<li>Email address</li>
|
||
<li>First and last name</li>
|
||
<li>Your sermon notes and related content</li>
|
||
</ul>
|
||
|
||
<h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">How We Use Your Information</h4>
|
||
<p>Your information is used to:</p>
|
||
<ul class="list-disc list-inside ml-4 space-y-1">
|
||
<li>Provide access to the Service</li>
|
||
<li>Store and manage your sermon notes</li>
|
||
<li>Send you sermon notes via email when requested</li>
|
||
<li>Authenticate your account</li>
|
||
</ul>
|
||
|
||
<h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Data Retention</h4>
|
||
<p>
|
||
Your notes are stored in our database and are associated with your account.
|
||
<strong class="text-red-700">Important:</strong> If a sermon is deleted by an administrator,
|
||
all associated user notes for that sermon are permanently deleted. We recommend regularly
|
||
downloading or emailing your notes to maintain personal backups.
|
||
</p>
|
||
|
||
<h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Data Security</h4>
|
||
<p>
|
||
While we implement security measures to protect your data, no system is completely secure.
|
||
Given that this system was created with AI assistance, there may be unknown vulnerabilities.
|
||
The Church cannot guarantee the security of your information.
|
||
</p>
|
||
|
||
<h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Third-Party Services</h4>
|
||
<p>
|
||
When you email your notes, we use third-party email service providers to deliver your messages.
|
||
Your email address and content are transmitted through these services.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- User Responsibilities -->
|
||
<section class="mb-6">
|
||
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">User Responsibilities</h3>
|
||
<div class="space-y-3 text-sm sm:text-base text-gray-700">
|
||
<p>As a user of this Service, you agree to:</p>
|
||
<ul class="list-disc list-inside ml-4 space-y-1">
|
||
<li>Maintain the confidentiality of your account credentials</li>
|
||
<li>Use the Service only for its intended purpose</li>
|
||
<li>Maintain your own backups of important notes and information</li>
|
||
<li>Not attempt to compromise the security of the Service</li>
|
||
<li>Not use the Service for any unlawful purpose</li>
|
||
<li>Accept sole responsibility for any content you create or upload</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Account Termination -->
|
||
<section class="mb-6">
|
||
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Account Termination</h3>
|
||
<div class="space-y-3 text-sm sm:text-base text-gray-700">
|
||
<p>
|
||
The Church reserves the right to terminate or suspend your account at any time, with or
|
||
without notice, for any reason, including violation of these terms or at the Church's sole
|
||
discretion.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Changes to Terms -->
|
||
<section class="mb-6">
|
||
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Changes to These Terms</h3>
|
||
<div class="space-y-3 text-sm sm:text-base text-gray-700">
|
||
<p>
|
||
The Church reserves the right to modify these terms at any time. Continued use of the
|
||
Service after changes constitutes acceptance of the modified terms.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact -->
|
||
<section class="mb-6">
|
||
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Contact Information</h3>
|
||
<div class="space-y-3 text-sm sm:text-base text-gray-700">
|
||
<p>
|
||
If you have questions about these terms or the Service, please contact New Life Christian
|
||
Church through our regular church communication channels.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Acceptance -->
|
||
<section class="mb-6 p-4 sm:p-6 bg-gray-50 border rounded">
|
||
<p class="text-sm sm:text-base text-gray-700">
|
||
<strong>By using this Service, you acknowledge that you have read, understood, and agree to
|
||
be bound by these Terms of Use and Privacy Policy, including the AI-generated content disclaimer.</strong>
|
||
</p>
|
||
<p class="text-xs sm:text-sm text-gray-600 mt-3">
|
||
Last Updated: November 7, 2025
|
||
</p>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Modal Footer -->
|
||
<div class="border-t border-gray-200 p-4 sm:p-6 bg-gray-50 rounded-b-lg">
|
||
<button
|
||
@click="closeModal"
|
||
class="w-full sm:w-auto px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium transition-colors"
|
||
>
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const props = defineProps<{
|
||
modelValue: boolean
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
'update:modelValue': [value: boolean]
|
||
}>()
|
||
|
||
const closeModal = () => {
|
||
emit('update:modelValue', false)
|
||
}
|
||
|
||
// Close on escape key
|
||
onMounted(() => {
|
||
const handleEscape = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape' && props.modelValue) {
|
||
closeModal()
|
||
}
|
||
}
|
||
window.addEventListener('keydown', handleEscape)
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('keydown', handleEscape)
|
||
})
|
||
})
|
||
|
||
// Prevent body scroll when modal is open
|
||
watch(() => props.modelValue, (isOpen) => {
|
||
if (isOpen) {
|
||
document.body.style.overflow = 'hidden'
|
||
} else {
|
||
document.body.style.overflow = ''
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.modal-enter-active,
|
||
.modal-leave-active {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.modal-enter-from,
|
||
.modal-leave-to {
|
||
opacity: 0;
|
||
}
|
||
|
||
.modal-enter-active .bg-white,
|
||
.modal-leave-active .bg-white {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.modal-enter-from .bg-white,
|
||
.modal-leave-to .bg-white {
|
||
transform: scale(0.9);
|
||
}
|
||
</style>
|