Add title and instructions with some styling

zalbright90 · Jul 16, 2024 · 43792c7 · 43792c7
1 parent 4c81ecd
commit 43792c7
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,10 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <div class="title">
+        <h1>A Sourcerer's Calculator</h1>
+        <h2>Digit Wizard</h2>
+    </div>
     <div class="calculator">
         <div class="display"><div id="output">0</div></div>
         <div class="buttons">
@@ -37,6 +41,38 @@
             <button class="equals" data-key="=">=</button>
         </div>
     </div>
+    <div class="instructions">
+        <h2>Getting Started:</h2>
+        <p class="text">Display Area: The top display shows your current calculations and results in a mystical red glow.</p>
+
+        <h2>Basic Operations:</h2>
+        <ul>
+            <li>Use +, -, *, / for addition, subtraction, multiplication, and division.</li>
+            <li>C clears the current calculation.</li>
+            <li>← erases the last digit.</li>
+            <li>% converts numbers to magic percentages.</li>
+            <li>+/- toggles between positive and negative energy.</li>
+        </ul>
+
+        <h2>Performing Calculations:</h2>
+        <ul>
+            <li>Simply click on the buttons to conjure numbers and operations.</li>
+            <li>Use the = key to unleash the magic and see your result.</li>
+        </ul>
+
+        <h2>Advanced Features:</h2>
+        <ul>
+            <li>Feel the power of . for decimal precision.</li>
+        </ul>
+
+        <h2>Keyboard Sorcery:</h2>
+        <p>All spells can be cast using your keyboard's numpad for swift calculations.</p>
+
+        <p class="text">Enjoy your journey with Digit Wizard - where calculations meet wizardry!</p>
+
+        <h3>Pro Tip:</h3>
+        <p class="text">Explore the enchanting hover effects on buttons to sense their arcane power.</p>
+    </div>
     <script src="main.js"></script>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,3 +1,28 @@
+body {
+    font-family: 'Lucida Console', Courier, monospace;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+}
+
+.title {
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 30px;
+}
+
+.title h1 {
+    font-size: 2.5em;
+    color: #6A0DAD;
+    text-shadow:2px 3px 12px#051b01;
+}
+
+.title h2{
+    font-size: 2em;
+    color:#008080;
+    text-shadow:2px 3px 12px #30190f;
+}
+
 .calculator {
     max-width: fit-content;
     margin: 50px auto;
@@ -58,4 +83,44 @@ button:hover {
 
 .clear {
     background-color: #a00000;
+}
+
+.instructions {
+    max-width: 600px;
+    margin: 30px auto;
+    padding: 20px;
+    background-color: #c0c0c0;
+    border: 2px solid #cccccc50;
+    border-radius: 12px;
+    box-shadow: 2px 6px 10px #00000075;
+}
+
+.instructions h2 {
+    color: #6A0DAD;
+}
+
+.instructions ul {
+    list-style-type: disc;
+    padding-left: 20px;
+}
+
+.instructions li {
+    margin-bottom: 10px;
+}
+
+.instructions h3 {
+    color: #6A0DAD;
+    margin-top: 20px;
+}
+
+.instructions .text {
+    margin-bottom: 20px;
+    line-height: 1.4;
+    font-size: 0.95em;
+}
+
+@media only screen and (max-width: 600px) {
+    .calculator {
+        max-width: 100%;
+    }
 }