https://github.com/antonosika/split-screen-interface

https://github.com/antonosika/split-screen-interface

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/antonosika/split-screen-interface
• Owner: AntonOsika
• Created: 2024-03-14T21:59:12.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-14T22:14:03.000Z (over 1 year ago)
• Last Synced: 2025-02-17T02:16:07.068Z (8 months ago)
• Language: JavaScript
• Size: 56.6 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# split-screen-interface

- Full Screen:

  - Split into two main vertical sections.

  

- Left Section:

  - Background color: Dark blue or black.

  - Narrower than the right section.

  - Contains a sidebar on the far left.

  

- Sidebar (from top to bottom):

  - Top-left corner: Icon resembling a cloud or a tree (blue-green color).

  - Beneath the icon: Four smaller icons aligned vertically (a person, two chat bubbles, a bell, a gear).

  - Bottom-left corner: An additional icon (question mark inside a circle).

- Main Area of Left Section:

  - Appears to be a shell or command-line interface.

  - Cursor is present, indicating readiness for input.

  - No text is visible.

- Right Section:

  - Background color: Dark gray or black.

  - Wider than the left section.

  

- Top of Right Section:

  - Tab-like interface.

  - Four tabs labeled from left to right: "Shell," "Browser," "Editor," "Planner."

  - "Browser" tab is active, indicated by its different color (lighter than others).

- Main Area of Right Section:

  - Two parallel vertical command-line interfaces.

  - The left one has a blinking cursor with no text.

  - The right one has a message bubble from a user named "Devin."

  - The message bubble is light blue.

  - Text in the bubble: "Devin is waiting to start up... Hey Devin, I’d like for you to benchmark Llama 2 on three different provide[...]"

  - The text is cut off, indicating the message continues beyond view.

  - Bottom-right corner: Two symbols ("00" and "K") and a "Live" indicator, suggesting a live coding or command execution session is possible.

## Collaborate with GPT Engineer

This is a [gptengineer.app](https://gptengineer.app)-synced repository 🌟🤖

Changes made via gptengineer.app will be committed to this repo.

If you clone this repo and push changes, you will have them reflected in the GPT Engineer UI.

## Setup

```sh

git clone https://github.com/GPT-Engineer-App/split-screen-interface.git

cd split-screen-interface

npm i

```

```sh

npm run dev

```

This will run a dev server with auto reloading and an instant preview.

## Tech stack

- [Vite](https://vitejs.dev/)

- [React](https://react.dev/)

- [Chakra UI](https://chakra-ui.com/)

## Requirements

- Node.js & npm - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)