| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Twitter Clone - Built with anycoder</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary: #1d9bf0; |
| --primary-hover: #1a8cd8; |
| --bg-color: #ffffff; |
| --bg-secondary: #f7f9f9; |
| --bg-tertiary: #eff3f4; |
| --text-primary: #0f1419; |
| --text-secondary: #536471; |
| --text-tertiary: #8b98a5; |
| --border-color: #eff3f4; |
| --like-color: #f91880; |
| --retweet-color: #00ba7c; |
| --shadow: 0 1px 3px rgba(0,0,0,0.08); |
| --hover-bg: rgba(29, 155, 240, 0.1); |
| --sidebar-width: 275px; |
| --right-sidebar-width: 350px; |
| } |
| |
| [data-theme="dark"] { |
| --bg-color: #000000; |
| --bg-secondary: #16181c; |
| --bg-tertiary: #1d1f23; |
| --text-primary: #e7e9ea; |
| --text-secondary: #8b98a5; |
| --text-tertiary: #71767b; |
| --border-color: #2f3336; |
| --shadow: 0 1px 3px rgba(0,0,0,0.3); |
| --hover-bg: rgba(29, 155, 240, 0.15); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
| } |
| |
| body { |
| background-color: var(--bg-color); |
| color: var(--text-primary); |
| min-height: 100vh; |
| transition: background-color 0.3s, color 0.3s; |
| } |
| |
| |
| .container { |
| display: flex; |
| max-width: 1300px; |
| margin: 0 auto; |
| } |
| |
| |
| .sidebar { |
| width: var(--sidebar-width); |
| padding: 20px; |
| position: fixed; |
| height: 100vh; |
| border-right: 1px solid var(--border-color); |
| display: flex; |
| flex-direction: column; |
| transition: background-color 0.3s, border-color 0.3s; |
| } |
| |
| .logo { |
| padding: 12px; |
| border-radius: 50%; |
| width: 50px; |
| height: 50px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-bottom: 20px; |
| cursor: pointer; |
| transition: background-color 0.2s; |
| } |
| |
| .logo:hover { |
| background-color: var(--hover-bg); |
| } |
| |
| .logo i { |
| color: var(--primary); |
| font-size: 28px; |
| } |
| |
| .nav-item { |
| display: flex; |
| align-items: center; |
| padding: 15px 12px; |
| border-radius: 30px; |
| cursor: pointer; |
| transition: background-color 0.2s; |
| margin-bottom: 5px; |
| text-decoration: none; |
| color: var(--text-primary); |
| } |
| |
| .nav-item:hover { |
| background-color: var(--hover-bg); |
| } |
| |
| .nav-item i { |
| font-size: 26px; |
| margin-right: 20px; |
| width: 26px; |
| } |
| |
| .nav-item span { |
| font-size: 20px; |
| font-weight: 500; |
| } |
| |
| .nav-item.active { |
| color: var(--primary); |
| } |
| |
| .tweet-btn { |
| background-color: var(--primary); |
| color: white; |
| border: none; |
| padding: 15px 32px; |
| border-radius: 30px; |
| font-size: 17px; |
| font-weight: 700; |
| cursor: pointer; |
| margin-top: 20px; |
| transition: background-color 0.2s; |
| width: 90%; |
| } |
| |
| .tweet-btn:hover { |
| background-color: var(--primary-hover); |
| } |
| |
| .sidebar-footer { |
| margin-top: auto; |
| padding: 12px; |
| border-radius: 30px; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| transition: background-color 0.2s; |
| } |
| |
| .sidebar-footer:hover { |
| background-color: var(--hover-bg); |
| } |
| |
| .user-avatar { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-weight: 600; |
| } |
| |
| .user-info { |
| flex: 1; |
| } |
| |
| .user-info .name { |
| font-weight: 700; |
| font-size: 15px; |
| } |
| |
| .user-info .handle { |
| color: var(--text-secondary); |
| font-size: 14px; |
| } |
| |
| .sidebar-footer i { |
| font-size: 18px; |
| } |
| |
| |
| .main-feed { |
| flex: 1; |
| margin-left: var(--sidebar-width); |
| margin-right: var(--right-sidebar-width); |
| border-right: 1px solid var(--border-color); |
| min-height: 100vh; |
| transition: background-color 0.3s, border-color 0.3s; |
| } |
| |
| .feed-header { |
| position: sticky; |
| top: 0; |
| background-color: var(--bg-color); |
| backdrop-filter: blur(12px); |
| padding: 12px 16px; |
| border-bottom: 1px solid var(--border-color); |
| z-index: 100; |
| transition: background-color 0.3s; |
| } |
| |
| .feed-header h1 { |
| font-size: 20px; |
| font-weight: 700; |
| } |
| |
| .tab-container { |
| display: flex; |
| margin-top: 12px; |
| } |
| |
| .tab { |
| flex: 1; |
| text-align: center; |
| padding: 16px 0; |
| cursor: pointer; |
| position: relative; |
| color: var(--text-secondary); |
| transition: background-color 0.2s; |
| } |
| |
| .tab:hover { |
| background-color: var(--hover-bg); |
| } |
| |
| .tab.active { |
| color: var(--primary); |
| font-weight: 700; |
| } |
| |
| .tab.active::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 56px; |
| height: 4px; |
| background-color: var(--primary); |
| border-radius: 2px; |
| } |
| |
| |
| .tweet-box { |
| padding: 16px; |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| gap: 12px; |
| transition: border-color 0.3s; |
| } |
| |
| .tweet-box-avatar { |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-weight: 600; |
| font-size: 20px; |
| flex-shrink: 0; |
| } |
| |
| .tweet-box-content { |
| flex: 1; |
| } |
| |
| .tweet-input { |
| width: 100%; |
| border: none; |
| background: transparent; |
| color: var(--text-primary); |
| font-size: 20px; |
| resize: none; |
| outline: none; |
| min-height: 60px; |
| font-family: inherit; |
| } |
| |
| .tweet-input::placeholder { |
| color: var(--text-secondary); |
| } |
| |
| .tweet-box-actions { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding-top: 12px; |
| border-top: 1px solid var(--border-color); |
| } |
| |
| .tweet-icons { |
| display: flex; |
| gap: 4px; |
| } |
| |
| .tweet-icon { |
| width: 34px; |
| height: 34px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--primary); |
| cursor: pointer; |
| transition: background-color 0.2s; |
| } |
| |
| .tweet-icon:hover { |
| background-color: rgba(29, 155, 240, 0.1); |
| } |
| |
| .tweet-submit-area { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
| |
| .char-counter { |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| border: 2px solid var(--text-secondary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 12px; |
| color: var(--text-secondary); |
| opacity: 0; |
| transition: opacity 0.2s; |
| } |
| |
| .char-counter.warning { |
| border-color: #ffd400; |
| color: #ffd400; |
| opacity: 1; |
| } |
| |
| .char-counter.danger { |
| border-color: #f4212e; |
| color: #f4212e; |
| opacity: 1; |
| } |
| |
| .tweet-submit { |
| background-color: var(--primary); |
| color: white; |
| border: none; |
| padding: 10px 20px; |
| border-radius: 20px; |
| font-weight: 700; |
| cursor: pointer; |
| opacity: 0.5; |
| transition: opacity 0.2s, background-color 0.2s; |
| } |
| |
| .tweet-submit.active { |
| opacity: 1; |
| } |
| |
| .tweet-submit.active:hover { |
| background-color: var(--primary-hover); |
| } |
| |
| |
| .tweet { |
| padding: 16px; |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| gap: 12px; |
| cursor: pointer; |
| transition: background-color 0.2s; |
| } |
| |
| .tweet:hover { |
| background-color: var(--bg-secondary); |
| } |
| |
| .tweet-avatar { |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| flex-shrink: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-weight: 600; |
| font-size: 18px; |
| } |
| |
| .tweet-content { |
| flex: 1; |
| min-width: 0; |
| } |
| |
| .tweet-header { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| margin-bottom: 2px; |
| } |
| |
| .tweet-name { |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
| |
| .tweet-handle { |
| color: var(--text-secondary); |
| } |
| |
| .tweet-time { |
| color: var(--text-secondary); |
| } |
| |
| .tweet-text { |
| color: var(--text-primary); |
| line-height: 1.5; |
| margin: 8px 0; |
| white-space: pre-wrap; |
| } |
| |
| .tweet-image { |
| width: 100%; |
| border-radius: 16px; |
| margin-top: 12px; |
| border: 1px solid var(--border-color); |
| } |
| |
| .tweet-actions { |
| display: flex; |
| justify-content: space-between; |
| max-width: 425px; |
| margin-top: 12px; |
| } |
| |
| .action-btn { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: var(--text-secondary); |
| cursor: pointer; |
| padding: 8px; |
| margin: -8px; |
| border-radius: 50px; |
| transition: background-color 0.2s, color 0.2s; |
| } |
| |
| .action-btn.reply:hover { |
| color: var(--primary); |
| background-color: rgba(29, 155, 240, 0.1); |
| } |
| |
| .action-btn.retweet:hover { |
| color: var(--retweet-color); |
| background-color: rgba(0, 186, 124, 0.1); |
| } |
| |
| .action-btn.like:hover { |
| color: var(--like-color); |
| background-color: rgba(249, 24, 128, 0.1); |
| } |
| |
| .action-btn.share:hover { |
| color: var(--primary); |
| background-color: rgba(29, 155, 240, 0.1); |
| } |
| |
| .action-btn.liked { |
| color: var(--like-color); |
| } |
| |
| .action-btn.liked i { |
| animation: likeAnimation 0.3s ease; |
| } |
| |
| @keyframes likeAnimation { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.3); } |
| 100% { transform: scale(1); } |
| } |
| |
| .action-btn.retweeted { |
| color: var(--retweet-color); |
| } |
| |
| |
| .right-sidebar { |
| width: var(--right-sidebar-width); |
| padding: 20px; |
| position: fixed; |
| right: 0; |
| height: 100vh; |
| overflow-y: auto; |
| transition: background-color 0.3s; |
| } |
| |
| |
| .search-box { |
| background-color: var(--bg-tertiary); |
| border-radius: 30px; |
| padding: 12px 20px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| margin-bottom: 20px; |
| transition: background-color 0.3s; |
| } |
| |
| .search-box i { |
| color: var(--text-secondary); |
| } |
| |
| .search-box input { |
| background: transparent; |
| border: none; |
| color: var(--text-primary); |
| font-size: 15px; |
| width: 100%; |
| outline: none; |
| } |
| |
| .search-box input::placeholder { |
| color: var(--text-secondary); |
| } |
| |
| |
| .trending-box { |
| background-color: var(--bg-secondary); |
| border-radius: 20px; |
| padding: 16px; |
| margin-bottom: 20px; |
| transition: background-color 0.3s; |
| } |
| |
| .trending-box h2 { |
| font-size: 20px; |
| font-weight: 800; |
| margin-bottom: 16px; |
| } |
| |
| .trending-item { |
| padding: 12px 0; |
| cursor: pointer; |
| transition: background-color 0.2s; |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .trending-item:last-child { |
| border-bottom: none; |
| } |
| |
| .trending-item:hover { |
| background-color: var(--bg-tertiary); |
| } |
| |
| .trending-category { |
| font-size: 13px; |
| color: var(--text-secondary); |
| } |
| |
| .trending-name { |
| font-weight: 700; |
| margin: 2px 0; |
| } |
| |
| .trending-posts { |
| font-size: 13px; |
| color: var(--text-secondary); |
| } |
| |
| |
| .follow-box { |
| background-color: var(--bg-secondary); |
| border-radius: 20px; |
| padding: 16px; |
| transition: background-color 0.3s; |
| } |
| |
| .follow-box h2 { |
| font-size: 20px; |
| font-weight: 800; |
| margin-bottom: 16px; |
| } |
| |
| .follow-item { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 0; |
| cursor: pointer; |
| } |
| |
| .follow-item:hover { |
| background-color: var(--bg-tertiary); |
| margin: 0 -16px; |
| padding: 12px 16px; |
| } |
| |
| .follow-avatar { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-weight: 600; |
| } |
| |
| .follow-info { |
| flex: 1; |
| } |
| |
| .follow-name { |
| font-weight: 700; |
| font-size: 15px; |
| } |
| |
| .follow-handle { |
| color: var(--text-secondary); |
| font-size: 14px; |
| } |
| |
| .follow-btn { |
| background-color: var(--text-primary); |
| color: var(--bg-color); |
| border: none; |
| padding: 8px 16px; |
| border-radius: 20px; |
| font-weight: 700; |
| cursor: pointer; |
| transition: opacity 0.2s; |
| } |
| |
| .follow-btn:hover { |
| opacity: 0.9; |
| } |
| |
| |
| .theme-toggle { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| background-color: var(--primary); |
| color: white; |
| border: none; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 20px; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
| transition: transform 0.2s, background-color 0.2s; |
| z-index: 1000; |
| } |
| |
| .theme-toggle:hover { |
| transform: scale(1.1); |
| } |
| |
| |
| .mobile-menu { |
| display: none; |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background-color: var(--bg-color); |
| border-top: 1px solid var(--border-color); |
| padding: 8px 0; |
| z-index: 100; |
| justify-content: space-around; |
| } |
| |
| .mobile-menu-item { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 10px; |
| color: var(--text-secondary); |
| cursor: pointer; |
| } |
| |
| .mobile-menu-item i { |
| font-size: 24px; |
| } |
| |
| .mobile-menu-item.active { |
| color: var(--primary); |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .tweet { |
| animation: fadeIn 0.3s ease; |
| } |
| |
| |
| @media (max-width: 1024px) { |
| .right-sidebar { |
| display: none; |
| } |
| |
| .main-feed { |
| margin-right: 0; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .sidebar { |
| display: none; |
| } |
| |
| .main-feed { |
| margin-left: 0; |
| } |
| |
| .mobile-menu { |
| display: flex; |
| } |
| |
| body { |
| padding-bottom: 60px; |
| } |
| } |
| |
| |
| .modal-overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0, 0, 0, 0.5); |
| display: flex; |
| align-items: flex-start; |
| justify-content: center; |
| padding-top: 100px; |
| z-index: 1000; |
| opacity: 0; |
| visibility: hidden; |
| transition: opacity 0.2s, visibility 0.2s; |
| } |
| |
| .modal-overlay.active { |
| opacity: 1; |
| visibility: visible; |
| } |
| |
| .modal { |
| background-color: var(--bg-color); |
| border-radius: 20px; |
| width: 90%; |
| max-width: 600px; |
| max-height: 80vh; |
| overflow-y: auto; |
| transform: scale(0.9); |
| transition: transform 0.2s; |
| } |
| |
| .modal-overlay.active .modal { |
| transform: scale(1); |
| } |
| |
| .modal-header { |
| display: flex; |
| align-items: center; |
| padding: 16px; |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .modal-close { |
| background: none; |
| border: none; |
| color: var(--text-secondary); |
| font-size: 20px; |
| cursor: pointer; |
| padding: 8px; |
| border-radius: 50%; |
| transition: background-color 0.2s; |
| } |
| |
| .modal-close:hover { |
| background-color: var(--hover-bg); |
| } |
| |
| .modal-body { |
| padding: 16px; |
| } |
| |
| .reply-tweet { |
| padding-left: 60px; |
| border-left: 2px solid var(--border-color); |
| margin-left: 12px; |
| } |
| |
| |
| .empty-state { |
| text-align: center; |
| padding: 60px 20px; |
| color: var(--text-secondary); |
| } |
| |
| .empty-state i { |
| font-size: 48px; |
| margin-bottom: 16px; |
| color: var(--text-tertiary); |
| } |
| |
| .empty-state h3 { |
| color: var(--text-primary); |
| margin-bottom: 8px; |
| } |
| |
| |
| .toast { |
| position: fixed; |
| bottom: 80px; |
| left: 50%; |
| transform: translateX(-50%) translateY(100px); |
| background-color: var(--text-primary); |
| color: var(--bg-color); |
| padding: 12px 24px; |
| border-radius: 30px; |
| font-weight: 600; |
| opacity: 0; |
| transition: transform 0.3s, opacity 0.3s; |
| z-index: 1001; |
| } |
| |
| .toast.show { |
| transform: translateX(-50%) translateY(0); |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body data-theme="light"> |
| <div class="container"> |
| |
| <aside class="sidebar"> |
| <div class="logo"> |
| <i class="fa-brands fa-twitter"></i> |
| </div> |
| |
| <nav> |
| <a href="#" class="nav-item active"> |
| <i class="fa-solid fa-house"></i> |
| <span>Home</span> |
| </a> |
| <a href="#" class="nav-item"> |
| <i class="fa-solid fa-magnifying-glass"></i> |
| <span>Explore</span> |
| </a> |
| <a href="#" class="nav-item"> |
| <i class="fa-regular fa-bell"></i> |
| <span>Notifications</span> |
| </a> |
| <a href="#" class="nav-item"> |
| <i class="fa-regular fa-envelope"></i> |
| <span>Messages</span> |
| </a> |
| <a href="#" class="nav-item"> |
| <i class="fa-regular fa-bookmark"></i> |
| <span>Bookmarks</span> |
| </a> |
| <a href="#" class="nav-item"> |
| <i class="fa-regular fa-user"></i> |
| <span>Profile</span> |
| </a> |
| </nav> |
|
|
| <button class="tweet-btn" id="tweetBtn">Post</button> |
|
|
| <div class="sidebar-footer"> |
| <div class="user-avatar">A</div> |
| <div class="user-info"> |
| <div class="name">Alex User</div> |
| <div class="handle">@alexuser</div> |
| </div> |
| <i class="fa-solid fa-ellipsis"></i> |
| </div> |
| </aside> |
|
|
| |
| <main class="main-feed"> |
| <header class="feed-header"> |
| <h1>Home</h1> |
| <div class="tab-container"> |
| <div class="tab active">For you</div> |
| <div class="tab">Following</div> |
| </div> |
| </header> |
|
|
| |
| <div class="tweet-box"> |
| <div class="tweet-box-avatar">A</div> |
| <div class="tweet-box-content"> |
| <textarea class="tweet-input" placeholder="What is happening?!" id="tweetInput"></textarea> |
| <div class="tweet-box-actions"> |
| <div class="tweet-icons"> |
| <div class="tweet-icon"><i class="fa-regular fa-image"></i></div> |
| <div class="tweet-icon"><i class="fa-solid fa-gift"></i></div> |
| <div class="tweet-icon"><i class="fa-solid fa-list"></i></div> |
| <div class="tweet-icon"><i class="fa-regular fa-face-smile"></i></div> |
| <div class="tweet-icon"><i class="fa-regular fa-calendar"></i></div> |
| </div> |
| <div class="tweet-submit-area"> |
| <div class="char-counter" id="charCounter"></div> |
| <button class="tweet-submit" id="tweetSubmit">Post</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="tweetsContainer"> |
| |
| </div> |
| </main> |
|
|
| |
| <aside class="right-sidebar"> |
| <div class="search-box"> |
| <i class="fa-solid fa-magnifying-glass"></i> |
| <input type="text" placeholder="Search"> |
| </div> |
|
|
| <div class="trending-box"> |
| <h2>Trending</h2> |
| <div class="trending-item"> |
| <div class="trending-category">Technology · Trending</div> |
| <div class="trending-name">AI Revolution</div> |
| <div class="trending-posts">125K posts</div> |
| </div> |
| <div class="trending-item"> |
| <div class="trending-category">Sports · Trending</div> |
| <div class="trending-name">Super Bowl</div> |
| <div class="trending-posts">89K posts</div> |
| </div> |
| <div class="trending-item"> |
| <div class="trending-category">Entertainment · Trending</div> |
| <div class="trending-name">New Movie</div> |
| <div class="trending-posts">67K posts</div> |
| </div> |
| <div class="trending-item"> |
| <div class="trending-category">Business · Trending</div> |
| <div class="trending-name">Tech Stocks</div> |
| <div class="trending-posts">45K posts</div> |
| </div> |
| </div> |
|
|
| <div class="follow-box"> |
| <h2>Who to follow</h2> |
| <div class="follow-item"> |
| <div class="follow-avatar" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">T</div> |
| <div class="follow-info"> |
| <div class="follow-name">Tech Daily</div> |
| <div class="follow-handle">@techdaily</div> |
| </div> |
| <button class="follow-btn">Follow</button> |
| </div> |
| <div class="follow-item"> |
| <div class="follow-avatar" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">S</div> |
| <div class="follow-info"> |
| <div class="follow-name">Science Today</div> |
| <div class="follow-handle">@sciencetoday</div> |
| </div> |
| <button class="follow-btn">Follow</button> |
| </div> |
| <div class="follow-item"> |
| <div class="follow-avatar" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">D</div> |
| <div class="follow-info"> |
| <div class="follow-name">Design Pro</div> |
| <div class="follow-handle">@designpro</div> |
| </div> |
| <button class="follow-btn">Follow</button> |
| </div> |
| </div> |
| </aside> |
| </div> |
|
|
| |
| <nav class="mobile-menu"> |
| <div class="mobile-menu-item active"> |
| <i class="fa-solid fa-house"></i> |
| </div> |
| <div class="mobile-menu-item"> |
| <i class="fa-solid fa-magnifying-glass"></i> |
| </div> |
| <div class="mobile-menu-item"> |
| <i class="fa-regular fa-bell"></i> |
| </div> |
| <div class="mobile-menu-item"> |
| <i class="fa-regular fa-envelope"></i> |
| </div> |
| </nav> |
|
|
| |
| <button class="theme-toggle" id="themeToggle"> |
| <i class="fa-solid fa-moon"></i> |
| </button> |
|
|
| |
| <div class="toast" id="toast">Tweet posted!</div> |
|
|
| |
| <div class="modal-overlay" id="modalOverlay"> |
| <div class="modal"> |
| <div class="modal-header"> |
| <button class="modal-close" id="modalClose"> |
| <i class="fa-solid fa-xmark"></i> |
| </button> |
| </div> |
| <div class="modal-body"> |
| <div id="modalContent"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| let tweets = [ |
| { |
| id: 1, |
| name: 'TechCrunch', |
| handle: '@TechCrunch', |
| avatar: 'T', |
| avatarColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', |
| text: '🚀 Breaking: AI just achieved a major milestone! The future of technology is here. Stay tuned for more updates on this groundbreaking development.', |
| time: '2h', |
| likes: 2453, |
| retweets: 892, |
| replies: 156, |
| liked: false, |
| retweeted: false |
| }, |
| { |
| id: 2, |
| name: 'Elon Musk', |
| handle: '@elonmusk', |
| avatar: 'E', |
| avatarColor: 'linear-gradient(135deg, #434343 0%, #000000 100%)', |
| text: 'The first tweet from the future. What a time to be alive! 🚀', |
| time: '4h', |
| likes: 15642, |
| retweets: 8934, |
| replies: 2341, |
| liked: false, |
| retweeted: false |
| }, |
| { |
| id: 3, |
| name: 'Design Daily', |
| handle: '@designdaily', |
| avatar: 'D', |
| avatarColor: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', |
| text: 'Just released a new design system! Check out the link in bio for more details. Great design is about solving problems elegantly. 🎨', |
| time: '6h', |
| likes: 892, |
| retweets: 234, |
| replies: 45, |
| liked: false, |
| retweeted: false |
| } |
| ]; |
| |
| |
| const tweetInput = document.getElementById('tweetInput'); |
| const tweetSubmit = document.getElementById('tweetSubmit'); |
| const charCounter = document.getElementById('charCounter'); |
| const tweetsContainer = document.getElementById('tweetsContainer'); |
| const themeToggle = document.getElementById('themeToggle'); |
| const toast = document.getElementById('toast'); |
| const modalOverlay = document.getElementById('modalOverlay'); |
| const modalClose = document.getElementById('modalClose'); |
| const modalContent = document.getElementById('modalContent'); |
| const tweetBtn = document.getElementById('TweetBtn'); |
| const tabs = document.querySelectorAll('.tab'); |
| |
| |
| tweetInput.addEventListener('input', function() { |
| const length = this.value.length; |
| const remaining = 280 - length; |
| |
| charCounter.textContent = remaining; |
| charCounter.classList.remove('warning', 'danger'); |
| |
| if (remaining <= 20 && remaining > 0) { |
| charCounter.classList.add('warning'); |
| } else if (remaining <= 0) { |
| charCounter.classList.add('danger'); |
| } |
| |
| charCounter.style.opacity = remaining <= 20 ? '1' : '0'; |
| tweetSubmit.classList.toggle('active', length > 0 && length <= 280); |
| }); |
| |
| |
| tweetSubmit.addEventListener('click', function() { |
| const text = tweetInput.value.trim(); |
| if (text && text.length <= 280) { |
| const newTweet = { |
| id: Date.now(), |
| name: 'Alex User', |
| handle: '@alexuser', |
| avatar: 'A', |
| avatarColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', |
| text: text, |
| time: 'Just now', |
| likes: 0, |
| retweets: 0, |
| replies: 0, |
| liked: false, |
| retweeted: false |
| }; |
| |
| tweets.unshift(newTweet); |
| renderTweets(); |
| tweetInput.value = ''; |
| tweetSubmit.classList.remove('active'); |
| charCounter.style.opacity = '0'; |
| showToast('Tweet posted!'); |
| } |
| }); |
| |
| |
| function renderTweets() { |
| tweetsContainer.innerHTML = tweets.map(tweet => ` |
| <div class="tweet" data-id="${tweet.id}"> |
| <div class="tweet-avatar" style="background: ${tweet.avatarColor}">${tweet.avatar}</div> |
| <div class="tweet-content"> |
| <div class="tweet-header"> |
| <span class="tweet-name">${tweet.name}</span> |
| <span class="tweet-handle">${tweet.handle}</span> |
| <span class="tweet-time">· ${tweet.time}</span> |
| </div> |
| <div class="tweet-text">${tweet.text}</div> |
| <div class="tweet-actions"> |
| <div class="action-btn reply"> |
| <i class="fa-regular fa-comment"></i> |
| <span>${tweet.replies}</span> |
| </div> |
| <div class="action-btn retweet ${tweet.retweeted ? 'retweeted' : ''}" onclick="retweet(${tweet.id})"> |
| <i class="fa-solid fa-retweet"></i> |
| <span>${tweet.retweets}</span> |
| </div> |
| <div class="action-btn like ${tweet.liked ? 'liked' : ''}" onclick="like(${tweet.id})"> |
| <i class="fa-${tweet.liked ? 'solid' : 'regular'} fa-heart"></i> |
| <span>${tweet.likes}</span> |
| </div> |
| <div class="action-btn share"> |
| <i class="fa-solid fa-share-nodes"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| |
| function like(id) { |
| const tweet = tweets.find(t => t.id === id); |
| if (tweet) { |
| tweet.liked = !tweet.liked; |
| tweet.likes += tweet.liked ? 1 : -1; |
| renderTweets(); |
| } |
| } |
| |
| |
| function retweet(id) { |
| const tweet = tweets.find(t => t.id === id); |
| if (tweet) { |
| tweet.retweeted = !tweet.retweeted; |
| tweet.retweets += tweet.retweeted ? 1 : -1; |
| renderTweets(); |
| } |
| } |
| |
| |
| tabs.forEach(tab => { |
| tab.addEventListener('click', function() { |
| tabs.forEach(t => t.classList.remove('active')); |
| this.classList.add('active'); |
| }); |
| }); |
| |
| |
| themeToggle.addEventListener('click', function() { |
| const body = document.body; |
| const isDark = body.getAttribute('data-theme') === 'dark'; |
| |
| body.setAttribute('data-theme', isDark ? 'light' : 'dark'); |
| this.innerHTML = isDark ? '<i class="fa-solid fa-moon"></i>' : '<i class="fa-solid fa-sun"></i>'; |
| }); |
| |
| |
| function showToast(message) { |
| toast.textContent = message; |
| toast.classList.add('show'); |
| setTimeout(() => { |
| toast.classList.remove('show'); |
| }, 3000); |
| } |
| |
| |
| modalClose.addEventListener('click', function() { |
| modalOverlay.classList.remove('active'); |
| }); |
| |
| modalOverlay.addEventListener('click', function(e) { |
| if (e.target === modalOverlay) { |
| modalOverlay.classList.remove('active'); |
| } |
| }); |
| |
| |
| document.querySelectorAll('.follow-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| this.textContent = this.textContent === 'Follow' ? 'Following' : 'Follow'; |
| this.style.backgroundColor = this.textContent === 'Following' ? 'var(--text-primary)' : ''; |
| this.style.color = this.textContent === 'Following' ? 'var(--bg-color)' : ''; |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.mobile-menu-item').forEach(item => { |
| item.addEventListener('click', function() { |
| document.querySelectorAll('.mobile-menu-item').forEach(i => i.classList.remove('active')); |
| this.classList.add('active'); |
| }); |
| }); |
| |
| |
| renderTweets(); |
| |
| |
| tweetInput.addEventListener('keydown', function(e) { |
| if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { |
| tweetSubmit.click(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
