<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Investment Broker App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Login/Signup Form -->
    <div class="auth-container">
        <div class="auth-box">
            <div class="auth-image-container">
                <img src="https://via.placeholder.com/400" alt="Random Image" class="auth-image">
            </div>
            <div class="form-container">
                <h2>Login</h2>
                <form id="loginForm">
                    <input type="text" id="loginUsername" placeholder="Username" required>
                    <input type="password" id="loginPassword" placeholder="Password" required>
                    <button type="submit">Login</button>
                </form>
                <p class="switch-form">Don't have an account? <span id="to-signup">Signup</span></p>
            </div>
        </div>

        <div class="auth-box signup-box hidden">
            <div class="auth-image-container">
                <img src="https://via.placeholder.com/400" alt="Random Image" class="auth-image">
            </div>
            <div class="form-container">
                <h2>Signup</h2>
                <form id="signupForm">
                    <input type="text" id="signupUsername" placeholder="Username" required>
                    <input type="email" id="signupEmail" placeholder="Email" required>
                    <input type="password" id="signupPassword" placeholder="Password" required>
                    <button type="submit">Signup</button>
                </form>
                <p class="switch-form">Already have an account? <span id="to-login">Login</span></p>
            </div>
        </div>
    </div>

    <!-- Investment Broker App (Hidden Initially) -->
    <div id="investmentApp" class="hidden">
        <header class="header">
            <div class="logo">InvestNow</div>
            <nav>
                <ul>
                    <li><a href="#dashboard" id="dashboardLink">Dashboard</a></li>
                    <li><a href="#portfolio" id="portfolioLink">Portfolio</a></li>
                    <li><a href="#buy-sell" id="buySellLink">Buy/Sell</a></li>
                    <li><a href="#profile" id="profileLink">Profile</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <!-- Dashboard Section -->
            <section id="dashboard" class="section">
                <h1>Your Investment Overview</h1>
                <div class="overview">
                    <div class="card">
                        <h2>Total Balance</h2>
                        <p id="totalBalance">$500,000</p>
                    </div>
                    <div class="card">
                        <h2>Portfolio Value</h2>
                        <p id="portfolioValue">$475,000</p>
                    </div>
                    <div class="card">
                        <h2>Real-time Updates</h2>
                        <p id="marketUpdate">+1.5% today</p>
                    </div>
                </div>
            </section>

            <!-- Portfolio Section -->
            <section id="portfolio" class="section">
                <h1>Your Portfolio</h1>
                <div class="portfolio">
                    <div class="portfolio-item">
                        <p>Apple Inc.</p>
                        <p>Shares: 50</p>
                        <p>Current Price: $145.32</p>
                    </div>
                    <div class="portfolio-item">
                        <p>Tesla</p>
                        <p>Shares: 30</p>
                        <p>Current Price: $750.45</p>
                    </div>
                </div>
            </section>

            <!-- Buy/Sell Section -->
            <section id="buy-sell" class="section">
                <h1>Buy/Sell Stocks</h1>
                <div class="buy-sell-form">
                    <label for="stock">Stock Symbol:</label>
                    <input type="text" id="stock" placeholder="Enter stock symbol">
                    <label for="amount">Amount:</label>
                    <input type="number" id="amount" placeholder="Enter amount to buy/sell">
                    <button id="buyButton">Buy</button>
                    <button id="sellButton">Sell</button>
                </div>
            </section>

            <!-- Profile Section -->
            <section id="profile" class="section">
                <h1>Your Profile</h1>
                <div class="profile-info">
                    <p>Username: JohnDoe</p>
                    <p>Email: johndoe@example.com</p>
                    <p>Member Since: 2021</p>
                </div>
            </section>
        </main>

        <footer>
            <p>&copy; 2025 InvestNow. All rights reserved.</p>
        </footer>
    </div>

    <script src="app.js"></script>
</body>
</html>
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #333;
}

/* Authentication Container */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 900px;
    background-color: #fff;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    height: 600px;
}

/* Login/Signup Box */
.auth-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.auth-image-container {
    width: 50%;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.auth-image {
    width: 80%;
    height: auto;
    border-radius: 10px;
}

.form-container {
    width: 50%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.form-container h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #333;
}

.form-container input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.form-container button {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color 0.3s;
}

.form-container button:hover {
    background-color: #0056b3;
}

.switch-form {
    font-size: 0.9rem;
    margin-top: 20px;
}

.switch-form span {
    color: #007bff;
    cursor: pointer;
}

.switch-form span:hover {
    text-decoration: underline;
}

/* Hidden Class */
.hidden {
    display: none;
}

/* Investment Broker App */
#investmentApp {
    display: none;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #007bff;
    color: white;
    font-size: 1.2rem;
}

