Colour24 - Color Trading
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 1rem 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 2rem;
max-width: 800px;
margin: auto;
}
#color-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
#color-container div {
width: 50px;
height: 50px;
border: 1px solid #ccc;
}
#trade-button {
display: block;
margin: 1rem auto;
padding: 0.5rem 2rem;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem 0;
}
form {
display: flex;
flex-direction: column;
max-width: 300px;
margin: auto;
}
label, input, button {
margin-bottom: 10px;
}
button {
padding: 0.5rem;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}
document.addEventListener('DOMContentLoaded', () => {
const colorContainer = document.getElementById('color-container');
const tradeButton = document.getElementById('trade-button');
// Mock colors for demonstration
const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A5'];
colors.forEach(color => {
const colorDiv = document.createElement('div');
colorDiv.style.backgroundColor = color;
colorContainer.appendChild(colorDiv);
});
tradeButton.addEventListener('click', () => {
alert('Trade functionality will be implemented here.');
});
// Simple login functionality for demonstration
const loginForm = document.getElementById('login-form');
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
alert(`Logged in as ${username}`);
});
});
Comments
Post a Comment