1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < title > Grind Mindset</ title >
8+ < link rel ="stylesheet " href ="style.css ">
9+ </ head >
10+
11+ < body >
12+ < h1 > Grind Mindset</ h1 >
13+
14+ < div id ="controls ">
15+ < button id ="save-button "> Save Game</ button >
16+ < button id ="restart-button "> Restart Game</ button >
17+ < button id ="dark-mode-button "> Toggle Dark Mode</ button >
18+ <!-- Add Prestige Button -->
19+ < button id ="prestige-button " title ="Requires $10.00B to Prestige " disabled > Prestige</ button >
20+ </ div >
21+
22+ < div id ="stats ">
23+ < p > Money: $< span id ="money "> 0</ span > </ p >
24+ < p > Income / sec: $< span id ="income-rate "> 0</ span > </ p >
25+ <!-- Add Investor Display -->
26+ < p > Investors: < span id ="investors "> 0</ span > </ p >
27+ < p id ="current-work "> Currently Working: None</ p >
28+ <!-- City Navigation (Initially Hidden) -->
29+ < div id ="city-navigation " style ="display: none; margin-top: 10px; ">
30+ < button id ="prev-city-button ">
31+ < Prev City</ button >
32+ < span id ="current-city-display "> City 1</ span >
33+ <!-- Next City and Build City buttons will occupy the same space -->
34+ < button id ="next-city-button "> Next City ></ button >
35+ < button id ="build-city-button " style ="display: none; "> +</ button >
36+ </ div >
37+ < p id ="save-status " style ="font-size: 0.8em; color: #888; margin-top: 5px; "> </ p >
38+ </ div >
39+
40+ <!-- New Main Content Wrapper -->
41+ < div id ="main-content ">
42+ < div id ="game-area ">
43+ <!-- Buildings and potentially the 'Add Building' button will be added here by JavaScript -->
44+ </ div >
45+
46+ <!-- Upgrades Section -->
47+ < div id ="upgrades-section ">
48+ < h2 > Upgrades</ h2 >
49+ < div id ="upgrades-container ">
50+ <!-- Upgrades will be added here by JavaScript -->
51+ </ div >
52+ </ div >
53+ </ div >
54+ <!-- End Main Content Wrapper -->
55+
56+ <!-- NEW: End Game Screen (Initially Hidden) -->
57+ < div id ="end-game-screen " style ="display: none; text-align: center; margin-top: 50px; ">
58+ < h2 > Congratulations!</ h2 >
59+ < p > You have achieved Singularity and completed the Grind Mindset.</ p >
60+ < p > Thank you for playing!</ p >
61+ <!-- The restart button will remain from the #controls div -->
62+ </ div >
63+ <!-- END: End Game Screen -->
64+
65+ < div id ="building-modal " class ="modal ">
66+ < div class ="modal-content ">
67+ < span class ="close-button "> ×</ span >
68+ < h2 id ="modal-building-name "> Building Name</ h2 >
69+ < p > Type: < span id ="modal-building-type "> Type</ span > </ p >
70+ < p > Level: < span id ="modal-building-level "> 1</ span > </ p >
71+ < p > Price: < span id ="modal-building-price "> 0</ span > $</ p >
72+ < p > Current Revenue/Boost: < span id ="modal-building-revenue "> 0</ span > < span
73+ id ="modal-revenue-unit "> /sec</ span > </ p >
74+ < p > City: < span id ="modal-building-city "> 1</ span > </ p >
75+ < hr > <!-- First HR -->
76+ < div id ="modal-worker-info " style ="display: none; ">
77+ < p > Looking for Worker: < span id ="modal-looking-worker "> No</ span > </ p >
78+ < p > Worker Pay: < span id ="modal-worker-pay "> 0</ span > $/click</ p >
79+ </ div >
80+ <!-- Add an ID to this HR -->
81+ < hr id ="modal-second-hr ">
82+ <!-- End Upgrade Section -->
83+ < div id ="modal-upgrade-section " style ="display: none; ">
84+ < p > Next Upgrade Cost: $< span id ="modal-upgrade-cost "> 0</ span > </ p >
85+ < p > Revenue/Boost Increase per Upgrade: +< span id ="modal-upgrade-benefit "> 0</ span > < span
86+ id ="modal-upgrade-benefit-unit "> /sec</ span > </ p >
87+ < button id ="modal-upgrade-button "> Upgrade</ button >
88+ < hr > <!-- This third HR is inside the upgrade section, leave it -->
89+ </ div >
90+ <!-- End Upgrade Section -->
91+ < div id ="modal-actions ">
92+ < button id ="modal-buy-button "> Buy</ button >
93+ < button id ="modal-work-button "> Work Here</ button >
94+ </ div >
95+ < div id ="inflation-message "
96+ style ="font-size: 0.9em; color: #e67e22; margin-top: 10px; font-weight: bold; display: none; ">
97+ </ div >
98+ </ div >
99+ </ div >
100+
101+ <!-- Prestige Menu Modal -->
102+ < div id ="prestige-modal " class ="modal ">
103+ < div class ="modal-content ">
104+ < h2 > Prestige!</ h2 >
105+ < p > You gained < strong id ="prestige-gained-investors "> X</ strong > Investors!</ p >
106+ < p > Total Investors: < strong id ="prestige-total-investors "> Y</ strong > </ p >
107+ < hr >
108+ < h3 > Investor Upgrades</ h3 >
109+ < p > Spend Investors to permanently boost income. These upgrades persist through prestiges.</ p >
110+ < div id ="prestige-upgrades-container ">
111+ <!-- Special upgrades will be added here by JavaScript -->
112+ <!-- Example Structure Modified for Levels:
113+ <div class="prestige-upgrade-item">
114+ <img src="images/commercial_boost.png" alt="Comm Boost">
115+ <div class="prestige-upgrade-info">
116+ <h4>Commercial Focus (Level 1/3)</h4>
117+ <p>Multiplies income from owned Commercial buildings (Current: x2, Next: x4).</p>
118+ <p>Next Level Cost: 2 Investors</p>
119+ </div>
120+ <button class="prestige-upgrade-buy" data-upgrade-id="commercialIncomeDoubler" disabled>Buy Level 2</button>
121+ <span class="prestige-upgrade-bought">Max Level (x8)</span>
122+ </div>
123+ -->
124+ </ div >
125+ < hr >
126+ < button id ="prestige-continue-button "> Continue Run</ button >
127+ </ div >
128+ </ div >
129+
130+
131+ < script src ="script.js "> </ script >
132+
133+ </ body >
134+
135+ </ html >
0 commit comments