header .logo {
    font-weight: bold;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.section {
    padding: 20px;
}

.card {
    background-color: #f7f7f7;
    padding: 15px;
    margin: 10px;
    border-radius: 10px;
    text-align: center;
}

.card h2 {
    margin-bottom: 10px;
}

.card p {
    font-size: 1.2rem;
}

.buy-sell-form {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin: auto;
}

.buy-sell-form input {
    margin: 10px 0;
    padding: 10px;
}

.buy-sell-form button {
    margin: 10px 0;
}

// Simulated stock data for the user
let userBalance = 500000;
let userPortfolio = [
    { symbol: 'AAPL', shares: 50, price: 145.32 },
    { symbol: 'TSLA', shares: 30, price: 750.45 }
];

document.addEventListener("DOMContentLoaded", () => {
    // Display the dashboard after login
    displayDashboard();
    setupAuth();
    setupBuySell();
    setupNavigation();
});

function setupAuth() {
    document.getElementById('loginForm').addEventListener('submit', (event) => {
        event.preventDefault();
        const username = document.getElementById('loginUsername').value;
        const password = document.getElementById('loginPassword').value;

        // Simulating login process
        if (username === 'JohnDoe' && password === '12345') {
            document.querySelector('.auth-container').style.display = 'none';
            document.getElementById('investmentApp').style.display = 'block';
        }
    });

    document.getElementById('signupForm').addEventListener('submit', (event) => {
        event.preventDefault();
        alert('Signup successful!');
    });

    document.getElementById('to-signup').addEventListener('click', () => {
        document.querySelector('.login-box').classList.add('hidden');
        document.querySelector('.signup-box').classList.remove('hidden');
    });

    document.getElementById('to-login').addEventListener('click', () => {
        document.querySelector('.signup-box').classList.add('hidden');
        document.querySelector('.login-box').classList.remove('hidden');
    });
}

function setupNavigation() {
    // Handling internal navigation links
    document.getElementById('dashboardLink').addEventListener('click', () => {
        showSection('dashboard');
    });
    document.getElementById('portfolioLink').addEventListener('click', () => {
        showSection('portfolio');
    });
    document.getElementById('buySellLink').addEventListener('click', () => {
        showSection('buy-sell');
    });
    document.getElementById('profileLink').addEventListener('click', () => {
        showSection('profile');
    });
}

function showSection(sectionId) {
    const sections = document.querySelectorAll('.section');
    sections.forEach(section => {
        section.style.display = 'none';
    });
    document.getElementById(sectionId).style.display = 'block';
}

function displayDashboard() {
    // Display user balance and portfolio value on the dashboard
    document.getElementById('totalBalance').textContent = `$${userBalance.toLocaleString()}`;
    let totalPortfolioValue = 0;
    userPortfolio.forEach(stock => {
        totalPortfolioValue += stock.shares * stock.price;
    });
    document.getElementById('portfolioValue').textContent = `$${totalPortfolioValue.toLocaleString()}`;
}

function setupBuySell() {
    document.getElementById('buyButton').addEventListener('click', () => {
        const stockSymbol = document.getElementById('stock').value;
        const amount = parseInt(document.getElementById('amount').value);

        if (stockSymbol && amount > 0) {
            const stockPrice = getStockPrice(stockSymbol);
            if (stockPrice) {
                const totalCost = stockPrice * amount;
                if (userBalance >= totalCost) {
                    userBalance -= totalCost;
                    updatePortfolio(stockSymbol, amount, stockPrice);
                    displayDashboard();
                } else {
                    alert('Insufficient funds');
                }
            } else {
                alert('Invalid stock symbol');
            }
        }
    });

    document.getElementById('sellButton').addEventListener('click', () => {
        const stockSymbol = document.getElementById('stock').value;
        const amount = parseInt(document.getElementById('amount').value);

        if (stockSymbol && amount > 0) {
            const stockPrice = getStockPrice(stockSymbol);
            if (stockPrice) {
                const stock = userPortfolio.find(stock => stock.symbol === stockSymbol);
                if (stock && stock.shares >= amount) {
                    userBalance += stockPrice * amount;
                    stock.shares -= amount;
                    if (stock.shares === 0) {
                        userPortfolio = userPortfolio.filter(stock => stock.symbol !== stockSymbol);
                    }
                    displayDashboard();
                } else {
                    alert('Insufficient shares');
                }
            } else {
                alert('Invalid stock symbol');
            }
        }
    });
}

function getStockPrice(symbol) {
    // Simulating stock price retrieval
    const prices = {
        'AAPL': 145.32,
        'TSLA': 750.45,
        'GOOG': 2780.23,
        'AMZN': 3401.46
    };
    return prices[symbol.toUpperCase()];
}

function updatePortfolio(symbol, amount, price) {
    const existingStock = userPortfolio.find(stock => stock.symbol === symbol);
    if (existingStock) {
        existingStock.shares += amount;
    } else {
        userPortfolio.push({ symbol, shares: amount, price });
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.