493 Academy

CHAT

TREE

can you make a app that is a pip boy

BUDDY

Ooooh a Pip-Boy app, that's so cool! I made you a retro green wrist computer with STAT, INV, and MAP style tabs, a working clock, and a health meter you can click to change. Try tapping the tabs and buttons!

CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pip-Boy 3000</title>
<style>
  body {
    background: #000;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Courier New', monospace;
  }

  .pipboy {
    width: 480px;
    max-width: 95vw;
    background: #1a1a1a;
    border: 8px solid #333;
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 0 40px #0f0, inset 0 0 20px #000;
  }

  .screen {
    background: #001a00;
    border: 4px solid #003300;
    border-radius: 10px;
    padding: 15px;
    box-shadow: inset 0 0 30px #00ff00;
    color: #33ff33;
    text-shadow: 0 0 5px #33ff33;
    min-height: 380px;
    position: relative;
    overflow: hidden;
  }

  .screen::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.15),
      rgba(0,0,0,0.15) 2px,
      transparent 2px,
      transparent 4px
    );
    pointer-events: none;
  }

  .header {
    text-align: center;
    font-size: 22px;
    letter-spacing: 3px;
    border-bottom: 2px solid #33ff33;
    padding-bottom: 8px;
    margin-bottom: 10px;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
  }

  .tab {
    background: transparent;
    border: 2px solid #33ff33;
    color: #33ff33;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    padding: 6px 12px;
    cursor: pointer;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #33ff33;
  }

  .tab.active {
    background: #33ff33;
    color: #001a00;
  }

  .tab-content {
    display: none;
    animation: flicker 0.2s;
  }

  .tab-content.active {
    display: block;
  }

  @keyframes flicker {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
  }

  .stat-line {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 16px;
    border-bottom: 1px dashed #114411;
    padding-bottom: 4px;
  }

  .bar-bg {
    background: #002200;
    border: 1px solid #33ff33;
    height: 16px;
    width: 100%;
    margin-top: 4px;
  }

  .bar-fill {
    background: #33ff33;
    height: 100%;
    box-shadow: 0 0 10px #33ff33;
    transition: width 0.3s;
  }

  .clock {
    text-align: center;
    font-size: 28px;
    margin: 10px 0;
    letter-spacing: 2px;
  }

  .item-list div {
    padding: 6px;
    border-bottom: 1px solid #114411;
    cursor: pointer;
  }

  .item-list div:hover {
    background: #003300;
  }

  .map-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    margin-top: 10px;
  }

  .map-cell {
    background: #002200;
    border: 1px solid #114411;
    height: 25px;
    cursor: pointer;
  }

  .map-cell.you {
    background: #33ff33;
    box-shadow: 0 0 10px #33ff33;
  }

  .btn {
    background: transparent;
    border: 2px solid #33ff33;
    color: #33ff33;
    font-family: 'Courier New', monospace;
    padding: 6px 10px;
    margin: 4px 4px 0 0;
    cursor: pointer;
    letter-spacing: 1px;
  }

  .btn:hover {
    background: #33ff33;
    color: #001a00;
  }

  .radio-line {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
  }

  .knobs {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }

  .knob {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 30% 30%, #555, #111);
    border-radius: 50%;
    border: 2px solid #000;
  }
</style>
</head>
<body>

