<!DOCTYPE html>
<html>
<head>
<title>Build your own robot game</title>
</head>
<body>

<div class="studio">
  <header class="header">
    <div>
      <div class="eyebrow">THE LITTLE ARCADE / CREATIVE MODE</div>
      <h1>Tiny Toy Factory</h1>
      <p>Build a little friend, just the way you like!</p>
    </div>
    <div class="header-actions">
      <button id="randomBtn" class="soft-btn" type="button">Surprise Me</button>
      <button id="resetBtn" class="soft-btn" type="button">Reset</button>
    </div>
  </header>

<main class="layout">
    <section class="stage">
      <div class="stage-top">
        <span class="stage-label">ROBOT DESIGN STATION</span>
        <span class="live-pill"><i></i> LIVE PREVIEW</span>
      </div>

<div class="stage-footer">
        <span id="robotName">Minty Bot</span>
        <span>MODEL 001</span>
      </div>
    </section>

<section class="customizer">
      <div class="panel-header">
        <div>
          <div class="eyebrow">YOUR WORKSHOP</div>
          <h2>Make it yours</h2>
        </div>
        <span class="panel-icon">&#9881;</span>
      </div>

<div class="group">
        <label>HEAD SHAPE</label>
        <div id="heads" class="choices"></div>
      </div>

<div class="group">
        <label>BODY COLOR</label>
        <div id="colors" class="choices"></div>
      </div>

<div class="group">
        <label>ACCESSORY</label>
        <div id="accessories" class="choices"></div>
      </div>

<div class="group">
        <label>EXPRESSION</label>
        <div id="faces" class="choices"></div>
      </div>

<div class="group">
        <label>MAKE YOUR ROBOT MOVE</label>
        <div class="animation-buttons">
          <button data-action="dance" type="button">Dance</button>
          <button data-action="wave" type="button">Wave</button>
          <button data-action="jump" type="button">Jump</button>
        </div>
      </div>

<button id="saveBtn" class="save-btn" type="button">
        Save My Robot
      </button>
      <div id="message" class="message" aria-live="polite">
        Your imagination is in charge!
      </div>
    </section>
  </main>

<section class="gallery-panel">
    <div class="gallery-heading">
      <div>
        <div class="eyebrow">YOUR COLLECTION</div>
        <h2>My Little Robots</h2>
      </div>
      <span id="galleryCount">0 / 8 saved</span>
    </div>
    <div id="gallery" class="gallery"></div>
  </section>
</div>

</body>
</html>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 28px 18px 55px;
  background: #f9f6fc;
  color: #665676;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

