html changes

game.html

@@ -94,20 +94,21 @@
       stroke-width: 2;
     }
 
-    #run-button {
+    /* === PANELS === */
-      margin-top: auto;
+    #info-panel {
-      padding: 10px;
+      position: absolute;
-      background-color: #007acc;
+      top: 12px;
-      color: white;
+      right: 12px;
-      border: none;
+      background: var(--color-bg-dark);
-      border-radius: 4px;
+      color: var(--color-text-primary);
-      cursor: pointer;
+      padding: 1rem;
+      border-radius: var(--radius-large);
+      font-family: monospace;
       font-size: 14px;
-    }
+      min-width: 220px;
-
+      z-index: 10;
-    #run-button:disabled {
+      border: 1px solid var(--color-text-dark);
-      background-color: #555;
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-      cursor: not-allowed;
     }
 
     #node-props-panel {
@@ -335,7 +336,26 @@
       <div id="sd-header">System Design Game</div>
       <div id="main-content">
         <div id="challenge-container">
-        Challenges
+          <h2 class="sidebar-title">Challenges</h2>
+
+          <ul class="challenge-list">
+            <li class="challenge-item active">
+              <div class="challenge-name">Url Shortener</div>
+              <div class="challenge-difficulty easy">Easy</div>
+            </li>
+            <li class="challenge-item">
+              <div class="challenge-name">Url Shortener</div>
+              <div class="challenge-difficulty easy">Easy</div>
+            </li>
+            <li class="challenge-item">
+              <div class="challenge-name">Url Shortener</div>
+              <div class="challenge-difficulty medium">Medium</div>
+            </li>
+            <li class="challenge-item">
+              <div class="challenge-name">Something hard</div>
+              <div class="challenge-difficulty hard">Hard</div>
+            </li>
+          </ul>
         </div>
         <div id="canvas-wrapper">
           <input type="radio" id="tab1" name="tab" checked>
@@ -350,7 +370,14 @@
             </div>
 
             <!-- Requirements -->
-          <div id="content1" class="tab-content">This is Tab 1 content.</div>
+            <div id="content1" class="tab-content">
+              <div class="requirements-section">
+                <h3>Functional Requirements</h3>
+                <ul class="requirements-list">
+                  <li class="requirement-item">Something</li>
+                  <li class="requirement-item">Something else</li>
+                </ul>
+            </div>
 
             <!-- Design-->
             <div id="content2" class="tab-content">
@@ -421,7 +448,6 @@
                 </div>
 
                 <div id="arrow-tool">arrow tool</div>
-              <button id="run-button" disabled>Test Design</button>
               </div>
 
               <div id="canvas-container">
@@ -464,7 +490,8 @@
                   <button id="node-props-save" disabled>save</button>
                 </div>
                 <div id="bottom-panel">
-                Hi
+                  <button id="run-button" disabled>Test Design</button>
+
                 </div>
 
               </div>