πŸ’­ Ethereal Epiphanies

Short-form lightly edited, lightly structured essays, written in 30 minutes.
Published on:
July 7, 2024

terminal style website prompt

Create a terminal-style website with the following specifications:

  1. Appearance:
    • Design: Mimic a macOS terminal window
    • Color scheme: Dark background (#014034) with light green text (#80BF7E and #C2D9C1)
    • Window style: Include a header with close, minimize, and maximize buttons
    • Font: Use a monospace font like 'Menlo' or 'Monaco'
  2. Functionality:
    • Implement a file system structure with the following folders and links:
      • newsletters
        • [Your newsletter name] -> [URL]
        • [Another newsletter] -> [URL]
      • personal-website
        • main -> [Your main website URL]
        • [Additional page name] -> [URL]
        • [Another page name] -> [URL]
      • [Another category]
        • [Item name] -> [URL]
        • [Another item] -> [URL]
    • Commands to implement:
      • ls: List directory contents
      • cd: Change directory (support 'cd ..', 'cd ~', and 'cd [foldername]')
      • open: Open links in new tabs (support both 'open [number]' and 'open [name]')
      • clear: Clear the screen
      • help: Show available commands
      • about: Display information about the website creator
  3. User Experience:
    • Start with a welcome message introducing yourself and the purpose of the terminal
    • Automatically run 'ls' after the welcome message
    • Implement command history (accessible with up/down arrow keys)
    • Add a typing animation effect for all output text
    • Display the current directory in the prompt (e.g., user@website:~/foldername $)
    • Provide help text in each directory explaining how to open links
  4. Additional Features:
    • Ensure the website is responsive and works on mobile devices
    • Implement error handling for invalid commands or inputs
  5. Technical Requirements:
    • Create a single HTML file containing all HTML, CSS, and JavaScript
    • Ensure compatibility with modern web browsers
    • Optimize for quick loading and smooth performance

Please provide the complete HTML file for this terminal-style website, ready to be deployed on a platform like Netlify. Include comments in the code to explain key functionalities.

‍

Leave a Comment

NayaOS

Join My Newsletter

πŸ’‘ Discover insights on life, work, personal growth, and more from Naya Moss, delivered bi-weekly.

Upcoming Writing Ideas