Create Post Section - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script src="https://kit.fontawesome.com/f2c67a1c6b.js" crossorigin="anonymous"></script>
  <title>Create Post Section</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .create-post-container {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 400px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease-in-out;
    }
    .create-post-container:hover {
      transform: scale(1.05);
    }
    .header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .profile-pic {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .input-container {
      display: flex;
      flex-direction: column;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 10px;
      background: #fafafa;
      transition: background 0.3s ease;
    }
    .input-container:focus-within {
      background: #fff;
      border-color: #007bff;
    }
    .input-container textarea {
      border: none;
      outline: none;
      resize: none;
      width: 100%;
      height: 60px;
      font-size: 16px;
    }
    .emoji-picker, .post-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }
    .emoji-picker button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 24px;
      transition: transform 0.3s ease;
    }
    .emoji-picker button:hover {
      transform: scale(1.2);
    }
    .post-actions button {
      background: #007bff;
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.3s ease;
    }
    .post-actions button:hover {
      background: #0056b3;
    }
    .char-counter {
      font-size: 14px;
      color: #999;
    }
    .icons {
      display: flex;
      gap: 10px;
    }
    .icons i {
      font-size: 20px;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    .icons i:hover {
      color: #007bff;
    }
  </style>
</head>
<body>
  <div class="create-post-container">
    <div class="header">
      <img src="profile.png" alt="Profile Picture" class="profile-pic">
      <span>What's on your mind?</span>
    </div>
    <div class="input-container">
      <textarea placeholder="Share something..."></textarea>
    </div>
    <div class="emoji-picker">
      <button onclick="addEmoji('😊')">😊</button>
      <button onclick="addEmoji('😂')">😂</button>
      <button onclick="addEmoji('❤️')">❤️</button>
      <button onclick="addEmoji('👍')">👍</button>
      <button onclick="addEmoji('🎉')">🎉</button>
    </div>
    <div class="post-actions">
      <div class="icons">
        <i class="fa fa-image"></i>
        <i class="fa fa-video"></i>
        <i class="fa fa-map-marker-alt"></i>
      </div>
      <button onclick="submitPost()">Post</button>
    </div>
    <div class="char-counter">0/280</div>
  </div>
  <script>
    const textarea = document.querySelector('.input-container textarea');
    const charCounter = document.querySelector('.char-counter');
    textarea.addEventListener('input', () => {
      charCounter.textContent = `${textarea.value.length}/280`;
    });
    function addEmoji(emoji) {
      textarea.value += emoji;
      textarea.dispatchEvent(new Event('input'));
    }
    function submitPost() {
      if (textarea.value.trim().length > 0) {
        alert('Post submitted!');
        textarea.value = '';
        charCounter.textContent = '0/280';
      } else {
        alert('Please write something before posting.');
      }
    }
  </script>
  
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>