index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COBOL → Python Translator</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0f1117; color: #e0e0e0; padding: 2rem; }
  h1 { font-size: 1.6rem; color: #fff; margin-bottom: 0.4rem; }
  .subtitle { color: #888; font-size: 0.9rem; margin-bottom: 2rem; }
  .badge { display: inline-block; background: #1e293b; border: 1px solid #334; color: #94a3b8; font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; margin-right: 6px; }
  .examples { display: flex; flex-direction: column; gap: 1.5rem; max-width: 860px; margin: 0 auto; }
  .card { background: #1a1d27; border: 1px solid #2a2d3a; border-radius: 10px; overflow: hidden; }
  .card-header { padding: 0.75rem 1rem; background: #13151f; font-size: 0.8rem; color: #666; border-bottom: 1px solid #2a2d3a; }
  .split { display: grid; grid-template-columns: 1fr 1fr; }
  .pane { padding: 1rem; }
  .pane:first-child { border-right: 1px solid #2a2d3a; }
  .lang { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
  .cobol-label { color: #f59e0b; }
  .python-label { color: #34d399; }
  pre { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; }
  .cobol { color: #fcd34d; }
  .python { color: #6ee7b7; }
  .stats { display: flex; gap: 2rem; justify-content: center; margin: 0 auto 2rem; max-width: 860px; }
  .stat { text-align: center; }
  .stat-val { font-size: 1.4rem; font-weight: 700; color: #fff; }
  .stat-label { font-size: 0.75rem; color: #666; margin-top: 2px; }
  .links { text-align: center; margin-top: 2rem; }
  .links a { color: #818cf8; text-decoration: none; margin: 0 1rem; font-size: 0.9rem; }
  .links a:hover { text-decoration: underline; }
  @media(max-width: 600px) { .split { grid-template-columns: 1fr; } .pane:first-child { border-right: none; border-bottom: 1px solid #2a2d3a; } }
</style>
</head>
<body>

<div style="max-width:860px;margin:0 auto">
  <h1>COBOL → Python Translator</h1>
  <p class="subtitle">
    <span class="badge">Qwen2.5-Coder-1.5B</span>
    <span class="badge">QLoRA · Unsloth</span>
    <span class="badge">Training loss 2.14 → 0.13</span>
  </p>

  <div class="stats">
    <div class="stat"><div class="stat-val">1.5B</div><div class="stat-label">Parameters</div></div>
    <div class="stat"><div class="stat-val">125</div><div class="stat-label">Training steps</div></div>
    <div class="stat"><div class="stat-val">0.13</div><div class="stat-label">Final loss</div></div>
    <div class="stat"><div class="stat-val">94%</div><div class="stat-label">Loss reduction</div></div>
  </div>

  <div class="examples">

    <div class="card">
      <div class="card-header">Example 1 — Arithmetic computation</div>
      <div class="split">
        <div class="pane">
          <div class="lang cobol-label">COBOL</div>
          <pre class="cobol">COMPUTE WS-TAX = WS-PRICE * WS-TAX-RATE</pre>
        </div>
        <div class="pane">
          <div class="lang python-label">Python</div>
          <pre class="python">from decimal import Decimal
ws_tax = Decimal(str(ws_price)) * Decimal(str(ws_tax_rate))</pre>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">Example 2 — String move</div>
      <div class="split">
        <div class="pane">
          <div class="lang cobol-label">COBOL</div>
          <pre class="cobol">MOVE WS-CUSTOMER-NAME TO WS-OUTPUT-NAME</pre>
        </div>
        <div class="pane">
          <div class="lang python-label">Python</div>
          <pre class="python">ws_output_name = ws_customer_name</pre>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">Example 3 — Conditional logic</div>
      <div class="split">
        <div class="pane">
          <div class="lang cobol-label">COBOL</div>
          <pre class="cobol">IF WS-BALANCE > ZERO
   PERFORM CREDIT-ROUTINE
END-IF</pre>
        </div>
        <div class="pane">
          <div class="lang python-label">Python</div>
          <pre class="python">if ws_balance > 0:
    credit_routine()</pre>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">Example 4 — Loop</div>
      <div class="split">
        <div class="pane">
          <div class="lang cobol-label">COBOL</div>
          <pre class="cobol">PERFORM VARYING WS-IDX FROM 1 BY 1
    UNTIL WS-IDX > WS-MAX
    ADD 1 TO WS-TOTAL
END-PERFORM</pre>
        </div>
        <div class="pane">
          <div class="lang python-label">Python</div>
          <pre class="python">for ws_idx in range(1, ws_max + 1):
    ws_total += 1</pre>
        </div>
      </div>
    </div>

  </div>

  <div class="links">
    <a href="https://huggingface.co/dishants0605/qwen2.5-cobol-python-translator">Model on HuggingFace</a>
    <a href="https://github.com/dishantSasane/Cobol-Python-Fine-Tuning">GitHub</a>
  </div>
</div>

</body>
</html>