253 lines
11 KiB
HTML
253 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0069)file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html -->
|
|
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Maxy - Social Platform</title>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo">Maxy</div>
|
|
<nav>
|
|
<ul class="nav-menu">
|
|
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Home</a></li>
|
|
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Explore</a></li>
|
|
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Notifications</a></li>
|
|
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Messages</a></li>
|
|
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Profile</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container">
|
|
<div class="main-content">
|
|
<!-- Left Sidebar -->
|
|
<aside class="sidebar">
|
|
<!-- Profile Card -->
|
|
<div class="profile-card">
|
|
<div class="profile-avatar">JS</div>
|
|
<div class="profile-name">John Smith</div>
|
|
<div class="profile-handle">@johnsmith</div>
|
|
|
|
<div class="profile-stats">
|
|
<div class="stat">
|
|
<span class="stat-number">245</span>
|
|
<span class="stat-label">Posts</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-number">567</span>
|
|
<span class="stat-label">Following</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-number">1.2K</span>
|
|
<span class="stat-label">Followers</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compose Post -->
|
|
<div class="compose-box">
|
|
<h3 class="compose-title">Create New Post</h3>
|
|
<textarea class="post-textarea" placeholder="What's on your mind?"></textarea>
|
|
<button class="post-button">Post to Maxy</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Feed -->
|
|
<main class="feed">
|
|
<h2 class="feed-title">Your Feed</h2>
|
|
|
|
<!-- Post 1 -->
|
|
<article class="post-card">
|
|
<div class="post-header">
|
|
<div class="post-avatar">JD</div>
|
|
<div class="post-user-info">
|
|
<div class="post-username">Jane Doe</div>
|
|
<div class="post-handle">@janedoe</div>
|
|
</div>
|
|
<div class="post-time">2 hours ago</div>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
Just finished building a simple social platform with vanilla HTML and CSS! It's amazing what you can create with just the basics. #webdev #coding #HTML #CSS
|
|
</div>
|
|
|
|
<div class="post-actions">
|
|
<div class="action-btn">
|
|
<span>💬</span>
|
|
<span>12</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>🔄</span>
|
|
<span>8</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>❤️</span>
|
|
<span>45</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>📤</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Post 2 -->
|
|
<article class="post-card">
|
|
<div class="post-header">
|
|
<div class="post-avatar">BS</div>
|
|
<div class="post-user-info">
|
|
<div class="post-username">Bob Smith</div>
|
|
<div class="post-handle">@bobsmith</div>
|
|
</div>
|
|
<div class="post-time">4 hours ago</div>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
Learning web development step by step. Today we're focusing on HTML structure and CSS styling. Next week: JavaScript! #codingjourney #webdevelopment
|
|
</div>
|
|
|
|
<div class="post-actions">
|
|
<div class="action-btn">
|
|
<span>💬</span>
|
|
<span>5</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>🔄</span>
|
|
<span>3</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>❤️</span>
|
|
<span>28</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>📤</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Post 3 -->
|
|
<article class="post-card">
|
|
<div class="post-header">
|
|
<div class="post-avatar">AJ</div>
|
|
<div class="post-user-info">
|
|
<div class="post-username">Alice Johnson</div>
|
|
<div class="post-handle">@alicej</div>
|
|
</div>
|
|
<div class="post-time">1 day ago</div>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
The weather is beautiful today! Perfect for a walk in the park. Sometimes you just need to step away from the screen and enjoy nature. #sunnyday #nature
|
|
</div>
|
|
|
|
<div class="post-actions">
|
|
<div class="action-btn">
|
|
<span>💬</span>
|
|
<span>24</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>🔄</span>
|
|
<span>7</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>❤️</span>
|
|
<span>89</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>📤</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Post 4 -->
|
|
<article class="post-card">
|
|
<div class="post-header">
|
|
<div class="post-avatar">CS</div>
|
|
<div class="post-user-info">
|
|
<div class="post-username">Code School</div>
|
|
<div class="post-handle">@codeschool</div>
|
|
</div>
|
|
<div class="post-time">2 days ago</div>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
New blog post: "From Zero to Hero: Mastering CSS Positioning". Learn how to position elements on a webpage using float, position, and display properties. Check it out!
|
|
</div>
|
|
|
|
<div class="post-actions">
|
|
<div class="action-btn">
|
|
<span>💬</span>
|
|
<span>42</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>🔄</span>
|
|
<span>19</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>❤️</span>
|
|
<span>156</span>
|
|
</div>
|
|
<div class="action-btn">
|
|
<span>📤</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Basic JavaScript for interactivity
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const postButton = document.querySelector('.post-button');
|
|
const postInput = document.querySelector('.post-textarea');
|
|
|
|
postButton.addEventListener('click', function() {
|
|
if (!postInput.value.trim()) {
|
|
alert('Please enter some text for your post!');
|
|
return;
|
|
}
|
|
|
|
const preview = postInput.value.length > 50
|
|
? postInput.value.substring(0, 50) + '...'
|
|
: postInput.value;
|
|
|
|
alert('Post created: ' + preview);
|
|
postInput.value = '';
|
|
});
|
|
|
|
// Add like functionality
|
|
const likeButtons = document.querySelectorAll('.action-btn:nth-child(3)');
|
|
|
|
likeButtons.forEach(function(button) {
|
|
button.addEventListener('click', function() {
|
|
const span = this.querySelector('span:nth-child(2)');
|
|
if (span) {
|
|
const current = parseInt(span.textContent) || 0;
|
|
span.textContent = current + 1;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add reply functionality
|
|
const replyButtons = document.querySelectorAll('.action-btn:nth-child(1)');
|
|
|
|
replyButtons.forEach(function(button) {
|
|
button.addEventListener('click', function() {
|
|
const span = this.querySelector('span:nth-child(2)');
|
|
if (span) {
|
|
const current = parseInt(span.textContent) || 0;
|
|
span.textContent = current + 1;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body></html> |