button {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.studio {
  max-width: 1080px;
  margin: 0 auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.eyebrow {
  color: #b29ac6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

h1 {
  font-size: clamp(29px, 5vw, 41px);
  letter-spacing: -1.5px;
  margin: 6px 0;
}

.header p {
  color: #a798b3;
  font-size: 13px;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 9px;
}

.soft-btn {
  border: 1px solid #e9dfef;
  background: white;
  color: #886d9c;
  border-radius: 12px;
  padding: 12px 15px;
  font-size: 12px;
  font-weight: 900;
}

.soft-btn:hover {
  background: #f0e6f8;
}

.layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.stage {
  position: relative;
  min-height: 530px;
  overflow: hidden;
  background: linear-gradient(155deg, #e5f8f5, #d2e9ed);
  border: 6px solid white;
  border-radius: 24px;
  box-shadow: 0 12px 35px #8d76a012;
}

.stage-top {
  position: absolute;
  top: 24px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 5;
}

.stage-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 900;
  color: #84b2b3;
}

.live-pill {
  background: #ffffffbb;
  border-radius: 30px;
  padding: 7px 11px;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 900;
  color: #79a39b;
}

.live-pill i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #80caa7;
  margin-right: 5px;
}

.stage-glow {
  position: absolute;
  width: 330px;
  height: 330px;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffffff65;
  box-shadow: 0 0 0 40px #ffffff16;
}

.stage-stars span {
  position: absolute;
  color: #fff;
  font-size: 24px;
  animation: twinkle 2s ease-in-out infinite;
}

.stage-stars span:nth-child(1) {
  left: 14%;
  top: 29%;
}

.stage-stars span:nth-child(2) {
  right: 16%;
  top: 35%;
  animation-delay: .7s;
}

.stage-stars span:nth-child(3) {
  right: 24%;
  top: 18%;
  animation-delay: 1.4s;
}

.robot {
  --robot-color: #a6dbd4;
  position: absolute;
  width: 220px;
  height: 290px;
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%);
  z-index: 3;
  animation: float 3s ease-in-out infinite;
}

.robot-head {
  position: absolute;
  width: 132px;
  height: 106px;
  left: 44px;
  top: 44px;
  background: var(--robot-color);
  border: 5px solid #ffffff75;
  box-shadow: inset -12px -9px #0000000a;
  z-index: 6;
}

.robot-head.round {
  border-radius: 43%;
}

.robot-head.square {
  border-radius: 20px;
}

.robot-head.oval {
  border-radius: 50%;
  height: 115px;
}

.robot-head.dome {
  border-radius: 65px 65px 20px 20px;
}

.robot-eye {
  position: absolute;
  width: 13px;
  height: 17px;
  background: #48546b;
  border-radius: 50%;
  top: 37px;
  animation: blink 4s infinite;
}

.robot-eye.left {
  left: 34px;
}

.robot-eye.right {
  right: 34px;
}

.robot-cheek {
  position: absolute;
  width: 18px;
  height: 10px;
  background: #f39db4;
  border-radius: 50%;
  top: 64px;
  opacity: .75;
}

.robot-cheek.left {
  left: 18px;
}

.robot-cheek.right {
  right: 18px;
}

.robot-mouth {
  position: absolute;
  left: 49px;
  top: 62px;
  width: 26px;
  height: 13px;
}

.face-happy .robot-mouth {
  border-bottom: 4px solid #48546b;
  border-radius: 50%;
}

.face-sleepy .robot-eye {
  height: 5px;
  top: 46px;
  border-radius: 5px;
  animation: none;
}

.face-sleepy .robot-mouth {
  border-bottom: 3px solid #48546b;
  border-radius: 50%;
}

.face-surprised .robot-mouth {
  width: 14px;
  height: 17px;
  left: 55px;
  top: 60px;
  border-radius: 50%;
  background: #48546b;
}

.robot-neck {
  position: absolute;
  width: 38px;
  height: 19px;
  background: #9296ae;
  top: 143px;
  left: 91px;
}

.robot-body {
  position: absolute;
  width: 112px;
  height: 95px;
  left: 54px;
  top: 157px;
  border-radius: 25px;
  background: var(--robot-color);
  box-shadow: inset -12px -10px #0000000b;
  z-index: 4;
}

.robot-panel {
  position: absolute;
  left: 34px;
  top: 26px;
  width: 44px;
  height: 36px;
  border-radius: 11px;
  background: #ffffff90;
  display: grid;
  place-items: center;
  color: #ef8aa9;
  font-size: 22px;
}

.robot-arm {
  position: absolute;
  width: 24px;
  height: 80px;
  background: var(--robot-color);
  border-radius: 15px;
  top: 163px;
  transform-origin: center 10px;
  z-index: 2;
}

.robot-arm.left {
  left: 24px;
  transform: rotate(12deg);
}

.robot-arm.right {
  right: 24px;
  transform: rotate(-12deg);
}

.robot-hand {
  position: absolute;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #a0a3bd;
  bottom: -8px;
  left: -2px;
}

.robot-leg {
  position: absolute;
  width: 31px;
  height: 44px;
  background: #969cb7;
  top: 240px;
  border-radius: 10px;
  z-index: 2;
}

.robot-leg.left {
  left: 68px;
}

.robot-leg.right {
  right: 68px;
}

.robot-foot {
  position: absolute;
  bottom: -2px;
  left: -6px;
  width: 42px;
  height: 16px;
  border-radius: 10px;
  background: #7f8ba7;
}

.accessory {
  position: absolute;
  z-index: 10;
  text-align: center;
  font-size: 39px;
}

.accessory.antenna {
  top: 0;
  left: 89px;
}

.accessory.bow {
  top: 136px;
  left: 88px;
}

.accessory.crown {
  top: 8px;
  left: 87px;
}

.accessory.hat {
  top: 3px;
  left: 87px;
}

.accessory.star {
  top: 185px;
  left: 91px;
}

.platform {
  position: absolute;
  width: 300px;
  height: 44px;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #a6cfd1;
  box-shadow: inset 0 8px #c7e5e4;
}

.platform-base {
  position: absolute;
  width: 250px;
  height: 27px;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  background: #9abcc7;
  border-radius: 0 0 16px 16px;
}

.stage-footer {
  position: absolute;
  bottom: 23px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
  color: #8bb0b4;
  letter-spacing: 1px;
}

.customizer {
  padding: 25px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 12px 35px #8d76a012;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}

h2 {
  font-size: 23px;
  letter-spacing: -.5px;
  margin: 5px 0 0;
}

.panel-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: #f4eaf9;
  border-radius: 12px;
  color: #a67cbb;
  font-size: 23px;
}

.group {
  margin-bottom: 23px;
}

.group label {
  display: block;
  margin-bottom: 10px;
  color: #aa95b7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice {
  padding: 10px 13px;
  border: 2px solid #eee7f3;
  border-radius: 11px;
  background: #faf8fc;
  color: #806c91;
  font-size: 12px;
  font-weight: 900;
}

.choice:hover {
  background: #f3eafa;
}

.choice.selected {
  background: #f0e5fa;
  border-color: #b18bd0;
  color: #78549a;
}

.color-choice {
  display: flex;
  align-items: center;
  gap: 7px;
}

.swatch {
  display: inline-block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
}

.animation-buttons {
  display: flex;
  gap: 9px;
}

.animation-buttons button {
  flex: 1;
  border: 1px solid #e4d9ec;
  background: #f7f2fa;
  border-radius: 11px;
  padding: 12px 8px;
  color: #866e9b;
  font-size: 12px;
  font-weight: 900;
}

.animation-buttons button:hover {
  background: #eee3f7;
}

.save-btn {
  width: 100%;
  border: none;
  border-radius: 13px;
  padding: 16px;
  background: #b0dfc1;
  color: #47785a;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 #8ecba4;
}

.save-btn:hover {
  background: #a1d9b5;
}

.message {
  margin-top: 14px;
  min-height: 18px;
  text-align: center;
  color: #a899b2;
  font-size: 12px;
}

.gallery-panel {
  margin-top: 18px;
  padding: 24px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 12px 35px #8d76a012;
}

.gallery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.gallery-heading > span {
  font-size: 11px;
  color: #b2a2bd;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.gallery-item {
  background: #f8f4fb;
  border: 2px solid #eee6f3;
  border-radius: 13px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
}

.gallery-item:hover {
  border-color: #b994d4;
}

.gallery-icon {
  width: 45px;
  height: 45px;
  margin: 0 auto 8px;
  border-radius: 13px;
  border: 4px solid #ffffffaa;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.gallery-item strong {
  display: block;
  color: #806a91;
  font-size: 11px;
}

.gallery-item small {
  display: block;
  margin-top: 4px;
  color: #b1a0bb;
  font-size: 9px;
}

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #b7a7c0;
  font-size: 12px;
  padding: 20px;
  background: #faf8fc;
  border-radius: 12px;
}

