<!DOCTYPE html>

<head>

<title>Official Barbados Carolinas Legacy Foundation Merchandise</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Georgia', serif;

background: linear-gradient(135deg, #0066cc 0%, #ffcc00 25%, #0066cc 50%, #00a652 75%, #ffcc00 100%);

background-size: 400% 400%;

animation: tropicalGradient 15s ease infinite;

min-height: 100vh;

color: #333;

line-height: 1.6;

}

@keyframes tropicalGradient {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 20px;

background: rgba(255, 255, 255, 0.95);

margin-top: 20px;

margin-bottom: 20px;

border-radius: 20px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

backdrop-filter: blur(10px);

}

header {

text-align: center;

margin-bottom: 40px;

padding: 30px 20px;

background: linear-gradient(45deg, #0066cc, #ffcc00);

border-radius: 15px;

color: white;

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}

h1 {

font-size: 2.5rem;

margin-bottom: 10px;

font-weight: bold;

}

.subtitle {

font-size: 1.2rem;

opacity: 0.9;

}

.about-section {

background: rgba(255, 204, 0, 0.1);

padding: 25px;

border-radius: 15px;

margin-bottom: 40px;

border-left: 5px solid #ffcc00;

}

.about-section h2 {

color: #0066cc;

margin-bottom: 15px;

font-size: 1.5rem;

}

.products-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 30px;

margin-bottom: 40px;

}

.product-card {

background: white;

border-radius: 20px;

padding: 25px;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

transition: transform 0.3s ease, box-shadow 0.3s ease;

border: 3px solid transparent;

background-clip: padding-box;

position: relative;

display: flex;

flex-direction: column;

}

.product-card::before {

content: '';

position: absolute;

inset: 0;

padding: 3px;

background: linear-gradient(45deg, #0066cc, #ffcc00, #00a652);

border-radius: 20px;

mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

mask-composite: xor;

-webkit-mask-composite: xor;

z-index: -1;

}

.product-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);

}

.product-image {

width: 100%;

height: 250px;

object-fit: cover;

border-radius: 15px;

margin-bottom: 20px;

background: #f8f9fa;

}

.product-title {

font-size: 1.3rem;

font-weight: bold;

color: #0066cc;

margin-bottom: 10px;

}

.product-price {

font-size: 1.5rem;

font-weight: bold;

color: #00a652;

margin-bottom: 15px;

}

.shipping-note {

font-size: 0.9rem;

color: #666;

margin-bottom: 20px;

font-style: italic;

}

.product-card .selectors {

margin-top: auto;

}

.size-selector {

margin-bottom: 20px;

}

.size-selector label {

display: block;

margin-bottom: 8px;

font-weight: bold;

color: #0066cc;

}

.size-selector select {

width: 100%;

padding: 12px;

border: 2px solid #0066cc;

border-radius: 10px;

font-size: 1rem;

background: white;

color: #333;

}

.quantity-selector {

margin-bottom: 20px;

}

.quantity-selector label {

display: block;

margin-bottom: 8px;

font-weight: bold;

color: #0066cc;

}

.quantity-input {

width: 80px;

padding: 12px;

border: 2px solid #0066cc;

border-radius: 10px;

font-size: 1rem;

text-align: center;

}

.stock-status {

padding: 8px 15px;

border-radius: 20px;

font-size: 0.9rem;

font-weight: bold;

margin-bottom: 15px;

text-align: center;

}

.in-stock {

background: #d4edda;

color: #155724;

border: 1px solid #c3e6cb;

}

.out-of-stock {

background: #f8d7da;

color: #721c24;

border: 1px solid #f5c6cb;

}

