fix core page features for java study files

Author: biralavor

README.md

@@ -5,3 +5,20 @@
 
 ## Project Studies:
 You can test all my [JAVA files at this Github-Pages](https://biralavor.github.io/FIAP-DomainDrivenDesign-JAVA/)
+
+## GitHub Pages Features
+
+- Terminal-like UI with a red theme
+- Interactive menu of Java study files (Cliente.java, Calculator.java, BreadMaker.java)
+- Keyboard navigation (arrow keys) and touch/mouse support
+- Switch indicator (▶) at the left side of selected menu items
+- View source code and run Java files in the browser using simulated Java execution
+- Consistent experience for both desktop and mobile users
+
+### Navigation
+
+- **↑/↓ Arrow Keys**: Navigate through menu items
+- **→ Right Arrow**: View source code of selected item
+- **← Left Arrow**: Go back to previous screen
+- **Enter**: Run the selected Java file
+- **b**: Return to main menu from any screen

assets/css/style.css

@@ -22,3 +22,14 @@ body {
   margin-top: 40px;
   font-size: 0.9em;
 }
+
+.kbd {
+  background-color: #444;
+  color: #fff;
+  padding: 2px 5px;
+  border-radius: 3px;
+  font-size: 0.9em;
+  display: inline-block;
+  margin: 0 2px;
+  box-shadow: 0 2px 0 #222;
+}

assets/css/terminal.css

@@ -32,6 +32,57 @@
   color: #ff5555;
   font-weight: bold;
 }
