naia-night/aufgabe-3b.html at main · anneprijari/naia-night · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aufgabe 3b – NaiA Night #01</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Space+Mono&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #12062a;
    --card: #1e0f3a;
    --purple: #a259ff;
    --pink: #ff3399;
    --yellow: #c8ff00;
    --text: #ffffff;
    --mono: 'Space Mono', monospace;
    --sans: 'Space Grotesk', sans-serif;
  }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
  }
  .badge {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--yellow);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  h1 {
    font-size: clamp(2rem, 7vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    text-align: center;
  }
  h1 em {
    color: var(--purple);
    font-style: italic;
  }
  .card {
    background: var(--card);
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    max-width: 600px;
    margin-bottom: 1.5rem;
  }
  .label {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--pink);
    text-transform: uppercase;
    margin-bottom: 1rem;
  }
  .label.purple { color: var(--purple); }
  .prompt-text {
    font-family: var(--mono);
    font-size: 1rem;
    line-height: 1.7;
    color: #e8e0f5;
  }
  .prompt-text .placeholder {
    color: var(--purple);
    font-style: italic;
  }
  .copy-btn {
    display: block;
    width: 100%;
    max-width: 600px;
    padding: 1.1rem 2rem;
    background: var(--pink);
    color: #fff;
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-top: 0.5rem;
  }
  .copy-btn:hover { background: #e6007a; }
  .copy-btn:active { transform: scale(0.98); }
  .copy-btn.copied { background: #22c55e; }
  .info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 600px;
  }
  .info-card {
    border-radius: 16px;
    padding: 1.5rem;
    background: #5b21b6;
  }
  .info-card.bright { background: #c026d3; }
  .info-card .num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--yellow);
    margin-bottom: 0.5rem;
  }
  .info-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #fff;
  }
  .info-card p {
    font-size: 0.85rem;
    color: #e9d5ff;
    line-height: 1.5;
  }
</style>
</head>
<body>
<div class="badge">NaiA · Night #01</div>
<h1>Aufgabe 3b <em>...like a professional</em></h1>
<div class="card"><div class="label">Prompt</div><div class="prompt-text" id="promptText">Ich bin <span class="placeholder">[Mitte 40 / Anfang 60 – umschreibe es]</span>, <span class="placeholder">[arbeite viel / unternehme sehr viel]</span>, kann abends nicht gut abschalten und schaffe es nicht, mich noch um mich selbst zu kümmern. Gib mir keine allgemeinen Tipps. Frag mich 3 Fragen um dein Ergebnis zu verbessern für mich.</div></div>
<button class="copy-btn" id="copyBtn" onclick="copyPrompt()">Prompt kopieren</button>
<script>
function copyPrompt() {
  const el = document.getElementById('promptText');
  navigator.clipboard.writeText(el.innerText).then(() => {
    const btn = document.getElementById('copyBtn');
    btn.textContent = '✓ Kopiert!';
    btn.classList.add('copied');
    setTimeout(() => { btn.textContent = 'Prompt kopieren'; btn.classList.remove('copied'); }, 2000);
  });
}
</script>
</body></html>