.add-to-cart {

width: 100%;

padding: 15px;

background: linear-gradient(45deg, #00a652, #0066cc);

color: white;

border: none;

border-radius: 12px;

font-size: 1.1rem;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

text-transform: uppercase;

letter-spacing: 1px;

}

.add-to-cart:hover:not(:disabled) {

transform: translateY(-2px);

box-shadow: 0 5px 15px rgba(0, 166, 82, 0.4);

}

.add-to-cart:disabled {

background: #ccc;

cursor: not-allowed;

}

.cart-summary {

background: linear-gradient(135deg, #0066cc, #00a652);

color: white;

padding: 30px;

border-radius: 20px;

margin-top: 40px;

text-align: center;

}

.cart-items {

margin-bottom: 20px;

}

.cart-item {

display: flex;

justify-content: space-between;

align-items: center;

padding: 10px 0;

border-bottom: 1px solid rgba(255, 255, 255, 0.3);

}

.cart-total {

font-size: 1.5rem;

font-weight: bold;

margin-top: 20px;

padding-top: 20px;

border-top: 2px solid rgba(255, 255, 255, 0.3);

}

.checkout-buttons {

display: flex;

gap: 15px;

margin-top: 30px;

flex-wrap: wrap;

justify-content: center;

}

.checkout-btn {

flex: 1;

min-width: 200px;

padding: 15px 25px;

border: 2px solid white;

background: transparent;

color: white;

border-radius: 12px;

font-size: 1rem;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

text-transform: uppercase;

}

.checkout-btn:hover {

background: white;

color: #0066cc;

transform: translateY(-2px);

}

.contact-section {

text-align: center;

margin-top: 40px;

padding: 25px;

background: rgba(255, 204, 0, 0.1);

border-radius: 15px;

}

.contact-section h3 {

color: #0066cc;

margin-bottom: 10px;

}

.contact-section a {

color: #00a652;

text-decoration: none;

font-weight: bold;

font-size: 1.1rem;

}

.contact-section a:hover {

text-decoration: underline;

}

.hidden {

display: none;

}

@media (max-width: 768px) {

.container {

margin: 10px;

padding: 15px;

border-radius: 15px;

}

h1 {

font-size: 1.8rem;

}

.products-grid {

grid-template-columns: 1fr;

gap: 20px;

}

.product-card {

padding: 20px;

}

.checkout-buttons {

flex-direction: column;

}

.checkout-btn {

min-width: auto;

}

.notification {

position: fixed;

top: 20px;

right: 20px;

padding: 15px 25px;

background: #00a652;

color: white;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

z-index: 1000;

transform: translateX(400px);

transition: transform 0.3s ease;

}

.notification.show {

transform: translateX(0);

}

.message-box {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: white;

padding: 30px;

border-radius: 15px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

z-index: 1001;

text-align: center;

border: 3px solid #0066cc;

}

.message-box p {

margin-bottom: 20px;

font-size: 1.1rem;

}

.message-box button {

padding: 10px 20px;

border-radius: 8px;

border: none;

background: #0066cc;

color: white;

font-weight: bold;

cursor: pointer;

}

</style>

</head>

<body>

<h1>Official Barbados Carolinas Legacy Foundation Merchandise</h1>

<p class="subtitle">Celebrating the Bridge Between Barbados and the Carolinas</p>

</header>

<h2>About Our Foundation</h2>

<p>The Barbados and Carolinas Legacy Foundation was incorporated on June 18th, 2012 to facilitate business, education, historical and cultural collaboration between Barbados and the Carolinas. We celebrate and preserve the rich historical links and cultural influences between these beautiful regions, bridging the present with the past through meaningful connections and shared heritage.</p>

</div>

<div class="product-title">12oz Silicone Commemorative Rum Glass</div>

<div class="shipping-note">+ $5.00 shipping & handling</div>

<div class="stock-status in-stock">✓ In Stock</div>

<label for="quantity-glass">Quantity:</label>

</div>

Add to Cart

</button>

</div>

<div class="product-title">White Barbados Carolinas Legacy Foundation T-Shirt</div>

<div class="shipping-note">+ $5.00 shipping & handling</div>

<div class="stock-status in-stock">✓ In Stock</div>

<option value="S">Small</option>

<option value="M">Medium</option>

<option value="L">Large</option>

<option value="XL">Extra Large</option>

<option value="XXL">Double XL</option>

</select>

</div>

<label for="quantity-white-shirt">Quantity:</label>

</div>

Add to Cart

</button>

</div>

<div class="product-title">Black Barbados Comes to Charleston T-Shirt</div>

<div class="shipping-note">+ $5.00 shipping & handling</div>

<div class="stock-status in-stock">✓ In Stock</div>

<option value="S">Small</option>

<option value="M">Medium</option>

<option value="L">Large</option>

<option value="XL">Extra Large</option>

<option value="XXL">Double XL</option>

</select>

</div>

<label for="quantity-black-shirt">Quantity:</label>

</div>

Add to Cart

</button>

</div>

<h3>Your Order Summary</h3>

<div class="cart-total" id="cart-total">Total: $0.00</div>

<button class="checkout-btn" onclick="checkoutWithSquare()">Pay with Square</button>

<button class="checkout-btn" onclick="checkoutWithZelle()">Pay with Zelle</button>

</div>

<h3>Questions or Need Help?</h3>

<p>Contact us at: <a href="mailto:info@barbadosventures.com">info@barbadosventures.com</a></p>

</div>

Item added to cart!

</div>

let cart = [];

const inventory = {

'rum-glass': 50,

'white-shirt': {'S': 20, 'M': 25, 'L': 30, 'XL': 20, 'XXL': 15},

'black-shirt': {'S': 20, 'M': 25, 'L': 30, 'XL': 20, 'XXL': 15}

};

function showMessageBox(message) {

const container = document.getElementById('message-box-container');

const messageBox = document.createElement('div');

messageBox.className = 'message-box';

const messageText = document.createElement('p');

messageText.textContent = message;

const closeButton = document.createElement('button');

closeButton.textContent = 'OK';

closeButton.onclick = () => {

container.innerHTML = '';

};

messageBox.appendChild(messageText);

messageBox.appendChild(closeButton);

container.appendChild(messageBox);

}

function addToCart(productId, productName, price) {

const quantityInput = document.querySelector(`input[data-product="${productId}"]`);

const sizeSelect = document.querySelector(`select[data-product="${productId}"]`);

const quantity = parseInt(quantityInput.value);

const size = sizeSelect ? sizeSelect.value : null;

// --- Inventory Check ---

let availableStock;

if (size) {

availableStock = inventory[productId][size];

} else {

availableStock = inventory[productId];

}

if (quantity > availableStock) {

showMessageBox('Sorry, there is not enough stock for the quantity you selected.');

return;

}

// --- Add to Cart ---

const cartItemId = size ? `${productId}-${size}` : productId;

const existingItem = cart.find(item => item.id === cartItemId);

if (existingItem) {

existingItem.quantity += quantity;

} else {

cart.push({

id: cartItemId,

name: productName + (size ? ` (${size})` : ''),

price: price,

quantity: quantity,

size: size,

productId: productId

});

}

// --- Update Inventory ---

if (size) {

inventory[productId][size] -= quantity;

} else {

inventory[productId] -= quantity;

}

updateCartDisplay();

showNotification('Item added to cart!');

updateStockDisplay();

}

function updateCartDisplay() {

const cartSummary = document.getElementById('cart-summary');

const cartItemsContainer = document.getElementById('cart-items');

const cartTotalEl = document.getElementById('cart-total');

if (cart.length === 0) {

cartSummary.classList.add('hidden');

return;

}

cartSummary.classList.remove('hidden');

cartItemsContainer.innerHTML = '';

let subtotal = 0;

cart.forEach(item => {

const itemTotal = item.price * item.quantity;

subtotal += itemTotal;

const itemDiv = document.createElement('div');

itemDiv.className = 'cart-item';

itemDiv.innerHTML = `

<span>${item.name} (x${item.quantity})</span>

<span>$${itemTotal.toFixed(2)}</span>

cartItemsContainer.appendChild(itemDiv);

});

const shipping = 5.00 * cart.length; // $5 per item

const total = subtotal + shipping;

const shippingDiv = document.createElement('div');

shippingDiv.className = 'cart-item';

shippingDiv.innerHTML = `

<span>Shipping & Handling</span>

<span>$${shipping.toFixed(2)}</span>

cartItemsContainer.appendChild(shippingDiv);

cartTotalEl.textContent = `Total: $${total.toFixed(2)}`;

}

function updateStockDisplay() {

Object.keys(inventory).forEach(productId => {

const productCard = document.querySelector(`[data-product="${productId}"]`).closest('.product-card');

if (!productCard) return;

const stockElement = productCard.querySelector('.stock-status');

const addButton = productCard.querySelector('.add-to-cart');

let totalStock = 0;

if (typeof inventory[productId] === 'object') {

totalStock = Object.values(inventory[productId]).reduce((sum, val) => sum + val, 0);

} else {

totalStock = inventory[productId];

}

if (totalStock <= 0) {

stockElement.className = 'stock-status out-of-stock';

stockElement.textContent = '✗ Out of Stock';

if (addButton) addButton.disabled = true;

} else {

stockElement.className = 'stock-status in-stock';

stockElement.textContent = '✓ In Stock';

if (addButton) addButton.disabled = false;

}

});

}

function showNotification(message) {

const notification = document.getElementById('notification');

notification.textContent = message;

notification.classList.add('show');

setTimeout(() => {

notification.classList.remove('show');

}, 3000);

}

function generateOrderDetails() {

let details = 'Order Details:\n\n';

let subtotal = 0;

cart.forEach(item => {

const itemTotal = item.price * item.quantity;

subtotal += itemTotal;

details += `• ${item.name} - Qty: ${item.quantity} - $${itemTotal.toFixed(2)}\n`;

});

const shipping = 5.00 * cart.length;

const total = subtotal + shipping;

details += `\nSubtotal: $${subtotal.toFixed(2)}`;

details += `\nShipping & Handling: $${shipping.toFixed(2)}`;

details += `\n\nTOTAL: $${total.toFixed(2)}`;

return {details, total};

}

function checkoutWithSquare() {

if (cart.length === 0) {

showMessageBox('Your cart is empty!');

return;

}

const { details } = generateOrderDetails();

const subject = encodeURIComponent('BCLF Merchandise Order - Square Payment');

const body = encodeURIComponent(details + '\n\nPlease send me a Square invoice for this order.');

window.location.href = `mailto:info@barbadosventures.com?subject=${subject}&body=${body}`;

}

function checkoutWithZelle() {

if (cart.length === 0) {

showMessageBox('Your cart is empty!');

return;

}

const { details, total } = generateOrderDetails();

const zelleMessage = `Please send a Zelle payment of $${total.toFixed(2)} to info@barbadosventures.com.\n\nInclude your name and "BCLF Merch" in the memo.\n\nAfter sending, please forward your Zelle confirmation to this email address to confirm your order.\n\n`

const subject = encodeURIComponent('BCLF Merchandise Order - Zelle Payment');

const body = encodeURIComponent(zelleMessage + details);

window.location.href = `mailto:info@barbadosventures.com?subject=${subject}&body=${body}`;

}

// Initial stock check on page load

document.addEventListener('DOMContentLoaded', updateStockDisplay);

</script>

</body>

</html>