frontend/app/components/TerminalWindow.vue

<template>
  <BaseWindow
    :window-data="windowData"
    @close="$emit('close')"
    @minimize="$emit('minimize')"
    @bring-to-front="$emit('bring-to-front')"
    @update-position="$emit('update-position', $event)"
    @update-dimensions="$emit('update-dimensions', $event)"
  >
    <div class="terminal-content">
      <div class="terminal-section">
        <span class="prompt">guest@daniels-mac:~$</span>
        <input
          v-model="command"
          type="text"
          class="terminal-input"
          @keydown.enter="runCommand"
          placeholder="Terminal is for display only"
          autofocus
        />
      </div>
    </div>
  </BaseWindow>
</template>

<script setup>
import { ref } from 'vue';
import BaseWindow from './BaseWindow.vue';

defineProps({ windowData: Object });
defineEmits(['close', 'minimize', 'bring-to-front', 'update-position', 'update-dimensions']);

const command = ref('');

const runCommand = () => {
  command.value = '';
};
</script>

<style scoped>
.terminal-content {
  background-color: black;
  color: #34d399; /* green-400 */
  font-family: 'Courier New', Courier, monospace;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px; /* Added small padding */
}

.terminal-section {
  display: flex;
  align-items: center;
  width: 100%;
}

.prompt {
  color: #fbbF24; /* yellow-400 */
  margin-right: 8px;
  white-space: nowrap;
}

.terminal-input {
  background: transparent;
  border: none;
  color: #34d399; /* green-400 */
  width: 100%;
  font-family: 'Courier New', Courier, monospace;
}

.terminal-input:focus {
  outline: none;
}

.terminal-input::placeholder {
  color: #6b7280; /* gray-500 */
}
</style>