<div class="pipboy">
  <div class="screen">
    <div class="header">PIP-BOY 3000</div>

    <div class="tabs">
      <button class="tab active" onclick="showTab('stat')">STAT</button>
      <button class="tab" onclick="showTab('inv')">INV</button>
      <button class="tab" onclick="showTab('map')">MAP</button>
      <button class="tab" onclick="showTab('radio')">RADIO</button>
    </div>

    <div id="stat" class="tab-content active">
      <div class="clock" id="clock">00:00:00</div>

      <div class="stat-line"><span>NAME:</span><span>VAULT DWELLER TREE</span></div>

      <div class="stat-line"><span>HEALTH</span><span id="hpNum">100 / 100</span></div>
      <div class="bar-bg"><div class="bar-fill" id="hpBar" style="width:100%"></div></div>

      <div class="stat-line"><span>ENERGY</span><span id="enNum">80 / 100</span></div>
      <div class="bar-bg"><div class="bar-fill" id="enBar" style="width:80%"></div></div>

      <div class="stat-line"><span>RAD LEVEL</span><span id="radNum">10 / 100</span></div>
      <div class="bar-bg"><div class="bar-fill" id="radBar" style="width:10%"></div></div>

      <div style="margin-top:15px;">
        <button class="btn" onclick="changeStat('hp',-10)">- HEALTH</button>
        <button class="btn" onclick="changeStat('hp',10)">+ HEALTH</button>
        <button class="btn" onclick="changeStat('en',-10)">- ENERGY</button>
        <button class="btn" onclick="changeStat('en',10)">+ ENERGY</button>
        <button class="btn" onclick="changeStat('rad',10)">+ RADS</button>
        <button class="btn" onclick="changeStat('rad',-10)">- RADS</button>
      </div>
    </div>

    <div id="inv" class="tab-content">
      <div class="header" style="font-size:16px;">INVENTORY</div>
      <div class="item-list" id="invList">
        <div>🔫 10mm Pistol</div>
        <div>🍞 Stimpak</div>
        <div>🧴 Purified Water</div>
        <div>🥫 Cram (Food)</div>
        <div>🔑 Vault Key</div>
      </div>
      <button class="btn" onclick="addItem()">ADD JUNK ITEM</button>
    </div>

    <div id="map" class="tab-content">
      <div class="header" style="font-size:16px;">LOCAL MAP</div>
      <div class="map-grid" id="mapGrid"></div>
      <p style="text-align:center; font-size:12px;">Tap a tile to move your marker</p>
    </div>

    <div id="radio" class="tab-content">
      <div class="header" style="font-size:16px;">RADIO STATIONS</div>
      <div class="radio-line">📻 Galaxy News Radio</div>
      <div class="radio-line">📻 Diamond City Radio</div>
      <div class="radio-line">📻 Classical Radio</div>
      <button class="btn" onclick="toggleRadio()" id="radioBtn">▶ PLAY STATIC</button>
      <p id="radioStatus" style="text-align:center; font-size:12px;">Radio is off</p>
    </div>
  </div>

  <div class="knobs">
    <div class="knob"></div>
    <div class="knob"></div>
  </div>
</div>

<audio id="staticSound" loop>
</audio>

