UI mprovements

maxpoletaev · Jan 6, 2025 · c7cbd34 · c7cbd34
1 parent 6615b80
commit c7cbd34
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 56 deletions.
diff --git a/cmd/dendy-wasm/main.go b/cmd/dendy-wasm/main.go
@@ -43,7 +43,6 @@ func main() {
 
 		for {
 			nes.Tick()
-
 			if nes.FrameReady() {
 				frame := nes.Frame()
 				frameBytes := unsafe.Slice((*byte)(unsafe.Pointer(&frame[0])), len(frame)*4)

diff --git a/web/index.html b/web/index.html
@@ -10,49 +10,51 @@
 </head>
 <body>
 
-<div class="container">
-  <div class="header">
-    <h1>NES Emulator</h1>
-  </div>
-
-  <div class="game-section">
-    <div class="game-window">
-      <canvas id="canvas"></canvas>
-    </div>
-  </div>
-
-  <div class="info-section">
-    <div class="rom-upload">
-      Select ROM: <input type="file" id="file-input" accept=".nes">
+  <div class="container">
+    <div class="game-section">
+      <div class="game-window">
+        <canvas id="canvas"></canvas>
+      </div>
     </div>
 
-    <div class="controls-grid">
-      <div class="control-item">
-        <span class="control-key">WASD</span>
-        <span class="control-action">D-Pad</span>
-      </div>
-      <div class="control-item">
-        <span class="control-key">J</span>
-        <span class="control-action">A Button</span>
+    <div class="info-section">
+      <div class="rom-upload">
+        Select ROM: <input type="file" id="file-input" accept=".nes">
       </div>
-      <div class="control-item">
-        <span class="control-key">K</span>
-        <span class="control-action">B Button</span>
-      </div>
-      <div class="control-item">
-        <span class="control-key">Enter</span>
-        <span class="control-action">Start</span>
-      </div>
-      <div class="control-item">
-        <span class="control-key">Right Shift</span>
-        <span class="control-action">Select</span>
-      </div>
-      <div class="control-item">
-        <span class="control-key">⌘+R</span>
-        <span class="control-action">Reset</span>
+
+      <div class="controls-grid">
+        <div class="control-item">
+          <span class="control-key">WASD</span>
+          <span class="control-action">D-Pad</span>
+        </div>
+        <div class="control-item">
+          <span class="control-key">J</span>
+          <span class="control-action">B Button</span>
+        </div>
+        <div class="control-item">
+          <span class="control-key">K</span>
+          <span class="control-action">A Button</span>
+        </div>
+        <div class="control-item">
+          <span class="control-key">Enter</span>
+          <span class="control-action">Start</span>
+        </div>
+        <div class="control-item">
+          <span class="control-key">Right Shift</span>
+          <span class="control-action">Select</span>
+        </div>
+        <div class="control-item">
+          <span class="control-key">⌘+R</span>
+          <span class="control-action">Reset</span>
+        </div>
       </div>
     </div>
+
+    <div class="source-link">
+      <a href="https://github.com/maxpoletaev/dendy" target="_blank">https://github.com/maxpoletaev/dendy</a>
+    </div>
   </div>
-</div>
+
+  <img src="https://mxp.goatcounter.com/count?p=/dendy" alt="" width="1" height="1">
 </body>
-</html>
+</html>
diff --git a/web/style.css b/web/style.css
@@ -2,7 +2,7 @@ body {
   margin: 0;
   padding: 10px;
   min-height: 100vh;
-  background-color: #333;
+  background-color: #49414b;
   color: #2d3748;
   display: flex;
   justify-content: center;
@@ -39,6 +39,11 @@ body {
   width: 100%;
 }
 
+.game-window {
+  height: 480px;
+  border-bottom: 2px solid #2d3748;
+}
+
 .game-window canvas {
   display: block;
 }
@@ -67,7 +72,6 @@ body {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
-  margin-bottom: 20px;
 }
 
 .control-item {
@@ -122,18 +126,13 @@ body {
   color: #e53e3e;
 }
 
-@media (max-width: 640px) {
-  .container {
-    width: 100%;
-    margin: 10px;
-    border-radius: 8px;
-  }
-
-  .controls-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.source-link {
+  position: relative;
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 0.9em;
+}
 
-  .features {
-    grid-template-columns: 1fr;
-  }
-}
+.source-link a {
+  color: #4a5568;
+}