.robot.action-dance {
  animation: dance .35s ease-in-out 5;
}

.robot.action-wave .robot-arm.right {
  animation: wave .35s ease-in-out 6;
}

.robot.action-jump {
  animation: jump .5s ease-in-out 3;
}

@keyframes float {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }

50% {
    transform: translateX(-50%) translateY(-7px);
  }
}

@keyframes blink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }

46% {
    transform: scaleY(.08);
  }
}

@keyframes dance {
  0%, 100% {
    transform: translateX(-50%) rotate(0);
  }

25% {
    transform: translateX(-50%) rotate(-10deg);
  }

75% {
    transform: translateX(-50%) rotate(10deg);
  }
}

@keyframes wave {
  0%, 100% {
    transform: rotate(-12deg);
  }

50% {
    transform: rotate(-125deg);
  }
}

@keyframes jump {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }

50% {
    transform: translateX(-50%) translateY(-45px);
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: .4;
    transform: scale(.8);
  }

50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
  }

.stage {
    min-height: 470px;
  }

.robot {
    bottom: 80px;
  }

.platform {
    bottom: 55px;
  }

.platform-base {
    bottom: 39px;
  }
}

@media (max-width: 500px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }

.gallery {
    grid-template-columns: repeat(2, 1fr);
  }

.customizer {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .robot,
  .robot-eye,
  .stage-stars span {
    animation: none;
  }
}

