popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Position Size Calculator</title>
</head>
<body>
    <div class="container">
        <h1>Trade Tools</h1>
        <div class="tabs">
            <button class="tab-button active" onclick="openTab('positionSizeTab')">Position Size</button>
            <button class="tab-button" onclick="openTab('tradeLogTab')">Trade Log</button>
        </div>

        <div id="positionSizeTab" class="tab-content active">
            <label for="balance">Balance ($):</label>
            <input type="number" id="balance" placeholder="Enter your balance">

            <label for="risk">Risk Size (%):</label>
            <input type="number" id="risk" placeholder="Enter risk size">

            <label for="stopLoss">Stop Loss ($):</label>
            <input type="number" id="stopLoss" placeholder="Enter stop loss">

            <button id="calculate">Calculate</button>

            <h2>Results:</h2>
            <p id="riskAmount">Risk Amount: $0</p>
            <p id="positionSize">Position Size: 0 shares</p>
        </div>

        <div id="tradeLogTab" class="tab-content">
            <label for="entryPrice">Entry Price ($):</label>
            <input type="number" id="entryPrice" placeholder="Enter entry price">
            
            <label for="profit">Profit ($):</label>
            <input type="number" id="profit" placeholder="Enter profit">
            
            <button id="addTrade">Add Trade</button>
            
            <h3>Trade List:</h3>
            <table id="tradeList">
                <thead>
                    <tr>
                        <th>Entry Price</th>
                        <th>Profit</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Trade entries will be dynamically added here -->
                </tbody>
                <tfoot>
                    <tr>
                        <td class="total">Total Daily Profit:</td>
                        <td id="totalProfit" class="total">$0</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <script src="popup.js"></script>
</body>
</html>