<script>
  function showTab(id) {
    document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
    document.getElementById(id).classList.add('active');
    event.target.classList.add('active');
  }

  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();

  let stats = { hp: 100, en: 80, rad: 10 };

  function changeStat(type, amount) {
    stats[type] = Math.max(0, Math.min(100, stats[type] + amount));
    document.getElementById(type + 'Bar').style.width = stats[type] + '%';
    if (type === 'hp') document.getElementById('hpNum').textContent = stats.hp + ' / 100';
    if (type === 'en') document.getElementById('enNum').textContent = stats.en + ' / 100';
    if (type === 'rad') document.getElementById('radNum').textContent = stats.rad + ' / 100';
  }

  const junkItems = ['🥄 Spoon', '🔋 Fusion Cell', '🧵 Duct Tape', '🍺 Bottle Cap x5', '🧦 Old Sock', '🕹️ Broken Toy'];
  function addItem() {
    const list = document.getElementById('invList');
    const div = document.createElement('div');
    div.textContent = junkItems[Math.floor(Math.random() * junkItems.length)];
    list.appendChild(div);
  }

  const grid = document.getElementById('mapGrid');
  let youIndex = 20;
  for (let i = 0; i < 32; i++) {
    const cell = document.createElement('div');
    cell.className = 'map-cell';
    if (i === youIndex) cell.classList.add('you');
    cell.onclick = () => {
      document.querySelectorAll('.map-cell').forEach(c => c.classList.remove('you'));
      cell.classList.add('you');
    };
    grid.appendChild(cell);
  }

  let radioOn = false;
  function toggleRadio() {
    radioOn = !radioOn;
    document.getElementById('radioBtn').textContent = radioOn ? '⏸ PAUSE STATIC' : '▶ PLAY STATIC';
    document.getElementById('radioStatus').textContent = radioOn ? 'Now playing: static hiss...' : 'Radio is off';
  }
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pip-Boy 3000</title>
<style>
  body {
    background: #000;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Courier New', monospace;
  }

  .pipboy {
    width: 480px;
    max-width: 95vw;
    background: #1a1a1a;
    border: 8px solid #333;
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 0 40px #0f0, inset 0 0 20px #000;
  }

  .screen {
    background: #001a00;
    border: 4px solid #003300;
    border-radius: 10px;
    padding: 15px;
    box-shadow: inset 0 0 30px #00ff00;
    color: #33ff33;
    text-shadow: 0 0 5px #33ff33;
    min-height: 380px;
    position: relative;
    overflow: hidden;
  }

  .screen::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.15),
      rgba(0,0,0,0.15) 2px,
      transparent 2px,
      transparent 4px
    );
    pointer-events: none;
  }

  .header {
    text-align: center;
    font-size: 22px;
    letter-spacing: 3px;
    border-bottom: 2px solid #33ff33;
    padding-bottom: 8px;
    margin-bottom: 10px;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
  }

  .tab {
    background: transparent;
    border: 2px solid #33ff33;
    color: #33ff33;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    padding: 6px 12px;
    cursor: pointer;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #33ff33;
  }

  .tab.active {
    background: #33ff33;
    color: #001a00;
  }

  .tab-content {
    display: none;
    animation: flicker 0.2s;
  }

  .tab-content.active {
    display: block;
  }

  @keyframes flicker {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
  }

  .stat-line {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 16px;
    border-bottom: 1px dashed #114411;
    padding-bottom: 4px;
  }

  .bar-bg {
    background: #002200;
    border: 1px solid #33ff33;
    height: 16px;
    width: 100%;
    margin-top: 4px;
  }

  .bar-fill {
    background: #33ff33;
    height: 100%;
    box-shadow: 0 0 10px #33ff33;
    transition: width 0.3s;
  }

  .clock {
    text-align: center;
    font-size: 28px;
    margin: 10px 0;
    letter-spacing: 2px;
  }

  .item-list div {
    padding: 6px;
    border-bottom: 1px solid #114411;
    cursor: pointer;
  }

  .item-list div:hover {
    background: #003300;
  }

  .map-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    margin-top: 10px;
  }

  .map-cell {
    background: #002200;
    border: 1px solid #114411;
    height: 25px;
    cursor: pointer;
  }

  .map-cell.you {
    background: #33ff33;
    box-shadow: 0 0 10px #33ff33;
  }

  .btn {
    background: transparent;
    border: 2px solid #33ff33;
    color: #33ff33;
    font-family: 'Courier New', monospace;
    padding: 6px 10px;
    margin: 4px 4px 0 0;
    cursor: pointer;
    letter-spacing: 1px;
  }

  .btn:hover {
    background: #33ff33;
    color: #001a00;
  }

  .radio-line {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
  }

  .knobs {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }

  .knob {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 30% 30%, #555, #111);
    border-radius: 50%;
    border: 2px solid #000;
  }
</style>
</head>
<body>

