`data/artifacts/1cbd0c1990e7/qwen3-14b.html`

442 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stalwartia Economic Briefing</title>
  <style>
    :root {
      --bg-color: #001122;
      --fg-color: #0f9;
      --highlight-color: #f00;
      --text-color: #fff;
      --scanline-opacity: 0.1;
      --mood-dial-red: #f44;
      --mood-dial-green: #0f0;
      --mood-dial-yellow: #ff0;
      --mood-dial-amber: #ff8;
      --mood-dial-black: #000;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Courier New', Courier, monospace;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    html, body {
      width: 100%;
      height: 100%;
      background: var(--bg-color);
      color: var(--text-color);
      overflow: hidden;
      user-select: none;
    }

    .container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0) 1px,
        var(--bg-color) 1px,
        var(--bg-color) 2px
      );
    }

    .teletext-screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      background: var(--bg-color);
      color: var(--text-color);
      padding: 0 1em;
    }

    .teletext-header {
      font-size: 1.2em;
      margin-bottom: 0.5em;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .teletext-header .time {
      background: var(--highlight-color);
      padding: 0.2em 0.5em;
      border-radius: 2px;
    }

    .teletext-header .channel {
      font-weight: bold;
      color: var(--highlight-color);
    }

    .teletext-content {
      flex: 1;
      overflow-y: auto;
      padding: 0.5em 0;
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      position: relative;
    }

    .teletext-content::-webkit-scrollbar {
      width: 6px;
      background: transparent;
    }

    .teletext-content::-webkit-scrollbar-thumb {
      background: var(--fg-color);
      border-radius: 3px;
    }

    .line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.3em 0;
      font-size: 1em;
      position: relative;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .line > .label {
      font-weight: bold;
      color: var(--fg-color);
    }

    .line > .value {
      font-weight: normal;
      color: var(--text-color);
    }

    .line .error {
      color: #f44;
    }

    .line .success {
      color: #0f0;
    }

    .line .empty {
      color: #666;
    }

    .mood-dial {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 4px solid var(--fg-color);
      background: conic-gradient(
        var(--mood-dial-green) 0%,
        var(--mood-dial-amber) 30%,
        var(--mood-dial-red) 60%,
        var(--mood-dial-black) 90%
      );
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
      text-align: center;
      color: var(--text-color);
      pointer-events: none;
      transition: transform 0.3s ease;
    }

    .mood-dial::before {
      content: '📈';
      font-size: 1.5em;
      opacity: 0.4;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(180deg);
    }

    .mood-dial .current {
      font-size: 1.5em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      user-select: none;
    }

    .channel-control {
      position: absolute;
      top: 10px;
      right: 20px;
      background: var(--bg-color);
      border: 1px solid var(--fg-color);
      border-radius: 4px;
      padding: 0.5em 0.8em;
      font-size: 1em;
      color: var(--fg-color);
      cursor: pointer;
      outline: none;
      transition: background 0.2s, color 0.2s;
    }

    .channel-control:focus {
      background: var(--fg-color);
      color: #000;
    }

    .channel-control::after {
      content: '▲';
      font-size: 0.8em;
      margin-left: 0.3em;
      transition: transform 0.2s ease;
    }

    .channel-control.active::after {
      transform: rotate(180deg);
    }

    @media (prefers-reduced-motion: no-preference) {
      .mood-dial {
        animation: spin 6s linear infinite;
      }

      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
    }

    @media (min-width: 390px) and (max-width: 768px) {
      .mood-dial {
        width: 140px;
        height: 140px;
      }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
      .mood-dial {
        width: 180px;
        height: 180px;
      }
    }

    @media (min-width: 1025px) {
      .mood-dial {
        width: 220px;
        height: 220px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="teletext-screen">
      <div class="teletext-header">
        <div class="time" id="time">13:45</div>
        <div class="channel" id="channel">Channel 6</div>
      </div>
      <div class="teletext-content" id="content">
        <div class="line">
          <span class="label">GDP Growth (2025 Q1):</span>
          <span class="value" id="gdp">Loading...</span>
        </div>
        <div class="line">
          <span class="label">Inflation Rate:</span>
          <span class="value" id="inflation">Loading...</span>
        </div>
        <div class="line">
          <span class="label">Industrial Output:</span>
          <span class="value" id="output">Loading...</span>
        </div>
        <div class="line">
          <span class="label">Trade Balance:</span>
          <span class="value" id="trade">Loading...</span>
        </div>
        <div class="line">
          <span class="label">Currency Index (Stal)</span>
          <span class="value" id="currency">Loading...</span>
        </div>
        <div class="line">
          <span class="label">Consumer Confidence:</span>
          <span class="value" id="confidence">Loading...</span>
        </div>
        <div class="line">
          <span class="label">Employment Rate:</span>
          <span class="value" id="employment">Loading...</span>
        </div>
        <div class="line">
          <span class="label">Government Debt:</span>
          <span class="value" id="debt">Loading...</span>
        </div>
      </div>
      <div class="mood-dial" id="mood-dial">
        <div class="current" id="mood-text">Neutral</div>
      </div>
    </div>
    <button class="channel-control" id="flip-channel">Flip Channel</button>
  </div>

  <script>
    const timeElement = document.getElementById('time');
    const channelElement = document.getElementById('channel');
    const contentElement = document.getElementById('content');
    const moodDial = document.getElementById('mood-dial');
    const moodText = document.getElementById('mood-text');
    const flipButton = document.getElementById('flip-channel');
    const gdp = document.getElementById('gdp');
    const inflation = document.getElementById('inflation');
    const output = document.getElementById('output');
    const trade = document.getElementById('trade');
    const currency = document.getElementById('currency');
    const confidence = document.getElementById('confidence');
    const employment = document.getElementById('employment');
    const debt = document.getElementById('debt');

    const channels = [
      {
        name: '6',
        data: {
          gdp: '2.7%',
          inflation: '3.4%',
          output: '102%',
          trade: '+2.1%',
          currency: 'Stal 1.35',
          confidence: '65%',
          employment: '58%',
          debt: '34%',
          mood: 'green'
        }
      },
      {
        name: '7',
        data: {
          gdp: '-0.5%',
          inflation: '6.1%',
          output: '93%',
          trade: '-3.4%',
          currency: 'Stal 1.17',
          confidence: '42%',
          employment: '53%',
          debt: '39%',
          mood: 'red'
        }
      },
      {
        name: '8',
        data: {
          gdp: '1.1%',
          inflation: '2.2%',
          output: '105%',
          trade: '+1.8%',
          currency: 'Stal 1.41',
          confidence: '73%',
          employment: '61%',
          debt: '29%',
          mood: 'green'
        }
      },
      {
        name: '9',
        data: {
          gdp: '3.0%',
          inflation: '1.8%',
          output: '109%',
          trade: '+4.0%',
          currency: 'Stal 1.39',
          confidence: '69%',
          employment: '57%',
          debt: '33%',
          mood: 'amber'
        }
      }
    ];

    let currentChannelIndex = 0;

    function updateDisplay(channel) {
      gdp.textContent = channel.data.gdp;
      inflation.textContent = channel.data.inflation;
      output.textContent = channel.data.output;
      trade.textContent = channel.data.trade;
      currency.textContent = channel.data.currency;
      confidence.textContent = channel.data.confidence;
      employment.textContent = channel.data.employment;
      debt.textContent = channel.data.debt;

      const mood = channel.data.mood;
      let angle = 0;
      let moodTextValue = 'Neutral';

      if (mood === 'green') {
        angle = 30;
        moodTextValue = 'Bullish';
      } else if (mood === 'amber') {
        angle = 150;
        moodTextValue = 'Stable';
      } else if (mood === 'red') {
        angle = 270;
        moodTextValue = 'Bearish';
      }

      moodDial.style.background = `conic-gradient(
        var(--mood-dial-green) 0%,
        var(--mood-dial-amber) 30%,
        var(--mood-dial-red) 60%,
        var(--mood-dial-black) 90%
      )`;
      moodDial.style.transform = `rotate(${angle}deg)`;
      moodText.textContent = moodTextValue;
    }

    function updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      timeElement.textContent = `${hours}:${minutes}`;
    }

    function start() {
      updateTime();
      setInterval(updateTime, 1000);
      updateDisplay(channels[currentChannelIndex]);
    }

    function flipChannel() {
      currentChannelIndex = (currentChannelIndex + 1) % channels.length;
      updateDisplay(channels[currentChannelIndex]);
    }

    function init() {
      document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowUp' || e.key === ' ') {
          flipChannel();
        }
      });

      flipButton.addEventListener('click', flipChannel);
      flipButton.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          flipChannel();
        }
      });

      start();
    }

    init();
  </script>
</body>
</html>