Added Bulma version
This commit is contained in:
BIN
Bulma_Version/.DS_Store
vendored
Normal file
BIN
Bulma_Version/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
Bulma_Version/assets/.DS_Store
vendored
Normal file
BIN
Bulma_Version/assets/.DS_Store
vendored
Normal file
Binary file not shown.
9
Bulma_Version/assets/css/all.min.css
vendored
Normal file
9
Bulma_Version/assets/css/all.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
Bulma_Version/assets/css/bulma.min.css
vendored
Normal file
1
Bulma_Version/assets/css/bulma.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
131
Bulma_Version/assets/css/style.css
Normal file
131
Bulma_Version/assets/css/style.css
Normal file
@@ -0,0 +1,131 @@
|
||||
/* Custom styles for the Maxy Social Platform */
|
||||
|
||||
/* Override Font Awesome font paths */
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../webfonts/fa-regular-400.woff2') format('woff2'),
|
||||
url('../webfonts/fa-regular-400.woff') format('woff'),
|
||||
url('../webfonts/fa-regular-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url('../webfonts/fa-solid-900.woff2') format('woff2'),
|
||||
url('../webfonts/fa-solid-900.woff') format('woff'),
|
||||
url('../webfonts/fa-solid-900.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* Fix for overlapping text issue */
|
||||
.title.is-5.mb-2 {
|
||||
margin-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.subtitle.is-6.has-text-grey {
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
/* Specific fix for profile card overlap */
|
||||
.card-content .has-text-centered .title.is-5 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.card-content .has-text-centered .subtitle.is-6 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Custom button styles */
|
||||
.maxy-primary {
|
||||
background-color: #3273dc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.maxy-primary:hover {
|
||||
background-color: #2761bb;
|
||||
}
|
||||
|
||||
.maxy-primary-outlined {
|
||||
border: 1px solid #3273dc;
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.maxy-primary-outlined:hover {
|
||||
background-color: #3273dc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Avatar styles - Fixed distortion */
|
||||
.post-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
min-width: 50px;
|
||||
min-height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Profile stats layout */
|
||||
.profile-stats {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Card content spacing */
|
||||
.card-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Media queries for responsiveness */
|
||||
@media screen and (max-width: 768px) {
|
||||
.columns.is-variable.is-5 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.column.is-one-quarter {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navbar item adjustments */
|
||||
.navbar-brand .logo-img {
|
||||
max-height: none;
|
||||
height: 3rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
/* Adjustments for form elements */
|
||||
.textarea {
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
/* Footer adjustments */
|
||||
.footer {
|
||||
padding: 3rem 1.5rem 3rem;
|
||||
}
|
||||
|
||||
/* Fallback styles for missing Font Awesome icons */
|
||||
.fas, .far, .fab {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Ensure icons have fallback appearance if font isn't loaded */
|
||||
.icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
BIN
Bulma_Version/assets/image/.DS_Store
vendored
Normal file
BIN
Bulma_Version/assets/image/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
Bulma_Version/assets/image/logo.png
Normal file
BIN
Bulma_Version/assets/image/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
322
Bulma_Version/index.html
Normal file
322
Bulma_Version/index.html
Normal file
@@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Maxy - Social Platform</title>
|
||||
<!-- ================= BULMA CDN ================= -->
|
||||
<link rel="stylesheet" href="./assets/css/bulma.min.css">
|
||||
<!-- ================= FONT AWESOME CDN ================= -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<!-- ================= CUSTOM CSS ================= -->
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="navbar is-fixed-top has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="#">
|
||||
<!-- Logo Image -->
|
||||
<img src="./assets/image/logo.png" alt="Maxy Logo" class="logo-img">
|
||||
<span class="has-text-weight-bold is-size-4 has-text-maxy">Maxy</span>
|
||||
</a>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarMenu" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
<span class="icon">
|
||||
<i class="fas fa-home"></i>
|
||||
</span>
|
||||
<span class="ml-2">Home</span>
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<span class="icon">
|
||||
<i class="fas fa-hashtag"></i>
|
||||
</span>
|
||||
<span class="ml-2">Explore</span>
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<span class="icon">
|
||||
<i class="fas fa-bell"></i>
|
||||
</span>
|
||||
<span class="ml-2">Notifications</span>
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<span class="icon">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span class="ml-2">Messages</span>
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<span class="icon">
|
||||
<i class="fas fa-user"></i>
|
||||
</span>
|
||||
<span class="ml-2">Profile</span>
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<button class="button maxy-primary">
|
||||
Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<section class="section" style="padding-top: 80px;">
|
||||
<div class="container">
|
||||
<div class="columns is-variable is-5">
|
||||
<!-- Left Sidebar -->
|
||||
<div class="column is-one-quarter">
|
||||
<!-- Profile Card -->
|
||||
<div class="card has-text-centered mb-5">
|
||||
<div class="card-content">
|
||||
<div class="post-avatar mx-auto mb-4" style="background-color: #ff5722;">
|
||||
JS
|
||||
</div>
|
||||
<h2 class="title is-5">John Smith</h2>
|
||||
<p class="subtitle is-6 has-text-grey">@johnsmith</p>
|
||||
|
||||
<div class="level is-mobile profile-stats mt-4">
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Posts</p>
|
||||
<p class="title is-5">245</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title is-5">1.2K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title is-5">562</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Removed Trending Card -->
|
||||
</div>
|
||||
|
||||
<!-- Main Feed -->
|
||||
<div class="column">
|
||||
<!-- Create Post Card -->
|
||||
<div class="card mb-5">
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<div class="field">
|
||||
<textarea class="textarea" placeholder="What's happening?"></textarea>
|
||||
</div>
|
||||
<div class="is-flex is-justify-content-space-between is-align-items-center">
|
||||
<div>
|
||||
<button class="button is-text">
|
||||
<span class="icon">
|
||||
<i class="far fa-image"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-text">
|
||||
<span class="icon">
|
||||
<i class="far fa-smile"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-text">
|
||||
<span class="icon">
|
||||
<i class="far fa-chart-bar"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="button maxy-primary">
|
||||
Send a Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Posts Feed using Bulma Media Objects with post-avatar style -->
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<div class="post-avatar" style="background-color: #2196f3;">
|
||||
BM
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Barbara Middleton</strong>
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros
|
||||
lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris
|
||||
sit amet dolor blandit rutrum. Nunc in tempus turpis.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<div class="post-avatar" style="background-color: #4caf50;">
|
||||
SB
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Sean Brown</strong>
|
||||
<br />
|
||||
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque
|
||||
habitant morbi tristique senectus et netus et malesuada fames ac
|
||||
turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis
|
||||
leo feugiat.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<div class="post-avatar" style="background-color: #ff9800;">
|
||||
SJ
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Sarah Johnson</strong>
|
||||
<br />
|
||||
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem
|
||||
cursus ullamcorper sit amet nec massa.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 1 hr</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<div class="post-avatar" style="background-color: #9c27b0;">
|
||||
MC
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Michael Chen</strong>
|
||||
<br />
|
||||
Morbi vitae diam et purus tincidunt porttitor vel vitae augue.
|
||||
Praesent malesuada metus sed pharetra euismod. Cras tellus odio,
|
||||
tincidunt iaculis diam non, porta aliquet tortor.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 45 mins</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<div class="post-avatar" style="background-color: #e91e63;">
|
||||
KE
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Kayli Eunice</strong>
|
||||
<br />
|
||||
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel.
|
||||
Maecenas varius felis sit amet magna vestibulum euismod malesuada
|
||||
cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus
|
||||
et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id
|
||||
feugiat.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<div class="post-avatar" style="background-color: #3f51b5;">
|
||||
UU
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<button class="button is-link">Post comment</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Sidebar - Removed Who to follow and Suggestions sections -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Maxy Social Platform</strong> by ICT
|
||||
</p>
|
||||
<p>
|
||||
<a class="mx-2" href="#">About</a>
|
||||
<a class="mx-2" href="#">Terms</a>
|
||||
<a class="mx-2" href="#">Privacy</a>
|
||||
<a class="mx-2" href="#">Help</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Mobile menu toggle
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const navbarBurger = document.querySelector('.navbar-burger');
|
||||
|
||||
if(navbarBurger) {
|
||||
navbarBurger.addEventListener('click', () => {
|
||||
const target = navbarBurger.dataset.target;
|
||||
const targetElement = document.getElementById(target);
|
||||
|
||||
navbarBurger.classList.toggle('is-active');
|
||||
targetElement.classList.toggle('is-active');
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
253
Maxy - Social Platform.html
Normal file
253
Maxy - Social Platform.html
Normal file
@@ -0,0 +1,253 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user