Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3da8813c41 | |||
| 02b8a75947 | |||
| d2d5c0c66c | |||
| 4105659b0b | |||
| da52852fdf | |||
| 7b23b296d3 | |||
| a4a5d03f9f | |||
| 11e973ce61 |
19
css/base.css
Normal file
19
css/base.css
Normal file
@ -0,0 +1,19 @@
|
||||
/*
|
||||
This file contains global base styles and resets
|
||||
--> ensures consistent spacing, font usage, and box sizing
|
||||
across all elements in the application
|
||||
*/
|
||||
|
||||
/* Reset default browser styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Global body styling */
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
247
css/chats.css
Normal file
247
css/chats.css
Normal file
@ -0,0 +1,247 @@
|
||||
/* 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;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Chat container (flex, two columns) */
|
||||
.chat-container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* LEFT COLUMN: Chat list */
|
||||
.chat-list {
|
||||
width: 320px;
|
||||
border-right: 1px solid #eef2f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.chat-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
.chat-list-header h2 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
.new-chat-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
color: #3b82f6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-list-items {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
}
|
||||
.chat-item:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
.chat-item.active {
|
||||
background: #eef2ff;
|
||||
border-left: 3px solid #3b82f6;
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.chat-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.chat-name {
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.chat-last-msg {
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.chat-time {
|
||||
font-size: 0.7rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* RIGHT COLUMN: Active chat */
|
||||
.chat-active {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
.chat-avatar-large {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.chat-header-info {
|
||||
flex: 1;
|
||||
}
|
||||
.chat-header-name {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.chat-header-status {
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.online-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #10b981;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Chat messages area */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
padding: 20px 24px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
background: #fafcff;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
}
|
||||
.message.received {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.message.sent {
|
||||
align-items: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
.message-bubble {
|
||||
padding: 10px 14px;
|
||||
border-radius: 18px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
background: #f1f5f9;
|
||||
color: #1e293b;
|
||||
}
|
||||
.message.sent .message-bubble {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
}
|
||||
.message-time {
|
||||
font-size: 0.7rem;
|
||||
color: #94a3b8;
|
||||
margin-top: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* Input area */
|
||||
.chat-input-area {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #eef2f7;
|
||||
background: #fff;
|
||||
}
|
||||
.chat-input-area input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 30px;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
}
|
||||
.chat-input-area input:focus {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
.send-btn {
|
||||
background: var(--gradient);
|
||||
border: none;
|
||||
padding: 0 24px;
|
||||
border-radius: 30px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.send-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.chats-main {
|
||||
padding: 16px;
|
||||
}
|
||||
.chat-list {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.chat-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
.chat-list {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
.chat-active {
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
170
css/community.css
Normal file
170
css/community.css
Normal file
@ -0,0 +1,170 @@
|
||||
/* 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;
|
||||
margin: 0 auto !important;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.creators-header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.creators-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.creators-header p {
|
||||
color: #64748b;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Filter buttons */
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.filter-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.filter-btn.active {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
}
|
||||
.filter-btn:hover:not(.active) {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
/* Creators grid */
|
||||
.creators-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Creator card */
|
||||
.creator-card {
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
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;
|
||||
}
|
||||
.creator-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(59,130,246,0.12);
|
||||
}
|
||||
|
||||
.creator-avatar {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.creator-info {
|
||||
flex: 1;
|
||||
}
|
||||
.creator-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.creator-handle {
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.creator-bio {
|
||||
color: #334155;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.creator-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
}
|
||||
.creator-stats i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.follow-btn {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
padding: 6px 16px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.follow-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.creators-main {
|
||||
padding: 16px !important;
|
||||
}
|
||||
.filter-buttons {
|
||||
gap: 8px;
|
||||
}
|
||||
.filter-btn {
|
||||
padding: 6px 14px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.creators-main {
|
||||
padding: 12px !important;
|
||||
}
|
||||
.creator-card {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.creator-stats {
|
||||
justify-content: center;
|
||||
}
|
||||
.follow-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
155
css/create.css
Normal file
155
css/create.css
Normal file
@ -0,0 +1,155 @@
|
||||
/* 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;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px 32px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.create-container {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
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);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.create-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.create-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.create-header p {
|
||||
color: #64748b;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.create-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #dbe2ea;
|
||||
border-radius: 12px;
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
background: #ffffff;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
|
||||
}
|
||||
.form-hint {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* Pricing toggle */
|
||||
.pricing-group .pricing-toggle {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.price-option {
|
||||
background: #f1f5f9;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: #475569;
|
||||
}
|
||||
.price-option.active {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
}
|
||||
#priceField {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.submit-btn, .cancel-btn {
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.submit-btn {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
}
|
||||
.cancel-btn {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
}
|
||||
.submit-btn:hover, .cancel-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.create-container {
|
||||
padding: 24px;
|
||||
}
|
||||
.create-header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.create-container {
|
||||
padding: 20px;
|
||||
}
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
217
css/dashboard.css
Normal file
217
css/dashboard.css
Normal file
@ -0,0 +1,217 @@
|
||||
/* 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;
|
||||
margin: 0 auto !important;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
/* Feed Header (centered) */
|
||||
.feed-header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.feed-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.feed-header p {
|
||||
color: #64748b;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Filter Buttons (centered) */
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.filter-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.filter-btn.active {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
}
|
||||
.filter-btn:hover:not(.active) {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
/* Posts Grid - multi‑column like marketplace */
|
||||
.posts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Post Card */
|
||||
.post-card {
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 2px 8px rgba(59,130,246,0.06);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.post-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(59,130,246,0.12);
|
||||
}
|
||||
|
||||
/* Post Header */
|
||||
.post-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
}
|
||||
.post-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.post-author {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.post-name {
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.post-handle {
|
||||
font-size: 0.7rem;
|
||||
color: #64748b;
|
||||
}
|
||||
.post-date {
|
||||
font-size: 0.7rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* Post Content */
|
||||
.post-content {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
.post-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
.post-description {
|
||||
color: #334155;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Square image */
|
||||
.post-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Post Actions */
|
||||
.post-actions {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 10px 12px 12px 12px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
}
|
||||
.action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.action-btn i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.like-btn:hover {
|
||||
color: #ef4444;
|
||||
}
|
||||
.comment-btn:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
.share-btn:hover {
|
||||
color: #10b981;
|
||||
}
|
||||
.save-btn:hover {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* Responsive: single column on small screens */
|
||||
@media (max-width: 700px) {
|
||||
.posts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.feed-main {
|
||||
padding: 16px !important;
|
||||
}
|
||||
.filter-buttons {
|
||||
gap: 8px;
|
||||
}
|
||||
.filter-btn {
|
||||
padding: 6px 14px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.feed-main {
|
||||
padding: 12px !important;
|
||||
}
|
||||
.post-header {
|
||||
padding: 10px;
|
||||
}
|
||||
.post-content {
|
||||
padding: 10px;
|
||||
}
|
||||
.post-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.post-actions {
|
||||
padding: 8px 10px 10px 10px;
|
||||
}
|
||||
}
|
||||
161
css/login.css
Normal file
161
css/login.css
Normal file
@ -0,0 +1,161 @@
|
||||
/*
|
||||
File contains the styles for the login page
|
||||
--> defines the layout of the login screen
|
||||
*/
|
||||
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: flex; /* enables flexbox layout for centering */
|
||||
justify-content: center; /* horizontally centers the card */
|
||||
align-items: center; /* vertically centers the card */
|
||||
padding: 24px; /* space inside the page edges */
|
||||
/* Layered background: two soft radial gradients for color accents, then the main background color */
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 35%),
|
||||
radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.10), transparent 30%),
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
/* Main login card container */
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 430px; /* prevents the card from getting too wide on large screens */
|
||||
background: var(--card); /* uses card color from variables.css */
|
||||
border-radius: 24px; /* rounded corners */
|
||||
box-shadow: var(--shadow); /* soft shadow for card elevation */
|
||||
padding: 40px 32px; /* inner spacing for content */
|
||||
}
|
||||
|
||||
/* Logo area above the form */
|
||||
.login-logo-wrapper {
|
||||
display: flex; /* centers logo horizontally */
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
overflow: hidden; /* hides any part of the logo that overflows the container */
|
||||
}
|
||||
|
||||
/* Full logo styling */
|
||||
.login-logo {
|
||||
width: 100%;
|
||||
max-width: 220px; /* logo never exceeds this width */
|
||||
height: auto;
|
||||
display: block;
|
||||
object-fit: contain; /* keeps logo aspect ratio, prevents stretching */
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
/* Form layout */
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column; /* stack form fields vertically */
|
||||
gap: 18px; /* vertical space between form groups */
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column; /* label above input */
|
||||
gap: 8px; /* space between label and input */
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 14px 16px; /* vertical and horizontal padding for input */
|
||||
border: 1px solid #dbe2ea; /* subtle border */
|
||||
border-radius: 14px; /* rounded input corners */
|
||||
background: #ffffff;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Highlight input when focused */
|
||||
.form-group input:focus {
|
||||
outline: none; /* removes default browser outline */
|
||||
border-color: #7c3aed; /* purple border on focus */
|
||||
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10); /* soft glow for focus state */
|
||||
}
|
||||
|
||||
/* Password field with button inside the same row */
|
||||
.password-wrapper {
|
||||
display: flex; /* input and button in one row */
|
||||
align-items: center; /* vertically center input and button */
|
||||
gap: 10px; /* space between input and show/hide button */
|
||||
}
|
||||
|
||||
.password-wrapper input {
|
||||
flex: 1; /* input takes all available space, button stays compact */
|
||||
}
|
||||
|
||||
.toggle-password {
|
||||
border: none;
|
||||
background: transparent; /* no background for button */
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
cursor: pointer; /* pointer cursor for better UX */
|
||||
}
|
||||
|
||||
/* Main login action button */
|
||||
.login-button {
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
padding: 14px 18px;
|
||||
background: var(--gradient); /* uses a gradient background from variables */
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.22); /* blue shadow for button depth */
|
||||
}
|
||||
|
||||
.login-button:hover {
|
||||
opacity: 0.95; /* slight fade on hover for feedback */
|
||||
}
|
||||
|
||||
.signup-text {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
/* used for the 'Don't have an account?' and link below the form */
|
||||
}
|
||||
|
||||
.signup-text a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
/* blue link for sign up/login */
|
||||
}
|
||||
|
||||
/* Smaller spacing and sizing for narrow screens */
|
||||
@media (max-width: 480px) {
|
||||
/* Responsive adjustments for small screens (mobile) */
|
||||
.login-card {
|
||||
padding: 28px 20px; /* less padding on mobile */
|
||||
border-radius: 20px; /* slightly less rounded */
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 1.7rem; /* smaller title on mobile */
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
max-width: 170px; /* smaller logo on mobile */
|
||||
}
|
||||
}
|
||||
225
css/marketplace.css
Normal file
225
css/marketplace.css
Normal file
@ -0,0 +1,225 @@
|
||||
/* 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;
|
||||
margin: 0 auto !important;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
/* Header centering */
|
||||
.marketplace-header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.marketplace-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.marketplace-header p {
|
||||
color: #64748b;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Filter + Sort Row */
|
||||
.filter-sort-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Filter buttons - centered */
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.filter-btn.active {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
}
|
||||
.filter-btn:hover:not(.active) {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
/* Sort Dropdown - right aligned */
|
||||
.sort-dropdown {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 30px;
|
||||
padding: 8px 16px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Prompts grid */
|
||||
.prompts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Prompt card */
|
||||
.prompt-card {
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 2px 8px rgba(59,130,246,0.06);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.prompt-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(59,130,246,0.12);
|
||||
}
|
||||
|
||||
.prompt-img {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.prompt-info {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.prompt-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.prompt-author {
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.prompt-description {
|
||||
color: #334155;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prompt-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: #f59e0b;
|
||||
}
|
||||
.prompt-rating span:first-child i {
|
||||
color: #f59e0b;
|
||||
}
|
||||
.prompt-rating span:last-child {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.prompt-price {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #3b82f6;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
|
||||
.prompt-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.buy-btn, .details-btn {
|
||||
flex: 1;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
padding: 8px 12px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.buy-btn {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
}
|
||||
.details-btn {
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
}
|
||||
.buy-btn:hover, .details-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 700px) {
|
||||
.filter-sort-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.sort-dropdown {
|
||||
align-self: flex-end;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.marketplace-main {
|
||||
padding: 16px !important;
|
||||
}
|
||||
.filter-btn {
|
||||
padding: 6px 14px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.marketplace-main {
|
||||
padding: 12px !important;
|
||||
}
|
||||
.prompt-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
217
css/post-detail.css
Normal file
217
css/post-detail.css
Normal file
@ -0,0 +1,217 @@
|
||||
/* 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;
|
||||
justify-content: center;
|
||||
padding: 20px 32px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.post-detail-container {
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
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);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.post-header {
|
||||
margin-bottom: 28px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.post-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.post-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.category {
|
||||
background: #f1f5f9;
|
||||
padding: 4px 12px;
|
||||
border-radius: 30px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #3b82f6;
|
||||
}
|
||||
.updated {
|
||||
font-size: 0.85rem;
|
||||
color: #64748b;
|
||||
}
|
||||
.post-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 0.9rem;
|
||||
color: #475569;
|
||||
}
|
||||
.post-stats i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Prompt Section */
|
||||
.prompt-section {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.prompt-section h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.prompt-content {
|
||||
background: #f8fafc;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #1e293b;
|
||||
}
|
||||
.prompt-content ul {
|
||||
margin-top: 12px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.prompt-content li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* Rating & Like */
|
||||
.rating-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
.rating-stars {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.rating-stars i {
|
||||
color: #f59e0b;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.like-btn {
|
||||
background: none;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 8px 18px;
|
||||
border-radius: 30px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.like-btn:hover {
|
||||
background: #f1f5f9;
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
.like-btn i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Example Output Section */
|
||||
.example-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.example-section h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.example-content {
|
||||
background: #ffffff;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.example-content h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
color: #3b82f6;
|
||||
}
|
||||
.example-output-text {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
color: #334155;
|
||||
}
|
||||
.example-output-text p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.example-image {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.example-image img {
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Unlock Section */
|
||||
.unlock-section {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.unlock-btn {
|
||||
background: var(--gradient);
|
||||
border: none;
|
||||
padding: 14px 32px;
|
||||
border-radius: 40px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.unlock-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.post-detail-main {
|
||||
padding: 16px;
|
||||
}
|
||||
.post-detail-container {
|
||||
padding: 24px;
|
||||
}
|
||||
.post-title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.post-detail-container {
|
||||
padding: 20px;
|
||||
}
|
||||
.rating-section {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.prompt-content {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
94
css/profile.css
Normal file
94
css/profile.css
Normal file
@ -0,0 +1,94 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Inner spacing for the profile card */
|
||||
.profile-main {
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
padding: 20px 32px !important;
|
||||
margin: 0 auto !important;
|
||||
width: 100%;
|
||||
max-width: 1600px; /* Limits content on very large screens, but still wide */
|
||||
}
|
||||
|
||||
/* Make prompts grid use more columns on large screens */
|
||||
.profile-main section:last-child {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
|
||||
gap: 24px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Share button: darker background and text */
|
||||
.profile-header button:last-child {
|
||||
background: #cbd5e1 !important; /* darker gray */
|
||||
color: #1e293b !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Buttons keep rounded corners */
|
||||
.login-button {
|
||||
border-radius: 14px !important;
|
||||
}
|
||||
|
||||
/* Prompt cards: rounded corners */
|
||||
.profile-main section > div {
|
||||
border-radius: 18px !important;
|
||||
box-shadow: 0 2px 8px rgba(59,130,246,0.06);
|
||||
}
|
||||
|
||||
/* Prompt images: rounded corners */
|
||||
.profile-main section img {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* Avatar remains round */
|
||||
.profile-avatar {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
/* All outer containers stay square */
|
||||
.layout,
|
||||
.profile-main,
|
||||
.profile-header,
|
||||
.profile-tabs,
|
||||
nav {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Responsive: tablets */
|
||||
@media (max-width: 768px) {
|
||||
.profile-main {
|
||||
padding: 16px !important;
|
||||
}
|
||||
.profile-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
.profile-header > div:last-child {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive: mobile */
|
||||
@media (max-width: 480px) {
|
||||
.profile-main {
|
||||
padding: 12px !important;
|
||||
}
|
||||
.profile-header > div:last-child {
|
||||
flex-direction: column;
|
||||
}
|
||||
.profile-main section:last-child {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
184
css/settings.css
Normal file
184
css/settings.css
Normal file
@ -0,0 +1,184 @@
|
||||
/* 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;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px 32px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 2px 8px rgba(59,130,246,0.06);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.settings-header h1 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.settings-header p {
|
||||
color: #64748b;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.settings-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.tab-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.tab-btn.active {
|
||||
color: #3b82f6;
|
||||
border-bottom-color: #3b82f6;
|
||||
}
|
||||
.tab-btn:hover:not(.active) {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* Tab content */
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
.settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #dbe2ea;
|
||||
border-radius: 12px;
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
|
||||
}
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-label input {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Avatar upload */
|
||||
.avatar-upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.settings-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.upload-btn {
|
||||
background: #f1f5f9;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.upload-btn:hover {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
/* Save button */
|
||||
.save-btn {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.save-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.settings-container {
|
||||
padding: 24px;
|
||||
}
|
||||
.settings-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.settings-container {
|
||||
padding: 20px;
|
||||
}
|
||||
.settings-tabs {
|
||||
gap: 4px;
|
||||
}
|
||||
.tab-btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.avatar-upload {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
170
css/sidebar.css
Normal file
170
css/sidebar.css
Normal file
@ -0,0 +1,170 @@
|
||||
/*
|
||||
Sidebar styles for OnlyPrompt
|
||||
- modern soft card look
|
||||
- responsive: full sidebar on desktop, icon-only on smaller screens
|
||||
- logout button appears directly after the last menu item with separator line
|
||||
*/
|
||||
|
||||
.sidebar-shell {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border-right: 1px solid #eef2f7;
|
||||
padding: 24px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.sidebar-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 72px;
|
||||
margin-bottom: 32px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.sidebar-logo-full {
|
||||
max-width: 170px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-logo-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navigation – normal block layout, no flex grow */
|
||||
.sidebar {
|
||||
/* No flex:1 – keeps navigation at its natural height */
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
text-decoration: none;
|
||||
color: #475569;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
padding: 12px 16px;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.sidebar i {
|
||||
font-size: 1.3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-blue {
|
||||
color: #3b82f6 !important;
|
||||
}
|
||||
|
||||
.icon-purple {
|
||||
color: #8b5cf6 !important;
|
||||
}
|
||||
|
||||
.icon-pink {
|
||||
color: #ec4899 !important;
|
||||
}
|
||||
|
||||
/* Active item */
|
||||
.sidebar a.active {
|
||||
background: #eef2ff;
|
||||
color: #2563eb;
|
||||
border-left: 3px solid #3b82f6;
|
||||
}
|
||||
|
||||
/* Bottom logout area – directly after the menu, with separator line */
|
||||
.sidebar-bottom {
|
||||
margin-top: 16px; /* Small gap above the separator */
|
||||
border-top: 1px solid #eef2f7;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.sidebar-logout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-logout:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.logout-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sidebar-logout i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.logout-arrow {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* Responsive: icon-only sidebar */
|
||||
@media (max-width: 900px) {
|
||||
.sidebar-shell {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.sidebar-logo-full {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-logo-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar .nav-text,
|
||||
.sidebar-logout .nav-text,
|
||||
.logout-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar a,
|
||||
.sidebar-logout {
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.sidebar a.active {
|
||||
border-left: none;
|
||||
border-right: 3px solid #3b82f6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.sidebar a,
|
||||
.sidebar-logout {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
169
css/signup.css
Normal file
169
css/signup.css
Normal file
@ -0,0 +1,169 @@
|
||||
/*
|
||||
File contains the styles for the signup page
|
||||
--> defines the layout of the signup screen
|
||||
*/
|
||||
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 35%),
|
||||
radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.10), transparent 30%),
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
/* Main signup card container */
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
background: var(--card); /*variable.css*/
|
||||
border-radius: 24px;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 40px 32px;
|
||||
}
|
||||
|
||||
/* Logo area above the form */
|
||||
.login-logo-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Full logo styling */
|
||||
.login-logo {
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
height: auto;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
/* Form layout */
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #dbe2ea;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Highlight input when focused */
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);
|
||||
}
|
||||
|
||||
/* Password field with button inside the same row */
|
||||
.password-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.password-wrapper input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toggle-password {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.signup-terms {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
margin: 18px 0 0 0;
|
||||
}
|
||||
.signup-terms a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Main login action button */
|
||||
.login-button {
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
padding: 14px 18px;
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.22);
|
||||
}
|
||||
|
||||
.login-button:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.signup-text {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.signup-text a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Smaller spacing and sizing for narrow screens */
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
padding: 28px 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
max-width: 170px;
|
||||
}
|
||||
}
|
||||
125
css/topbar.css
Normal file
125
css/topbar.css
Normal file
@ -0,0 +1,125 @@
|
||||
/*
|
||||
Topbar styles for OnlyPrompt
|
||||
- clean, modern, full-width
|
||||
- search bar centered (expands on full screen), profile avatar always on the right
|
||||
- ONLY search bar and avatar have rounded corners
|
||||
*/
|
||||
|
||||
.topbar-shell {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
padding: 16px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.topbar-search {
|
||||
flex: 1; /* Takes all available space */
|
||||
max-width: none; /* No upper limit, expands freely */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 10px 20px;
|
||||
border-radius: 14px; /* Rounded like login inputs */
|
||||
}
|
||||
|
||||
.topbar-search i {
|
||||
color: #94a3b8;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.topbar-search input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 0.95rem;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.topbar-search input::placeholder {
|
||||
color: #94a3b8;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Icons and avatar container */
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.topbar-icon-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1.4rem;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.topbar-icon-btn:hover {
|
||||
background: #f1f5f9;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.topbar-avatar-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topbar-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 50%; /* Avatar round */
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.topbar-shell {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
.topbar-search {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.topbar-search i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.topbar-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.topbar-icon-btn {
|
||||
font-size: 1.2rem;
|
||||
padding: 6px;
|
||||
}
|
||||
.topbar-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.topbar-shell {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.topbar-search {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
27
css/variables.css
Normal file
27
css/variables.css
Normal file
@ -0,0 +1,27 @@
|
||||
/*
|
||||
This file contains global design variables such as colors,
|
||||
gradients, spacing, and shadows
|
||||
--> these variables ensure a consistent design accross the whole application
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Main gradient used for buttons and highlights */
|
||||
--gradient: linear-gradient(90deg, #7c3aed, #3b82f6, #ec4899);
|
||||
|
||||
/* Background color of the application */
|
||||
--bg: #f8fafc;
|
||||
|
||||
/* Default text color */
|
||||
--text: #0f172a;
|
||||
|
||||
/* Container background */
|
||||
--card: #ffffff;
|
||||
|
||||
/* Border radius for rounded elements */
|
||||
--radius: 16px;
|
||||
|
||||
/* Standard shadow for cards and components */
|
||||
--shadow: 0 10px 30px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
|
||||
129
html/chats.html
Normal file
129
html/chats.html
Normal file
@ -0,0 +1,129 @@
|
||||
<!-- OnlyPrompt - Chats page:
|
||||
- Direct messaging interface with conversation list and active chat window -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OnlyPrompt - Chats</title>
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
<link rel="stylesheet" href="../css/topbar.css">
|
||||
<link rel="stylesheet" href="../css/chats.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
||||
|
||||
<div id="sidebar-container"></div>
|
||||
|
||||
<div style="flex:1; display: flex; flex-direction: column;">
|
||||
|
||||
<div id="topbar-container"></div>
|
||||
|
||||
<main class="chats-main">
|
||||
<!-- Chat Container: Left column (list) + Right column (active chat) -->
|
||||
<div class="chat-container">
|
||||
|
||||
<!-- Left Column: Chat Overview -->
|
||||
<div class="chat-list">
|
||||
<div class="chat-list-header">
|
||||
<h2>Messages</h2>
|
||||
<button class="new-chat-btn"><i class="bi bi-pencil-square"></i></button>
|
||||
</div>
|
||||
<div class="chat-list-items">
|
||||
<!-- Chat Entry 1 (active) -->
|
||||
<div class="chat-item active">
|
||||
<img src="../images/content/creator2.png" alt="Alex Chen" class="chat-avatar">
|
||||
<div class="chat-item-info">
|
||||
<div class="chat-name">Alex Chen</div>
|
||||
<div class="chat-last-msg">Hey Sarah! Really loved your last video on minimalism...</div>
|
||||
</div>
|
||||
<div class="chat-time">10:17 AM</div>
|
||||
</div>
|
||||
<!-- Chat Entry 2 -->
|
||||
<div class="chat-item">
|
||||
<img src="../images/content/creator3.png" alt="Mia Wong" class="chat-avatar">
|
||||
<div class="chat-item-info">
|
||||
<div class="chat-name">Mia Wong</div>
|
||||
<div class="chat-last-msg">Thanks for the prompt tips! They worked perfectly.</div>
|
||||
</div>
|
||||
<div class="chat-time">Yesterday</div>
|
||||
</div>
|
||||
<!-- Chat Entry 3 -->
|
||||
<div class="chat-item">
|
||||
<img src="../images/content/creator4.png" alt="Tom Rivera" class="chat-avatar">
|
||||
<div class="chat-item-info">
|
||||
<div class="chat-name">Tom Rivera</div>
|
||||
<div class="chat-last-msg">Let's schedule a call for the collab?</div>
|
||||
</div>
|
||||
<div class="chat-time">Yesterday</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Active Chat (with Alex Chen) -->
|
||||
<div class="chat-active">
|
||||
<div class="chat-header">
|
||||
<img src="../images/content/creator2.png" alt="Alex Chen" class="chat-avatar-large">
|
||||
<div class="chat-header-info">
|
||||
<div class="chat-header-name">Alex Chen</div>
|
||||
<div class="chat-header-status"><span class="online-dot"></span> Online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-messages">
|
||||
<!-- Message from Alex -->
|
||||
<div class="message received">
|
||||
<div class="message-bubble">Hey Sarah! Really loved your last video on minimalism. Quick question about your workspace layout?</div>
|
||||
<div class="message-time">10:15 AM</div>
|
||||
</div>
|
||||
<!-- Reply from Sarah -->
|
||||
<div class="message sent">
|
||||
<div class="message-bubble">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!</div>
|
||||
<div class="message-time">10:16 AM</div>
|
||||
</div>
|
||||
<!-- Alex replies -->
|
||||
<div class="message received">
|
||||
<div class="message-bubble">Thanks so much! Your aesthetic is exactly what I'm aiming for. Can't wait for your next piece!</div>
|
||||
<div class="message-time">10:17 AM</div>
|
||||
</div>
|
||||
<!-- Sarah replies -->
|
||||
<div class="message sent">
|
||||
<div class="message-bubble">Awesome! Let me know if you need more tips. Enjoy the process! 😊</div>
|
||||
<div class="message-time">10:18 AM</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input-area">
|
||||
<input type="text" placeholder="Type your message...">
|
||||
<button class="send-btn">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
fetch('../html/sidebar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => {
|
||||
document.getElementById('sidebar-container').innerHTML = data;
|
||||
// Remove 'active' from all sidebar links
|
||||
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
// Set 'active' on the Chats link (4th link, index 3)
|
||||
const chatsLink = document.querySelectorAll('#sidebar-container .sidebar li a')[3];
|
||||
if (chatsLink) chatsLink.classList.add('active');
|
||||
});
|
||||
|
||||
fetch('../html/topbar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
161
html/community.html
Normal file
161
html/community.html
Normal file
@ -0,0 +1,161 @@
|
||||
<!-- OnlyPrompt - Marketplace page:
|
||||
- Browse and filter AI prompts with buy/view details buttons and pricing -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OnlyPrompt - Discover Creators</title>
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
<link rel="stylesheet" href="../css/topbar.css">
|
||||
<link rel="stylesheet" href="../css/community.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
||||
|
||||
<div id="sidebar-container"></div>
|
||||
|
||||
<div style="flex:1; margin:40px auto; max-width:950px;">
|
||||
|
||||
<div id="topbar-container"></div>
|
||||
|
||||
<main class="creators-main">
|
||||
|
||||
<!-- Header / Titel -->
|
||||
<div class="creators-header">
|
||||
<h1>Discover Creators</h1>
|
||||
<p>Follow your favorite prompt artists and get inspired.</p>
|
||||
</div>
|
||||
|
||||
<!-- Filter Buttons -->
|
||||
<div class="filter-buttons">
|
||||
<button class="filter-btn active">Popular</button>
|
||||
<button class="filter-btn">Rising</button>
|
||||
<button class="filter-btn">New</button>
|
||||
<button class="filter-btn">Top Rated</button>
|
||||
</div>
|
||||
|
||||
<!-- Creators Grid -->
|
||||
<div class="creators-grid">
|
||||
|
||||
<!-- Creator Card 1 -->
|
||||
<div class="creator-card">
|
||||
<img src="../images/content/creator1.png" alt="Sarah Jenkins" class="creator-avatar">
|
||||
<div class="creator-info">
|
||||
<h3 class="creator-name">Sarah Jenkins</h3>
|
||||
<div class="creator-handle">@sarahj</div>
|
||||
<p class="creator-bio">AI Explorer | Prompt Curator | Exploring creativity through generative AI.</p>
|
||||
<div class="creator-stats">
|
||||
<span><i class="bi bi-puzzle"></i> 42 prompts</span>
|
||||
<span><i class="bi bi-star-fill"></i> 4.9</span>
|
||||
</div>
|
||||
<button class="follow-btn">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creator Card 2 -->
|
||||
<div class="creator-card">
|
||||
<img src="../images/content/creator2.png" alt="Alex Chen" class="creator-avatar">
|
||||
<div class="creator-info">
|
||||
<h3 class="creator-name">Alex Chen</h3>
|
||||
<div class="creator-handle">@alexchen</div>
|
||||
<p class="creator-bio">Digital artist & prompt engineer. Creating surreal landscapes.</p>
|
||||
<div class="creator-stats">
|
||||
<span><i class="bi bi-puzzle"></i> 87 prompts</span>
|
||||
<span><i class="bi bi-star-fill"></i> 4.8</span>
|
||||
</div>
|
||||
<button class="follow-btn">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creator Card 3 -->
|
||||
<div class="creator-card">
|
||||
<img src="../images/content/creator3.png" alt="Mia Wong" class="creator-avatar">
|
||||
<div class="creator-info">
|
||||
<h3 class="creator-name">Mia Wong</h3>
|
||||
<div class="creator-handle">@miawong</div>
|
||||
<p class="creator-bio">Midjourney master | UI/UX prompts | Design systems.</p>
|
||||
<div class="creator-stats">
|
||||
<span><i class="bi bi-puzzle"></i> 124 prompts</span>
|
||||
<span><i class="bi bi-star-fill"></i> 5.0</span>
|
||||
</div>
|
||||
<button class="follow-btn">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creator Card 4 -->
|
||||
<div class="creator-card">
|
||||
<img src="../images/content/creator4.png" alt="Tom Rivera" class="creator-avatar">
|
||||
<div class="creator-info">
|
||||
<h3 class="creator-name">Tom Rivera</h3>
|
||||
<div class="creator-handle">@tomrivera</div>
|
||||
<p class="creator-bio">3D artist | Character design | Sci-fi & fantasy prompts.</p>
|
||||
<div class="creator-stats">
|
||||
<span><i class="bi bi-puzzle"></i> 33 prompts</span>
|
||||
<span><i class="bi bi-star-fill"></i> 4.7</span>
|
||||
</div>
|
||||
<button class="follow-btn">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creator Card 5 -->
|
||||
<div class="creator-card">
|
||||
<img src="../images/content/creator5.png" alt="Emma Watson" class="creator-avatar">
|
||||
<div class="creator-info">
|
||||
<h3 class="creator-name">Emma Watson</h3>
|
||||
<div class="creator-handle">@emmawatson</div>
|
||||
<p class="creator-bio">Watercolor & pet portraits | Whimsical art prompts.</p>
|
||||
<div class="creator-stats">
|
||||
<span><i class="bi bi-puzzle"></i> 56 prompts</span>
|
||||
<span><i class="bi bi-star-fill"></i> 4.9</span>
|
||||
</div>
|
||||
<button class="follow-btn">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creator Card 6 -->
|
||||
<div class="creator-card">
|
||||
<img src="../images/content/creator6.png" alt="Liam O'Brien" class="creator-avatar">
|
||||
<div class="creator-info">
|
||||
<h3 class="creator-name">Liam O'Brien</h3>
|
||||
<div class="creator-handle">@liamob</div>
|
||||
<p class="creator-bio">Minimalist logo designer | Brand identity prompts.</p>
|
||||
<div class="creator-stats">
|
||||
<span><i class="bi bi-puzzle"></i> 28 prompts</span>
|
||||
<span><i class="bi bi-star-fill"></i> 4.6</span>
|
||||
</div>
|
||||
<button class="follow-btn">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
fetch('../html/sidebar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => {
|
||||
document.getElementById('sidebar-container').innerHTML = data;
|
||||
// Remove 'active' from all sidebar links
|
||||
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
// Set 'active' on the third link (Community)
|
||||
const thirdLink = document.querySelectorAll('#sidebar-container .sidebar li a')[2];
|
||||
if (thirdLink) thirdLink.classList.add('active');
|
||||
});
|
||||
|
||||
fetch('../html/topbar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
181
html/create.html
Normal file
181
html/create.html
Normal file
@ -0,0 +1,181 @@
|
||||
<!-- OnlyPrompt - Create Prompt page:
|
||||
- Form to publish new AI prompts with title, description, category, content, example output, image upload, and pricing toggle -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OnlyPrompt - Create New Prompt</title>
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
<link rel="stylesheet" href="../css/topbar.css">
|
||||
<link rel="stylesheet" href="../css/create.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
||||
|
||||
<div id="sidebar-container"></div>
|
||||
|
||||
<div style="flex:1; display: flex; flex-direction: column;">
|
||||
|
||||
<div id="topbar-container"></div>
|
||||
|
||||
<main class="create-main">
|
||||
<div class="create-container">
|
||||
<div class="create-header">
|
||||
<h1>Create AI Prompt</h1>
|
||||
<p>Design and save custom prompts for your AI workflows.</p>
|
||||
</div>
|
||||
|
||||
<form id="createPromptForm" class="create-form" enctype="multipart/form-data">
|
||||
<!-- Title -->
|
||||
<div class="form-group">
|
||||
<label for="title">Prompt Title *</label>
|
||||
<input type="text" id="title" name="title" placeholder="e.g., Write an inspiring startup story about innovation" required>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="form-group">
|
||||
<label for="description">Description *</label>
|
||||
<textarea id="description" name="description" rows="2" placeholder="Draft a narrative about a small team overcoming challenges to launch a groundbreaking app" required></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Category -->
|
||||
<div class="form-group">
|
||||
<label for="category">Category *</label>
|
||||
<select id="category" name="category" required>
|
||||
<option value="creative-writing">Creative Writing</option>
|
||||
<option value="coding">Coding</option>
|
||||
<option value="art">Art</option>
|
||||
<option value="marketing">Marketing</option>
|
||||
<option value="video">Video</option>
|
||||
<option value="data">Data</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Prompt Content -->
|
||||
<div class="form-group">
|
||||
<label for="promptContent">Prompt Content *</label>
|
||||
<textarea id="promptContent" name="promptContent" rows="6" placeholder="Write your prompt instructions here..." required></textarea>
|
||||
<small class="form-hint">Use clear, step-by-step instructions for the AI.</small>
|
||||
</div>
|
||||
|
||||
<!-- Example Output (Text) -->
|
||||
<div class="form-group">
|
||||
<label for="exampleOutput">Example Output (optional)</label>
|
||||
<textarea id="exampleOutput" name="exampleOutput" rows="4" placeholder="Show an example of what the AI might generate..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Example Image (optional) -->
|
||||
<div class="form-group">
|
||||
<label for="exampleImage">Example Image (optional)</label>
|
||||
<input type="file" id="exampleImage" name="exampleImage" accept="image/png, image/jpeg, image/jpg">
|
||||
<small class="form-hint">Upload a PNG or JPG – preview will appear below.</small>
|
||||
<div id="imagePreview" style="margin-top: 10px; display: none;">
|
||||
<img id="previewImg" src="#" alt="Preview" style="max-width: 100%; max-height: 200px; border-radius: 12px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing (with toggle) -->
|
||||
<div class="form-group pricing-group">
|
||||
<label>Pricing</label>
|
||||
<div class="pricing-toggle">
|
||||
<button type="button" id="freeBtn" class="price-option active">Free</button>
|
||||
<button type="button" id="paidBtn" class="price-option">Paid</button>
|
||||
</div>
|
||||
<div id="priceField" style="display: none;">
|
||||
<input type="number" id="price" name="price" step="0.01" min="0" placeholder="Price in USD (e.g., 19.99)">
|
||||
</div>
|
||||
<small class="form-hint">You can set a price later or keep it free.</small>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="submit-btn">Publish Prompt</button>
|
||||
<button type="button" class="cancel-btn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Toggle between free and paid
|
||||
const freeBtn = document.getElementById('freeBtn');
|
||||
const paidBtn = document.getElementById('paidBtn');
|
||||
const priceField = document.getElementById('priceField');
|
||||
const priceInput = document.getElementById('price');
|
||||
|
||||
freeBtn.addEventListener('click', () => {
|
||||
freeBtn.classList.add('active');
|
||||
paidBtn.classList.remove('active');
|
||||
priceField.style.display = 'none';
|
||||
priceInput.removeAttribute('required');
|
||||
});
|
||||
paidBtn.addEventListener('click', () => {
|
||||
paidBtn.classList.add('active');
|
||||
freeBtn.classList.remove('active');
|
||||
priceField.style.display = 'block';
|
||||
priceInput.setAttribute('required', 'required');
|
||||
});
|
||||
|
||||
// Image preview for example image
|
||||
const imageInput = document.getElementById('exampleImage');
|
||||
const imagePreview = document.getElementById('imagePreview');
|
||||
const previewImg = document.getElementById('previewImg');
|
||||
|
||||
if (imageInput) {
|
||||
imageInput.addEventListener('change', function(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
previewImg.src = e.target.result;
|
||||
imagePreview.style.display = 'block';
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
imagePreview.style.display = 'none';
|
||||
previewImg.src = '#';
|
||||
if (file) alert('Please upload a PNG or JPG image.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Handle form submission (demo only)
|
||||
document.getElementById('createPromptForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
alert('Prompt published! (Demo)');
|
||||
// Here you would normally send data to a backend (including the image file)
|
||||
});
|
||||
|
||||
// Cancel button (go back)
|
||||
document.querySelector('.cancel-btn').addEventListener('click', () => {
|
||||
window.history.back();
|
||||
});
|
||||
|
||||
// Fetch sidebar and topbar
|
||||
fetch('../html/sidebar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => {
|
||||
document.getElementById('sidebar-container').innerHTML = data;
|
||||
// Remove active class from all sidebar links
|
||||
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
// Optionally set active on "Create New" if it exists, otherwise keep none
|
||||
const createLink = document.querySelector('#sidebar-container a[href="create.html"]');
|
||||
if (createLink) createLink.classList.add('active');
|
||||
});
|
||||
|
||||
fetch('../html/topbar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
166
html/dashboard.html
Normal file
166
html/dashboard.html
Normal file
@ -0,0 +1,166 @@
|
||||
<!-- OnlyPrompt - Feed page:
|
||||
- Social media style post feed with likes, comments, saves, and share actions (following/foryou tabs) -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OnlyPrompt - Feed</title>
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
<link rel="stylesheet" href="../css/topbar.css">
|
||||
<link rel="stylesheet" href="../css/dashboard.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
||||
|
||||
<div id="sidebar-container"></div>
|
||||
|
||||
<div style="flex:1; margin:40px auto; max-width:950px;">
|
||||
|
||||
<div id="topbar-container"></div>
|
||||
|
||||
<main class="feed-main">
|
||||
|
||||
<!-- Optional: Feed Header -->
|
||||
<div class="feed-header">
|
||||
<h1>Feed</h1>
|
||||
<p>Latest prompts and inspiration from creators you follow</p>
|
||||
</div>
|
||||
|
||||
<!-- Filter Buttons (optional) -->
|
||||
<div class="filter-buttons">
|
||||
<button class="filter-btn active">For You</button>
|
||||
<button class="filter-btn">Following</button>
|
||||
<button class="filter-btn">Trending</button>
|
||||
<button class="filter-btn">Recent</button>
|
||||
</div>
|
||||
|
||||
<!-- Posts Grid (einfach als Liste / Grid – hier als Grid wie Marketplace) -->
|
||||
<div class="posts-grid">
|
||||
|
||||
<!-- Post 1 -->
|
||||
<div class="post-card" onclick="location.href='post-detail.html?id=1'">
|
||||
<div class="post-header">
|
||||
<img src="../images/content/creator1.png" alt="Sarah Jenkins" class="post-avatar">
|
||||
<div class="post-author">
|
||||
<span class="post-name">Sarah Jenkins</span>
|
||||
<span class="post-handle">@sarahj</span>
|
||||
</div>
|
||||
<span class="post-date">2 hours ago</span>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<h3 class="post-title">Conceptual Landscape Art</h3>
|
||||
<p class="post-description">Enchanting, vintage, antique vibes. A journey through surreal landscapes.</p>
|
||||
<img src="../images/content/feed1.png" alt="Conceptual Landscape" class="post-image">
|
||||
</div>
|
||||
<!-- Like, Comment, Share, Save Buttons -->
|
||||
<div class="post-actions">
|
||||
<button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
|
||||
<button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
|
||||
<button class="action-btn share-btn"><i class="bi bi-share"></i></button>
|
||||
<button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post 2 -->
|
||||
<div class="post-card" onclick="location.href='post-detail.html?id=2'">
|
||||
<div class="post-header">
|
||||
<img src="../images/content/creator2.png" alt="Alex Chen" class="post-avatar">
|
||||
<div class="post-author">
|
||||
<span class="post-name">Alex Chen</span>
|
||||
<span class="post-handle">@alexchen</span>
|
||||
</div>
|
||||
<span class="post-date">Yesterday</span>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<h3 class="post-title">Minimalist Logo Design</h3>
|
||||
<p class="post-description">Clean, modern, minimalist logo for tech startups.</p>
|
||||
<img src="../images/content/feed2.png" alt="Minimalist Logo" class="post-image">
|
||||
</div>
|
||||
<!-- Like, Comment, Share, Save Buttons -->
|
||||
<div class="post-actions">
|
||||
<button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
|
||||
<button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
|
||||
<button class="action-btn share-btn"><i class="bi bi-share"></i></button>
|
||||
<button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post 3 -->
|
||||
<div class="post-card" onclick="location.href='post-detail.html?id=3'">
|
||||
<div class="post-header">
|
||||
<img src="../images/content/creator3.png" alt="Mia Wong" class="post-avatar">
|
||||
<div class="post-author">
|
||||
<span class="post-name">Mia Wong</span>
|
||||
<span class="post-handle">@miawong</span>
|
||||
</div>
|
||||
<span class="post-date">3 days ago</span>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<h3 class="post-title">Futuristic Cityscape</h3>
|
||||
<p class="post-description">Cyberpunk neon city with flying cars and rain.</p>
|
||||
<img src="../images/content/feed3.png" alt="Cityscape" class="post-image">
|
||||
</div>
|
||||
<!-- Like, Comment, Share, Save Buttons -->
|
||||
<div class="post-actions">
|
||||
<button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
|
||||
<button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
|
||||
<button class="action-btn share-btn"><i class="bi bi-share"></i></button>
|
||||
<button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post 4 -->
|
||||
<div class="post-card" onclick="location.href='post-detail.html?id=4'">
|
||||
<div class="post-header">
|
||||
<img src="../images/content/creator4.png" alt="Tom Rivera" class="post-avatar">
|
||||
<div class="post-author">
|
||||
<span class="post-name">Tom Rivera</span>
|
||||
<span class="post-handle">@tomrivera</span>
|
||||
</div>
|
||||
<span class="post-date">5 days ago</span>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<h3 class="post-title">Watercolor Pet Portrait</h3>
|
||||
<p class="post-description">Soft watercolor style, cute pet portrait.</p>
|
||||
<img src="../images/content/feed4.png" alt="Watercolor Pet" class="post-image">
|
||||
</div>
|
||||
<!-- Like, Comment, Share, Save Buttons -->
|
||||
<div class="post-actions">
|
||||
<button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
|
||||
<button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
|
||||
<button class="action-btn share-btn"><i class="bi bi-share"></i></button>
|
||||
<button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
fetch('../html/sidebar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => {
|
||||
document.getElementById('sidebar-container').innerHTML = data;
|
||||
// Remove 'active' from all sidebar links
|
||||
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
// Set 'active' on the first link (Dashboard) - index 0
|
||||
const firstLink = document.querySelectorAll('#sidebar-container .sidebar li a')[0];
|
||||
if (firstLink) firstLink.classList.add('active');
|
||||
});
|
||||
|
||||
fetch('../html/topbar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
79
html/login.html
Normal file
79
html/login.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!-- OnlyPrompt - Login page:
|
||||
- User authentication form with email/password
|
||||
- Show/hide password toggle -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<!--Info about page but not visible-->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- For responsive design: adapts width for different devices -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Title shown in browser tab -->
|
||||
<title>OnlyPrompt - Login</title>
|
||||
|
||||
<!-- CSS files for variables, base styles, and login page -->
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main container for the login page (CSS layout) -->
|
||||
<main class="login-page">
|
||||
<!-- White login card -->
|
||||
<section class="login-card">
|
||||
<!-- Logo container -->
|
||||
<div class="login-logo-wrapper">
|
||||
<img src="../images/logo_full.png" alt="OnlyPrompt Logo" class="login-logo">
|
||||
</div>
|
||||
|
||||
<h1 class="login-title">Sign In</h1>
|
||||
<p class="login-subtitle">Welcome back! Enter your details below.</p>
|
||||
|
||||
<!-- Login form, id is used for JavaScript validation -->
|
||||
<form id="loginForm" class="login-form">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="yourname@email.com"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<!-- Password field with button to show/hide password -->
|
||||
<div class="password-wrapper">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
>
|
||||
<button type="button" id="togglePassword" class="toggle-password">
|
||||
Show <!-- Click to show/hide password -->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-button">Log In</button>
|
||||
</form>
|
||||
|
||||
<p class="signup-text">
|
||||
Don't have an account?
|
||||
<a href="#">Sign Up</a>
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Script for login logic and form validation -->
|
||||
<script src="../js/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
237
html/marketplace.html
Normal file
237
html/marketplace.html
Normal file
@ -0,0 +1,237 @@
|
||||
<!-- OnlyPrompt - Marketplace page:
|
||||
- Browse and filter AI prompts with buy/view details buttons and pricing
|
||||
- Added sort dropdown (Best Rating, Price Low to High, Price High to Low) - UI only -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OnlyPrompt - Marketplace</title>
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
<link rel="stylesheet" href="../css/topbar.css">
|
||||
<link rel="stylesheet" href="../css/marketplace.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<style>
|
||||
/* Additional inline style for sort dropdown – can be moved to marketplace.css */
|
||||
.filter-sort-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.filter-buttons {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.sort-dropdown {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 30px;
|
||||
padding: 8px 16px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
.sort-dropdown:hover {
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.filter-sort-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.sort-dropdown {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
||||
|
||||
<div id="sidebar-container"></div>
|
||||
|
||||
<div style="flex:1; margin:40px auto; max-width:950px;">
|
||||
|
||||
<div id="topbar-container"></div>
|
||||
|
||||
<main class="marketplace-main">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="marketplace-header">
|
||||
<h1>Marketplace</h1>
|
||||
<p>Browse and discover high-quality AI prompts</p>
|
||||
</div>
|
||||
|
||||
<!-- Filter + Sort Row -->
|
||||
<div class="filter-sort-row">
|
||||
<div class="filter-buttons">
|
||||
<button class="filter-btn active">All</button>
|
||||
<button class="filter-btn">Writing</button>
|
||||
<button class="filter-btn">Coding</button>
|
||||
<button class="filter-btn">Art</button>
|
||||
<button class="filter-btn">Marketing</button>
|
||||
<button class="filter-btn">Video</button>
|
||||
<button class="filter-btn">Data</button>
|
||||
</div>
|
||||
<select class="sort-dropdown" aria-label="Sort prompts">
|
||||
<option value="best">Best Rating</option>
|
||||
<option value="price_low">Price: Low to High</option>
|
||||
<option value="price_high">Price: High to Low</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Prompts Grid -->
|
||||
<div class="prompts-grid">
|
||||
|
||||
<!-- Prompt Card 1 -->
|
||||
<div class="prompt-card">
|
||||
<img src="../images/content/market1.png" alt="Creative Blog Post Generator" class="prompt-img">
|
||||
<div class="prompt-info">
|
||||
<h3 class="prompt-title">Creative Blog Post Generator</h3>
|
||||
<div class="prompt-author">@JaneDoe</div>
|
||||
<p class="prompt-description">Generate engaging blog posts in minutes to captivate your audience.</p>
|
||||
<div class="prompt-rating">
|
||||
<span><i class="bi bi-star-fill"></i> 4.8</span>
|
||||
<span>(124 reviews)</span>
|
||||
</div>
|
||||
<div class="prompt-price">$19.99</div>
|
||||
<div class="prompt-actions">
|
||||
<button class="buy-btn">Buy Now</button>
|
||||
<button class="details-btn">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt Card 2 -->
|
||||
<div class="prompt-card">
|
||||
<img src="../images/content/market2.png" alt="Python Code Assistant" class="prompt-img">
|
||||
<div class="prompt-info">
|
||||
<h3 class="prompt-title">Python Code Assistant</h3>
|
||||
<div class="prompt-author">@JaneDoe</div>
|
||||
<p class="prompt-description">Efficiently debug and write Python code with AI assistance.</p>
|
||||
<div class="prompt-rating">
|
||||
<span><i class="bi bi-star-fill"></i> 4.7</span>
|
||||
<span>(98 reviews)</span>
|
||||
</div>
|
||||
<div class="prompt-price">$19.99</div>
|
||||
<div class="prompt-actions">
|
||||
<button class="buy-btn">Buy Now</button>
|
||||
<button class="details-btn">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt Card 3 -->
|
||||
<div class="prompt-card">
|
||||
<img src="../images/content/market3.png" alt="Digital Art Style Guide" class="prompt-img">
|
||||
<div class="prompt-info">
|
||||
<h3 class="prompt-title">Digital Art Style Guide</h3>
|
||||
<div class="prompt-author">@JaneDoe</div>
|
||||
<p class="prompt-description">Create stunning digital art styles with this comprehensive guide.</p>
|
||||
<div class="prompt-rating">
|
||||
<span><i class="bi bi-star-fill"></i> 4.8</span>
|
||||
<span>(156 reviews)</span>
|
||||
</div>
|
||||
<div class="prompt-price">$19.99</div>
|
||||
<div class="prompt-actions">
|
||||
<button class="buy-btn">Buy Now</button>
|
||||
<button class="details-btn">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt Card 4 -->
|
||||
<div class="prompt-card">
|
||||
<img src="../images/content/market4.png" alt="Marketing Copywriter" class="prompt-img">
|
||||
<div class="prompt-info">
|
||||
<h3 class="prompt-title">Marketing Copywriter</h3>
|
||||
<div class="prompt-author">@JaneDoe</div>
|
||||
<p class="prompt-description">Generate engaging marketing copy in minutes.</p>
|
||||
<div class="prompt-rating">
|
||||
<span><i class="bi bi-star-fill"></i> 4.8</span>
|
||||
<span>(112 reviews)</span>
|
||||
</div>
|
||||
<div class="prompt-price">$19.99</div>
|
||||
<div class="prompt-actions">
|
||||
<button class="buy-btn">Buy Now</button>
|
||||
<button class="details-btn">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt Card 5 -->
|
||||
<div class="prompt-card">
|
||||
<img src="../images/content/market5.png" alt="Midjourney Image Prompts" class="prompt-img">
|
||||
<div class="prompt-info">
|
||||
<h3 class="prompt-title">Midjourney Image Prompts</h3>
|
||||
<div class="prompt-author">@JaneDoe</div>
|
||||
<p class="prompt-description">Curated prompts for stunning Midjourney images.</p>
|
||||
<div class="prompt-rating">
|
||||
<span><i class="bi bi-star-fill"></i> 4.7</span>
|
||||
<span>(203 reviews)</span>
|
||||
</div>
|
||||
<div class="prompt-price">$19.99</div>
|
||||
<div class="prompt-actions">
|
||||
<button class="buy-btn">Buy Now</button>
|
||||
<button class="details-btn">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt Card 6 -->
|
||||
<div class="prompt-card">
|
||||
<img src="../images/content/market6.png" alt="UI Design Assistant" class="prompt-img">
|
||||
<div class="prompt-info">
|
||||
<h3 class="prompt-title">UI Design Assistant</h3>
|
||||
<div class="prompt-author">@JaneDoe</div>
|
||||
<p class="prompt-description">Generate UI components and design systems with AI.</p>
|
||||
<div class="prompt-rating">
|
||||
<span><i class="bi bi-star-fill"></i> 4.9</span>
|
||||
<span>(87 reviews)</span>
|
||||
</div>
|
||||
<div class="prompt-price">$19.99</div>
|
||||
<div class="prompt-actions">
|
||||
<button class="buy-btn">Buy Now</button>
|
||||
<button class="details-btn">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
fetch('../html/sidebar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => {
|
||||
document.getElementById('sidebar-container').innerHTML = data;
|
||||
// Remove 'active' from all sidebar links
|
||||
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
// Set 'active' on the second link (Marketplace) - index 1
|
||||
const secondLink = document.querySelectorAll('#sidebar-container .sidebar li a')[1];
|
||||
if (secondLink) secondLink.classList.add('active');
|
||||
});
|
||||
|
||||
fetch('../html/topbar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
114
html/post-detail.html
Normal file
114
html/post-detail.html
Normal file
@ -0,0 +1,114 @@
|
||||
<!-- OnlyPrompt - Settings page:
|
||||
- User preferences with tabs for profile, security, and notifications -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OnlyPrompt - Post Detail</title>
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
<link rel="stylesheet" href="../css/topbar.css">
|
||||
<link rel="stylesheet" href="../css/post-detail.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
||||
|
||||
<div id="sidebar-container"></div>
|
||||
|
||||
<div style="flex:1; display: flex; flex-direction: column;">
|
||||
|
||||
<div id="topbar-container"></div>
|
||||
|
||||
<main class="post-detail-main">
|
||||
<div class="post-detail-container">
|
||||
<!-- Header -->
|
||||
<div class="post-header">
|
||||
<h1 class="post-title">Marketing Guru: Campaign Strategist</h1>
|
||||
<div class="post-meta">
|
||||
<span class="category">Marketing</span>
|
||||
<span class="category">Business</span>
|
||||
<span class="category">Copywriting</span>
|
||||
<span class="updated">Updated: Oct 26, 2023</span>
|
||||
</div>
|
||||
<div class="post-stats">
|
||||
<span><i class="bi bi-bookmark-star"></i> 2,109 Saves</span>
|
||||
<span><i class="bi bi-eye"></i> 14.5k Views</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt Content Section -->
|
||||
<div class="prompt-section">
|
||||
<h2>PROMPT</h2>
|
||||
<div class="prompt-content">
|
||||
<p>You are an expert marketing strategist and copywriter. I will provide a product name, target audience, and key benefits. Your goal is to create a comprehensive marketing campaign plan, including:</p>
|
||||
<ul>
|
||||
<li>Campaign objectives</li>
|
||||
<li>Target Audience: [User Input]</li>
|
||||
<li>Expected Output: A detailed marketing plan with channel strategy, messaging, and sample copy</li>
|
||||
<li>Budget considerations and KPIs</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rating & Like -->
|
||||
<div class="rating-section">
|
||||
<div class="rating-stars">
|
||||
<span><i class="bi bi-star-fill"></i> 4.9</span>
|
||||
<span><i class="bi bi-star-fill"></i> 4.8 (241 Ratings)</span>
|
||||
</div>
|
||||
<button class="like-btn"><i class="bi bi-heart"></i> Like (212)</button>
|
||||
</div>
|
||||
|
||||
<!-- Example Output Section -->
|
||||
<div class="example-section">
|
||||
<h2>EXAMPLE OUTPUT</h2>
|
||||
<div class="example-content">
|
||||
<h3>Generated Strategy 16px</h3>
|
||||
<div class="example-output-text">
|
||||
<p><strong>Output: EcoWare Campaign</strong></p>
|
||||
<p><strong>Campaign Overview</strong><br>Target Persona: Sarah Jenkins, 28, Eco-conscious</p>
|
||||
<p><strong>Key Messaging</strong><br>Channel Strategy<br>Sample Copy<br>Social<br>Email</p>
|
||||
</div>
|
||||
<!-- Optional example image (if uploaded in create) -->
|
||||
<div class="example-image" style="display: none;">
|
||||
<img src="#" alt="Example Output Image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unlock / Buy Section -->
|
||||
<div class="unlock-section">
|
||||
<button class="unlock-btn">Unlock Full Prompt • $19.99</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Fetch sidebar and topbar
|
||||
fetch('../html/sidebar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => {
|
||||
document.getElementById('sidebar-container').innerHTML = data;
|
||||
// Remove active class from all sidebar links
|
||||
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
// Optionally set active on a relevant link (e.g., Marketplace)
|
||||
const marketplaceLink = document.querySelector('#sidebar-container a[href="marketplace.html"]');
|
||||
if (marketplaceLink) marketplaceLink.classList.add('active');
|
||||
});
|
||||
|
||||
fetch('../html/topbar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
111
html/profile.html
Normal file
111
html/profile.html
Normal file
@ -0,0 +1,111 @@
|
||||
<!-- OnlyPrompt - Profile page:
|
||||
- User profile display with avatar, bio, stats, and prompt cards (personal prompts) -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OnlyPrompt - Profile</title>
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
<link rel="stylesheet" href="../css/topbar.css">
|
||||
<link rel="stylesheet" href="../css/profile.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
||||
|
||||
<div id="sidebar-container"></div>
|
||||
|
||||
<div style="flex:1; margin:40px auto; max-width:950px;">
|
||||
|
||||
<div id="topbar-container"></div>
|
||||
|
||||
<main class="login-card profile-main" style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:24px;">
|
||||
|
||||
<section class="profile-header" style="display:flex;align-items:center;gap:32px;border-bottom:1px solid #e5e7eb;padding-bottom:24px;">
|
||||
|
||||
<img src="../images/content/cat.png" class="profile-avatar" style="width:110px;height:110px;border-radius:50%;object-fit:cover;">
|
||||
|
||||
<div class="profile-info" style="flex:1;">
|
||||
<h1 style="font-size:2rem;font-weight:700;margin-bottom:4px;">Sunny the Cat</h1>
|
||||
<div style="color:#64748b;margin-bottom:8px;">
|
||||
@sunny_the_cat <i class="bi bi-patch-check-fill" style="color:#3b82f6;"></i>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:8px;">
|
||||
🐾 Cat prompt creator | Nap enthusiast | AI Cat Content Curator<br>
|
||||
Chasing lasers and building purrfect prompts.
|
||||
</div>
|
||||
|
||||
<div style="color:#64748b;">Cat City, Dreamland 🐈</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||||
<button class="login-button">Edit Profile</button>
|
||||
<button class="login-button" style="background:#f3f4f6;color:#111;box-shadow:none;">Share Profile</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<nav style="display:flex;gap:24px;border-bottom:2px solid #e5e7eb;margin:32px 0 18px 0;">
|
||||
<a href="#" style="padding:10px 0;color:#3b82f6;font-weight:600;border-bottom:2px solid #3b82f6;">My Prompts (2)</a>
|
||||
<a href="#" style="padding:10px 0;color:#64748b;">Favorites (15)</a>
|
||||
<a href="#" style="padding:10px 0;color:#64748b;">Saved (7)</a>
|
||||
</nav>
|
||||
|
||||
<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;">
|
||||
|
||||
<div style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:18px;display:flex;gap:16px;">
|
||||
<img src="../images/content/post1.png" style="width:60px;height:60px;border-radius:12px;">
|
||||
<div>
|
||||
<div style="font-weight:700;">Galactic Catventure</div>
|
||||
<div style="color:#64748b;margin-bottom:6px;">A cosmic journey of a curious cat exploring the stars.</div>
|
||||
<div style="display:flex;gap:16px;color:#64748b;">
|
||||
<span><i class="bi bi-heart"></i> 128</span>
|
||||
<span><i class="bi bi-chat"></i> 15</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:18px;display:flex;gap:16px;">
|
||||
<img src="../images/content/post2.png" style="width:60px;height:60px;border-radius:12px;">
|
||||
<div>
|
||||
<div style="font-weight:700;">Minimalist Cat Logo</div>
|
||||
<div style="color:#64748b;margin-bottom:6px;">Sleek logo design for feline fans.</div>
|
||||
<div style="display:flex;gap:16px;color:#64748b;">
|
||||
<span><i class="bi bi-heart"></i> 54</span>
|
||||
<span><i class="bi bi-chat"></i> 6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
fetch('../html/sidebar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => {
|
||||
document.getElementById('sidebar-container').innerHTML = data;
|
||||
// Remove 'active' from all sidebar links
|
||||
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
// Then set 'active' only on the My Profile link
|
||||
const profileLink = document.querySelector('#sidebar-container a[href="profile.html"]');
|
||||
if (profileLink) profileLink.classList.add('active');
|
||||
});
|
||||
|
||||
fetch('../html/topbar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
197
html/settings.html
Normal file
197
html/settings.html
Normal file
@ -0,0 +1,197 @@
|
||||
<!-- OnlyPrompt - Settings page:
|
||||
- User preferences with tabs for profile, security, and notifications -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OnlyPrompt - Settings</title>
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
<link rel="stylesheet" href="../css/topbar.css">
|
||||
<link rel="stylesheet" href="../css/settings.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
||||
|
||||
<div id="sidebar-container"></div>
|
||||
|
||||
<div style="flex:1; display: flex; flex-direction: column;">
|
||||
|
||||
<div id="topbar-container"></div>
|
||||
|
||||
<main class="settings-main">
|
||||
<div class="settings-container">
|
||||
<div class="settings-header">
|
||||
<h1>Settings</h1>
|
||||
<p>Manage your account preferences and profile.</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="settings-tabs">
|
||||
<button class="tab-btn active" data-tab="profile">Profile</button>
|
||||
<button class="tab-btn" data-tab="security">Security</button>
|
||||
<button class="tab-btn" data-tab="notifications">Notifications</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content: Profile -->
|
||||
<div id="profileTab" class="tab-content active">
|
||||
<form class="settings-form">
|
||||
<div class="form-group">
|
||||
<label for="avatar">Profile Picture</label>
|
||||
<div class="avatar-upload">
|
||||
<img src="../images/content/cat.png" alt="Avatar" class="settings-avatar" id="avatarPreview">
|
||||
<input type="file" id="avatarUpload" accept="image/png, image/jpeg">
|
||||
<button type="button" class="upload-btn">Upload new</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="displayName">Display Name</label>
|
||||
<input type="text" id="displayName" placeholder="Sunny the Cat">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" placeholder="@username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="bio">Bio</label>
|
||||
<textarea id="bio" rows="3" placeholder="Tell us about yourself..."></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" placeholder="your@email.com">
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="save-btn">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content: Security -->
|
||||
<div id="securityTab" class="tab-content">
|
||||
<form class="settings-form">
|
||||
<div class="form-group">
|
||||
<label for="currentPw">Current Password</label>
|
||||
<input type="password" id="currentPw" placeholder="Enter current password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newPw">New Password</label>
|
||||
<input type="password" id="newPw" placeholder="Enter new password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirmPw">Confirm New Password</label>
|
||||
<input type="password" id="confirmPw" placeholder="Confirm new password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="twoFactor"> Enable Two-Factor Authentication
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="save-btn">Update Password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content: Notifications (erweitert) -->
|
||||
<div id="notificationsTab" class="tab-content">
|
||||
<form class="settings-form">
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="notifLikes"> When someone likes my prompt
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="notifSaves"> When someone saves my prompt
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="notifMessages"> New message received
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="notifFollowers"> New follower
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="notifPurchases"> Prompt purchase (paid prompts)
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="notifComments"> Comment on my prompt
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="save-btn">Save Preferences</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tab switching
|
||||
const tabBtns = document.querySelectorAll('.tab-btn');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
tabBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const tabId = btn.getAttribute('data-tab');
|
||||
tabBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
tabContents.forEach(content => content.classList.remove('active'));
|
||||
document.getElementById(`${tabId}Tab`).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Avatar preview (simple)
|
||||
const avatarUpload = document.getElementById('avatarUpload');
|
||||
const avatarPreview = document.getElementById('avatarPreview');
|
||||
if (avatarUpload) {
|
||||
avatarUpload.addEventListener('change', function(e) {
|
||||
const file = e.target.files[0];
|
||||
if (file && (file.type === 'image/png' || file.type === 'image/jpeg')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(ev) {
|
||||
avatarPreview.src = ev.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Demo form submits for all forms
|
||||
document.querySelectorAll('.settings-form').forEach(form => {
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
alert('Settings saved (demo)');
|
||||
});
|
||||
});
|
||||
|
||||
// Fetch sidebar and topbar
|
||||
fetch('../html/sidebar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => {
|
||||
document.getElementById('sidebar-container').innerHTML = data;
|
||||
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
const settingsLink = document.querySelector('#sidebar-container a[href="settings.html"]');
|
||||
if (settingsLink) settingsLink.classList.add('active');
|
||||
});
|
||||
fetch('../html/topbar.html')
|
||||
.then(r => r.text())
|
||||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
78
html/sidebar.html
Normal file
78
html/sidebar.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!--
|
||||
Reusable sidebar for OnlyPrompt
|
||||
- Load this file dynamically into pages
|
||||
- Add class="active" to the current page link
|
||||
-->
|
||||
|
||||
<div class="sidebar-shell">
|
||||
<!-- Logo -->
|
||||
<div class="sidebar-logo">
|
||||
<img src="../images/logo_full.png" alt="OnlyPrompt Logo" class="sidebar-logo-full">
|
||||
<img src="../images/logo_icon.png" alt="OnlyPrompt Icon" class="sidebar-logo-icon">
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="sidebar">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="dashboard.html" class="active">
|
||||
<i class="bi bi-house icon-blue"></i>
|
||||
<span class="nav-text">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="marketplace.html">
|
||||
<i class="bi bi-shop icon-purple"></i>
|
||||
<span class="nav-text">Marketplace</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="community.html">
|
||||
<i class="bi bi-people icon-pink"></i>
|
||||
<span class="nav-text">Community</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="chats.html">
|
||||
<i class="bi bi-chat-dots icon-blue"></i>
|
||||
<span class="nav-text">Chats</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="settings.html">
|
||||
<i class="bi bi-gear icon-purple"></i>
|
||||
<span class="nav-text">Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="profile.html">
|
||||
<i class="bi bi-person icon-pink"></i>
|
||||
<span class="nav-text">My Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="create.html">
|
||||
<i class="bi bi-plus-circle-fill icon-blue"></i>
|
||||
<span class="nav-text">Create New</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Logout bottom -->
|
||||
<div class="sidebar-bottom">
|
||||
<a href="login.html" class="sidebar-logout">
|
||||
<div class="logout-left">
|
||||
<i class="bi bi-box-arrow-right"></i>
|
||||
<span class="nav-text">Logout</span>
|
||||
</div>
|
||||
<i class="bi bi-chevron-right logout-arrow"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
108
html/signup.html
Normal file
108
html/signup.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!-- OnlyPrompt - Signup page:
|
||||
- Registration form with email, password, full name, username, and terms acceptance -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<!--Info about page but not visible-->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- For responsive design: adapts width for different devices -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Title shown in browser tab -->
|
||||
<title>OnlyPrompt - Login</title>
|
||||
|
||||
<!-- CSS files for variables, base styles, and login page -->
|
||||
<link rel="stylesheet" href="../css/variables.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/signup.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main container for the login page (CSS layout) -->
|
||||
<main class="login-page">
|
||||
<!-- White login card -->
|
||||
<section class="login-card">
|
||||
<!-- Logo container -->
|
||||
<div class="login-logo-wrapper">
|
||||
<img src="../images/logo_full.png" alt="OnlyPrompt Logo" class="login-logo">
|
||||
</div>
|
||||
|
||||
<h1 class="login-title">Sign Up</h1>
|
||||
<p class="login-subtitle">Create your account to get started.</p>
|
||||
|
||||
<!-- Login form, id is used for JavaScript validation -->
|
||||
<form id="loginForm" class="login-form">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="yourname@email.com"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<!-- Password field with button to show/hide password -->
|
||||
<div class="password-wrapper">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
>
|
||||
<button type="button" id="togglePassword" class="toggle-password">
|
||||
Show <!-- Click to show/hide password -->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Full Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="fullName"
|
||||
name="fullName"
|
||||
placeholder="Enter your full name"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="Enter your username"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<p class="signup-terms">
|
||||
By signing up, you agree to our
|
||||
<a href="#">Terms</a>,
|
||||
<a href="#">Privacy Policy</a> and
|
||||
<a href="#">Cookies Policy</a>.
|
||||
</p>
|
||||
|
||||
|
||||
<button type="submit" class="login-button">Sign Up</button>
|
||||
</form>
|
||||
|
||||
<p class="signup-text">
|
||||
Have an account?
|
||||
<a href="#">Log In</a>
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Script for login logic and form validation -->
|
||||
<script src="../js/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
27
html/topbar.html
Normal file
27
html/topbar.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
Reusable topbar for OnlyPrompt
|
||||
- Search in the middle
|
||||
- small chat & notification icons
|
||||
- profile avatar on the right
|
||||
-->
|
||||
|
||||
<header class="topbar-shell">
|
||||
<div class="topbar-search">
|
||||
<i class="bi bi-search"></i>
|
||||
<input type="text" placeholder="Search">
|
||||
</div>
|
||||
|
||||
<div class="topbar-actions">
|
||||
<button class="topbar-icon-btn" aria-label="Notifications">
|
||||
<i class="bi bi-bell"></i>
|
||||
</button>
|
||||
<button class="topbar-icon-btn" aria-label="Messages">
|
||||
<i class="bi bi-chat-dots"></i>
|
||||
</button>
|
||||
|
||||
<!-- Profile avatar on the right (must be changed with backend) -->
|
||||
<button class="topbar-avatar-btn" aria-label="Profile">
|
||||
<img src="../images/content/cat.png" alt="Profile Picture" class="topbar-avatar">
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
BIN
images/content/cat.png
Normal file
BIN
images/content/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
images/content/creator1.png
Normal file
BIN
images/content/creator1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/content/creator2.png
Normal file
BIN
images/content/creator2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 579 KiB |
BIN
images/content/creator3.png
Normal file
BIN
images/content/creator3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
images/content/creator4.png
Normal file
BIN
images/content/creator4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
images/content/creator5.png
Normal file
BIN
images/content/creator5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
images/content/creator6.png
Normal file
BIN
images/content/creator6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
images/content/feed1.png
Normal file
BIN
images/content/feed1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 660 KiB |
BIN
images/content/feed2.png
Normal file
BIN
images/content/feed2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
BIN
images/content/feed3.png
Normal file
BIN
images/content/feed3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
images/content/feed4.png
Normal file
BIN
images/content/feed4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
images/content/market1.png
Normal file
BIN
images/content/market1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
images/content/market2.png
Normal file
BIN
images/content/market2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
images/content/market3.png
Normal file
BIN
images/content/market3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 659 KiB |
BIN
images/content/market4.png
Normal file
BIN
images/content/market4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
BIN
images/content/market5.png
Normal file
BIN
images/content/market5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
images/content/market6.png
Normal file
BIN
images/content/market6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
BIN
images/content/post1.png
Normal file
BIN
images/content/post1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 868 KiB |
BIN
images/content/post2.png
Normal file
BIN
images/content/post2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
BIN
images/logo_full.png
Normal file
BIN
images/logo_full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
images/logo_icon.png
Normal file
BIN
images/logo_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
images/logo_text.png
Normal file
BIN
images/logo_text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Loading…
x
Reference in New Issue
Block a user