+.terminal-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 4px 0;
+}
+.terminal-menu-item.active {
+  color: #ff5555;
+  font-weight: bold;
+}
+#terminal-menu-list {
+  margin-top: 18px;
+}
+.mobile-menu-btns {
+  margin-top: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.mobile-menu-btn {
+  background-color: #333;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 100%;
+}
+.mobile-menu-btn.active {
+  background-color: #ff5555;
+}
+.mobile-output-btns, .mobile-source-btns {
+  margin-top: 16px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.mobile-output-btns button, .mobile-source-btns button {
+  background-color: #333;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.switch-indicator {
+  display: inline-block;
+  width: 18px;
+  text-align: center;
+}
 .menu {
   margin-top: 8px;
   display: flex;
@@ -77,6 +128,120 @@
 .run-btn:hover {
   background-color: #218838;
 }
+.terminal-instruction {
+  color: #888;
+}
+.file-description {
+  color: #ffb86c;
+}
+.terminal-output {
+  color: #ff5555;
+}
 .hidden {
   display: none;
 }
+
+.java-input-dialog {
+  position: fixed;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #222;
+  padding: 24px 32px;
+  border-radius: 8px;
+  z-index: 9999;
+  color: #fff;
+  box-shadow: 0 0 16px #ff5555cc;
+}
+
+.java-input-prompt {
+  margin-bottom: 12px;
+}
+
+.java-input-field {
+  width: 220px;
+  padding: 8px;
+  font-size: 1em;
+}
+
+.java-input-btn {
+  margin-left: 12px;
+  padding: 8px 16px;
+  background-color: #ff5555;
+  border: none;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Terminal Menu Enhancements */
+.terminal-menu-item:hover {
+  color: #ff8888;
+}
+
+.switch-indicator {
+  color: #ff5555;
+}
+
+/* Mobile-specific styles */
+@media (max-width: 768px) {
+  #terminal {
+    padding: 16px;
+    min-height: 350px;
+    margin-top: 20px;
+    width: 90%;
+  }
+  
+  .mobile-menu-btns {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .mobile-menu-btn {
+    padding: 12px 16px;
+    font-size: 16px;
+  }
+  
+  .mobile-output-btns button, 
+  .mobile-source-btns button {
+    padding: 12px 16px;
+    flex-grow: 1;
+    text-align: center;
+    font-size: 16px;
+  }
+  
+  .ansi-title {
+    font-size: 2em;
+  }
+}
+
+/* Run button animations */
+.run-btn:active {
+  transform: scale(0.95);
+}
+
+/* Loading animation */
+.loading-dots {
+  display: inline-block;
+}
+
+.loading-dots:after {
+  content: '.';
+  animation: dots 1.5s steps(5, end) infinite;
+}
+
+@keyframes dots {
+  0%, 20% {
+    content: '.';
+  }
+  40% {
+    content: '..';
+  }
+  60% {
+    content: '...';
+  }
+  80%, 100% {
+    content: '';
+  }
+}

assets/img/favicon.svg

@@ -0,0 +1,13 @@
+// This is a test file to demonstrate loading and execution
+// of Java class files in the browser
+
+public class TestRunner {
+    public static void main(String[] args) {
+        System.out.println("Running Java code in the browser...");
+        
+        // Print class info
+        System.out.println("\nClass loading test successful!");
+        System.out.println("Java version: " + System.getProperty("java.version"));
+        System.out.println("JVM vendor: WebAssembly JVM");
+    }
+}

assets/java/TestRunner.class

@@ -18,33 +18,33 @@ function renderTerminal() {
   const terminal = document.getElementById('terminal');
   let html = '';
   if (terminalState === 'menu') {
-    html += '<span style="color:#888">Use ↑/↓ to select, Enter/double-tap to run, → to view code.</span><br>';
+    html += '<span class="terminal-instruction">Use <span class="kbd">↑</span><span class="kbd">↓</span> to select, <span class="kbd">Enter</span>/double-tap to run, <span class="kbd">→</span> to view code.</span><br>';
     // Terminal printed menu with switch indicator
-    html += '<div id="terminal-menu-list" style="margin-top:18px;">';
+    html += '<div id="terminal-menu-list">';
     javaFilesList.forEach((file, idx) => {
-      html += `<div class="terminal-menu-item${idx===selectedFileIdx?' active':''}" data-idx="${idx}" style="display:flex;align-items:center;gap:8px;cursor:pointer;">`;
-      html += `<span style="display:inline-block;width:18px;text-align:center;">${idx===selectedFileIdx?'▶':'&nbsp;'}</span>`;
+      html += `<div class="terminal-menu-item${idx===selectedFileIdx?' active':''}" data-idx="${idx}">`;
+      html += `<span class="switch-indicator">${idx===selectedFileIdx?'▶':'&nbsp;'}</span>`;
       html += `<span>${file.label}</span>`;
       html += '</div>';
     });
     html += '</div>';
-    html += '<br><span style="color:#ffb86c">' + javaFilesList[selectedFileIdx].brief + '</span>';
+    html += '<br><span class="file-description">' + javaFilesList[selectedFileIdx].brief + '</span>';
     // Mobile menu buttons (below for accessibility)
-    html += '<div class="mobile-menu-btns" style="margin-top:18px;">';
+    html += '<div class="mobile-menu-btns">';
     javaFilesList.forEach((file, idx) => {
       html += `<button class="mobile-menu-btn${idx===selectedFileIdx?' active':''}" data-idx="${idx}">${file.label}</button>\n`;
     });
     html += '</div>';
   } else if (terminalState === 'output') {
-    html += '<pre style="color:#ff5555;">' + lastOutputText + '</pre>';
-    html += '<br><span style="color:#888">[→] Check source code  |  [b] Back to menu</span>';
+    html += '<pre class="terminal-output">' + lastOutputText + '</pre>';
+    html += '<br><span class="terminal-instruction"><span class="kbd">→</span> Check source code  |  <span class="kbd">b</span> Back to menu</span>';
     html += '<div class="mobile-output-btns"><button id="mobile-source-btn">Check Source Code</button> <button id="mobile-back-btn">Back to Menu</button></div>';
   } else if (terminalState === 'source') {
-    html += '<pre style="color:#ff5555;">' + javaFiles[javaFilesList[selectedFileIdx].key] + '</pre>';
-    html += '<br><span style="color:#888">[←] Back to output  |  [b] Back to menu</span>';
+    html += '<pre class="terminal-output">' + javaFiles[javaFilesList[selectedFileIdx].key] + '</pre>';
+    html += '<br><span class="terminal-instruction"><span class="kbd">←</span> Back to output  |  <span class="kbd">b</span> Back to menu</span>';
     html += '<div class="mobile-source-btns"><button id="mobile-back-output-btn">Back to Output</button> <button id="mobile-back-menu-btn">Back to Menu</button></div>';
   } else if (terminalState === 'running') {
-    html += '<span style="color:#888">Running Java...</span>';
+    html += '<span class="terminal-instruction">Running Java<span class="loading-dots"></span></span>';
   }
   terminal.innerHTML = html;
 
@@ -83,9 +83,29 @@ function renderTerminal() {
   if (backOutputBtn) backOutputBtn.onclick = () => showOutput(lastOutputText);
   const backMenuBtn = document.getElementById('mobile-back-menu-btn');
   if (backMenuBtn) backMenuBtn.onclick = showMenu;
-  // Show/hide desktop source button
-  const btn = document.getElementById('show-source-btn');
-  if (btn) btn.style.display = (terminalState === 'output') ? 'inline-block' : 'none';
+}
+
+// Handle Java input requests for simulations
+function requestJavaInput(promptText) {
+  return new Promise(resolve => {
+    const dialog = document.createElement('div');
+    dialog.className = 'java-input-dialog';
+    dialog.innerHTML = `<div class="java-input-prompt">${promptText || 'Java program requests input:'}</div>
+      <input id="java-input" class="java-input-field" autofocus />
+      <button id="java-input-ok" class="java-input-btn">OK</button>`;
+    document.body.appendChild(dialog);
+    document.getElementById('java-input').focus();
+    document.getElementById('java-input-ok').onclick = () => {
+      const val = document.getElementById('java-input').value + '\n';
+      document.body.removeChild(dialog);
+      resolve(val);
+    };
+    document.getElementById('java-input').onkeydown = (e) => {
+      if (e.key === 'Enter') {
+        document.getElementById('java-input-ok').click();
+      }
+    };
+  });
 }
 
 function showMenu() {
@@ -159,4 +179,5 @@ window.addEventListener('DOMContentLoaded', function() {
 window.showOutput = showOutput;
 window.showMenu = showMenu;
 window.showSource = showSource;
+window.requestJavaInput = requestJavaInput;
 window.runJavaFile = (key, cb) => runJavaFile(key).then(cb);