updateweb
This commit is contained in:
Local Server
@@ -174,246 +174,46 @@
|
||||
</section>
|
||||
|
||||
<!-- Business Contact Information -->
|
||||
<section style="padding: 60px 0 40px; background: white">
|
||||
<section
|
||||
style="padding: 60px 0 40px; background: white"
|
||||
id="contactInfoSection"
|
||||
>
|
||||
<div class="container" style="max-width: 1000px">
|
||||
<div style="text-align: center; margin-bottom: 48px">
|
||||
<h2
|
||||
style="
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #2d3436;
|
||||
margin-bottom: 12px;
|
||||
"
|
||||
>
|
||||
Our Contact Information
|
||||
</h2>
|
||||
<p style="font-size: 1rem; color: #636e72">
|
||||
Reach out to us through any of these channels
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 32px;
|
||||
"
|
||||
>
|
||||
<!-- Phone -->
|
||||
<div style="text-align: center; padding: 40px">
|
||||
<div
|
||||
class="loading-spinner"
|
||||
style="
|
||||
background: #f8f9fa;
|
||||
padding: 32px 24px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 2px solid #e1e8ed;
|
||||
transition: all 0.3s;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #667eea;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 20px;
|
||||
"
|
||||
onmouseover="this.style.borderColor='#667eea'; this.style.transform='translateY(-4px)';"
|
||||
onmouseout="this.style.borderColor='#e1e8ed'; this.style.transform='translateY(0)';"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="bi bi-telephone"
|
||||
style="font-size: 28px; color: white"
|
||||
></i>
|
||||
</div>
|
||||
<h3
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: #2d3436;
|
||||
"
|
||||
>
|
||||
Phone
|
||||
</h3>
|
||||
<p style="color: #636e72; margin: 0 0 8px 0; font-size: 15px">
|
||||
Give us a call
|
||||
</p>
|
||||
<a
|
||||
href="tel:+1234567890"
|
||||
style="
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
"
|
||||
>+1 (234) 567-8900</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div
|
||||
style="
|
||||
background: #f8f9fa;
|
||||
padding: 32px 24px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 2px solid #e1e8ed;
|
||||
transition: all 0.3s;
|
||||
"
|
||||
onmouseover="this.style.borderColor='#667eea'; this.style.transform='translateY(-4px)';"
|
||||
onmouseout="this.style.borderColor='#e1e8ed'; this.style.transform='translateY(0)';"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="bi bi-envelope"
|
||||
style="font-size: 28px; color: white"
|
||||
></i>
|
||||
</div>
|
||||
<h3
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: #2d3436;
|
||||
"
|
||||
>
|
||||
Email
|
||||
</h3>
|
||||
<p style="color: #636e72; margin: 0 0 8px 0; font-size: 15px">
|
||||
Send us an email
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@skyartshop.com"
|
||||
style="
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
"
|
||||
>support@skyartshop.com</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div
|
||||
style="
|
||||
background: #f8f9fa;
|
||||
padding: 32px 24px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 2px solid #e1e8ed;
|
||||
transition: all 0.3s;
|
||||
"
|
||||
onmouseover="this.style.borderColor='#667eea'; this.style.transform='translateY(-4px)';"
|
||||
onmouseout="this.style.borderColor='#e1e8ed'; this.style.transform='translateY(0)';"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="bi bi-geo-alt"
|
||||
style="font-size: 28px; color: white"
|
||||
></i>
|
||||
</div>
|
||||
<h3
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: #2d3436;
|
||||
"
|
||||
>
|
||||
Location
|
||||
</h3>
|
||||
<p style="color: #636e72; margin: 0 0 8px 0; font-size: 15px">
|
||||
Visit our shop
|
||||
</p>
|
||||
<p
|
||||
style="
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
"
|
||||
>
|
||||
123 Creative Street<br />Art District, CA 90210
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Business Hours -->
|
||||
<div
|
||||
style="
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
"
|
||||
>
|
||||
<h3 style="font-size: 20px; font-weight: 600; margin-bottom: 16px">
|
||||
Business Hours
|
||||
</h3>
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<p style="margin: 0; font-weight: 500; opacity: 0.9">
|
||||
Monday - Friday
|
||||
</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 18px; font-weight: 600">
|
||||
9:00 AM - 6:00 PM
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="margin: 0; font-weight: 500; opacity: 0.9">Saturday</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 18px; font-weight: 600">
|
||||
10:00 AM - 4:00 PM
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="margin: 0; font-weight: 500; opacity: 0.9">Sunday</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 18px; font-weight: 600">
|
||||
Closed
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
></div>
|
||||
<p>Loading contact information...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
/* Contact card hover effects */
|
||||
#contactInfoSection [style*="border: 2px solid"]:hover {
|
||||
border-color: #667eea !important;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Contact Form Section -->
|
||||
<section
|
||||
class="contact-section"
|
||||
@@ -725,7 +525,9 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/assets/js/page-transitions.js"></script>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
<script src="/assets/js/navigation.js"></script>
|
||||
<script src="/assets/js/cart.js"></script>
|
||||
<script src="/assets/js/shopping.js"></script>
|
||||
<script>
|
||||
@@ -792,6 +594,47 @@
|
||||
}, 5000);
|
||||
}
|
||||
});
|
||||
|
||||
// Load contact information from API
|
||||
async function loadContactInfo() {
|
||||
try {
|
||||
const response = await fetch("/api/pages/contact");
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.page) {
|
||||
const section = document.getElementById("contactInfoSection");
|
||||
section.innerHTML = `
|
||||
<div class="container" style="max-width: 1000px">
|
||||
${data.page.content}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Update meta tags
|
||||
if (data.page.metatitle) {
|
||||
document.title = data.page.metatitle;
|
||||
}
|
||||
if (data.page.metadescription) {
|
||||
const metaDesc = document.querySelector(
|
||||
'meta[name="description"]'
|
||||
);
|
||||
if (metaDesc) {
|
||||
metaDesc.content = data.page.metadescription;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading contact info:", error);
|
||||
document.getElementById("contactInfoSection").innerHTML =
|
||||
'<div class="container"><p style="text-align:center;">Error loading contact information.</p></div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Load content when page loads
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", loadContactInfo);
|
||||
} else {
|
||||
loadContactInfo();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user