Skip to content

Instantly share code, notes, and snippets.

@adrielcruz9966-a11y

adrielcruz9966-a11y/index.html

Created February 26, 2026 01:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adrielcruz9966-a11y/6c902055a8b95d21c96e3b974b8f71d3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adrielcruz9966-a11y/6c902055a8b95d21c96e3b974b8f71d3 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Central de Prompts - Projeto X</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
body {
background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
padding: 30px 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
/* Header */
.header {
text-align: center;
margin-bottom: 50px;
}
.header h1 {
font-size: 3.5em;
font-weight: 800;
background: linear-gradient(135deg, #60a5fa, #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
}
.header p {
color: #94a3b8;
font-size: 1.2em;
background: rgba(255,255,255,0.03);
padding: 15px 30px;
border-radius: 60px;
border: 1px solid rgba(255,255,255,0.05);
display: inline-block;
}
.badge-container {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 25px;
flex-wrap: wrap;
}
.badge {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
padding: 8px 20px;
border-radius: 40px;
color: #cbd5e1;
display: flex;
align-items: center;
gap: 8px;
}
/* Grid de Cards */
.prompts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin: 40px 0;
}
/* Cards */
.prompt-card {
background: rgba(17, 25, 40, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 30px;
padding: 25px;
transition: transform 0.3s ease;
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.5);
}
.prompt-card:hover {
transform: translateY(-5px);
border-color: rgba(96,165,250,0.3);
}
.card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.card-icon {
width: 60px;
height: 60px;
background: rgba(96,165,250,0.1);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
}
.card-number {
font-size: 0.85em;
color: #60a5fa;
font-weight: 600;
letter-spacing: 1px;
}
.card-title {
font-size: 1.6em;
font-weight: 700;
color: white;
line-height: 1.2;
}
.features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 15px 0;
}
.feature-tag {
background: rgba(96,165,250,0.1);
border: 1px solid rgba(96,165,250,0.2);
padding: 4px 12px;
border-radius: 30px;
font-size: 0.8em;
color: #60a5fa;
}
.prompt-container {
background: rgba(0,0,0,0.3);
border-radius: 20px;
padding: 15px;
margin: 15px 0;
max-height: 180px;
overflow-y: auto;
border: 1px solid rgba(255,255,255,0.05);
}
.prompt-text {
color: #cbd5e1;
font-size: 0.9em;
line-height: 1.5;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
}
.copy-btn {
width: 100%;
background: linear-gradient(145deg, #3b82f6, #8b5cf6);
border: none;
color: white;
padding: 15px;
border-radius: 50px;
font-weight: 600;
font-size: 1.1em;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid rgba(255,255,255,0.2);
}
.copy-btn:hover {
transform: scale(1.02);
filter: brightness(1.1);
box-shadow: 0 10px 25px -5px #3b82f6;
}
.copy-btn.copied {
background: linear-gradient(145deg, #10b981, #059669);
}
.copy-notification {
position: fixed;
bottom: 30px;
right: 30px;
background: #10b981;
color: white;
padding: 15px 30px;
border-radius: 50px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
transform: translateX(200%);
transition: transform 0.3s ease;
z-index: 1000;
box-shadow: 0 10px 30px -5px #10b981;
}
.copy-notification.show {
transform: translateX(0);
}
.footer {
text-align: center;
margin-top: 50px;
color: #64748b;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 30px;
}
@media (max-width: 900px) {
.prompts-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2.5em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎯 Central de Prompts</h1>
<p>Copie os prompts com um clique e cole no ChatGPT</p>
<div class="badge-container">
<div class="badge"><span>📋</span> 4 Prompts prontos</div>
<div class="badge"><span>⚡</span> Clique para copiar</div>
</div>
</div>
<div class="prompts-grid">
<!-- Card 1 -->
<div class="prompt-card">
<div class="card-header">
<div class="card-icon">🧠</div>
<div>
<div class="card-number">CHAT 01</div>
<div class="card-title">Cérebro</div>
</div>
</div>
<div class="features">
<span class="feature-tag">🤔 Divergente</span>
<span class="feature-tag">🎯 Convergente</span>
<span class="feature-tag">⚠️ Riscos</span>
</div>
<div class="prompt-container">
<div class="prompt-text" id="prompt1-text">Atue como um Estrategista-Chefe de Projetos e meu Parceiro de Brainstorming. Use pensamento divergente (perguntas poderosas) e convergente (síntese). Aponte riscos. Use metáforas.
Tarefa: Projeto "[NOME]". Qual a primeira pergunta?</div>
</div>
<button class="copy-btn" onclick="copyPrompt(1)">📋 Copiar Prompt 1</button>
</div>
<!-- Card 2 -->
<div class="prompt-card">
<div class="card-header">
<div class="card-icon">🏗️</div>
<div>
<div class="card-number">CHAT 02</div>
<div class="card-title">Estrutura</div>
</div>
</div>
<div class="features">
<span class="feature-tag">📋 Etapas</span>
<span class="feature-tag">⚙️ Passos</span>
<span class="feature-tag">🚧 Gargalos</span>
</div>
<div class="prompt-container">
<div class="prompt-text" id="prompt2-text">Atue como Gerente de Projetos Sênior. Formato obrigatório: ETAPA [Letra], Pré-requisitos, Passos com tarefas, Exemplos, Ferramentas, Gargalos.
Tarefa: Estruturar "[NOME]" seguindo o formato com exemplos reais.</div>
</div>
<button class="copy-btn" onclick="copyPrompt(2)">📋 Copiar Prompt 2</button>
</div>
<!-- Card 3 -->
<div class="prompt-card">
<div class="card-header">
<div class="card-icon">🎨</div>
<div>
<div class="card-number">CHAT 03</div>
<div class="card-title">Visual</div>
</div>
</div>
<div class="features">
<span class="feature-tag">📊 Mermaid</span>
<span class="feature-tag">🖼️ ASCII</span>
<span class="feature-tag">🌈 Cores</span>
</div>
<div class="prompt-container">
<div class="prompt-text" id="prompt3-text">Atue como Designer de Informação. Crie diagramas Mermaid.js, wireframes ASCII, paletas de cores. Use exemplos práticos.
Tarefa: Criar Mapa Mental do projeto "[NOME]" com as etapas.</div>
</div>
<button class="copy-btn" onclick="copyPrompt(3)">📋 Copiar Prompt 3</button>
</div>
<!-- Card 4 -->
<div class="prompt-card">
<div class="card-header">
<div class="card-icon">📊</div>
<div>
<div class="card-number">CHAT 04</div>
<div class="card-title">Progresso</div>
</div>
</div>
<div class="features">
<span class="feature-tag">✅ Checkboxes</span>
<span class="feature-tag">📈 Barra %</span>
<span class="feature-tag">💾 localStorage</span>
</div>
<div class="prompt-container">
<div class="prompt-text" id="prompt4-text">Atue como Dev Front-end. Crie mapa de progresso interativo: checkboxes, barra global, localStorage, responsivo. Use estrutura do Chat 2.
Tarefa: Gerar código HTML/CSS/JS completo.</div>
</div>
<button class="copy-btn" onclick="copyPrompt(4)">📋 Copiar Prompt 4</button>
</div>
</div>
<div class="footer">
<p>Projeto X • 4 especialistas em IA • Clique para copiar</p>
</div>
</div>
<div class="copy-notification" id="copyNotification">
<span>✅</span>
<span id="notificationMessage">Copiado!</span>
</div>
<script>
// Prompts completos
const prompts = {
1: `Atue como um Estrategista-Chefe de Projetos e meu Parceiro de Brainstorming.
REGRAS:
1. Pensamento Divergente: Faça perguntas poderosas como "Qual a real dor?", "Com orçamento infinito?", "Quem são os envolvidos?"
2. Pensamento Convergente: Sintetize com "Os 3 pilares são...", "O principal desafio..."
3. Mapa de Riscos: Aponte riscos potenciais e mitigações
4. Use metáforas e analogias
Tarefa Inicial: Estou começando o projeto "[NOME DO PROJETO]". Objetivo: [DESCREVA]. Qual a primeira pergunta?`,
2: `Atue como Gerente de Projetos Sênior (PMP) e Arquiteto de Soluções.
FORMATO OBRIGATÓRIO:
ETAPA [Letra]: [Nome]
*Pré-requisitos: [lista]*
Passo 1: [Ação]
- [ ] Tarefa: [Detalhe]
*Exemplo: [concreto]*
*Ferramenta: [nome]*
- [ ] Tarefa: [Detalhe]
Passo 2: [Ação]
- [ ] Tarefas...
*Possíveis Gargalos:* [lista com mitigações]
EXEMPLO PRÁTICO incluso no prompt completo.
Tarefa: Estruturar "[NOME DO PROJETO]" seguindo este formato. Comece com ETAPA A.`,
3: `Atue como Designer de Informação.
CAPACIDADES:
1. Diagramas Mermaid.js (fluxogramas, Gantt, mapas mentais)
2. Wireframes em ASCII (esboços de interface)
3. Paletas de cores e estilo
4. Mapas de jornada
EXEMPLOS PRÁTICOS inclusos.
Regra: Peça confirmação antes de criar visuais.
Tarefa Inicial: Crie Mapa Mental em Mermaid.js do projeto "[NOME]" com as grandes etapas.`,
4: `Atue como Desenvolvedor Front-end Sênior.
ESPECIFICAÇÕES:
- Estrutura em árvore (Etapas > Passos > Tarefas)
- Checkboxes em cada tarefa
- Barra de progresso global (% concluído)
- Tarefas concluídas: riscadas + opacas
- localStorage para salvar progresso
- Responsivo
EXEMPLOS de HTML/CSS/JS inclusos.
Tarefa: Baseado na estrutura do Chat 2, gere código completo para o projeto "[NOME]".`
};
function copyPrompt(num) {
navigator.clipboard.writeText(prompts[num]).then(() => {
const notification = document.getElementById('copyNotification');
const message = document.getElementById('notificationMessage');
message.textContent = `Prompt ${num} copiado!`;
notification.classList.add('show');
const btn = event.target;
const originalText = btn.innerText;
btn.innerText = '✅ Copiado!';
btn.classList.add('copied');
setTimeout(() => {
btn.innerText = originalText;
btn.classList.remove('copied');
}, 2000);
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment