| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>{% block title %}PromptGarage{% endblock %}</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=Fragment+Mono:wght@400&display=swap" rel="stylesheet"> |
| <script src="https://unpkg.com/htmx.org@1.9.10"></script> |
| <style> |
| :root { |
| --font-body: 'Bricolage Grotesque', system-ui, sans-serif; |
| --font-mono: 'Fragment Mono', 'SF Mono', Consolas, monospace; |
| |
| |
| --base: #1e1e2e; |
| --mantle: #181825; |
| --crust: #11111b; |
| --surface0: #313244; |
| --surface1: #45475a; |
| --surface2: #585b70; |
| --overlay0: #6c7086; |
| --overlay1: #7f849c; |
| --text: #cdd6f4; |
| --text-dim: #a6adc8; |
| --subtext0: #a6adc8; |
| --subtext1: #bac2de; |
| |
| --rosewater: #f5e0dc; |
| --flamingo: #f2cdcd; |
| --pink: #f5c2e7; |
| --mauve: #cba6f7; |
| --red: #f38ba8; |
| --maroon: #eba0ac; |
| --peach: #fab387; |
| --yellow: #f9e2af; |
| --green: #a6e3a1; |
| --teal: #94e2d5; |
| --sky: #89dceb; |
| --sapphire: #74c7ec; |
| --blue: #89b4fa; |
| --lavender: #b4befe; |
| |
| --bg: var(--base); |
| --card: var(--surface0); |
| --card-hover: var(--surface1); |
| --border: var(--surface1); |
| --accent: var(--mauve); |
| --accent-dim: rgba(203, 166, 247, 0.12); |
| --star: #f9e2af; |
| --danger: #f38ba8; |
| --success: #a6e3a1; |
| } |
| |
| @media (prefers-color-scheme: light) { |
| :root { |
| --base: #eff1f5; |
| --mantle: #e6e9ef; |
| --crust: #dce0e8; |
| --surface0: #ccd0da; |
| --surface1: #bcc0cc; |
| --surface2: #acb0be; |
| --overlay0: #9ca0b0; |
| --overlay1: #8c8fa1; |
| --text: #4c4f69; |
| --text-dim: #6c6f85; |
| --subtext0: #6c6f85; |
| --subtext1: #5c5f77; |
| |
| --rosewater: #dc8a78; |
| --flamingo: #dd7878; |
| --pink: #ea76cb; |
| --mauve: #8839ef; |
| --red: #d20f39; |
| --maroon: #e64553; |
| --peach: #fe640b; |
| --yellow: #df8e1d; |
| --green: #40a02b; |
| --teal: #179299; |
| --sky: #04a5e5; |
| --sapphire: #209fb5; |
| --blue: #1e66f5; |
| --lavender: #7287fd; |
| |
| --bg: var(--base); |
| --card: var(--mantle); |
| --card-hover: var(--crust); |
| --border: var(--surface1); |
| --accent: var(--mauve); |
| --accent-dim: rgba(136, 57, 239, 0.08); |
| } |
| } |
| |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| body { |
| background: var(--bg); |
| color: var(--text); |
| font-family: var(--font-body); |
| line-height: 1.6; |
| min-height: 100vh; |
| } |
| |
| |
| header { |
| background: var(--mantle); |
| border-bottom: 1px solid var(--surface0); |
| padding: 0.875rem 1.5rem; |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
| .header-inner { |
| max-width: 1100px; |
| margin: 0 auto; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 2rem; |
| } |
| .logo { |
| font-size: 1.25rem; |
| font-weight: 800; |
| text-decoration: none; |
| letter-spacing: -0.02em; |
| } |
| .logo span { |
| color: var(--accent); |
| } |
| .logo:hover span { |
| color: var(--blue); |
| } |
| nav { |
| display: flex; |
| align-items: center; |
| gap: 0.25rem; |
| } |
| nav a { |
| color: var(--text-dim); |
| text-decoration: none; |
| font-weight: 500; |
| font-size: 0.9rem; |
| padding: 0.5rem 1rem; |
| border-radius: 8px; |
| transition: all 0.15s; |
| } |
| nav a:hover { |
| color: var(--text); |
| background: var(--surface0); |
| } |
| nav a.active { |
| color: var(--accent); |
| background: var(--accent-dim); |
| } |
| .nav-new { |
| background: var(--accent) !important; |
| color: var(--crust) !important; |
| font-weight: 600; |
| } |
| .nav-new:hover { |
| background: var(--mauve) !important; |
| color: var(--crust) !important; |
| } |
| |
| |
| main { |
| max-width: 1100px; |
| margin: 0 auto; |
| padding: 2rem 1.5rem 4rem; |
| } |
| |
| |
| .hero { |
| text-align: center; |
| margin-bottom: 3rem; |
| padding: 2rem 0; |
| } |
| .hero h1 { |
| font-size: clamp(1.8rem, 4vw, 2.5rem); |
| font-weight: 800; |
| letter-spacing: -0.02em; |
| background: linear-gradient(135deg, var(--mauve), var(--blue), var(--teal)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| margin-bottom: 0.5rem; |
| } |
| .hero .subtitle { |
| color: var(--text-dim); |
| font-size: 1.05rem; |
| } |
| |
| |
| .search-bar { |
| display: flex; |
| gap: 0.75rem; |
| margin-bottom: 2rem; |
| flex-wrap: wrap; |
| } |
| .search-input-wrap { |
| flex: 1; |
| min-width: 250px; |
| position: relative; |
| } |
| .search-input-wrap svg { |
| position: absolute; |
| left: 1rem; |
| top: 50%; |
| transform: translateY(-50%); |
| color: var(--overlay0); |
| width: 18px; |
| height: 18px; |
| } |
| .search-input { |
| width: 100%; |
| padding: 0.875rem 1rem 0.875rem 2.75rem; |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| color: var(--text); |
| font-size: 0.95rem; |
| font-family: var(--font-body); |
| } |
| .search-input:focus { |
| outline: none; |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px var(--accent-dim); |
| } |
| .filter-select { |
| padding: 0.875rem 1rem; |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| color: var(--text); |
| font-size: 0.9rem; |
| font-family: var(--font-body); |
| cursor: pointer; |
| min-width: 140px; |
| } |
| .filter-select:focus { |
| outline: none; |
| border-color: var(--accent); |
| } |
| |
| |
| .card { |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 1.25rem 1.5rem; |
| transition: border-color 0.2s, background 0.2s, transform 0.2s; |
| display: block; |
| text-decoration: none; |
| color: inherit; |
| } |
| .card:hover { |
| border-color: var(--accent); |
| background: var(--card-hover); |
| transform: translateY(-2px); |
| } |
| .card-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 1rem; |
| margin-bottom: 0.5rem; |
| } |
| .card-title { |
| font-size: 1rem; |
| font-weight: 600; |
| color: var(--text); |
| line-height: 1.4; |
| } |
| .card-star { |
| color: var(--yellow); |
| font-size: 1.1rem; |
| flex-shrink: 0; |
| } |
| .card-preview { |
| color: var(--text-dim); |
| font-size: 0.875rem; |
| line-height: 1.5; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| margin-bottom: 0.75rem; |
| } |
| .card-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| align-items: center; |
| } |
| .card-tags { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.375rem; |
| } |
| .card-source { |
| font-family: var(--font-mono); |
| font-size: 0.7rem; |
| color: var(--overlay0); |
| } |
| |
| |
| .badge { |
| font-family: var(--font-mono); |
| font-size: 0.72rem; |
| padding: 3px 10px; |
| border-radius: 20px; |
| border: 1px solid var(--border); |
| background: var(--mantle); |
| color: var(--text-dim); |
| white-space: nowrap; |
| } |
| .badge-mauve { |
| background: var(--accent-dim); |
| border-color: var(--accent); |
| color: var(--accent); |
| } |
| .badge-blue { |
| background: rgba(137, 180, 250, 0.12); |
| border-color: var(--blue); |
| color: var(--blue); |
| } |
| .badge-green { |
| background: rgba(166, 227, 161, 0.12); |
| border-color: var(--green); |
| color: var(--green); |
| } |
| .badge-yellow { |
| background: rgba(249, 226, 175, 0.12); |
| border-color: var(--yellow); |
| color: var(--yellow); |
| } |
| |
| |
| .grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); |
| gap: 1rem; |
| } |
| .grid.list-view { |
| grid-template-columns: 1fr; |
| } |
| |
| |
| .form-card { |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 1.75rem; |
| max-width: 700px; |
| margin: 0 auto; |
| } |
| .form-group { |
| margin-bottom: 1.25rem; |
| } |
| .form-group label { |
| display: block; |
| font-weight: 600; |
| font-size: 0.9rem; |
| margin-bottom: 0.5rem; |
| color: var(--text); |
| } |
| .form-group label .required { |
| color: var(--red); |
| } |
| .form-input, .form-textarea, .form-select { |
| width: 100%; |
| padding: 0.75rem 1rem; |
| background: var(--mantle); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text); |
| font-size: 0.95rem; |
| font-family: var(--font-body); |
| transition: border-color 0.15s, box-shadow 0.15s; |
| } |
| .form-input:focus, .form-textarea:focus, .form-select:focus { |
| outline: none; |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px var(--accent-dim); |
| } |
| .form-textarea { |
| resize: vertical; |
| min-height: 200px; |
| font-family: var(--font-mono); |
| font-size: 0.9rem; |
| } |
| .form-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 1rem; |
| } |
| @media (max-width: 500px) { |
| .form-row { grid-template-columns: 1fr; } |
| } |
| |
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| padding: 0.625rem 1.25rem; |
| border-radius: 8px; |
| font-size: 0.9rem; |
| font-weight: 600; |
| font-family: var(--font-body); |
| cursor: pointer; |
| text-decoration: none; |
| border: 1px solid var(--border); |
| background: var(--card); |
| color: var(--text); |
| transition: all 0.15s; |
| } |
| .btn:hover { |
| background: var(--card-hover); |
| border-color: var(--accent); |
| } |
| .btn-primary { |
| background: var(--accent); |
| border-color: var(--accent); |
| color: var(--crust); |
| } |
| .btn-primary:hover { |
| background: var(--mauve); |
| border-color: var(--mauve); |
| color: var(--crust); |
| } |
| .btn-danger { |
| border-color: var(--red); |
| color: var(--red); |
| } |
| .btn-danger:hover { |
| background: var(--red); |
| color: var(--crust); |
| } |
| .btn-ghost { |
| background: transparent; |
| border-color: transparent; |
| } |
| .btn-ghost:hover { |
| background: var(--surface0); |
| border-color: transparent; |
| } |
| .btn-sm { |
| padding: 0.375rem 0.75rem; |
| font-size: 0.8rem; |
| } |
| .btn-icon { |
| padding: 0.5rem; |
| border-radius: 8px; |
| } |
| |
| |
| .detail-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 1rem; |
| margin-bottom: 1.5rem; |
| flex-wrap: wrap; |
| } |
| .detail-title { |
| font-size: 1.75rem; |
| font-weight: 800; |
| letter-spacing: -0.02em; |
| } |
| .detail-actions { |
| display: flex; |
| gap: 0.5rem; |
| flex-wrap: wrap; |
| } |
| .prompt-content { |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 1.5rem; |
| margin-bottom: 1.5rem; |
| font-family: var(--font-mono); |
| font-size: 0.9rem; |
| line-height: 1.7; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
| .prompt-meta { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| gap: 1rem; |
| margin-bottom: 1.5rem; |
| } |
| .meta-item { |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| padding: 1rem; |
| } |
| .meta-label { |
| font-family: var(--font-mono); |
| font-size: 0.72rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--overlay0); |
| margin-bottom: 0.375rem; |
| } |
| .meta-value { |
| font-weight: 600; |
| font-size: 1rem; |
| } |
| |
| |
| .star-btn { |
| background: none; |
| border: none; |
| cursor: pointer; |
| padding: 0.25rem; |
| font-size: 1.25rem; |
| transition: transform 0.15s; |
| } |
| .star-btn:hover { transform: scale(1.2); } |
| .star-filled { color: var(--yellow); } |
| .star-empty { color: var(--surface2); } |
| |
| |
| .rating { |
| display: flex; |
| gap: 0.25rem; |
| } |
| .rating-btn { |
| background: none; |
| border: none; |
| cursor: pointer; |
| font-size: 1.1rem; |
| color: var(--surface2); |
| padding: 0.125rem; |
| transition: color 0.15s, transform 0.15s; |
| } |
| .rating-btn:hover, .rating-btn.active { |
| color: var(--yellow); |
| transform: scale(1.15); |
| } |
| |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 1rem; |
| margin-bottom: 2rem; |
| } |
| .stat-card { |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 1.25rem; |
| text-align: center; |
| } |
| .stat-value { |
| font-size: 2.5rem; |
| font-weight: 800; |
| background: linear-gradient(135deg, var(--mauve), var(--blue)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| line-height: 1.2; |
| } |
| .stat-label { |
| font-family: var(--font-mono); |
| font-size: 0.75rem; |
| color: var(--text-dim); |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| margin-top: 0.25rem; |
| } |
| .stat-card.highlight { |
| border-color: var(--accent); |
| background: var(--accent-dim); |
| } |
| |
| |
| .pagination { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 0.375rem; |
| margin-top: 2rem; |
| flex-wrap: wrap; |
| } |
| .pagination a, .pagination span { |
| padding: 0.5rem 0.875rem; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| text-decoration: none; |
| color: var(--text-dim); |
| font-size: 0.875rem; |
| font-weight: 500; |
| transition: all 0.15s; |
| } |
| .pagination a:hover { |
| border-color: var(--accent); |
| color: var(--accent); |
| background: var(--accent-dim); |
| } |
| .pagination .active { |
| background: var(--accent); |
| border-color: var(--accent); |
| color: var(--crust); |
| } |
| .pagination .disabled { |
| opacity: 0.4; |
| pointer-events: none; |
| } |
| |
| |
| .empty-state { |
| text-align: center; |
| padding: 4rem 2rem; |
| color: var(--text-dim); |
| } |
| .empty-state h3 { |
| font-size: 1.25rem; |
| margin-bottom: 0.5rem; |
| color: var(--text); |
| } |
| .empty-icon { |
| font-size: 3rem; |
| margin-bottom: 1rem; |
| opacity: 0.5; |
| } |
| |
| |
| .back-link { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| color: var(--text-dim); |
| text-decoration: none; |
| font-size: 0.875rem; |
| margin-bottom: 1.5rem; |
| padding: 0.5rem 0; |
| } |
| .back-link:hover { color: var(--accent); } |
| |
| |
| footer { |
| text-align: center; |
| padding: 2rem; |
| color: var(--text-dim); |
| font-size: 0.8rem; |
| border-top: 1px solid var(--surface0); |
| margin-top: 3rem; |
| } |
| footer a { |
| color: var(--accent); |
| text-decoration: none; |
| } |
| |
| |
| @keyframes fadeUp { |
| from { opacity: 0; transform: translateY(12px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .anim { |
| animation: fadeUp 0.35s ease-out both; |
| } |
| |
| |
| @media (max-width: 600px) { |
| .header-inner { flex-wrap: wrap; } |
| .grid { grid-template-columns: 1fr; } |
| .detail-header { flex-direction: column; } |
| .hero h1 { font-size: 1.75rem; } |
| } |
| |
| |
| .text-muted { color: var(--text-dim); } |
| .text-sm { font-size: 0.875rem; } |
| .text-xs { font-size: 0.75rem; } |
| .font-mono { font-family: var(--font-mono); } |
| .flex { display: flex; } |
| .flex-between { display: flex; justify-content: space-between; align-items: center; } |
| .gap-2 { gap: 0.5rem; } |
| .gap-4 { gap: 1rem; } |
| .mt-2 { margin-top: 0.5rem; } |
| .mt-4 { margin-top: 1rem; } |
| .mt-6 { margin-top: 1.5rem; } |
| .mb-2 { margin-bottom: 0.5rem; } |
| .mb-4 { margin-bottom: 1rem; } |
| .mb-6 { margin-bottom: 1.5rem; } |
| |
| |
| .htmx-request { opacity: 0.6; } |
| </style> |
| {% block extra_head %}{% endblock %} |
| </head> |
| <body> |
| <header> |
| <div class="header-inner"> |
| <a href="/" class="logo">📋 Prompt<span>Garage</span></a> |
| <nav> |
| <a href="/prompts" {% if request.url.path == '/prompts' %}class="active"{% endif %}>Prompts</a> |
| <a href="/stats" {% if request.url.path == '/stats' %}class="active"{% endif %}>Statistik</a> |
| <a href="/prompts/new" class="nav-new" {% if request.url.path == '/prompts/new' %}class="active"{% endif %}>+ Neu</a> |
| </nav> |
| </div> |
| </header> |
|
|
| <main> |
| {% block content %}{% endblock %} |
| </main> |
|
|
| <footer> |
| <p>PromptGarage — <span id="prompt-count">{{ stats.total if stats else 0 }}</span> Prompts</p> |
| </footer> |
|
|
| <script> |
| async function copyToClipboard(text) { |
| try { |
| await navigator.clipboard.writeText(text); |
| return true; |
| } catch { |
| const ta = document.createElement('textarea'); |
| ta.value = text; |
| document.body.appendChild(ta); |
| ta.select(); |
| document.execCommand('copy'); |
| document.body.removeChild(ta); |
| return true; |
| } |
| } |
| </script> |
| {% block scripts %}{% endblock %} |
| </body> |
| </html> |
|
|