<div class="pipboy">
  <div class="screen">
    <div class="header">PIP-BOY 3000</div>

    <div class="tabs">
      <button class="tab active" onclick="showTab('stat')">STAT</button>
      <button class="tab" onclick="showTab('inv')">INV</button>
      <button class="tab" onclick="showTab('map')">MAP</button>
      <button class="tab" onclick="showTab('radio')">RADIO</button>
    </div>

    <div id="stat" class="tab-content active">
      <div class="clock" id="clock">00:00:00</div>

      <div class="stat-line"><span>NAME:</span><span>VAULT DWELLER TREE</span></div>

      <div class="stat-line"><span>HEALTH</span><span id="hpNum">100 / 100</span></div>
      <div class="bar-bg"><div class="bar-fill" id="hpBar" style="width:100%"></div></div>

      <div class="stat-line"><span>ENERGY</span><span id="enNum">80 / 100</span></div>
      <div class="bar-bg"><div class="bar-fill" id="enBar" style="width:80%"></div></div>

      <div class="stat-line"><span>RAD LEVEL</span><span id="radNum">10 / 100</span></div>
      <div class="bar-bg"><div class="bar-fill" id="radBar" style="width:10%"></div></div>

      <div style="margin-top:15px;">
        <button class="btn" onclick="changeStat('hp',-10)">- HEALTH</button>
        <button class="btn" onclick="changeStat('hp',10)">+ HEALTH</button>
        <button class="btn" onclick="changeStat('en',-10)">- ENERGY</button>
        <button class="btn" onclick="changeStat('en',10)">+ ENERGY</button>
        <button class="btn" onclick="changeStat('rad',10)">+ RADS</button>
        <button class="btn" onclick="changeStat('rad',-10)">- RADS</button>
      </div>
    </div>

    <div id="inv" class="tab-content">
      <div class="header" style="font-size:16px;">INVENTORY</div>
      <div class="item-list" id="invList">
        <div>🔫 10mm Pistol</div>
        <div>🍞 Stimpak</div>
        <div>🧴 Purified Water</div>
        <div>🥫 Cram (Food)</div>
        <div>🔑 Vault Key</div>
      </div>
      <button class="btn" onclick="addItem()">ADD JUNK ITEM</button>
    </div>

    <div id="map" class="tab-content">
      <div class="header" style="font-size:16px;">LOCAL MAP</div>
      <div class="map-grid" id="mapGrid"></div>
      <p style="text-align:center; font-size:12px;">Tap a tile to move your marker</p>
    </div>

    <div id="radio" class="tab-content">
      <div class="header" style="font-size:16px;">RADIO STATIONS</div>
      <div class="radio-line">📻 Galaxy News Radio</div>
      <div class="radio-line">📻 Diamond City Radio</div>
      <div class="radio-line">📻 Classical Radio</div>
      <button class="btn" onclick="toggleRadio()" id="radioBtn">▶ PLAY STATIC</button>
      <p id="radioStatus" style="text-align:center; font-size:12px;">Radio is off</p>
    </div>
  </div>

  <div class="knobs">
    <div class="knob"></div>
    <div class="knob"></div>
  </div>
</div>

<audio id="staticSound" loop>
</audio>

<script>
  function showTab(id) {
    document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
    document.getElementById(id).classList.add('active');
    event.target.classList.add('active');
  }

  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();

  let stats = { hp: 100, en: 80, rad: 10 };

  function changeStat(type, amount) {
    stats[type] = Math.max(0, Math.min(100, stats[type] + amount));
    document.getElementById(type + 'Bar').style.width = stats[type] + '%';
    if (type === 'hp') document.getElementById('hpNum').textContent = stats.hp + ' / 100';
    if (type === 'en') document.getElementById('enNum').textContent = stats.en + ' / 100';
    if (type === 'rad') document.getElementById('radNum').textContent = stats.rad + ' / 100';
  }

  const junkItems = ['🥄 Spoon', '🔋 Fusion Cell', '🧵 Duct Tape', '🍺 Bottle Cap x5', '🧦 Old Sock', '🕹️ Broken Toy'];
  function addItem() {
    const list = document.getElementById('invList');
    const div = document.createElement('div');
    div.textContent = junkItems[Math.floor(Math.random() * junkItems.length)];
    list.appendChild(div);
  }

  const grid = document.getElementById('mapGrid');
  let youIndex = 20;
  for (let i = 0; i < 32; i++) {
    const cell = document.createElement('div');
    cell.className = 'map-cell';
    if (i === youIndex) cell.classList.add('you');
    cell.onclick = () => {
      document.querySelectorAll('.map-cell').forEach(c => c.classList.remove('you'));
      cell.classList.add('you');
    };
    grid.appendChild(cell);
  }

  let radioOn = false;
  function toggleRadio() {
    radioOn = !radioOn;
    document.getElementById('radioBtn').textContent = radioOn ? '⏸ PAUSE STATIC' : '▶ PLAY STATIC';
    document.getElementById('radioStatus').textContent = radioOn ? 'Now playing: static hiss...' : 'Radio is off';
  }
</script>

</body>
</html>

PREVIEW

PICTURES0/50

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