https://github.com/engcfraposo/cog-css-js

https://github.com/engcfraposo/cog-css-js

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/engcfraposo/cog-css-js
• Owner: engcfraposo
• Created: 2023-10-27T17:15:32.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-28T00:01:26.000Z (about 1 year ago)
• Last Synced: 2023-10-28T01:22:01.583Z (about 1 year ago)
• Language: HTML
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
# Tutorial:Criação da estrutura de Layout de um Chat

Neste tutorial, vou mostrar a você como criar uma página HTML simples para criar um layout de um chat. O código HTML que você forneceu é uma estrutura de exemplo que pode ser usada como ponto de partida.

## Pré-requisitos

Antes de começar, certifique-se de ter um editor de texto, como o Visual Studio Code, Sublime Text ou qualquer outro de sua escolha, instalado em seu computador.

### Passo 1: Estrutura Básica

Comece com a estrutura básica do HTML, que inclui a declaração do tipo de documento, o elemento ``, o `` e o ``.

```html

    

    

    

    Gama Chat

    

    

    

    

```

### Passo 2: Cabeçalho

No corpo da página, crie um cabeçalho `
` com o título "Gama Chat".


```html



    
Gama Chat



```


### Passo 3: Caixa de Chat

Crie um elemento `
` com a classe "chatbox" para conter as mensagens. Dentro dessa caixa, adicione as mensagens de erro, usuário e bot como `
`s com as classes apropriadas.


```html



    

    


        


            

            
Mensagem de erro

        

    

    


        


            

            
Mensagem de usuário

        

    

    


        


            

            
Mensagem do bot

        

    



```


### Passo 4: Barra de Progresso

Adicione uma barra de progresso com a classe "progress" para indicar que algo está acontecendo em segundo plano.

```html



    




```


### Passo 5: Formulário de Chat

Crie um formulário com o ID "chatForm" que inclui um campo de entrada de texto e um botão para enviar mensagens. O botão possui um ícone "send" usando o Material Icons.

```html

  

  

      send

  

```

### Passo 6: Scripts

No final do corpo da página, você pode incluir scripts para funcionalidade adicional. No exemplo fornecido, você já incluiu o JavaScript da biblioteca Materialize.

```html

```

Certifique-se de que você tenha os arquivos CSS e as imagens necessárias (bot.png) na pasta correspondente para que a página funcione corretamente. Este é um exemplo básico de uma página de chat que pode ser estilizada e programada para interagir com um chatbot ou sistema de mensagens.