<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Publications</title>
<!– Tailwind CSS CDN for styling –>
<script src=”https://cdn.tailwindcss.com”></script>
<style>
/* Custom styles for Inter font and general overrides */
body {
font-family: ‘Inter’, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f8fafc; /* Light blue-gray background */
color: #334155; /* Dark slate gray text */
}
/* Modal specific styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black overlay */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background-color: #ffffff;
padding: 2.5rem;
border-radius: 1.5rem; /* More rounded corners */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
max-width: 90%;
width: 450px;
transform: translateY(-20px);
transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content {
transform: translateY(0);
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #475569; /* Medium slate gray */
}
.form-group input[type=”text”],
.form-group input[type=”email”] {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #cbd5e1; /* Light gray border */
border-radius: 0.75rem; /* Rounded input fields */
font-size: 1rem;
color: #334155;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input[type=”text”]:focus,
.form-group input[type=”email”]:focus {
outline: none;
border-color: #6366f1; /* Indigo focus color */
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); /* Light indigo shadow */
}
.btn-primary {
background-color: #6366f1; /* Indigo */
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: 600;
transition: background-color 0.2s ease, transform 0.1s ease;
box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}
.btn-primary:hover {
background-color: #4f46e5; /* Darker indigo on hover */
transform: translateY(-1px);
}
.btn-close {
background-color: #e2e8f0; /* Light gray */
color: #475569;
padding: 0.5rem 1rem;
border-radius: 0.75rem;
font-weight: 500;
transition: background-color 0.2s ease;
}
.btn-close:hover {
background-color: #cbd5e1; /* Darker gray on hover */
}
.message-box {
padding: 1rem;
border-radius: 0.75rem;
margin-top: 1.5rem;
text-align: center;
font-weight: 500;
}
.message-box.success {
background-color: #d1fae5; /* Light green */
color: #065f46; /* Dark green */
}
.message-box.error {
background-color: #fee2e2; /* Light red */
color: #991b1b; /* Dark red */
}
.message-box.loading {
background-color: #e0f2fe; /* Light blue */
color: #1e40af; /* Dark blue */
}
/* Publication Card Specific Styles */
.publication-card {
background-color: #ffffff;
border-radius: 1.5rem; /* More rounded corners */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.publication-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
</style>
</head>
<body>
<div class=”container mx-auto px-4 py-12″>
<h1 class=”text-5xl font-extrabold text-center mb-12 text-gray-800″>Our Publications</h1>
<div class=”grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8″>
<!– Publication Card 1 –>
<div class=”publication-card p-6 flex flex-col items-start”>
<h2 class=”text-2xl font-bold mb-3 text-gray-700″>Annual Report 2024</h2>
<p class=”text-gray-600 mb-4 flex-grow”>A comprehensive overview of ARSO’s activities, achievements, and financial performance throughout 2024, highlighting key initiatives in standardization across Africa.</p>
<button class=”btn-primary email-request-btn” data-publication-title=”Annual Report 2024″>Email to Download</button>
</div>
<!– Publication Card 2 –>
<div class=”publication-card p-6 flex flex-col items-start”>
<h2 class=”text-2xl font-bold mb-3 text-gray-700″>Standards Harmonization Guide</h2>
<p class=”text-gray-600 mb-4 flex-grow”>This guide provides detailed insights into the process and benefits of harmonizing standards within the African continent, crucial for fostering regional trade.</p>
<button class=”btn-primary email-request-btn” data-publication-title=”Standards Harmonization Guide”>Email to Download</button>
</div>
<!– Publication Card 3 –>
<div class=”publication-card p-6 flex flex-col items-start”>
<h2 class=”text-2xl font-bold mb-3 text-gray-700″>Quality Infrastructure in Africa</h2>
<p class=”text-gray-600 mb-4 flex-grow”>An in-depth analysis of the current state and future prospects of quality infrastructure development, including metrology, accreditation, and conformity assessment.</p>
<button class=”btn-primary email-request-btn” data-publication-title=”Quality Infrastructure in Africa”>Email to Download</button>
</div>
<!– Publication Card 4 –>
<div class=”publication-card p-6 flex flex-col items-start”>
<h2 class=”text-2xl font-bold mb-3 text-gray-700″>ARSO Strategic Plan 2022-2027</h2>
<p class=”text-gray-600 mb-4 flex-grow”>Our roadmap for the next five years, outlining strategic objectives and key performance indicators to drive standardization and economic integration.</p>
<button class=”btn-primary email-request-btn” data-publication-title=”ARSO Strategic Plan 2022-2027″>Email to Download</button>
</div>
<!– Publication Card 5 –>
<div class=”publication-card p-6 flex flex-col items-start”>
<h2 class=”text-2xl font-bold mb-3 text-gray-700″>Technical Committee Reports: Food Safety</h2>
<p class=”text-gray-600 mb-4 flex-grow”>Summaries of the latest findings and recommendations from our Technical Committee on Food Safety, addressing critical issues for consumer protection.</p>
<button class=”btn-primary email-request-btn” data-publication-title=”Technical Committee Reports: Food Safety”>Email to Download</button>
</div>
<!– Publication Card 6 –>
<div class=”publication-card p-6 flex flex-col items-start”>
<h2 class=”text-2xl font-bold mb-3 text-gray-700″>African Single Market Study</h2>
<p class=”text-gray-600 mb-4 flex-grow”>A comprehensive study on the potential impact and challenges of establishing a unified African single market, with a focus on regulatory frameworks.</p>
<button class=”btn-primary email-request-btn” data-publication-title=”African Single Market Study”>Email to Download</button>
</div>
</div>
</div>
<!– Email Request Modal –>
<div id=”emailRequestModal” class=”modal-overlay”>
<div class=”modal-content”>
<div class=”flex justify-between items-center mb-6″>
<h3 class=”text-3xl font-bold text-gray-800″>Request Publication</h3>
<button class=”btn-close” id=”closeModalBtn”>X</button>
</div>
<form id=”requestForm”>
<div class=”form-group mb-4″>
<label for=”publicationTitle”>Publication Title</label>
<input type=”text” id=”publicationTitle” name=”publicationTitle” readonly class=”bg-gray-100 cursor-not-allowed”>
</div>
<div class=”form-group mb-4″>
<label for=”userName”>Your Name</label>
<input type=”text” id=”userName” name=”userName” placeholder=”Enter your name” required>
</div>
<div class=”form-group mb-6″>
<label for=”userEmail”>Your Email</label>
<input type=”email” id=”userEmail” name=”userEmail” placeholder=”Enter your email” required>
</div>
<button type=”submit” class=”btn-primary w-full”>Send Request</button>
<div id=”messageBox” class=”message-box hidden”></div>
</form>
</div>
</div>
<script>
document.addEventListener(‘DOMContentLoaded’, () => {
const emailRequestButtons = document.querySelectorAll(‘.email-request-btn’);
const modal = document.getElementById(’emailRequestModal’);
const closeModalBtn = document.getElementById(‘closeModalBtn’);
const publicationTitleInput = document.getElementById(‘publicationTitle’);
const requestForm = document.getElementById(‘requestForm’);
const messageBox = document.getElementById(‘messageBox’);
// Function to show modal
const showModal = (title) => {
publicationTitleInput.value = title;
modal.classList.add(‘active’);
messageBox.classList.add(‘hidden’); // Hide previous messages
messageBox.textContent = ”;
};
// Function to hide modal
const hideModal = () => {
modal.classList.remove(‘active’);
requestForm.reset(); // Clear form fields
};
// Event listeners for opening modal
emailRequestButtons.forEach(button => {
button.addEventListener(‘click’, () => {
const publicationTitle = button.dataset.publicationTitle;
showModal(publicationTitle);
});
});
// Event listener for closing modal
closeModalBtn.addEventListener(‘click’, hideModal);
modal.addEventListener(‘click’, (e) => {
if (e.target === modal) {
hideModal();
}
});
// Handle form submission
requestForm.addEventListener(‘submit’, async (e) => {
e.preventDefault();
const userName = document.getElementById(‘userName’).value.trim();
const userEmail = document.getElementById(‘userEmail’).value.trim();
const publicationTitle = publicationTitleInput.value.trim();
// Basic client-side validation
if (!userName || !userEmail || !publicationTitle) {
showMessage(‘Please fill in all required fields.’, ‘error’);
return;
}
if (!validateEmail(userEmail)) {
showMessage(‘Please enter a valid email address.’, ‘error’);
return;
}
showMessage(‘Sending request…’, ‘loading’);
// In a real WordPress environment, `ajaxurl` is a global JS variable
// defined by WordPress that points to `wp-admin/admin-ajax.php`.
// For this standalone example, we’ll simulate it.
const ajaxUrl = ‘YOUR_WORDPRESS_AJAX_URL_HERE’; // Replace with actual WordPress AJAX URL
// Data to send to the server
const formData = new FormData();
formData.append(‘action’, ‘request_publication_download’); // WordPress AJAX action hook
formData.append(‘name’, userName);
formData.append(’email’, userEmail);
formData.append(‘publication_title’, publicationTitle);
// Add a nonce for security in a real WordPress setup
// formData.append(‘security’, ‘<?php echo wp_create_nonce(“publication_request_nonce”); ?>’);
try {
// Simulate network request for demonstration purposes
// In a real scenario, you’d use:
// const response = await fetch(ajaxUrl, {
// method: ‘POST’,
// body: formData,
// });
// const data = await response.json();
// — SIMULATED RESPONSE START —
await new Promise(resolve => setTimeout(resolve, 1500)); // Simulate network delay
const data = { success: true, message: ‘Your request has been sent successfully! We will email you the download link shortly.’ };
// const data = { success: false, message: ‘Failed to send request. Please try again later.’ };
// — SIMULATED RESPONSE END —
if (data.success) {
showMessage(data.message, ‘success’);
setTimeout(hideModal, 3000); // Hide modal after 3 seconds on success
} else {
showMessage(data.message || ‘An unknown error occurred.’, ‘error’);
}
} catch (error) {
console.error(‘Error:’, error);
showMessage(‘There was a problem sending your request. Please try again.’, ‘error’);
}
});
// Helper function to display messages
function showMessage(msg, type) {
messageBox.textContent = msg;
messageBox.className = `message-box ${type}`; // Reset classes and add new type
messageBox.classList.remove(‘hidden’);
}
// Basic email validation regex
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
});
</script>
</body>
</html>