jmcpheron/booger_quest
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

🤖 Plandex → apply pending changes

Browse source 
✏️  Update game elements with Bootstrap styling and modernize button design
This commit is contained in:
Jason McPheron 2024-04-21 10:02:52 -07:00
parent 9e253a1cfb
commit c3ebef7a59
2 changed files with 49 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
public/index.html
View file

@ -4,23 +4,32 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎉 Zany Timer Extravaganza 🎉</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="main-content">
<h1>Welcome to the 🎉 Zany Timer Extravaganza 🎉</h1>
<p>Try to tap the timer button consistently to play the game. 🕒</p>
<button id="timerButton">⏱️ Start/Stop Timer ⏱️</button>
<div id="timerHistory">
<h2>Timer History 📜</h2>
<ul id="historyList"></ul>
<div class="container mt-5">
<div class="card">
<div class="card-body">
<h1 class="card-title">Welcome to the 🎉 Zany Timer Extravaganza 🎉</h1>
<p class="card-text">Try to tap the timer button consistently to play the game. 🕒</p>
<button id="timerButton" class="btn btn-primary">⏱️ Start/Stop Timer ⏱️</button>
<div id="timerHistory" class="mt-3">
<h2>Timer History 📜</h2>
<ul id="historyList"></ul>
</div>
</div>
</div>
<button id="challengeButton">⏱️ 2-Second Challenge ⏱️</button>
<div id="challengeResults">
<h2>Challenge Results 🎯</h2>
<ul id="resultsList"></ul>
<div class="card mt-3">
<div class="card-body">
<button id="challengeButton" class="btn btn-success">⏱️ 2-Second Challenge ⏱️</button>
<div id="challengeResults" class="mt-3">
<h2>Challenge Results 🎯</h2>
<ul id="resultsList"></ul>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
</body>
</html>

28
public/styles.css
View file

@ -1 +1,27 @@
#timerButton, #challengeButton {\n background-color: #32cd32; /* Lime green */\n color: #ff6347; /* Tomato */\n border: 2px solid #9400d3; /* Dark violet */\n padding: 10px 20px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 10px;\n cursor: pointer;\n border-radius: 8px;\n}\n#timerHistory, #challengeResults {\n margin-top: 20px;\n color: #000080; /* Navy */\n}
body {
font-family: 'Papyrus', sans-serif;
background-color: #ffccf9; /* Light pink */
color: #006400; /* Dark green */
text-align: center;
padding: 20px;
}
.main-content {
margin: auto;
width: 500px;
padding: 20px;
border: 2px dashed #ff4500; /* Orange red */
border-radius: 10px;
background-color: #ffffe0; /* Light yellow */
}
.btn {
font-size: 16px;
border-radius: 8px;
padding: 10px 20px;
margin: 10px;
}
#timerHistory, #challengeResults {
color: #000080; /* Navy */
}