493 Academy

CHAT

TREE

file:///Users/tree/Downloads/PAU_HOLOTAPE/pipboy.html

BUDDY

Hi Tree! I can't open files from your computer, but I'd love to help you build something awesome from scratch! Tell me what "pipboy.html" was supposed to be — like a cool wrist computer screen, a game, or a gadget app — and I'll build the first version for you right now!

TREE

yes

BUDDY

Let's build your Pip-Boy! I made a green glowing screen with tabs like STATS, ITEMS, and MAP, just like in the games. Try clicking the tabs at the top to switch screens! What should we add next — maybe a health bar or a map picture?

CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pip-Boy</title>
<style>
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: #0a0e0a;
    color: #7CFC00;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  .pipboy {
    width: 600px;
    max-width: 95vw;
    height: 420px;
    background: #10160f;
    border: 6px solid #2c3a2a;
    border-radius: 18px;
    box-shadow: 0 0 30px #7CFC00 inset, 0 0 20px #000;
    padding: 14px;
    display: flex;
    flex-direction: column;
  }
  .screen {
    flex: 1;
    background: #0c130c;
    border: 2px solid #3a4a38;
    border-radius: 8px;
    padding: 14px;
    overflow-y: auto;
    text-shadow: 0 0 5px #7CFC00;
    position: relative;
  }
  .screen::before {
    content: "";
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.15) 0px,
      rgba(0,0,0,0.15) 1px,
      transparent 2px,
      transparent 3px
    );
    pointer-events: none;
    border-radius: 8px;
  }
  .tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
  }
  .tab {
    background: #162014;
    color: #7CFC00;
    border: 2px solid #3a4a38;
    border-radius: 6px;
    padding: 8px 14px;
    font-family: inherit;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    flex: 1;
    margin: 0 4px;
  }
  .tab.active {
    background: #7CFC00;
    color: #0a0e0a;
    box-shadow: 0 0 10px #7CFC00;
  }
  h1 {
    font-size: 22px;
    letter-spacing: 3px;
    margin-top: 0;
    border-bottom: 1px solid #3a4a38;
    padding-bottom: 8px;
  }
  .stat-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 15px;
  }
  .bar {
    background: #16201d;
    border: 1px solid #3a4a38;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
  }
  .bar-fill {
    height: 100%;
    background: #7CFC00;
    box-shadow: 0 0 8px #7CFC00;
  }
  ul { padding-left: 18px; }
  li { margin: 6px 0; }
  .tabcontent { display: none; }
  .tabcontent.active { display: block; }
</style>
</head>
<body>
  <div class="pipboy">
    <div class="tabs">
      <button class="tab active" data-tab="stat">STAT</button>
      <button class="tab" data-tab="items">ITEMS</button>
      <button class="tab" data-tab="map">MAP</button>
      <button class="tab" data-tab="radio">RADIO</button>
    </div>
    <div class="screen">
      <div class="tabcontent active" id="stat">
        <h1>VAULT DWELLER STATUS</h1>
        <div class="stat-row"><span>HEALTH</span><span>100 / 100</span></div>
        <div class="bar"><div class="bar-fill" style="width:100%"></div></div>
        <div class="stat-row"><span>LEVEL</span><span>1</span></div>
        <div class="stat-row"><span>XP</span><span>0 / 100</span></div>
        <div class="bar"><div class="bar-fill" style="width:5%"></div></div>
      </div>
      <div class="tabcontent" id="items">
        <h1>INVENTORY</h1>
        <ul>
          <li>Pip-Boy 3000</li>
          <li>Bobby Pin x3</li>
          <li>Stimpak x1</li>
          <li>Rusty Pipe</li>
        </ul>
      </div>
      <div class="tabcontent" id="map">
        <h1>MAP</h1>
        <p>You are here: THE VAULT</p>
        <img src="/api/assets/7" style="width:100%;border:2px solid #3a4a38;border-radius:6px;filter:grayscale(1) brightness(1.2) sepia(1) hue-rotate(60deg);">
      </div>
      <div class="tabcontent" id="radio">
        <h1>RADIO</h1>
        <p>&#9834; Tuning in...</p>
        <p>Signal: Galaxy News Radio</p>
      </div>
    </div>
  </div>
