From 7a347b093e1190c75ebc0b91741fdc3d1a422527 Mon Sep 17 00:00:00 2001 From: GeNii96 Date: Tue, 2 Jun 2026 10:36:02 +0200 Subject: [PATCH 1/7] inline css entfernen --- OnlyPrompt.Frontend/chats.html | 267 ++++---- OnlyPrompt.Frontend/community.html | 337 +++++----- OnlyPrompt.Frontend/create.html | 12 +- OnlyPrompt.Frontend/css/base.css | 46 +- OnlyPrompt.Frontend/css/chats.css | 12 +- OnlyPrompt.Frontend/css/community.css | 33 +- OnlyPrompt.Frontend/css/create.css | 41 +- OnlyPrompt.Frontend/css/dashboard.css | 10 +- OnlyPrompt.Frontend/css/marketplace.css | 243 +++++++- OnlyPrompt.Frontend/css/post-detail.css | 207 ++++++- OnlyPrompt.Frontend/css/profile.css | 157 ++++- OnlyPrompt.Frontend/css/settings.css | 20 +- OnlyPrompt.Frontend/dashboard.html | 80 +-- OnlyPrompt.Frontend/marketplace.html | 303 +++------ OnlyPrompt.Frontend/post-detail.html | 258 +++----- OnlyPrompt.Frontend/profile.html | 786 +++++++++++++----------- OnlyPrompt.Frontend/settings.html | 6 +- 17 files changed, 1663 insertions(+), 1155 deletions(-) diff --git a/OnlyPrompt.Frontend/chats.html b/OnlyPrompt.Frontend/chats.html index b6abbd0..7013c5f 100644 --- a/OnlyPrompt.Frontend/chats.html +++ b/OnlyPrompt.Frontend/chats.html @@ -1,130 +1,175 @@ - + - - - - OnlyPrompt - Chats - - - - - - - - - - -
- - + + + + OnlyPrompt - Chats + + + + + + + + + + +
+ -
- -
+
+
-
- -
- - -
-
-

Messages

- +
+ +
+ +
+
+

Messages

+ +
+
+ +
+ Alex Chen +
+
Alex Chen
+
+ Hey Sarah! Really loved your last video on minimalism... +
+
+
10:17 AM
+
+ +
+ Mia Wong +
+
Mia Wong
+
+ Thanks for the prompt tips! They worked perfectly. +
+
+
Yesterday
+
+ +
+ Tom Rivera +
+
Tom Rivera
+
+ Let's schedule a call for the collab? +
+
+
Yesterday
+
+
-
- -
- Alex Chen -
-
Alex Chen
-
Hey Sarah! Really loved your last video on minimalism...
+ + +
+
+ Alex Chen +
+
Alex Chen
+
+ Online +
-
10:17 AM
- -
- Mia Wong -
-
Mia Wong
-
Thanks for the prompt tips! They worked perfectly.
+
+ +
+
+ Hey Sarah! Really loved your last video on minimalism. Quick + question about your workspace layout? +
+
10:15 AM
+
+ +
+
+ Thanks Alex! Appreciate it. Yes, happy to share! The desk is + from Article, and the shelving unit is custom-built. Highly + recommend a clean setup! +
+
10:16 AM
+
+ +
+
+ Thanks so much! Your aesthetic is exactly what I'm aiming + for. Can't wait for your next piece! +
+
10:17 AM
+
+ +
+
+ Awesome! Let me know if you need more tips. Enjoy the + process! 😊 +
+
10:18 AM
-
Yesterday
- -
- Tom Rivera -
-
Tom Rivera
-
Let's schedule a call for the collab?
-
-
Yesterday
+
+ +
- - -
-
- Alex Chen -
-
Alex Chen
-
Online
-
-
-
- -
-
Hey Sarah! Really loved your last video on minimalism. Quick question about your workspace layout?
-
10:15 AM
-
- -
-
Thanks Alex! Appreciate it. Yes, happy to share! The desk is from Article, and the shelving unit is custom-built. Highly recommend a clean setup!
-
10:16 AM
-
- -
-
Thanks so much! Your aesthetic is exactly what I'm aiming for. Can't wait for your next piece!
-
10:17 AM
-
- -
-
Awesome! Let me know if you need more tips. Enjoy the process! 😊
-
10:18 AM
-
-
-
- - -
-
- -
-
+
+
-
- - + fetch("/topbar.html") + .then((r) => r.text()) + .then( + (data) => + (document.getElementById("topbar-container").innerHTML = data), + ); + + diff --git a/OnlyPrompt.Frontend/community.html b/OnlyPrompt.Frontend/community.html index c22c3c6..4505b2e 100644 --- a/OnlyPrompt.Frontend/community.html +++ b/OnlyPrompt.Frontend/community.html @@ -1,204 +1,225 @@ - + - - - - OnlyPrompt - Discover Creators - - - - - - - - - - -
+ + + + OnlyPrompt - Discover Creators + + + + + + + + + + +
+ - +
+
-
+
+
+

