<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>© 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 });
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.