mirror of
https://github.com/Alvin-Zilverstand/challenge-11.git
synced 2026-03-06 11:06:21 +01:00
Refactor index.html to remove inline Tailwind configuration and link to external JS file. Enhance script.js with modal functionality for 'Get Started' and 'Learn More' buttons, including dynamic content and hover effects for cards.
This commit is contained in:
Alvin
21
index.html
21
index.html
@@ -8,27 +8,10 @@
|
|||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<!-- Tailwind CSS -->
|
<!-- Tailwind CSS -->
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
animation: {
|
|
||||||
'float': 'float 3s ease-in-out infinite',
|
|
||||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
||||||
'bounce-slow': 'bounce 3s infinite',
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
float: {
|
|
||||||
'0%, 100%': { transform: 'translateY(0)' },
|
|
||||||
'50%': { transform: 'translateY(-10px)' },
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<!-- Custom CSS -->
|
<!-- Custom CSS -->
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
<!-- Custom JS -->
|
||||||
|
<script src="js/tailwind.config.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gradient-to-br from-gray-100 to-blue-50">
|
<body class="bg-gradient-to-br from-gray-100 to-blue-50">
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
|
|||||||
139
js/script.js
139
js/script.js
@@ -18,6 +18,66 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Get Started button functionality
|
||||||
|
const getStartedBtn = document.querySelector('.btn-primary');
|
||||||
|
if (getStartedBtn) {
|
||||||
|
getStartedBtn.addEventListener('click', () => {
|
||||||
|
// Create and show modal
|
||||||
|
const modal = document.createElement('div');
|
||||||
|
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in';
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 transform hover:scale-105 transition-all duration-300">
|
||||||
|
<h3 class="text-2xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Get Started</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Choose how you'd like to get started with our services:</p>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<button class="w-full btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300">
|
||||||
|
Start Free Trial
|
||||||
|
</button>
|
||||||
|
<button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">
|
||||||
|
Schedule Demo
|
||||||
|
</button>
|
||||||
|
<button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">
|
||||||
|
Contact Sales
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-colors duration-300" onclick="this.closest('.fixed').remove()">
|
||||||
|
<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"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
|
// Add click event to close modal when clicking outside
|
||||||
|
modal.addEventListener('click', (e) => {
|
||||||
|
if (e.target === modal) {
|
||||||
|
modal.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add click events to modal buttons
|
||||||
|
const modalButtons = modal.querySelectorAll('button:not(:last-child)');
|
||||||
|
modalButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
const action = button.textContent.trim();
|
||||||
|
switch(action) {
|
||||||
|
case 'Start Free Trial':
|
||||||
|
window.location.href = '#contact';
|
||||||
|
break;
|
||||||
|
case 'Schedule Demo':
|
||||||
|
alert('Demo scheduling feature coming soon!');
|
||||||
|
break;
|
||||||
|
case 'Contact Sales':
|
||||||
|
window.location.href = '#contact';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
modal.remove();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Form submission handling
|
// Form submission handling
|
||||||
const contactForm = document.querySelector('form');
|
const contactForm = document.querySelector('form');
|
||||||
if (contactForm) {
|
if (contactForm) {
|
||||||
@@ -70,4 +130,83 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add hover effects to cards
|
||||||
|
const cards = document.querySelectorAll('.card, .bg-white.rounded-lg');
|
||||||
|
cards.forEach(card => {
|
||||||
|
card.addEventListener('mouseenter', () => {
|
||||||
|
card.style.transform = 'translateY(-5px)';
|
||||||
|
card.style.boxShadow = '0 10px 15px -3px rgba(0,0,0,0.1)';
|
||||||
|
});
|
||||||
|
card.addEventListener('mouseleave', () => {
|
||||||
|
card.style.transform = 'translateY(0)';
|
||||||
|
card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Learn More button functionality
|
||||||
|
const learnMoreBtn = document.querySelector('.btn-outline-secondary');
|
||||||
|
if (learnMoreBtn) {
|
||||||
|
learnMoreBtn.addEventListener('click', () => {
|
||||||
|
// Create and show modal
|
||||||
|
const modal = document.createElement('div');
|
||||||
|
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in';
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="bg-white rounded-lg p-8 max-w-2xl w-full mx-4 transform hover:scale-105 transition-all duration-300">
|
||||||
|
<h3 class="text-3xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">About Our Services</h3>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
|
||||||
|
<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="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Lightning Fast Performance</h4>
|
||||||
|
<p class="text-gray-600">Our platform is optimized for speed and efficiency, ensuring your business operations run smoothly without any delays.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
|
||||||
|
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Enterprise-Grade Security</h4>
|
||||||
|
<p class="text-gray-600">Your data is protected with state-of-the-art encryption and security measures, ensuring complete privacy and compliance.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
|
||||||
|
<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="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Cloud Integration</h4>
|
||||||
|
<p class="text-gray-600">Seamlessly connect with your existing cloud infrastructure and scale your operations as needed.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-8 flex justify-end space-x-4">
|
||||||
|
<button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300" onclick="this.closest('.fixed').remove()">
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300" onclick="window.location.href='#contact'">
|
||||||
|
Get Started Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
|
// Add click event to close modal when clicking outside
|
||||||
|
modal.addEventListener('click', (e) => {
|
||||||
|
if (e.target === modal) {
|
||||||
|
modal.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
17
js/tailwind.config.js
Normal file
17
js/tailwind.config.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
animation: {
|
||||||
|
'float': 'float 3s ease-in-out infinite',
|
||||||
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
'bounce-slow': 'bounce 3s infinite',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
float: {
|
||||||
|
'0%, 100%': { transform: 'translateY(0)' },
|
||||||
|
'50%': { transform: 'translateY(-10px)' },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user