const robotEl = document.getElementById("robot");
const robotNameEl = document.getElementById("robotName");
const messageEl = document.getElementById("message");
const galleryEl = document.getElementById("gallery");
const galleryCount = document.getElementById("galleryCount");

const headsEl = document.getElementById("heads");
const colorsEl = document.getElementById("colors");
const accessoriesEl = document.getElementById("accessories");
const facesEl = document.getElementById("faces");

const heads = ["Round", "Square", "Oval", "Dome"];

const colors = [
  { name: "Mint", hex: "#a6dbd4" },
  { name: "Pink", hex: "#f6b6cd" },
  { name: "Lavender", hex: "#cbb9ef" },
  { name: "Yellow", hex: "#f5da91" },
  { name: "Peach", hex: "#f6c2a8" },
  { name: "Sky", hex: "#a8d3f3" }
];

const accessories = [
  { name: "Antenna", icon: "\uD83D\uDCE1" },
  { name: "Bow", icon: "\uD83C\uDF80" },
  { name: "Crown", icon: "\uD83D\uDC51" },
  { name: "Hat", icon: "\uD83C\uDFA9" },
  { name: "Star", icon: "\u2B50" }
];

const faces = ["Happy", "Sleepy", "Surprised"];

const defaultDesign = {
  head: "Round",
  color: "Mint",
  accessory: "Antenna",
  face: "Happy"
};

let selected = Object.assign({}, defaultDesign);
let savedRobots = [];
let robotNumber = 1;
let actionTimer = null;

function makeDiv(className, parent) {
  const el = document.createElement("div");
  el.className = className;

if (parent) {
    parent.appendChild(el);
  }

return el;
}

function getColor(name) {
  const found = colors.find(function(c) {
    return c.name === name;
  });

return found ? found.hex : colors[0].hex;
}

function randomItem(items) {
  return items[Math.floor(Math.random() * items.length)];
}

function renderRobot() {
  robotEl.replaceChildren();

robotEl.className = "robot face-" +
    selected.face.toLowerCase();

robotEl.style.setProperty(
    "--robot-color",
    getColor(selected.color)
  );

makeDiv("robot-neck", robotEl);

const head = makeDiv(
    "robot-head " + selected.head.toLowerCase(),
    robotEl
  );

makeDiv("robot-eye left", head);
  makeDiv("robot-eye right", head);
  makeDiv("robot-cheek left", head);
  makeDiv("robot-cheek right", head);
  makeDiv("robot-mouth", head);

const leftArm = makeDiv("robot-arm left", robotEl);
  makeDiv("robot-hand", leftArm);

const rightArm = makeDiv("robot-arm right", robotEl);
  makeDiv("robot-hand", rightArm);

const body = makeDiv("robot-body", robotEl);
  const panel = makeDiv("robot-panel", body);
  panel.textContent = "\u2665";

const leftLeg = makeDiv("robot-leg left", robotEl);
  makeDiv("robot-foot", leftLeg);

const rightLeg = makeDiv("robot-leg right", robotEl);
  makeDiv("robot-foot", rightLeg);

const accessory = accessories.find(function(a) {
    return a.name === selected.accessory;
  });

if (accessory) {
    const el = makeDiv(
      "accessory " + selected.accessory.toLowerCase(),
      robotEl
    );

el.textContent = accessory.icon;
  }

robotNameEl.textContent = selected.color + " Bot";
}

