493 Academy

CHAT

PAU

can you make this studio look like this

BUDDY

Fun idea! I made your app look like a retro Macintosh Control Panel, using your uploaded image as the background theme! I built a simple drawing studio styled like an old-school computer window, with a title bar, menu bar, and a cute control panel of tools on the side. Try drawing something and changing colors/brush size! Let me know if you want it to look even more like the picture, or want different tools inside it (like a calculator, quiz, etc.)!

PAU

can you make a mini control panel

BUDDY

You got it! I made a mini retro Macintosh-style Control Panel app. It's got little icon buttons like a real old-school control panel — click them to change the desktop pattern, sound beep, click speed, and a mini clock, all inside a cute little window with a title bar. Try clicking the different icons!

CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mini Control Panel</title>
<style>
  body {
    margin: 0;
    min-height: 100vh;
    background: #6b8fae url('/api/assets/6') center/cover no-repeat fixed;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Chicago", "Courier New", monospace;
  }

  .window {
    width: 420px;
    background: #dcdcdc;
    border: 2px solid #000;
    border-radius: 8px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
    overflow: hidden;
  }

  .titlebar {
    background: repeating-linear-gradient(
      to bottom,
      #000 0px, #000 2px,
      #fff 2px, #fff 4px
    );
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 2px solid #000;
  }

  .titlebar span {
    background: #dcdcdc;
    padding: 0 10px;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
  }

  .closebox {
    position: absolute;
    left: 8px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: #dcdcdc;
    border: 2px solid #000;
    z-index: 2;
    cursor: pointer;
  }

  .menubar {
    background: #fff;
    border-bottom: 2px solid #000;
    display: flex;
    gap: 14px;
    padding: 3px 10px;
    font-size: 13px;
  }

  .content {
    padding: 14px;
    background: #dcdcdc;
  }

  .panel-title {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
    border-bottom: 2px solid #000;
    padding-bottom: 4px;
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  .icon-btn {
    background: #fff;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    font-size: 11px;
    user-select: none;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  }

  .icon-btn:active {
    box-shadow: none;
    transform: translate(2px, 2px);
  }

  .icon-symbol {
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
  }

  .status-box {
    background: #fff;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 10px;
    font-size: 13px;
    min-height: 60px;
  }

  .clock {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 8px;
    letter-spacing: 1px;
  }

  .slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
  }

  input[type=range] {
    flex: 1;
  }

  /* Desktop patterns preview area behind window */
  .desktop-preview {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
  }
</style>
</head>
<body>

<div class="window">
  <div class="titlebar">
    <div class="closebox" onclick="document.querySelector('.window').style.display='none'"></div>
    <span>Control Panel</span>
  </div>
  <div class="menubar">
    <span>File</span><span>Edit</span><span>View</span><span>Special</span>
  </div>
  <div class="content">
    <div class="panel-title">🖥 Mini Control Panel</div>

    <div class="icon-grid">
      <div class="icon-btn" onclick="setPattern(1)">
        <span class="icon-symbol">▦</span>
        Pattern A
      </div>
      <div class="icon-btn" onclick="setPattern(2)">
        <span class="icon-symbol">▨</span>
        Pattern B
      </div>
      <div class="icon-btn" onclick="setPattern(3)">
        <span class="icon-symbol">▧</span>
        Pattern C
      </div>
      <div class="icon-btn" onclick="playBeep()">
        <span class="icon-symbol">🔔</span>
        Beep
      </div>
      <div class="icon-btn" onclick="toggleDark()">
        <span class="icon-symbol">🌗</span>
        Dark/Light
      </div>
      <div class="icon-btn" onclick="showAbout()">
        <span class="icon-symbol">❓</span>
        About
      </div>
    </div>

    <div class="status-box" id="statusBox">
      Welcome! Click an icon above to try it out.
    </div>

    <div class="slider-row">
      <label for="volSlider">🔊 Volume</label>
      <input type="range" id="volSlider" min="0" max="100" value="50">
    </div>

    <div class="clock" id="clock">--:--:--</div>
  </div>
</div>

<script>
  const statusBox = document.getElementById('statusBox');
  const body = document.body;
  let dark = false;

  function setPattern(n) {
    const patterns = {
      1: "repeating-conic-gradient(#888 0% 25%, #bbb 0% 50%)",
      2: "repeating-linear-gradient(45deg, #999, #999 6px, #ccc 6px, #ccc 12px)",
      3: "repeating-radial-gradient(circle, #aaa 0, #aaa 4px, #ddd 4px, #ddd 8px)"
    };
    body.style.backgroundImage = patterns[n];
    body.style.backgroundBlendMode = "normal";
    statusBox.textContent = "Desktop pattern " + n + " applied!";
  }

  function playBeep() {
    try {
      const ctx = new (window.AudioContext || window.webkitAudioContext)();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = "square";
      osc.frequency.value = 440;
      const vol = document.getElementById('volSlider').value / 100;
      gain.gain.value = vol * 0.3;
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.start();
      setTimeout(() => { osc.stop(); }, 200);
      statusBox.textContent = "Beep! 🔔";
    } catch (e) {
      statusBox.textContent = "Sound not supported here.";
    }
  }

  function toggleDark() {
    dark = !dark;
    document.querySelector('.window').style.filter = dark ? "invert(1)" : "none";
    statusBox.textContent = dark ? "Dark mode ON" : "Dark mode OFF";
  }

  function showAbout() {
    statusBox.textContent = "Mini Control Panel v1.0 — made by Pau! 💻✨";
  }

  function updateClock() {
    const now = new Date();
    const h = String(now.getHours()).padStart(2,'0');
    const m = String(now.getMinutes()).padStart(2,'0');
    const s = String(now.getSeconds()).padStart(2,'0');
    document.getElementById('clock').textContent = h + ":" + m + ":" + s;
  }
  setInterval(updateClock, 1000);
  updateClock();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mini Control Panel</title>