Discover Creators

+

Follow your favorite prompt artists and get inspired.

+
-
+
+ + + + +
-
+
-
-

Discover Creators

-

Follow your favorite prompt artists and get inspired.

-
+
+ +

+ No creators found +

+

+ Check back later for new creators to follow. +

+
-
- - - - -
- -
- - - - - -
+
+ +

Could not load creators

+

+
+
+
-
- - + loadCreators(); + + diff --git a/OnlyPrompt.Frontend/create.html b/OnlyPrompt.Frontend/create.html index c1fc404..1938c0e 100644 --- a/OnlyPrompt.Frontend/create.html +++ b/OnlyPrompt.Frontend/create.html @@ -17,11 +17,11 @@ -
+
-
+
@@ -76,8 +76,8 @@ Upload a PNG or JPG – preview will appear below. - @@ -88,7 +88,7 @@
- -

+

diff --git a/OnlyPrompt.Frontend/css/base.css b/OnlyPrompt.Frontend/css/base.css index 493f50e..7fb867c 100644 --- a/OnlyPrompt.Frontend/css/base.css +++ b/OnlyPrompt.Frontend/css/base.css @@ -28,7 +28,7 @@ body { .form-error ul { list-style: none; padding-left: 0; - list-style: '*'; + list-style: "*"; } .form-error li { @@ -38,4 +38,46 @@ body { .form-error li .error { color: red; font-style: italic; -} \ No newline at end of file +} + +/* ── Layout ──────────────────────────────────────────────────────────── */ +.layout { + display: flex; + min-height: 100vh; + background: var(--bg); +} + +/* Main content area - flex child that fills remaining space */ +.page-body { + flex: 1; + display: flex; + flex-direction: column; + margin: 0; + max-width: 100%; + padding: 0; + width: 100%; +} + +/* ── Reusable empty / error state components ─────────────────────────── */ +.state-empty, +.state-error { + display: none; + text-align: center; + padding: 60px 20px; +} +.state-empty { + color: #64748b; +} +.state-error { + color: #ef4444; +} + +.state-icon { + font-size: 3rem; + display: block; + margin-bottom: 16px; +} + +.state-title { + margin-bottom: 8px; +} diff --git a/OnlyPrompt.Frontend/css/chats.css b/OnlyPrompt.Frontend/css/chats.css index e5205ca..4464dbe 100644 --- a/OnlyPrompt.Frontend/css/chats.css +++ b/OnlyPrompt.Frontend/css/chats.css @@ -1,13 +1,5 @@ /* Chats page - Two column layout: chat list + active chat window */ -/* Full width layout */ -.layout > div[style*="flex:1"] { - margin: 0 !important; - max-width: 100% !important; - padding: 0 !important; - width: 100% !important; -} - .chats-main { flex: 1; padding: 20px 32px; @@ -20,7 +12,7 @@ gap: 24px; background: #fff; border-radius: 18px; - box-shadow: 0 2px 8px rgba(59,130,246,0.06); + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06); overflow: hidden; height: calc(100vh - 120px); /* Adjust based on topbar height */ min-height: 500px; @@ -244,4 +236,4 @@ .chat-active { height: 500px; } -} \ No newline at end of file +} diff --git a/OnlyPrompt.Frontend/css/community.css b/OnlyPrompt.Frontend/css/community.css index a6fa1c9..b1ada51 100644 --- a/OnlyPrompt.Frontend/css/community.css +++ b/OnlyPrompt.Frontend/css/community.css @@ -1,13 +1,5 @@ /* Creators page - Discover creators, filter buttons, creator cards */ -/* Full width layout */ -.layout > div[style*="flex:1"] { - margin: 0 !important; - max-width: 100% !important; - padding: 0 !important; - width: 100% !important; -} - .creators-main { background: transparent !important; padding: 20px 32px !important; @@ -71,15 +63,17 @@ .creator-card { background: #fff; border-radius: 18px; - box-shadow: 0 2px 8px rgba(59,130,246,0.06); + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06); padding: 20px; display: flex; gap: 16px; - transition: transform 0.2s, box-shadow 0.2s; + transition: + transform 0.2s, + box-shadow 0.2s; } .creator-card:hover { transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(59,130,246,0.12); + box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12); } .creator-avatar { @@ -177,4 +171,19 @@ .follow-btn { width: 100%; } -} \ No newline at end of file +} + +/* Star rating in creator cards */ +.creator-stars { + color: #f59e0b; +} +.creator-stars-value { + color: #64748b; + font-size: 0.8rem; +} + +/* Clickable elements */ +.creator-card .creator-avatar, +.creator-card .creator-name { + cursor: pointer; +} diff --git a/OnlyPrompt.Frontend/css/create.css b/OnlyPrompt.Frontend/css/create.css index 516c29a..c7a17cb 100644 --- a/OnlyPrompt.Frontend/css/create.css +++ b/OnlyPrompt.Frontend/css/create.css @@ -1,13 +1,5 @@ /* Create page - Form for publishing new AI prompts */ -/* Full width layout */ -.layout > div[style*="flex:1"] { - margin: 0 !important; - max-width: 100% !important; - padding: 0 !important; - width: 100% !important; -} - .create-main { flex: 1; display: flex; @@ -22,12 +14,12 @@ width: 100%; background: #fff; border-radius: 18px; - box-shadow: 0 2px 8px rgba(59,130,246,0.06); + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06); padding: 32px; transition: box-shadow 0.2s; } .create-container:hover { - box-shadow: 0 8px 20px rgba(59,130,246,0.12); + box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12); } /* Header */ @@ -77,7 +69,7 @@ .form-group select:focus { outline: none; border-color: #7c3aed; - box-shadow: 0 0 0 3px rgba(124,58,237,0.1); + box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); } .form-hint { font-size: 0.75rem; @@ -106,6 +98,25 @@ } #priceField { margin-top: 8px; + display: none; +} + +/* Image preview */ +#imagePreview { + margin-top: 10px; + display: none; +} +#imagePreview img { + max-width: 100%; + max-height: 200px; + border-radius: 12px; +} + +/* Status message */ +#create-status { + text-align: center; + color: #64748b; + margin: 0; } /* Buttons */ @@ -114,7 +125,8 @@ gap: 16px; margin-top: 8px; } -.submit-btn, .cancel-btn { +.submit-btn, +.cancel-btn { flex: 1; border: none; padding: 12px; @@ -132,7 +144,8 @@ background: #f1f5f9; color: #475569; } -.submit-btn:hover, .cancel-btn:hover { +.submit-btn:hover, +.cancel-btn:hover { opacity: 0.85; } @@ -152,4 +165,4 @@ .form-actions { flex-direction: column; } -} \ No newline at end of file +} diff --git a/OnlyPrompt.Frontend/css/dashboard.css b/OnlyPrompt.Frontend/css/dashboard.css index 233010f..0fbfe60 100644 --- a/OnlyPrompt.Frontend/css/dashboard.css +++ b/OnlyPrompt.Frontend/css/dashboard.css @@ -1,13 +1,5 @@ /* Feed page - Multi-column grid, square images, like/comment/save actions */ -/* Full width layout */ -.layout > div[style*="flex:1"] { - margin: 0 !important; - max-width: 100% !important; - padding: 0 !important; - width: 100% !important; -} - .feed-main { background: transparent !important; padding: 20px 32px !important; @@ -125,7 +117,7 @@ .post-title { font-size: 1.1rem; font-weight: 700; - margin: 0 0 6px 0; + margin: 10px 0 6px 0; } .post-description { color: #334155; diff --git a/OnlyPrompt.Frontend/css/marketplace.css b/OnlyPrompt.Frontend/css/marketplace.css index 370e3c9..77ff255 100644 --- a/OnlyPrompt.Frontend/css/marketplace.css +++ b/OnlyPrompt.Frontend/css/marketplace.css @@ -1,13 +1,5 @@ /* Marketplace Page - Prompt cards, filter buttons, full width layout */ -/* Full width layout */ -.layout > div[style*="flex:1"] { - margin: 0 !important; - max-width: 100% !important; - padding: 0 !important; - width: 100% !important; -} - .marketplace-main { background: transparent !important; padding: 20px 32px !important; @@ -251,3 +243,238 @@ border-color: #6366f1; background: #f5f3ff; } + +/* ── Payment Modal ──────────────────────────────────────────────────── */ +#payment-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 1000; + align-items: center; + justify-content: center; +} + +.payment-modal { + background: #fff; + border-radius: 16px; + padding: 32px; + max-width: 460px; + width: 90%; + position: relative; + max-height: 90vh; + overflow-y: auto; +} + +.payment-close-btn { + position: absolute; + top: 14px; + right: 18px; + background: none; + border: none; + font-size: 1.4rem; + cursor: pointer; + color: #64748b; +} + +.payment-title { + margin-bottom: 4px; +} + +#pay-prompt-title { + color: #6366f1; + font-weight: 600; + margin-bottom: 16px; +} + +.payment-intro { + color: #64748b; + margin-bottom: 24px; +} + +.payment-method-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.pay-crypto-icon { + font-size: 1.4rem; +} + +.pay-method-price { + margin-left: auto; + font-size: 0.85rem; + color: #94a3b8; +} + +.payment-disclaimer { + margin-top: 20px; + font-size: 0.8rem; + color: #94a3b8; + text-align: center; +} + +#pay-step-2 { + display: none; +} + +.payment-back-btn { + background: none; + border: none; + color: #6366f1; + cursor: pointer; + margin-bottom: 16px; + font-size: 0.9rem; +} + +#pay-crypto-title { + margin-bottom: 8px; +} + +.payment-amount-text { + color: #64748b; + margin-bottom: 8px; +} + +.payment-address-box { + background: #f1f5f9; + border-radius: 10px; + padding: 14px 16px; + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 8px; +} + +#pay-address { + font-size: 0.85rem; + word-break: break-all; + flex: 1; +} + +.payment-copy-btn { + background: none; + border: none; + cursor: pointer; + color: #6366f1; + font-size: 1.1rem; +} + +.payment-warning-text { + font-size: 0.78rem; + color: #94a3b8; + margin-bottom: 20px; +} + +.payment-info-box { + background: #fef9c3; + border: 1px solid #fde68a; + border-radius: 10px; + padding: 12px 14px; + font-size: 0.82rem; + color: #92400e; + margin-bottom: 20px; +} +.payment-confirm-btn { + width: 100%; + padding: 12px; + background: #6366f1; + color: #fff; + border: none; + border-radius: 10px; + font-weight: 600; + font-size: 1rem; + cursor: pointer; +} +#pay-step-3 { + display: none; + text-align: center; + padding: 20px 0; +} +.payment-success-icon { + font-size: 3.5rem; + color: #10b981; + display: block; + margin-bottom: 16px; +} +.payment-success-title { + margin-bottom: 8px; +} +.payment-success-desc { + color: #64748b; + margin-bottom: 24px; +} +.payment-done-btn { + padding: 12px 28px; + background: #6366f1; + color: #fff; + border: none; + border-radius: 10px; + font-weight: 600; + cursor: pointer; +} +.market-card-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 8px; +} +.market-card-avatar { + width: 34px; + height: 34px; + border-radius: 50%; + background: #6366f1; + color: #fff; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.95rem; + flex-shrink: 0; +} +.market-card-time { + margin-left: auto; + font-size: 0.75rem; + color: #94a3b8; +} +.market-card-rating { + margin-bottom: 12px; +} +.market-rating-none { + color: #94a3b8; + font-size: 0.8rem; +} +.market-rating-clickable { + cursor: pointer; +} +.market-rating-stars { + color: #f59e0b; +} +.buy-btn-locked { + background: #ef4444 !important; +} +.buy-btn-unlocked { + background: #10b981 !important; +} +.market-price-badge { + background: #fef3c7; + color: #92400e; + border-radius: 20px; + padding: 4px 14px; + font-size: 0.8rem; + font-weight: 600; +} +.market-heart-icon { + color: #ef4444; +} +.market-bookmark-icon { + color: #f59e0b; +} +.market-save-span { + margin-left: 12px; +} +.details-btn[disabled] { + opacity: 0.45; + cursor: not-allowed; +} diff --git a/OnlyPrompt.Frontend/css/post-detail.css b/OnlyPrompt.Frontend/css/post-detail.css index 45e20f9..8ec8e4c 100644 --- a/OnlyPrompt.Frontend/css/post-detail.css +++ b/OnlyPrompt.Frontend/css/post-detail.css @@ -1,13 +1,5 @@ /* Post Detail page - Full prompt view, rating, example output, unlock button */ -/* Full width layout */ -.layout > div[style*="flex:1"] { - margin: 0 !important; - max-width: 100% !important; - padding: 0 !important; - width: 100% !important; -} - .post-detail-main { flex: 1; display: flex; @@ -21,12 +13,12 @@ width: 100%; background: #fff; border-radius: 18px; - box-shadow: 0 2px 8px rgba(59,130,246,0.06); + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06); padding: 32px; transition: box-shadow 0.2s; } .post-detail-container:hover { - box-shadow: 0 8px 20px rgba(59,130,246,0.12); + box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12); } /* Header */ @@ -319,3 +311,198 @@ padding: 16px; } } + +/* ── Loading / error states ──────────────────────────────────────────── */ +#detail-loading { + text-align: center; + padding: 60px 20px; + color: #64748b; +} + +/* Smaller state icons for this page */ +#detail-loading .state-icon, +#detail-error .state-icon { + font-size: 2.5rem; + margin-bottom: 12px; +} + +#detail-error-msg { + color: #64748b; + margin-top: 8px; +} + +.detail-back-btn { + margin-top: 20px; + padding: 10px 24px; + background: #6366f1; + color: #fff; + border: none; + border-radius: 10px; + font-weight: 600; + cursor: pointer; +} + +/* ── Detail body ─────────────────────────────────────────────────────── */ +#detail-body { + display: none; +} + +.detail-creator-row { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 16px; +} + +#creator-avatar { + width: 42px; + height: 42px; + border-radius: 50%; + background: #6366f1; + color: #fff; + font-weight: 700; + font-size: 1.1rem; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +#creator-name { + font-weight: 600; + font-size: 0.95rem; +} + +#prompt-date { + display: block; + font-size: 0.8rem; + color: #94a3b8; +} + +.detail-actions-right { + margin-left: auto; +} + +#edit-prompt-btn { + display: none; + margin-left: 10px; + padding: 6px 14px; + border: none; + border-radius: 10px; + background: #f1f5f9; + color: #334155; + font-weight: 700; + cursor: pointer; +} + +#prompt-body { + white-space: pre-wrap; + font-family: monospace; + background: #f8fafc; + border-radius: 10px; + padding: 16px; + font-size: 0.9rem; + line-height: 1.7; +} + +#example-section { + display: none; +} +#example-output-text { + white-space: pre-wrap; +} +#example-image { + display: none; +} + +/* ── Locked section ──────────────────────────────────────────────────── */ +#locked-section { + display: none; + text-align: center; + padding: 40px 20px; + background: #f8fafc; + border-radius: 12px; + margin-bottom: 28px; +} + +.locked-icon { + font-size: 2.5rem; + color: #94a3b8; + display: block; + margin-bottom: 12px; +} + +.locked-title { + margin-bottom: 8px; +} +.locked-desc { + color: #64748b; + margin-bottom: 20px; +} + +#locked-subscribe-btn { + padding: 12px 28px; + background: #6366f1; + color: #fff; + border: none; + border-radius: 10px; + font-weight: 600; + cursor: pointer; + font-size: 1rem; +} +.detail-heart-icon { + color: #ef4444; +} +.detail-bookmark-span { + margin-left: 12px; +} +.detail-bookmark-icon { + color: #f59e0b; +} +.detail-loading-text { + color: #94a3b8; +} +.detail-error-text { + color: #ef4444; +} +.rating-stars-display { + font-size: 1.1rem; + color: #f59e0b; +} +.rating-value { + margin-left: 8px; + font-weight: 600; +} +.rating-count { + font-size: 0.85rem; + color: #94a3b8; + margin-left: 4px; +} +.rating-none { + font-size: 0.9rem; + color: #94a3b8; +} +.tier-badge-paid { + background: #fef3c7; + color: #92400e; + border-radius: 20px; + padding: 4px 14px; + font-size: 0.8rem; + font-weight: 600; +} +.tier-badge-tier { + background: #f1f5f9; + color: #475569; + border-radius: 20px; + padding: 4px 14px; + font-size: 0.8rem; + font-weight: 600; +} +.tier-badge-free { + background: #dcfce7; + color: #166534; + border-radius: 20px; + padding: 4px 14px; + font-size: 0.8rem; + font-weight: 600; +} diff --git a/OnlyPrompt.Frontend/css/profile.css b/OnlyPrompt.Frontend/css/profile.css index 22a1bac..87e3bee 100644 --- a/OnlyPrompt.Frontend/css/profile.css +++ b/OnlyPrompt.Frontend/css/profile.css @@ -1,14 +1,148 @@ /* Profile Page - Full width layout, darker share button, responsive grid */ -/* Force main content container to full width, remove centering and max-width */ -.layout > div[style*="flex:1"] { - margin: 0 !important; - max-width: 100% !important; - padding: 0 !important; - width: 100% !important; +/* ── Profile header ──────────────────────────────────────────────────── */ +.profile-header { + display: flex; + align-items: center; + gap: 32px; + border-bottom: 1px solid #e5e7eb; + padding-bottom: 24px; } -/* Inner spacing for the profile card */ +/* ── Profile avatar ──────────────────────────────────────────────────── */ +.profile-avatar { + width: 110px; + height: 110px; + object-fit: cover; +} + +/* ── Profile info column ─────────────────────────────────────────────── */ +.profile-info { + flex: 1; +} + +#profileDisplayName { + font-size: 2rem; + font-weight: 700; + margin-bottom: 4px; +} + +#profileSlug { + color: #64748b; + margin-bottom: 8px; +} + +.profile-badge-icon { + color: #3b82f6; +} + +#profileBio { + margin-bottom: 8px; +} +#profileSpecialities { + color: #64748b; +} + +#profileStats { + display: flex; + gap: 18px; + color: #64748b; + margin-top: 12px; + font-size: 0.95rem; +} +#profileStats strong { + color: #111827; +} + +/* ── Profile actions column ──────────────────────────────────────────── */ +#profileActions { + display: flex; + flex-direction: column; + gap: 10px; +} + +/* ── Profile tabs ────────────────────────────────────────────────────── */ +.profile-tabs { + display: flex; + gap: 24px; + border-bottom: 2px solid #e5e7eb; + margin: 32px 0 18px 0; + flex-wrap: wrap; +} + +/* ── Prompts grid ────────────────────────────────────────────────────── */ +#profile-prompts-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 24px; +} + +.profile-grid-loading { + grid-column: 1 / -1; + color: #64748b; + text-align: center; + padding: 28px; +} +.profile-grid-empty { + grid-column: 1 / -1; + color: #64748b; + text-align: center; + padding: 28px; +} +.profile-grid-error { + grid-column: 1 / -1; + color: #ef4444; + text-align: center; + padding: 28px; +} +.profile-prompt-card { + background: #fff; + border-radius: 18px; + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06); + padding: 18px; + display: flex; + gap: 16px; + cursor: pointer; +} +.profile-prompt-img { + width: 72px; + height: 72px; + border-radius: 12px; + object-fit: cover; +} +.profile-prompt-body { + flex: 1; + min-width: 0; +} +.profile-prompt-title { + font-weight: 700; +} +.profile-prompt-desc { + color: #64748b; + margin-bottom: 8px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +.profile-prompt-meta { + display: flex; + gap: 16px; + color: #64748b; + align-items: center; + flex-wrap: wrap; +} +.profile-prompt-edit-btn { + border: none; + background: #f1f5f9; + color: #334155; + border-radius: 10px; + padding: 6px 10px; + font-weight: 700; + cursor: pointer; +} + +/* ── Inner spacing for the profile card ─────────────────────────────── */ .profile-main { background: transparent !important; border-radius: 0 !important; @@ -16,7 +150,7 @@ padding: 20px 32px !important; margin: 0 auto !important; width: 100%; - max-width: 1600px; /* Limits content on very large screens, but still wide */ + max-width: 1600px; /* Limits content on very large screens, but still wide */ } /* Make prompts grid use more columns on large screens */ @@ -29,7 +163,7 @@ /* Share button: darker background and text */ .profile-header button:last-child { - background: #cbd5e1 !important; /* darker gray */ + background: #cbd5e1 !important; /* darker gray */ color: #1e293b !important; box-shadow: none !important; border: none !important; @@ -64,7 +198,7 @@ /* Prompt cards: rounded corners */ .profile-main section > div { border-radius: 18px !important; - box-shadow: 0 2px 8px rgba(59,130,246,0.06); + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06); } /* Prompt images: rounded corners */ @@ -75,6 +209,9 @@ /* Avatar remains round */ .profile-avatar { border-radius: 50% !important; + width: 110px; + height: 110px; + object-fit: cover; } /* All outer containers stay square */ diff --git a/OnlyPrompt.Frontend/css/settings.css b/OnlyPrompt.Frontend/css/settings.css index 8ef259c..eb89712 100644 --- a/OnlyPrompt.Frontend/css/settings.css +++ b/OnlyPrompt.Frontend/css/settings.css @@ -1,12 +1,5 @@ /* Settings page - tabs, form styling */ -.layout > div[style*="flex:1"] { - margin: 0 !important; - max-width: 100% !important; - padding: 0 !important; - width: 100% !important; -} - .settings-main { flex: 1; display: flex; @@ -21,7 +14,7 @@ width: 100%; background: #fff; border-radius: 18px; - box-shadow: 0 2px 8px rgba(59,130,246,0.06); + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06); padding: 32px; } @@ -101,7 +94,7 @@ .form-group textarea:focus { outline: none; border-color: #7c3aed; - box-shadow: 0 0 0 3px rgba(124,58,237,0.1); + box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); } .checkbox-label { display: flex; @@ -181,4 +174,11 @@ flex-direction: column; align-items: flex-start; } -} \ No newline at end of file +} + +/* Save status message */ +#profileSaveStatus { + margin-top: 10px; + color: #64748b; + text-align: center; +} diff --git a/OnlyPrompt.Frontend/dashboard.html b/OnlyPrompt.Frontend/dashboard.html index 4b05d4d..5f770e4 100644 --- a/OnlyPrompt.Frontend/dashboard.html +++ b/OnlyPrompt.Frontend/dashboard.html @@ -20,13 +20,10 @@ /> -
+
-
+
@@ -61,38 +58,16 @@
-
- -

No posts yet

+
+ +

No posts yet

Follow some creators to see their prompts here.

-
- -

Could not load feed

+
+ +

Could not load feed

@@ -163,33 +138,33 @@ return `
- ${prompt.creatorName} + ${prompt.creatorName}
${prompt.creatorName}
${timeAgo(prompt.timeStamp)}
- ${prompt.exampleImageUrl ? `${prompt.title}` : `${prompt.title}`} -

${prompt.title}

-

${prompt.description || ''}

- ${locked ? `

${prompt.tierName ?? 'Paid'} tier required

` : ''} + ${prompt.exampleImageUrl ? `${prompt.title}` : `${prompt.title}`} +

${prompt.title}

+

${prompt.description || ""}

+ ${locked ? `

${prompt.tierName ?? "Paid"} tier required

` : ""} ${renderStars(prompt.averageRating)}
- + - +
`; } - window.toggleLike = async function(event, id, isLiked) { + window.toggleLike = async function (event, id, isLiked) { event.stopPropagation(); const response = await fetch(`/api/v1/prompts/${id}/likes`, { method: isLiked ? "DELETE" : "PUT", - credentials: "same-origin" + credentials: "same-origin", }); if (response.status === 401) { @@ -200,26 +175,28 @@ if (!response.ok) return; loadFeed( document.querySelector(".filter-btn.active")?.dataset.sort || "date", - document.querySelector(".filter-btn.active")?.dataset.ascending === "true" + document.querySelector(".filter-btn.active")?.dataset.ascending === + "true", ); }; - window.toggleFeedState = function(event, type, id) { + window.toggleFeedState = function (event, type, id) { event.stopPropagation(); const key = `prompt-${type}-${id}`; const next = localStorage.getItem(key) !== "true"; localStorage.setItem(key, next); loadFeed( document.querySelector(".filter-btn.active")?.dataset.sort || "date", - document.querySelector(".filter-btn.active")?.dataset.ascending === "true" + document.querySelector(".filter-btn.active")?.dataset.ascending === + "true", ); }; - window.toggleSave = async function(event, id, isSaved) { + window.toggleSave = async function (event, id, isSaved) { event.stopPropagation(); const response = await fetch(`/api/v1/prompts/${id}/saves`, { method: isSaved ? "DELETE" : "PUT", - credentials: "same-origin" + credentials: "same-origin", }); if (response.status === 401) { @@ -230,13 +207,16 @@ if (!response.ok) return; loadFeed( document.querySelector(".filter-btn.active")?.dataset.sort || "date", - document.querySelector(".filter-btn.active")?.dataset.ascending === "true" + document.querySelector(".filter-btn.active")?.dataset.ascending === + "true", ); }; - window.sharePrompt = function(event, id) { + window.sharePrompt = function (event, id) { event.stopPropagation(); - navigator.clipboard.writeText(`${location.origin}/post-detail?id=${id}`); + navigator.clipboard.writeText( + `${location.origin}/post-detail?id=${id}`, + ); }; async function loadFeed(sortBy = "date", ascending = false) { diff --git a/OnlyPrompt.Frontend/marketplace.html b/OnlyPrompt.Frontend/marketplace.html index 955fb67..6001c08 100644 --- a/OnlyPrompt.Frontend/marketplace.html +++ b/OnlyPrompt.Frontend/marketplace.html @@ -60,13 +60,10 @@ -
+
-
+
@@ -100,38 +97,16 @@
-
- -

No prompts found

+
+ +

No prompts found

Try a different category or search term.

-
- -

Could not load prompts

+
+ +

Could not load prompts

@@ -139,213 +114,83 @@
-
-
-
-

Subscribe to access

-

-

+

Subscribe to access

+

+

Choose a payment method to unlock this prompt:

-
+
-

+

Payments are processed on-chain. No account needed.

-