<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>K-Pop Color Coded Lyrics</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
transition: background 0.3s;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.members {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-bottom: 40px;
}
.member-box {
text-align: center;
width: 150px;
position: relative;
}
.member-img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 10px;
transition: filter 0.3s;
}
.member-name {
margin: 10px 0 5px;
font-weight: bold;
cursor: pointer;
border: 1px solid transparent;
padding: 2px;
}
.member-name:hover {
border: 1px solid #ccc;
}
.member-color {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
border: 1px solid #000;
cursor: pointer;
}
.lyrics-bar {
background: #333;
color: #fff;
text-align: center;
padding: 10px;
font-family: 'Times New Roman', serif;
font-size: 24px;
margin-bottom: 10px;
border-radius: 5px;
}
.lyrics {
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
white-space: pre-wrap;
min-height: 200px;
}
.controls {
margin-bottom: 20px;
text-align: center;
}
.text-controls {
margin-bottom: 10px;
text-align: center;
}
button, input, select {
padding: 10px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background: #333;
color: #fff;
cursor: pointer;
}
button:hover {
background: #555;
}
[contenteditable]:focus {
outline: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="controls">
<button onclick="toggleBW()">Toggle Black & White</button>
<button onclick="addMember()">Add New Member</button>
<input type="color" id="bgColor" onchange="changeBgColor()">
<input type="file" id="bgImage" accept="image/*" onchange="changeBgImage()">
<button onclick="resetBg()">Reset Background</button>
</div>
<div class="members" id="members"></div>
<div class="text-controls">
<button onclick="document.execCommand('bold')">Bold</button>
<button onclick="document.execCommand('italic')">Italic</button>
<button onclick="document.execCommand('underline')">Underline</button>
<input type="color" id="textColor" onchange="document.execCommand('foreColor', false, this.value)">
</div>
<div class="lyrics-bar">Lyrics</div>
<div class="lyrics" contenteditable="true" id="lyrics">
[Member 1] Lyrics here in their color...
[Member 2] More lyrics here...
[All] Group parts here...
</div>
</div>
<script>
// Member data
let members = [
{ name: "Member 1", img: "https://via.placeholder.com/150", color: "#ff4d4d" },
{ name: "Member 2", img: "https://via.placeholder.com/150", color: "#4d94ff" },
{ name: "Member 3", img: "https://via.placeholder.com/150", color: "#4dff4d" },
];
// Render members
function renderMembers() {
const membersDiv = document.getElementById("members");
membersDiv.innerHTML = members.map((member, index) => `
<div class="member-box" data-index="${index}">
<img src="${member.img}" class="member-img">
<div class="member-name" contenteditable="true" onblur="saveName(${index}, this.innerText)">${member.name}</div>
<div class="member-color" style="background-color: ${member.color};" onclick="changeColor(${index})"></div>
</div>
`).join("");
}
// Save new name
function saveName(index, newName) {
if (newName.trim()) {
members[index].name = newName.trim();
renderMembers();
}
}
// Change member color
function changeColor(index) {
const input = document.createElement("input");
input.type = "color";
input.value = members[index].color;
input.onchange = () => {
members[index].color = input.value;
renderMembers();
};
input.click();
}
// Add new member
function addMember() {
const newMember = {
name: `Member ${members.length + 1}`,
img: "https://via.placeholder.com/150",
color: `#${Math.floor(Math.random()*16777215).toString(16).padStart(6, "0")}`
};
members.push(newMember);
renderMembers();
}
// Toggle black and white filter
function toggleBW() {
const imgs = document.querySelectorAll(".member-img");
imgs.forEach(img => {
img.style.filter = img.style.filter === "grayscale(100%)" ? "" : "grayscale(100%)";
});
}
// Change background color
function changeBgColor() {
const color = document.getElementById("bgColor").value;
document.body.style.backgroundImage = "";
document.body.style.backgroundColor = color;
}
// Change background image
function changeBgImage() {
const file = document.getElementById("bgImage").files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
document.body.style.backgroundImage = `url(${e.target.result})`;
document.body.style.backgroundSize = "cover";
document.body.style.backgroundPosition = "center";
};
reader.readAsDataURL(file);
}
}
// Reset background
function resetBg() {
document.body.style.backgroundImage = "";
document.body.style.backgroundColor = "#f0f0f0";
document.getElementById("bgColor").value = "#f0f0f0";
document.getElementById("bgImage").value = "";
}
// Initialize
renderMembers();
</script>
</body>
</html>