reference.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reference Page - Coppell Community Resource Hub</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="website.css">
</head>
<body>
<a href="#main-content" class="skip-link">Skip to Content</a>

<header>
<div class="header-content">
<div class="logo-title">
<div class="coppell-logo">
<img src="https://www.logotypes101.com/logos/765/CC7E7E601E7D89E05BAD8B0F064B7C14/The_City_of_Coppell29.png" 
alt="City of Coppell Logo">
</div>
<div class="header-title">
<h1><a href="website.html" aria-label="Home">Coppell Community Hub</a></h1>
<p>Your Connection to Community Resources</p>
</div>
</div>
<nav class="main-nav">
<a href="website.html" class="nav-link">Home</a>
<a href="about.html" class="nav-link">About Coppell</a>
<a href="map.html" class="nav-link">Map</a>
<a href="favorites.html" class="nav-link">My Favorites (<span id="favCount">0</span>)</a>
<a href="reference.html" class="nav-link active">References</a>
</nav>
</div>
</header>

<main id="main-content">
<!-- HERO SECTION -->
<section style="background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); padding: 3rem 0; color: white; text-align: center;">
<div class="section-content">
<h1 style="font-size: 3rem; font-weight: 800; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">
<i class="fas fa-book" style="margin-right: 1rem;"></i>Reference Page
</h1>
<p style="font-size: 1.2rem; opacity: 0.95; max-width: 800px; margin: 0 auto;">
Sources and permissions for content used in this website
</p>
</div>
</section>

<!-- REFERENCES CONTENT -->
<section style="background: #f8fafc; padding: 4rem 0;">
<div class="section-content">

<!-- Information Sources -->
<div style="background: white; padding: 2.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-bottom: 2rem;">
<h2 style="font-size: 2rem; color: #1e40af; margin-bottom: 1.5rem; border-bottom: 3px solid #3b82f6; padding-bottom: 0.5rem;">
<i class="fas fa-info-circle" style="margin-right: 0.5rem;"></i>Information Sources
</h2>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">City of Coppell Official Website</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
All facility information, addresses, phone numbers, and program descriptions were obtained from the official City of Coppell website and are considered public information.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: <a href="https://www.coppelltx.gov" target="_blank" style="color: #2563eb; text-decoration: none;">https://www.coppelltx.gov</a>
</p>
</div>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">Coppell Farmers Market</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
Information about market hours, vendors, and history obtained from the official Coppell Farmers Market website.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: <a href="https://coppellfarmersmarket.org" target="_blank" style="color: #2563eb; text-decoration: none;">https://coppellfarmersmarket.org</a>
</p>
</div>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">Coppell Independent School District</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
District information, contact details, and program descriptions from CISD official website.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: <a href="https://www.coppellisd.com" target="_blank" style="color: #2563eb; text-decoration: none;">https://www.coppellisd.com</a>
</p>
</div>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">YMCA of Metropolitan Dallas</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
Coppell Family YMCA facility information and program details from official YMCA website.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: <a href="https://www.ymcadallas.org/locations/coppell-family-ymca" target="_blank" style="color: #2563eb; text-decoration: none;">https://www.ymcadallas.org/locations/coppell-family-ymca</a>
</p>
</div>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">Assistance League of Coppell</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
Organization information and program descriptions from official Assistance League website.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: <a href="https://coppell.assistanceleague.org" target="_blank" style="color: #2563eb; text-decoration: none;">https://coppell.assistanceleague.org</a>
</p>
</div>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">Theatre Coppell</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
Performance information and organization history from Theatre Coppell official website.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: <a href="https://www.theatrecoppell.com" target="_blank" style="color: #2563eb; text-decoration: none;">https://www.theatrecoppell.com</a>
</p>
</div>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">Coppell Arts Center</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
Arts center programs, class schedules, and facility information from the official website.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: <a href="https://www.coppellartscenter.org" target="_blank" style="color: #2563eb; text-decoration: none;">https://www.coppellartscenter.org</a>
</p>
</div>
</div>

<!-- Images and Graphics -->
<div style="background: white; padding: 2.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-bottom: 2rem;">
<h2 style="font-size: 2rem; color: #1e40af; margin-bottom: 1.5rem; border-bottom: 3px solid #3b82f6; padding-bottom: 0.5rem;">
<i class="fas fa-images" style="margin-right: 0.5rem;"></i>Images and Graphics
</h2>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">City of Coppell Logo</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
Official City of Coppell logo used for identification purposes. The logo is publicly available on the city's official website and is used here for educational purposes as part of a school competition project promoting city resources.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: City of Coppell Official Website
</p>
<p style="color: #6b7280; font-size: 0.9rem; margin-top: 0.5rem;">
Note: Logo usage is for educational purposes only as part of TSA Webmaster competition
</p>
</div>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">Facility and Location Images</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
Images of Coppell facilities (Nature Park, Library, Arts Center, Andrew Brown Park, The CORE, Old Town) are sourced from:
</p>
<ul style="color: #374151; line-height: 1.8; margin-left: 2rem; margin-top: 0.5rem;">
<li>City of Coppell official website image repository (public domain)</li>
<li>Coppell Arts Center official website</li>
<li>North Texas Trails (community resource site)</li>
<li>StarLocalMedia.com (news coverage of community events)</li>
</ul>
<p style="color: #6b7280; font-size: 0.9rem; margin-top: 1rem;">
All images are either public domain or used under educational fair use. This website is created for educational purposes as part of a Technology Student Association competition and is not used for commercial purposes.
</p>
</div>
</div>

