test | arcabags

<p class="mb-2 whitespace-pre-wrap">Next you decide how your bag will look.</p>
<p class="mb-2 whitespace-pre-wrap">You can keep it simple with one main fabric colour for the whole bag.<br />Or you can mix two colours by adding a secondary fabric panel.</p>
<ul>
<li>Main fabric: base/top colour of the bag</li>
<li>Secondary fabric (optional): bottom colour of the bag</li>
</ul>


<div id="arca-color-selector-root" style="margin-top: 1.5rem; margin-bottom: 2rem;">

<style>
/* --- Color selector styles --- */
#arca-color-selector-root .swatch-grid {
background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
background-size: 20px 20px;
}
#arca-color-selector-root .color-card {
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
background: #ffffff;
border-radius: 1rem;
border: 1px solid #e5e7eb;
padding: 0.5rem;
cursor: pointer;
position: relative;
}
#arca-color-selector-root .color-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
#arca-color-selector-root .selected {
outline: 3px solid #3b82f6;
outline-offset: 2px;
border-color: #bfdbfe;
}
#arca-color-selector-root .pattern-grid-white {
background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
background-size: 8px 8px;
background-color: white;
}
#arca-color-selector-root .pattern-grid-cranberry {
background-image: linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px);
background-size: 8px 8px;
background-color: #B43931;
}
#arca-color-selector-root .pattern-grid-night {
background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 10px 10px;
background-color: #1E1E1E;
}
#arca-color-selector-root .swatch-inner {
width: 100%;
padding-top: 100%; /* square */
border-radius: 0.75rem;
position: relative;
box-shadow: inset 0 0 0 1px rgba(15,23,42,0.05);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#arca-color-selector-root .swatch-inner-content {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
#arca-color-selector-root .selection-panel {
margin-top: 1.5rem;
padding: 1rem;
border-radius: 0.75rem;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
#arca-color-selector-root .selection-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #94a3b8;
font-weight: 700;
}
#arca-color-selector-root .selection-text {
margin-top: 0.25rem;
font-size: 1rem;
font-weight: 600;
color: #475569;
}
#arca-color-selector-root .selection-button {
background: #020617;
color: #ffffff;
padding: 0.75rem 1.75rem;
border-radius: 999px;
border: none;
font-weight: 700;
font-size: 0.875rem;
cursor: pointer;
white-space: nowrap;
}
#arca-color-selector-root .selection-button:hover {
background: #000000;
}
#arca-color-selector-root .swatch-label-hex {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #94a3b8;
}
#arca-color-selector-root .swatch-label-name {
font-size: 0.875rem;
font-weight: 700;
color: #1f2933;
}
#arca-color-selector-root .swatch-id-badge {
background: #f1f5f9;
font-size: 0.625rem;
font-weight: 900;
width: 1.25rem;
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #64748b;
}
@media (min-width: 640px) {
#arca-color-selector-root .swatch-grid-layout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
}
@media (min-width: 768px) {
#arca-color-selector-root .swatch-grid-layout {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 639px) {
#arca-color-selector-root .swatch-grid-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
}
</style>

<div style="border-radius: 1.5rem; border: 1px solid #e5e7eb; background: #ffffff; padding: 1.5rem;">
<div style="border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; margin-bottom: 1.5rem;">
<h3 style="font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0;">Select your bag colour</h3>
<p style="font-size: 0.875rem; color: #64748b; margin-top: 0.25rem;">Pick the main fabric colour for your custom frame bag.</p>
</div>

<div id="swatchContainer" class="swatch-grid-layout">

</div>

<div class="selection-panel">
<div>
<div class="selection-label">Selected colour</div>
<div id="selectionDisplay" class="selection-text">Please select a colour</div>
</div>
<button type="button" class="selection-button" id="confirmSelectionButton">
Confirm selection
</button>
</div>
</div>

<script>
(function() {
var colors = [
{ name: "Baltic Teal", hex: "#007374", id: "1" },
{ name: "Coal Black", hex: "#1E1E1E", id: "2" },
{ name: "Olive Green", hex: "#696645", id: "3" },
{ name: "Brick Red", hex: "#B43931", id: "11" },
{ name: "Deep Forest", hex: "#345939", id: "4" },
{ name: "Horizon Blue", hex: "#2E84B1", id: "8" },
{ name: "Desert Tan", hex: "#C7AB7B", id: "7" },
{ name: "Slate Grey", hex: "#72797E", id: "16" },
{ name: "Midnight Navy", hex: "#1D2947", id: "6" },
{ name: "Sun Yellow", hex: "#FFCF40", id: "9" },
{ name: "Ice White", hex: "#FFFFFF", id: "10", pattern: "pattern-grid-white" },
{ name: "Magenta Punch", hex: "#D13E87", id: "15" },
{ name: "Indigo Violet", hex: "#5F2E74", id: "7" },
{ name: "Cranberry", hex: "#B43931", id: "16", pattern: "pattern-grid-cranberry" },
{ name: "Night Grid", hex: "#1E1E1E", id: "11", pattern: "pattern-grid-night" },
{ name: "Custom Sloth", hex: "#FFFFFF", id: "Icon", icon: "🦥" }
];

var container = document.getElementById('swatchContainer');
var display = document.getElementById('selectionDisplay');
var confirmBtn = document.getElementById('confirmSelectionButton');
var selectedColor = null;

if (!container || !display) return;

colors.forEach(function(color) {
var card = document.createElement('div');
card.className = 'color-card';

var swatch = document.createElement('div');
swatch.className = 'swatch-inner ' + (color.pattern || '');
swatch.style.backgroundColor = color.hex;

var swatchContent = document.createElement('div');
swatchContent.className = 'swatch-inner-content';

if (color.icon) {
var iconSpan = document.createElement('span');
iconSpan.textContent = color.icon;
iconSpan.style.fontSize = '2.5rem';
iconSpan.style.filter = 'grayscale(80%)';
iconSpan.style.opacity = '0.6';
swatchContent.appendChild(iconSpan);
}

swatch.appendChild(swatchContent);

var label = document.createElement('div');
label.style.marginTop = '0.75rem';
label.style.display = 'flex';
label.style.justifyContent = 'space-between';
label.style.alignItems = 'flex-end';
label.style.gap = '0.5rem';

label.innerHTML = ''
+ '<div>'
+ '<p class="swatch-label-hex">' + color.hex + '</p>'
+ '<p class="swatch-label-name">' + color.name + '</p>'
+ '</div>'
+ '<span class="swatch-id-badge">' + color.id + '</span>';

card.appendChild(swatch);
card.appendChild(label);

card.onclick = function() {
var allCards = container.querySelectorAll('.color-card');
for (var i = 0; i < allCards.length; i++) {
allCards[i].classList.remove('selected');
}
card.classList.add('selected');
selectedColor = color;
display.textContent = color.name + ' (' + color.hex + ')';
};

container.appendChild(card);
});

if (confirmBtn) {
confirmBtn.addEventListener('click', function() {
if (!selectedColor) {
alert('Please select a colour first.');
return;
}
alert('Selected: ' + selectedColor.name + ' (' + selectedColor.hex + '). You can mention this in the order notes so we match your bag.');
});
}
})();
</script>
</div>


<br />
<hr />