Account

Manage contracts effortlessly with Ayght.

Empowering sports enthusiasts with data-driven insights.

Create a Contract

Team	Game	Date	Amount	Odds	Payout

Submit

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mock Stock Trading Platform</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0; padding: 0;
      background: #f4f4f4;
    }
    header {
      background: #2c3e50;
      color: #fff;
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    header button {
      background: #e74c3c;
      border: none;
      color: #fff;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
    main {
      padding: 1rem;
      max-width: 900px;
      margin: auto;
    }
    .section {
      background: #fff;
      padding: 1rem;
      margin-bottom: 1rem;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .section h2 {
      margin-top: 0;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0.5rem;
    }
    table, th, td {
      border: 1px solid #ddd;
    }
    th, td {
      padding: 0.5rem;
      text-align: left;
    }
    input, select {
      padding: 0.5rem;
      margin: 0.25rem 0;
      width: 100%;
      box-sizing: border-box;
    }
    button.primary {
      background: #3498db;
      border: none;
      color: #fff;
      padding: 0.5rem 1rem;
      cursor: pointer;
      margin-top: 0.5rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>MyTradeX</h1>
    <button id="btn-login">Log In</button>
  </header>

  <main>
    <!-- Portfolio Display -->
    <section class="section" id="portfolio-section">
      <h2>Your Portfolio</h2>
      <table id="portfolio-table">
        <thead>
          <tr>
            <th>Symbol</th>
            <th>Shares</th>
            <th>Avg. Cost</th>
            <th>Market Value</th>
          </tr>
        </thead>
        <tbody>
          <!-- Rows injected by JS -->
        </tbody>
      </table>
    </section>

    <!-- Price Lookup -->
    <section class="section">
      <h2>Get Real‑Time Price</h2>
      <label for="symbol-input">Symbol:</label>
      <input type="text" id="symbol-input" placeholder="e.g. AAPL">
      <button class="primary" id="btn-get-price">Lookup Price</button>
      <p id="price-display">Enter a symbol and click “Lookup Price.”</p>
    </section>

    <!-- Order Entry -->
    <section class="section">
      <h2>Place an Order</h2>
      <form id="order-form">
        <label for="order-symbol">Symbol:</label>
        <input type="text" id="order-symbol" required>

        <label for="order-type">Type:</label>
        <select id="order-type">
          <option value="buy">Buy</option>
          <option value="sell">Sell</option>
        </select>

        <label for="order-quantity">Quantity:</label>
        <input type="number" id="order-quantity" min="1" required>

        <button type="submit" class="primary">Submit Order</button>
      </form>
      <p id="order-status"></p>
    </section>
  </main>

  <script>
    // Mock portfolio data
    let portfolio = [
      { symbol: 'AAPL', shares: 10, avgCost: 120.50 },
      { symbol: 'TSLA', shares: 5,  avgCost: 600.00 }
    ];

    // Utility to format currency
    function fmtUSD(x) {
      return '$' + x.toFixed(2);
    }

    // Render portfolio
    function renderPortfolio() {
      const tbody = document.querySelector('#portfolio-table tbody');
      tbody.innerHTML = '';
      portfolio.forEach(pos => {
        // In a real app, you'd fetch real-time price here per row
        const marketVal = pos.shares * pos.avgCost;  // placeholder uses cost
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${pos.symbol}</td>
          <td>${pos.shares}</td>
          <td>${fmtUSD(pos.avgCost)}</td>
          <td>${fmtUSD(marketVal)}</td>
        `;
        tbody.appendChild(tr);
      });
    }

    // Price lookup handler
    document.getElementById('btn-get-price').onclick = async () => {
      const sym = document.getElementById('symbol-input').value.trim().toUpperCase();
      const disp = document.getElementById('price-display');
      if (!sym) {
        disp.textContent = 'Please enter a symbol.';
        return;
      }
      disp.textContent = 'Fetching price…';
      try {
        // TODO: replace URL with your real backend or market data API
        const resp = await fetch(`https://api.example.com/price?symbol=${sym}`);
        if (!resp.ok) throw new Error('Network response was not ok');
        const data = await resp.json();  // expects { price: 123.45 }
        disp.textContent = `${sym}: ${fmtUSD(data.price)}`;
      } catch (err) {
        disp.textContent = 'Error fetching price.';
        console.error(err);
      }
    };

    // Order submission handler
    document.getElementById('order-form').onsubmit = async (e) => {
      e.preventDefault();
      const sym  = document.getElementById('order-symbol').value.trim().toUpperCase();
      const type = document.getElementById('order-type').value;
      const qty  = Number(document.getElementById('order-quantity').value);
      const status = document.getElementById('order-status');
      status.textContent = 'Placing order…';

      try {
        // TODO: replace URL with your real order‐entry endpoint
        const resp = await fetch('https://api.example.com/orders', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ symbol: sym, side: type, quantity: qty })
        });
        if (!resp.ok) throw new Error('Order rejected');
        const result = await resp.json();  // expects { success: true, fillPrice: 123.45 }
        status.textContent = `Order executed at ${fmtUSD(result.fillPrice)}`;
        // Optionally update portfolio here…
      } catch (err) {
        status.textContent = 'Order failed.';
        console.error(err);
      }
    };

    // Initial render
    renderPortfolio();
  </script>
</body>
</html>

Open Contracts

View open contracts from other users.

Open Contracts	Event	Event Date	Odds	Cost	Fill
Atlanta Braves	Win game against Royals	7/23/25	2:1	$100	1 of 2
Colts	Win 2026 Super Bowl	2/16/26	1000:1	$100	750 of 1000
Jacksonville Jaguars	Win 2026 Super Bowl	2/16/26	1500:1	$100	120 of 1500
Boston Bruins	Win 2025 Stanley Cup	6/18/25	10:1	$100	9 of 10