Update templates/index.html
This commit is contained in:
@@ -1,84 +1,122 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Stock Trading Game</title>
|
<title>Stock Trading Game</title>
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||||
</head>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
<body>
|
</head>
|
||||||
<div class="container">
|
<body>
|
||||||
<h1>Stock Trading Game</h1>
|
<div class="container">
|
||||||
|
<h1>Stock Trading Game</h1>
|
||||||
<!-- Start Game Screen -->
|
|
||||||
<div id="startScreen" class="screen">
|
<!-- Start Game Screen -->
|
||||||
<h2>Welcome to the Stock Game!</h2>
|
<div id="startScreen" class="screen">
|
||||||
<div class="form-group">
|
<h2>Welcome to the Stock Game!</h2>
|
||||||
<label for="daysInput">How many days do you wish to play?</label>
|
<div class="form-group">
|
||||||
<input type="number" id="daysInput" min="1" max="100" value="5">
|
<label for="daysInput">How many days do you wish to play?</label>
|
||||||
<button onclick="startGame()">Start Game</button>
|
<input type="number" id="daysInput" min="1" max="100" value="5">
|
||||||
</div>
|
<button onclick="startGame()">Start Game</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
<!-- Game Screen -->
|
<button onclick="viewLeaderboard()" class="btn-leaderboard">View Leaderboard</button>
|
||||||
<div id="gameScreen" class="screen hidden">
|
</div>
|
||||||
<div class="game-header">
|
</div>
|
||||||
<div class="info-box">
|
|
||||||
<h3>Balance: $<span id="balance">0</span></h3>
|
<!-- Game Screen -->
|
||||||
<h3>Day: <span id="day">1</span>/<span id="totalDays">5</span></h3>
|
<div id="gameScreen" class="screen hidden">
|
||||||
<h3>Market Index: <span id="index">0</span></h3>
|
<div id="message" class="message" style="margin-bottom: 20px;"></div>
|
||||||
</div>
|
|
||||||
<div id="message" class="message"></div>
|
<div class="game-content">
|
||||||
</div>
|
|
||||||
|
<div class="section">
|
||||||
<div class="game-content">
|
<h3>Stock Prices</h3>
|
||||||
<div class="section">
|
<div id="stocksList" class="stocks-list"></div>
|
||||||
<h3>Stock Prices</h3>
|
</div>
|
||||||
<div id="stocksList" class="stocks-list"></div>
|
|
||||||
</div>
|
<div class="section">
|
||||||
|
<h3>Your Holdings</h3>
|
||||||
<div class="section">
|
<div id="holdingsList" class="holdings-list"></div>
|
||||||
<h3>Your Holdings</h3>
|
</div>
|
||||||
<div id="holdingsList" class="holdings-list"></div>
|
|
||||||
</div>
|
<div class="section">
|
||||||
|
<h3>Buy/Sell Stocks</h3>
|
||||||
<div class="section">
|
<div class="form-group">
|
||||||
<h3>Buy/Sell Stocks</h3>
|
<label for="stockSelect">Select Stock:</label>
|
||||||
<div class="form-group">
|
<select id="stockSelect"></select>
|
||||||
<label for="stockSelect">Select Stock:</label>
|
</div>
|
||||||
<select id="stockSelect"></select>
|
<div class="form-group">
|
||||||
</div>
|
<label for="amountInput">Amount:</label>
|
||||||
<div class="form-group">
|
<input type="number" id="amountInput" min="1" value="1">
|
||||||
<label for="amountInput">Amount:</label>
|
</div>
|
||||||
<input type="number" id="amountInput" min="1" value="1">
|
<div class="button-group">
|
||||||
</div>
|
<button onclick="buyStock()" class="btn-buy">Buy</button>
|
||||||
<div class="button-group">
|
<button onclick="sellStock()" class="btn-sell">Sell</button>
|
||||||
<button onclick="buyStock()" class="btn-buy">Buy</button>
|
</div>
|
||||||
<button onclick="sellStock()" class="btn-sell">Sell</button>
|
<div class="button-group">
|
||||||
</div>
|
<button onclick="buyAll()" class="btn-buy-all">Buy All</button>
|
||||||
</div>
|
<button onclick="sellAll()" class="btn-sell-all">Sell All</button>
|
||||||
|
</div>
|
||||||
<div class="section">
|
</div>
|
||||||
<button onclick="nextDay()" class="btn-next-day">Next Day</button>
|
|
||||||
</div>
|
<div class="section">
|
||||||
</div>
|
<div class="info-box">
|
||||||
</div>
|
<h3>Balance: $<span id="balance">0</span></h3>
|
||||||
|
<h3>Day: <span id="day">1</span>/<span id="totalDays">5</span></h3>
|
||||||
<!-- End Game Screen -->
|
<h3>Market Index: <span id="index">0</span></h3>
|
||||||
<div id="endScreen" class="screen hidden">
|
</div>
|
||||||
<h2>Game Over!</h2>
|
<button onclick="nextDay()" class="btn-next-day">Next Day</button>
|
||||||
<div class="end-stats">
|
</div>
|
||||||
<p>Starting Balance: $<span id="startBalance">1000</span></p>
|
</div>
|
||||||
<p>Ending Balance: $<span id="endBalance">0</span></p>
|
|
||||||
<p>Total Net Worth: $<span id="netWorth">0</span></p>
|
<div class="charts-container">
|
||||||
<p class="profit" id="profitText">Profit: $<span id="profit">0</span></p>
|
<h3 style="grid-column: 1/-1; margin-bottom: 10px;">Stock Price Trends</h3>
|
||||||
<h3>Final Holdings:</h3>
|
<div class="chart-item" style="grid-column: 1/-1;">
|
||||||
<div id="finalHoldings"></div>
|
<canvas id="priceChart"></canvas>
|
||||||
<button onclick="location.reload()">Play Again</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<!-- End Game Screen -->
|
||||||
<script src="{{ url_for('static', filename='game.js') }}"></script>
|
<div id="endScreen" class="screen hidden">
|
||||||
</body>
|
<h2>Game Over!</h2>
|
||||||
</html>
|
<div class="end-stats">
|
||||||
|
<p>Starting Balance: $<span id="startBalance">1000</span></p>
|
||||||
|
<p>Ending Balance: $<span id="endBalance">0</span></p>
|
||||||
|
<p>Total Net Worth: $<span id="netWorth">0</span></p>
|
||||||
|
<p class="profit" id="profitText">Profit: $<span id="profit">0</span></p>
|
||||||
|
<h3>Final Holdings:</h3>
|
||||||
|
<div id="finalHoldings"></div>
|
||||||
|
|
||||||
|
<div class="charts-container" style="margin-top: 30px;">
|
||||||
|
<h3 style="grid-column: 1/-1; margin-bottom: 10px;">Final Price Trends</h3>
|
||||||
|
<div class="chart-item" style="grid-column: 1/-1;">
|
||||||
|
<canvas id="endPriceChart"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="playerName">Enter your name for the scoreboard:</label>
|
||||||
|
<input type="text" id="playerName" placeholder="Your Name" value="">
|
||||||
|
<button onclick="saveScore()" class="btn-save-score">Save Score</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button onclick="location.reload()">Play Again</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Leaderboard Screen -->
|
||||||
|
<div id="leaderboardScreen" class="screen hidden">
|
||||||
|
<h2>Leaderboard</h2>
|
||||||
|
<div class="leaderboard-container">
|
||||||
|
<div id="leaderboardList" class="leaderboard-list"></div>
|
||||||
|
<div id="emptyLeaderboard" class="empty-message">No scores yet. Be the first to play!</div>
|
||||||
|
</div>
|
||||||
|
<button onclick="backToStart()" class="btn-back">Back to Start</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="{{ url_for('static', filename='game.js') }}"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user