Main

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+
+*.local

README.md

@@ -0,0 +1,47 @@
+# ChatGPT Html Interface
+
+Este projeto é uma interface inicial de chatbot para consumir a API do ChatGPT, utilizando Html, Css3, JavaScript. A API do ChatGPT é uma API de processamento de linguagem natural (NLP) que permite a criação de chatbots.
+
+![Preview](https://github.com/LucasLuccaCode/chatgpt-react-interface/blob/main/.github/preview.png)
+
+## Como utilizar
+
+Clone este repositório:
+
+```
+git clone https://github.com/LucasLuccaCode/chatgpt-react-interface.git
+```
+
+Navegue para a pasta do projeto:
+
+```
+cd chatgpt-react-interface
+```
+
+Mude para a branch `main` para ter acesso ao projeto usando somente JavaScript puro:
+
+```
+git checkout main
+```
+
+Antes de executar o projeto, preencha a variável `API_KEY` no arquivo `index.js`, com sua chave de autorização para a API do ChatGPT. A chave pode ser obtida através do site da [OpenAI](https://platform.openai.com/account/api-keys).
+
+
+```js
+const API_KEY = "sua-chave-api"
+```
+
+Em seguida poderá abrir o projeto no navegador.
+
+## Principais funcionalidades
+
+- Perguntas e Respostas
+- Chats
+- Contexto contendo respostas anteriores do chat(experimental)
+- Redimensionamento dos textos e espaços
+
+## Tecnologias e serviços usados
+
+- Html
+- Css3
+- JavaScript

assets/css/chats.css

@@ -0,0 +1,71 @@
+.c-chats {
+  width: 100%;
+}
+
+.c-chats__card {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: .5rem .8rem;
+  border: 2px solid rgba(255, 255, 255, .05);
+  border-radius: .4rem;
+  margin-top: .8rem;
+  background: rgba(255, 255, 255, .1);
+}
+
+.c-chats__card:hover {
+  background: rgba(255, 255, 255, .2);
+}
+
+.c-chats__card__title {
+  pointer-events: none;
+  flex: 1;
+  font-size: .8rem;
+  color: #efefff;
+  padding: .3rem 0rem;
+  border-radius: .2rem;
+  transition: all .3s;
+}
+
+.c-chats__card__title:focus {
+  outline: 1.8px solid rgba(255, 255, 255, .1);
+  text-overflow: initial;
+}
+
+.c-chats__card__title.editing {
+  pointer-events: auto;
+  padding: .3rem .5rem;
+}
+
+.c-chats__card__title::first-letter {
+  text-transform: capitalize;
+}
+
+.c-chats__card__actions {
+  display: flex;
+  gap: .5rem;
+  margin-left: .5rem;
+}
+
+.c-chats__card__actions button {
+  border-radius: .3rem;
+  padding: .3rem;
+  background: rgba(255, 255, 255, .1);
+  transition: .3s;
+}
+
+.c-chats__card__actions button:hover {
+  background: rgba(255, 255, 255, .2);
+  box-shadow: 0 0 1px 2px var(--details-color);
+}
+
+.c-chats__card__actions button i {
+  pointer-events: none;
+  font-size: .7rem;
+  color: #dadae0;
+}
+
+.c-chats__card__actions button:hover i {
+  color: #fff;
+}

assets/css/footer.css

@@ -0,0 +1,93 @@
+/* FOOTER */
+
+.c-footer {
+  margin: 0 var(--margin-h);
+  margin-top: 1rem;
+}
+
+.c-footer.hide {
+  display: none;
+}
+/* STATUS */
+
+.c-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: .5rem;
+}
+
+.c-status__progress {
+  font-size: .8rem;
+  color: rgba(255, 255, 255, .5);
+}
+
+.c-status__stop {
+  font-size: .7rem;
+  padding: .3rem .5rem;
+  color: #fff;
+  font-weight: bold;
+  border-radius: .2rem;
+  background: var(--details-color);
+  opacity: 1;
+  transition: opacity .4s ease;
+}
+
+.c-status__stop.hide {
+  opacity: 0;
+}
+
+.c-status__stop:hover {
+  background: #059ddf;
+}
+
+/* QUESTION */
+
+.c-ask_form {
+  display: flex;
+  align-items: center;
+  background: var(--secondary-color);
+  border-radius: .3rem;
+  border: 2px solid transparent;
+  transition: border .3s;
+}
+
+.c-ask_form:focus-within {
+  border: 2px solid var(--details-color);
+}
+
+.c-ask_form textarea {
+  flex: 1;
+  padding: .5rem;
+  height: 100%;
+  font-size: .8rem;
+  color: #babac0;
+  border-radius: .3rem;
+  border: 2px solid transparent;
+  background: transparent;
+}
+
+.c-ask_form textarea:disabled {
+  opacity: .5;
+}
+
+.c-ask_form button {
+  padding: .25rem;
+  border-radius: .2rem;
+  margin: 0 .3rem 0 .5rem;
+  background: transparent;
+  transition: background-color .3s ease;
+}
+
+.c-ask_form button:hover {
+  background: rgba(0, 0, 0, .2);
+}
+
+.c-ask_form button:focus {
+  border: 2px solid rgba(255, 255, 255, .1);
+}
+
+.c-ask_form button i {
+  font-size: 1rem;
+  color: var(--details-color);
+}

assets/css/global.css

@@ -0,0 +1,55 @@
+:root {
+  --primary-color: #2a2a30;
+  --secondary-color: #3a3a40;
+  --details-color: #00b1ff;
+  --margin-h: .8rem;
+  --font-size: 18px;
+}
+
+*, *::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+body,
+html {
+  width: 100%;
+  height: 100%;
+  font-size: var(--font-size);
+  /* background-color: #222225; */
+  background: var(--primary-color);
+}
+
+textarea,
+button {
+  border: none;
+  outline: none;
+  resize: none;
+}
+
+button {
+  cursor: pointer;
+}
+
+li {
+  list-style: none;
+}
+
+.nowrap {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.c-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  height: 100%;
+  margin: 0 auto;
+  padding-bottom: var(--margin-h);
+  background: var(--primary-color);
+}

assets/css/header.css

@@ -0,0 +1,29 @@
+.c-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: .5rem var(--margin-h);
+  background: var(--secondary-color);
+}
+
+.c-header h1 {
+  color: #efefff;
+  font-size: 1rem;
+}
+
+.c-header button {
+  justify-content: center;
+  background: transparent;
+  border-radius: .2rem;
+}
+
+.c-header button:hover {
+  background: rgba(255, 255, 255, .1);
+}
+
+.c-header button i {
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  color: #efefff;
+}

assets/css/main.css

@@ -0,0 +1,29 @@
+.c-main {
+  flex: 1;
+  margin-top: 1rem;
+  margin-right: .3rem;
+  margin-left: var(--margin-h);
+  padding-right: calc(var(--margin-h) - .3rem);
+  overflow-y: auto;
+}
+
+.c-main::-webkit-scrollbar {
+  width: .3rem;
+}
+
+.c-main::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.c-main::-webkit-scrollbar-thumb {
+  background-color: var(--details-color);
+  border-radius: 20px;
+}
+
+.placeholder {
+  text-align: center;
+  font-size: .8rem;
+  width: 100%;
+  color: #afafbf;
+  margin-top: 1rem;
+}