<script>
  const tabs = document.querySelectorAll('.tab');
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      document.querySelectorAll('.tabcontent').forEach(c => c.classList.remove('active'));
      tab.classList.add('active');
      document.getElementById(tab.dataset.tab).classList.add('active');
    });
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pip-Boy</title>
<style>
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: #0a0e0a;
    color: #7CFC00;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  .pipboy {
    width: 600px;
    max-width: 95vw;
    height: 420px;
    background: #10160f;
    border: 6px solid #2c3a2a;
    border-radius: 18px;
    box-shadow: 0 0 30px #7CFC00 inset, 0 0 20px #000;
    padding: 14px;
    display: flex;
    flex-direction: column;
  }
  .screen {
    flex: 1;
    background: #0c130c;
    border: 2px solid #3a4a38;
    border-radius: 8px;
    padding: 14px;
    overflow-y: auto;
    text-shadow: 0 0 5px #7CFC00;
    position: relative;
  }
  .screen::before {
    content: "";
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.15) 0px,
      rgba(0,0,0,0.15) 1px,
      transparent 2px,
      transparent 3px
    );
    pointer-events: none;
    border-radius: 8px;
  }
  .tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
  }
  .tab {
    background: #162014;
    color: #7CFC00;
    border: 2px solid #3a4a38;
    border-radius: 6px;
    padding: 8px 14px;
    font-family: inherit;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    flex: 1;
    margin: 0 4px;
  }
  .tab.active {
    background: #7CFC00;
    color: #0a0e0a;
    box-shadow: 0 0 10px #7CFC00;
  }
  h1 {
    font-size: 22px;
    letter-spacing: 3px;
    margin-top: 0;
    border-bottom: 1px solid #3a4a38;
    padding-bottom: 8px;
  }
  .stat-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 15px;
  }
  .bar {
    background: #16201d;
    border: 1px solid #3a4a38;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
  }
  .bar-fill {
    height: 100%;
    background: #7CFC00;
    box-shadow: 0 0 8px #7CFC00;
  }
  ul { padding-left: 18px; }
  li { margin: 6px 0; }
  .tabcontent { display: none; }
  .tabcontent.active { display: block; }
</style>
</head>
<body>
  <div class="pipboy">
    <div class="tabs">
      <button class="tab active" data-tab="stat">STAT</button>
      <button class="tab" data-tab="items">ITEMS</button>
      <button class="tab" data-tab="map">MAP</button>
      <button class="tab" data-tab="radio">RADIO</button>
    </div>
    <div class="screen">
      <div class="tabcontent active" id="stat">
        <h1>VAULT DWELLER STATUS</h1>
        <div class="stat-row"><span>HEALTH</span><span>100 / 100</span></div>
        <div class="bar"><div class="bar-fill" style="width:100%"></div></div>
        <div class="stat-row"><span>LEVEL</span><span>1</span></div>
        <div class="stat-row"><span>XP</span><span>0 / 100</span></div>
        <div class="bar"><div class="bar-fill" style="width:5%"></div></div>
      </div>
      <div class="tabcontent" id="items">
        <h1>INVENTORY</h1>
        <ul>
          <li>Pip-Boy 3000</li>
          <li>Bobby Pin x3</li>
          <li>Stimpak x1</li>
          <li>Rusty Pipe</li>
        </ul>
      </div>
      <div class="tabcontent" id="map">
        <h1>MAP</h1>
        <p>You are here: THE VAULT</p>
        <img src="/api/assets/7" style="width:100%;border:2px solid #3a4a38;border-radius:6px;filter:grayscale(1) brightness(1.2) sepia(1) hue-rotate(60deg);">
      </div>
      <div class="tabcontent" id="radio">
        <h1>RADIO</h1>
        <p>&#9834; Tuning in...</p>
        <p>Signal: Galaxy News Radio</p>
      </div>
    </div>
  </div>
<script>
  const tabs = document.querySelectorAll('.tab');
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      document.querySelectorAll('.tabcontent').forEach(c => c.classList.remove('active'));
      tab.classList.add('active');
      document.getElementById(tab.dataset.tab).classList.add('active');
    });
  });
</script>
</body>
</html>

PREVIEW

PICTURES0/50

No pictures yet. Add one, then ask your buddy to put it in your app!