327 lines
15 KiB
HTML
327 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>Social App</title>
|
|
<meta name="description" content="Connect with friends in style.">
|
|
<link rel="stylesheet" href="styles/main.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- App Container -->
|
|
<main id="login-view" class="login-container fade-in">
|
|
<!-- Background Orbs for Vibe -->
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
|
|
<div class="login-card">
|
|
<div class="brand-section">
|
|
<div class="logo-icon">S</div>
|
|
<h1>Welcome Back!</h1>
|
|
<p>Enter your details below</p>
|
|
</div>
|
|
|
|
<form class="login-form" onsubmit="event.preventDefault()">
|
|
<div class="input-group">
|
|
<input type="email" id="email" required placeholder=" " autocomplete="email">
|
|
<label for="email">Email Address</label>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input type="password" id="password" required placeholder=" " autocomplete="current-password">
|
|
<label for="password">Password</label>
|
|
</div>
|
|
|
|
<div class="input-group hidden" id="confirm-password-group">
|
|
<input type="password" id="confirm-password" placeholder=" " autocomplete="new-password">
|
|
<label for="confirm-password">Confirm Password</label>
|
|
</div>
|
|
|
|
<a href="#" class="forgot-pass">Forgot Password?</a>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
<span>Sign In</span>
|
|
<div class="btn-glow"></div>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Social Login Removed -->
|
|
|
|
<p class="signup-link">Don't have an account? <a href="#">Create One</a></p>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Main Feed View -->
|
|
<div id="feed-view" class="hidden">
|
|
<!-- Top Header -->
|
|
<header class="feed-header">
|
|
<div class="header-logo">Social</div>
|
|
<div class="header-actions">
|
|
<button class="text-btn" id="logout-btn"
|
|
style="color: var(--text-secondary); font-size: 14px; background: none; border: none; cursor: pointer;">Logout</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Stories Section -->
|
|
<section class="stories-container">
|
|
<!-- Story Item (Add New) -->
|
|
<div class="story-item">
|
|
<div class="story-ring add-story">
|
|
<div class="story-avatar">
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="white" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<span>Your Story</span>
|
|
</div>
|
|
<!-- Placeholders -->
|
|
<div class="story-item">
|
|
<div class="story-ring"><img src="https://i.pravatar.cc/150?img=1" alt="User" class="story-avatar">
|
|
</div>
|
|
<span>Sarah</span>
|
|
</div>
|
|
<div class="story-item">
|
|
<div class="story-ring"><img src="https://i.pravatar.cc/150?img=2" alt="User" class="story-avatar">
|
|
</div>
|
|
<span>Mike</span>
|
|
</div>
|
|
<div class="story-item">
|
|
<div class="story-ring"><img src="https://i.pravatar.cc/150?img=3" alt="User" class="story-avatar">
|
|
</div>
|
|
<span>Jessica</span>
|
|
</div>
|
|
<div class="story-item">
|
|
<div class="story-ring"><img src="https://i.pravatar.cc/150?img=4" alt="User" class="story-avatar">
|
|
</div>
|
|
<span>Alex</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Feed Section -->
|
|
<section class="feed-container">
|
|
<!-- Post Card -->
|
|
<article class="post-card" data-post-id="1">
|
|
<div class="post-header">
|
|
<div class="post-user">
|
|
<img src="https://i.pravatar.cc/150?img=1" alt="User" class="avatar-sm">
|
|
<span class="username">sarah_j</span>
|
|
</div>
|
|
<button class="icon-btn-sm">...</button>
|
|
</div>
|
|
<div class="post-image">
|
|
<img src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?w=800&q=80" alt="Post">
|
|
</div>
|
|
<div class="post-actions">
|
|
<div class="action-left">
|
|
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white"
|
|
fill="none" class="heart-icon">
|
|
<path
|
|
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
|
|
</path>
|
|
</svg></button>
|
|
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white"
|
|
fill="none">
|
|
<path
|
|
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
|
|
</path>
|
|
</svg></button>
|
|
</div>
|
|
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
|
|
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
|
|
</svg></button>
|
|
</div>
|
|
<div class="post-content">
|
|
<span class="likes">124 likes</span>
|
|
<p><span class="username">sarah_j</span> Exploring the Cinque Terre! 🇮🇹✨</p>
|
|
</div>
|
|
<!-- Comment Section -->
|
|
<div class="comment-section">
|
|
<div class="added-comments"></div>
|
|
<div class="comment-input-wrapper">
|
|
<input type="text" class="comment-input" placeholder="Add a comment...">
|
|
<button class="post-btn">Post</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Post Card 2 -->
|
|
<article class="post-card" data-post-id="2">
|
|
<div class="post-header">
|
|
<div class="post-user">
|
|
<img src="https://i.pravatar.cc/150?img=2" alt="User" class="avatar-sm">
|
|
<span class="username">mike_photo</span>
|
|
</div>
|
|
<button class="icon-btn-sm">...</button>
|
|
</div>
|
|
<div class="post-image">
|
|
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80" alt="Post">
|
|
</div>
|
|
<div class="post-actions">
|
|
<div class="action-left">
|
|
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white"
|
|
fill="none" class="heart-icon">
|
|
<path
|
|
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
|
|
</path>
|
|
</svg></button>
|
|
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white"
|
|
fill="none">
|
|
<path
|
|
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
|
|
</path>
|
|
</svg></button>
|
|
</div>
|
|
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
|
|
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
|
|
</svg></button>
|
|
</div>
|
|
<div class="post-content">
|
|
<span class="likes">892 likes</span>
|
|
<p><span class="username">mike_photo</span> Golden hour in the mountains 🏔️</p>
|
|
</div>
|
|
<!-- Comment Section -->
|
|
<div class="comment-section">
|
|
<div class="added-comments"></div>
|
|
<div class="comment-input-wrapper">
|
|
<input type="text" class="comment-input" placeholder="Add a comment...">
|
|
<button class="post-btn">Post</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Spacer for bottom nav -->
|
|
<div style="height: 100px;"></div>
|
|
</section>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<nav class="bottom-nav">
|
|
<button class="nav-btn active">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
</svg>
|
|
<span>Home</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="12" y1="8" x2="12" y2="16"></line>
|
|
<line x1="8" y1="12" x2="16" y2="12"></line>
|
|
</svg>
|
|
<span>Post</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg>
|
|
<span>Chat</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Create Post View -->
|
|
<div id="create-post-view" class="hidden">
|
|
<header class="feed-header">
|
|
<button class="text-btn" id="cancel-post-btn">Cancel</button>
|
|
<span class="header-title">New Post</span>
|
|
<button class="text-btn accent" id="share-post-btn">Share</button>
|
|
</header>
|
|
|
|
<div class="post-creation-area">
|
|
<div class="image-upload-wrapper" id="upload-trigger">
|
|
<input type="file" id="post-image-input" accept="image/*,video/*" multiple hidden>
|
|
<div class="upload-placeholder">
|
|
<svg viewBox="0 0 24 24" width="48" height="48" stroke="white" fill="none" stroke-width="1">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
<polyline points="21 15 16 10 5 21"></polyline>
|
|
</svg>
|
|
<span>Tap to Select Photos or Videos</span>
|
|
</div>
|
|
<!-- Preview Container for Carousel -->
|
|
<div id="media-preview-container" class="media-carousel hidden"></div>
|
|
</div>
|
|
|
|
<div class="caption-wrapper">
|
|
<img src="https://i.pravatar.cc/150?img=12" alt="User" class="avatar-sm">
|
|
<textarea id="post-caption-input" placeholder="Write a caption..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Verification View -->
|
|
<div id="verification-view" class="login-container hidden">
|
|
<div class="login-card">
|
|
<div class="brand-section">
|
|
<div class="logo-icon">V</div>
|
|
<h1>Verify Email</h1>
|
|
<p>We sent a code to your email</p>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" id="otp-input" placeholder=" " maxlength="6"
|
|
style="text-align: center; letter-spacing: 5px; font-size: 24px;">
|
|
<label for="otp-input">Enter 6-Digit Code</label>
|
|
</div>
|
|
<button id="verify-btn" class="btn-primary"><span>Verify</span></button>
|
|
<div class="signup-link">
|
|
<a href="#" id="resend-code">Resend Code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Onboarding View -->
|
|
<div id="onboarding-view" class="login-container hidden">
|
|
<div class="login-card">
|
|
<div class="brand-section">
|
|
<h1>Setup Profile</h1>
|
|
<p>Tell us a bit about yourself</p>
|
|
</div>
|
|
|
|
<div class="profile-upload-section">
|
|
<div class="avatar-upload-wrapper" id="avatar-upload-trigger">
|
|
<img src="https://i.pravatar.cc/150?img=12" alt="Avatar Preview" id="avatar-preview">
|
|
<div class="upload-overlay">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="17 8 12 3 7 8"></polyline>
|
|
<line x1="12" y1="3" x2="12" y2="15"></line>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<input type="file" id="avatar-input" accept="image/*" class="hidden">
|
|
<p style="font-size: 12px; color: var(--text-muted); margin-top: 10px;">Tap to change photo</p>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input type="text" id="display-name" placeholder=" " required>
|
|
<label for="display-name">Display Name</label>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" id="bio-input" placeholder=" ">
|
|
<label for="bio-input">Bio (Optional)</label>
|
|
</div>
|
|
|
|
<button id="complete-setup-btn" class="btn-primary"><span>Enter App</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lightbox View -->
|
|
<div id="lightbox-view" class="hidden">
|
|
<button id="lightbox-close" class="icon-btn-lg">
|
|
<svg viewBox="0 0 24 24" width="32" height="32" stroke="white" stroke-width="2" fill="none">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<div class="lightbox-carousel">
|
|
<!-- Dynamic Slides injected here -->
|
|
</div>
|
|
<div class="media-counter" style="bottom: 40px; top: auto;"></div> <!-- Re-use styling -->
|
|
</div>
|
|
|
|
<script src="script.js?v=2.0"></script>
|
|
</body>
|
|
|
|
</html> |