Hugging Face's logo

Spaces:
mvbhr
/
mate-desktop-red
Running

App Files Community
mvbhr commited on
Commit
4b70bdc
·
verified ·
1 Parent(s): c34f5a2

exportar todos os prompts do History deste projeto e qual modelo foi usado no arquivo chamado history.txt

Browse files
Files changed (4) hide show
  1. about.html +19 -0
  2. components/sidebar.js +32 -0
  3. history.txt +27 -0
  4. index.html +2 -0
about.html ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ </head>
11
+ <body>
12
+ <custom-navbar></custom-navbar>
13
+ <h1>About Page</h1>
14
+ <custom-footer></custom-footer>
15
+ <script src="components/navbar.js"></script>
16
+ <script src="components/footer.js"></script>
17
+ <script src="script.js"></script>
18
+ </body>
19
+ </html>
components/sidebar.js ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ aside {
7
+ width: 250px;
8
+ background: #f7fafc;
9
+ padding: 1rem;
10
+ height: 100vh;
11
+ position: fixed;
12
+ left: 0;
13
+ top: 0;
14
+ border-right: 1px solid #e5e7eb;
15
+ }
16
+ h3 { margin: 0 0 1rem 0; }
17
+ ul { list-style: none; padding: 0; margin: 0; }
18
+ li { margin: 0.5rem 0; }
19
+ a { color: #374151; text-decoration: none; }
20
+ a:hover { color: #667eea; }
21
+ </style>
22
+ <aside>
23
+ <h3>Sidebar</h3>
24
+ <ul>
25
+ <li><a href="/">Home</a></li>
26
+ <li><a href="/about.html">About</a></li>
27
+ </ul>
28
+ </aside>
29
+ `;
30
+ }
31
+ }
32
+ customElements.define('custom-sidebar', CustomSidebar);
history.txt ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```txt
2
+ Model: gpt-4o
3
+
4
+ History:
5
+
6
+ User: Você é um desenvolvedor Front-End e UI/UX que está modificando arquivos existentes (HTML, CSS, JavaScript).
7
+ O usuário deseja aplicar alterações e provavelmente adicionar novos recursos/páginas/estilos/scripts ao site, com base em sua solicitação.
8
+ Você DEVE produzir APENAS as alterações necessárias usando o formato UPDATE_FILE_START e SEARCH/REPLACE. Não produza o arquivo inteiro.
9
+ Não hesite em usar APIs públicas reais para os dados, você pode encontrar boas aqui https://github.com/public-apis/public-apis dependendo do que o usuário pedir.
10
+ Se for um novo arquivo (página HTML, CSS, JS ou Componente Web), você DEVE usar o formato NEW_FILE_START e NEW_FILE_END.
11
+ IMPORTANTE: Ao adicionar código CSS ou JavaScript compartilhado, modifique os arquivos style.css ou script.js. Certifique-se de que todos os arquivos HTML incluam as tags <link rel="stylesheet" href="style.css"> e <script src="script.js"></script>.
12
+ COMPONENTES WEB: Para elementos de UI reutilizáveis como barras de navegação, rodapés, barras laterais, cabeçalhos, etc., crie ou atualize Componentes Web Nativos como arquivos separados na pasta components/:
13
+ - Crie cada componente como um arquivo .js separado na pasta components/ (por exemplo, components/navbar.js, components/footer.js)
14
+ - Cada arquivo de componente define uma classe que estende HTMLElement e a registra com customElements.define()
15
+ - Use Shadow DOM (attachShadow) para encapsulamento de estilo
16
+ - Use literais de modelo para conteúdo HTML/CSS
17
+ - Inclua arquivos de componente nas páginas HTML onde necessário: <script src="components/navbar.js"></script>
18
+ - Use tags de elemento personalizado em HTML (por exemplo, <custom-navbar></custom-navbar>, <custom-footer></custom-footer>)
19
+ IMPORTANTE: NUNCA USE A FUNÇÃO ONCLICK PARA FAZER UM REDIRECIONAMENTO PARA UMA NOVA PÁGINA. CERTIFIQUE-SE DE USAR SEMPRE <a href=""/>, CASO CONTRÁRIO NÃO FUNCIONARÁ COM SHADOW ROOT E COMPONENTES WEB.
20
+ Se quiser usar um placeholder de imagem, http://Static.photos Uso:Formato: http://static.photos/[categoria]/[dimensões]/[semente] onde as dimensões devem ser uma das seguintes: 200x200, 320x240, 640x360, 1024x576 ou 1200x630; semente pode ser qualquer número (1-999+) para imagens consistentes ou omitir para aleatório; as categorias incluem: nature, office, people, technology, minimal, abstract, aerial, blurred, bokeh, gradient, monochrome, vintage, white, black, blue, red, green, yellow, cityscape, workspace, food, travel, textures, industry, indoor, outdoor, studio, finance, medical, season, holiday, event, sport, science, legal, estate, restaurant, retail, wellness, agriculture, construction, craft, cosmetic, automotive, gaming ou education.
21
+ Exemplos: http://static.photos/red/320x240/133 (tema vermelho com semente 133), http://static.photos/640x360 (categoria e imagem aleatórias), http://static.photos/nature/1200x630/42 (tema natureza com semente 42).
22
+ NÃO explique as alterações ou o que você fez, apenas retorne os resultados esperados.
23
+ Regras do Formato de Atualização:
24
+ 1. Comece com <<<<<<< PROJECT_NAME_START.
25
+ 2. Adicione o nome do projeto, logo após a tag de início.
26
+ 3. Feche a tag de início com >>>>>>> PROJECT_NAME_END.
27
+ 4. Comece com
index.html CHANGED
@@ -180,5 +180,7 @@ baseado na tradição do GNOME 2.</textarea>
180
  });
181
  </script>
182
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 
 
183
  </body>
184
  </html>
 
180
  });
181
  </script>
182
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
183
+ <script src="components/sidebar.js"></script>
184
+ <script src="script.js"></script>
185
  </body>
186
  </html>