function createChoice(container, label, type, hex) {
  const button = document.createElement("button");
  button.type = "button";
  button.className = "choice";

if (type === "color") {
    button.classList.add("color-choice");

const swatch = makeDiv("swatch", button);
    swatch.style.backgroundColor = hex;

const text = document.createElement("span");
    text.textContent = label;
    button.appendChild(text);
  } else {
    button.textContent = label;
  }

if (selected[type] === label) {
    button.classList.add("selected");
  }

button.addEventListener("click", function() {
    selected[type] = label;
    renderChoices();
    renderRobot();
    messageEl.textContent = "Looking good!";
  });

container.appendChild(button);
}

function renderChoices() {
  headsEl.replaceChildren();
  colorsEl.replaceChildren();
  accessoriesEl.replaceChildren();
  facesEl.replaceChildren();

heads.forEach(function(head) {
    createChoice(headsEl, head, "head");
  });

colors.forEach(function(color) {
    createChoice(
      colorsEl,
      color.name,
      "color",
      color.hex
    );
  });

accessories.forEach(function(item) {
    createChoice(
      accessoriesEl,
      item.name,
      "accessory"
    );
  });

faces.forEach(function(face) {
    createChoice(facesEl, face, "face");
  });
}

function playAnimation(action) {
  clearTimeout(actionTimer);

robotEl.classList.remove(
    "action-dance",
    "action-wave",
    "action-jump"
  );

void robotEl.offsetWidth;

robotEl.classList.add("action-" + action);

const messages = {
    dance: "Your robot is dancing!",
    wave: "Hello, little robot!",
    jump: "Boing! What a jump!"
  };

messageEl.textContent = messages[action];

actionTimer = setTimeout(function() {
    robotEl.classList.remove("action-" + action);
  }, 1800);
}

function renderGallery() {
  galleryEl.replaceChildren();

galleryCount.textContent =
    savedRobots.length + " / 8 saved";

if (savedRobots.length === 0) {
    const empty = makeDiv("gallery-empty", galleryEl);
    empty.textContent =
      "No robots yet. Create one and save it!";
    return;
  }

savedRobots.forEach(function(design, index) {
    const card = document.createElement("button");
    card.type = "button";
    card.className = "gallery-item";

const icon = makeDiv("gallery-icon", card);
    icon.style.backgroundColor = getColor(design.color);
    icon.textContent = "\uD83E\uDD16";

const title = document.createElement("strong");
    title.textContent = "Robot " + (index + 1);
    card.appendChild(title);

const detail = document.createElement("small");
    detail.textContent =
      design.color + " / " + design.head;
    card.appendChild(detail);

card.addEventListener("click", function() {
      selected = Object.assign({}, design);
      renderChoices();
      renderRobot();
      messageEl.textContent =
        "Robot " + (index + 1) + " restored!";
    });

galleryEl.appendChild(card);
  });
}

function saveRobot() {
  if (savedRobots.length >= 8) {
    messageEl.textContent =
      "Your gallery is full (8 robots).";
    return;
  }

savedRobots.push(Object.assign({}, selected));
  renderGallery();

messageEl.textContent =
    "Robot saved to your collection!";

playAnimation("dance");
}

function randomize() {
  selected = {
    head: randomItem(heads),
    color: randomItem(colors).name,
    accessory: randomItem(accessories).name,
    face: randomItem(faces)
  };

renderChoices();
  renderRobot();

messageEl.textContent =
    "A surprise robot has arrived!";
}

function resetDesign() {
  selected = Object.assign({}, defaultDesign);

renderChoices();
  renderRobot();

messageEl.textContent =
    "Back to the original robot!";
}

document.querySelectorAll("[data-action]")
  .forEach(function(button) {
    button.addEventListener("click", function() {
      playAnimation(button.dataset.action);
    });
  });

document.getElementById("randomBtn")
  .addEventListener("click", randomize);

document.getElementById("resetBtn")
  .addEventListener("click", resetDesign);

document.getElementById("saveBtn")
  .addEventListener("click", saveRobot);

renderChoices();
renderRobot();
renderGallery();

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground