login, signup, profile page setup
This commit is contained in:
parent
c5a1692d6b
commit
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);
|
||||
}
|
||||
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 */
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
169
css/sidebar.css
Normal file
169
css/sidebar.css
Normal file
@ -0,0 +1,169 @@
|
||||
/*
|
||||
Sidebar styles for OnlyPrompt
|
||||
- modern soft card look
|
||||
- responsive: full sidebar on desktop, icon-only on smaller screens
|
||||
*/
|
||||
|
||||
.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 */
|
||||
.sidebar {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.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 */
|
||||
.sidebar-bottom {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
92
css/topbar.css
Normal file
92
css/topbar.css
Normal file
@ -0,0 +1,92 @@
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
|
||||
75
html/login.html
Normal file
75
html/login.html
Normal file
@ -0,0 +1,75 @@
|
||||
<!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>
|
||||
108
html/profile.html
Normal file
108
html/profile.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!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>
|
||||
71
html/sidebar.html
Normal file
71
html/sidebar.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
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>
|
||||
</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>
|
||||
105
html/signup.html
Normal file
105
html/signup.html
Normal file
@ -0,0 +1,105 @@
|
||||
<!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>
|
||||
19
html/topbar.html
Normal file
19
html/topbar.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!--
|
||||
Reusable topbar for OnlyPrompt
|
||||
- Search in the middle
|
||||
- small action 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>
|
||||
|
||||
<!-- 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/buy_prompt.png
Normal file
BIN
images/buy_prompt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
BIN
images/chat.png
Normal file
BIN
images/chat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
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/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/create_prompt.png
Normal file
BIN
images/create_prompt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
images/creators.png
Normal file
BIN
images/creators.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
images/feed.png
Normal file
BIN
images/feed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 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 |
BIN
images/profil_cat.png
Normal file
BIN
images/profil_cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
images/profile.png
Normal file
BIN
images/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Loading…
x
Reference in New Issue
Block a user