<style>
  body {
    margin: 0;
    min-height: 100vh;
    background: #6b8fae url('/api/assets/6') center/cover no-repeat fixed;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Chicago", "Courier New", monospace;
  }

  .window {
    width: 420px;
    background: #dcdcdc;
    border: 2px solid #000;
    border-radius: 8px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
    overflow: hidden;
  }

  .titlebar {
    background: repeating-linear-gradient(
      to bottom,
      #000 0px, #000 2px,
      #fff 2px, #fff 4px
    );
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 2px solid #000;
  }

  .titlebar span {
    background: #dcdcdc;
    padding: 0 10px;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
  }

  .closebox {
    position: absolute;
    left: 8px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: #dcdcdc;
    border: 2px solid #000;
    z-index: 2;
    cursor: pointer;
  }

  .menubar {
    background: #fff;
    border-bottom: 2px solid #000;
    display: flex;
    gap: 14px;
    padding: 3px 10px;
    font-size: 13px;
  }

  .content {
    padding: 14px;
    background: #dcdcdc;
  }

  .panel-title {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
    border-bottom: 2px solid #000;
    padding-bottom: 4px;
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  .icon-btn {
    background: #fff;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    font-size: 11px;
    user-select: none;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  }

  .icon-btn:active {
    box-shadow: none;
    transform: translate(2px, 2px);
  }

  .icon-symbol {
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
  }

  .status-box {
    background: #fff;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 10px;
    font-size: 13px;
    min-height: 60px;
  }

  .clock {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 8px;
    letter-spacing: 1px;
  }

  .slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
  }

  input[type=range] {
    flex: 1;
  }

  /* Desktop patterns preview area behind window */
  .desktop-preview {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
  }
</style>
</head>
<body>

<div class="window">
  <div class="titlebar">
    <div class="closebox" onclick="document.querySelector('.window').style.display='none'"></div>
    <span>Control Panel</span>
  </div>
  <div class="menubar">
    <span>File</span><span>Edit</span><span>View</span><span>Special</span>
  </div>
  <div class="content">
    <div class="panel-title">🖥 Mini Control Panel</div>

    <div class="icon-grid">
      <div class="icon-btn" onclick="setPattern(1)">
        <span class="icon-symbol">▦</span>
        Pattern A
      </div>
      <div class="icon-btn" onclick="setPattern(2)">
        <span class="icon-symbol">▨</span>
        Pattern B
      </div>
      <div class="icon-btn" onclick="setPattern(3)">
        <span class="icon-symbol">▧</span>
        Pattern C
      </div>
      <div class="icon-btn" onclick="playBeep()">
        <span class="icon-symbol">🔔</span>
        Beep
      </div>
      <div class="icon-btn" onclick="toggleDark()">
        <span class="icon-symbol">🌗</span>
        Dark/Light
      </div>
      <div class="icon-btn" onclick="showAbout()">
        <span class="icon-symbol">❓</span>
        About
      </div>
    </div>

    <div class="status-box" id="statusBox">
      Welcome! Click an icon above to try it out.
    </div>

    <div class="slider-row">
      <label for="volSlider">🔊 Volume</label>
      <input type="range" id="volSlider" min="0" max="100" value="50">
    </div>

    <div class="clock" id="clock">--:--:--</div>
  </div>
</div>

<script>
  const statusBox = document.getElementById('statusBox');
  const body = document.body;
  let dark = false;

  function setPattern(n) {
    const patterns = {
      1: "repeating-conic-gradient(#888 0% 25%, #bbb 0% 50%)",
      2: "repeating-linear-gradient(45deg, #999, #999 6px, #ccc 6px, #ccc 12px)",
      3: "repeating-radial-gradient(circle, #aaa 0, #aaa 4px, #ddd 4px, #ddd 8px)"
    };
    body.style.backgroundImage = patterns[n];
    body.style.backgroundBlendMode = "normal";
    statusBox.textContent = "Desktop pattern " + n + " applied!";
  }

  function playBeep() {
    try {
      const ctx = new (window.AudioContext || window.webkitAudioContext)();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = "square";
      osc.frequency.value = 440;
      const vol = document.getElementById('volSlider').value / 100;
      gain.gain.value = vol * 0.3;
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.start();
      setTimeout(() => { osc.stop(); }, 200);
      statusBox.textContent = "Beep! 🔔";
    } catch (e) {
      statusBox.textContent = "Sound not supported here.";
    }
  }

  function toggleDark() {
    dark = !dark;
    document.querySelector('.window').style.filter = dark ? "invert(1)" : "none";
    statusBox.textContent = dark ? "Dark mode ON" : "Dark mode OFF";
  }

  function showAbout() {
    statusBox.textContent = "Mini Control Panel v1.0 — made by Pau! 💻✨";
  }

  function updateClock() {
    const now = new Date();
    const h = String(now.getHours()).padStart(2,'0');
    const m = String(now.getMinutes()).padStart(2,'0');
    const s = String(now.getSeconds()).padStart(2,'0');
    document.getElementById('clock').textContent = h + ":" + m + ":" + s;
  }
  setInterval(updateClock, 1000);
  updateClock();
</script>

</body>
</html>

PREVIEW

PICTURES1/50

hsd.png