<!-- Code and Technical Resources -->
<div style="background: white; padding: 2.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-bottom: 2rem;">
<h2 style="font-size: 2rem; color: #1e40af; margin-bottom: 1.5rem; border-bottom: 3px solid #3b82f6; padding-bottom: 0.5rem;">
<i class="fas fa-code" style="margin-right: 0.5rem;"></i>Code and Technical Resources
</h2>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">Font Awesome Icons</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
Icon library used throughout the website for visual elements.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: <a href="https://fontawesome.com" target="_blank" style="color: #2563eb; text-decoration: none;">Font Awesome (Free Version)</a>
</p>
<p style="color: #6b7280; font-size: 0.9rem; margin-top: 0.5rem;">
License: Font Awesome Free License
</p>
</div>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">Google Maps Embed</h3>
<p style="color: #374151; line-height: 1.8; margin-bottom: 0.5rem;">
Interactive map showing Coppell's location in the Dallas/Fort Worth area.
</p>
<p style="color: #2563eb; font-weight: 600;">
Source: <a href="https://www.google.com/maps" target="_blank" style="color: #2563eb; text-decoration: none;">Google Maps Embed API</a>
</p>
<p style="color: #6b7280; font-size: 0.9rem; margin-top: 0.5rem;">
Used under Google Maps Platform Terms of Service
</p>
</div>

<div style="margin-bottom: 2rem;">
<h3 style="color: #111827; font-size: 1.3rem; margin-bottom: 1rem;">Programming Languages and Technologies</h3>
<ul style="color: #374151; line-height: 1.8; margin-left: 2rem;">
<li><strong>HTML5</strong> - Structure and content markup</li>
<li><strong>CSS3</strong> - Styling and responsive design</li>
<li><strong>JavaScript</strong> - Interactive functionality</li>
<li><strong>Local Storage API</strong> - Favorites feature</li>
</ul>
<p style="color: #6b7280; font-size: 0.9rem; margin-top: 1rem;">
All code written by the student team for this TSA Webmaster competition entry
</p>
</div>
</div>

<!-- Educational Use Statement -->
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 2.5rem; border-radius: 16px; border-left: 5px solid #3b82f6; margin-bottom: 2rem;">
<h2 style="font-size: 1.5rem; color: #1e40af; margin-bottom: 1rem;">
<i class="fas fa-graduation-cap" style="margin-right: 0.5rem;"></i>Educational Use Statement
</h2>
<p style="color: #374151; line-height: 1.8; margin-bottom: 1rem;">
This website was created as an educational project for the Technology Student Association (TSA) Webmaster competition. All content, including text, images, and code, is used for non-commercial, educational purposes only.
</p>
<p style="color: #374151; line-height: 1.8; margin-bottom: 1rem;">
Information about Coppell community resources is publicly available and has been compiled to serve as a helpful guide for residents. We have made every effort to ensure accuracy and proper attribution of all sources.
</p>
<p style="color: #374151; line-height: 1.8;">
<strong>Fair Use Disclaimer:</strong> This project qualifies as fair use under U.S. copyright law for educational purposes. The use of copyrighted material is transformative, limited in scope, and does not substitute for or compete with the original sources.
</p>
</div>

<!-- Contact -->
<div style="background: white; padding: 2.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
<h2 style="font-size: 1.5rem; color: #1e40af; margin-bottom: 1rem;">
<i class="fas fa-envelope" style="margin-right: 0.5rem;"></i>Questions or Concerns?
</h2>
<p style="color: #374151; line-height: 1.8;">
If you have questions about the sources used on this website or concerns about any content, please contact the TSA advisor or any of the team members.
</p>
</div>

</div>
</section>
</main>

<footer>
<div class="footer-content">
<h3 style="margin-bottom: 1rem;">Coppell Community Hub</h3>
<p>Connecting residents with local resources</p>
<div class="footer-links">
<a href="website.html">Home</a>
<a href="about.html">About Coppell</a>
<a href="map.html">Map</a>
<a href="favorites.html">My Favorites</a>
<a href="reference.html" class="active">References</a>
<a href="https://www.coppelltx.gov" target="_blank">City of Coppell</a>
</div>
<div style="border-top: 1px solid #374151; padding-top: 1.5rem; margin-top: 1.5rem; color: #9ca3af;">
<p>&copy; 2025 Coppell Community Resource Hub | TSA Webmaster Competition Entry</p>
</div>
</div>
</footer>

<script src="website.js"></script>
</body>
</html>