Pic Post - 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>PicPost</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .picpost-container {
      width: 500px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      text-align: center;
    }
    .picpost-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    .picpost-profile {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .picpost-input {
      width: 100%;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 10px;
      font-size: 14px;
      resize: none;
    }
    .picpost-drag-drop {
      margin-top: 10px;
      padding: 20px;
      border: 2px dashed #ddd;
      border-radius: 5px;
      background: #fafafa;
      cursor: pointer;
    }
    .picpost-drag-drop.drag-over {
      border-color: #007bff;
      background: #e0f7ff;
    }
    .picpost-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
    }
    .picpost-actions button {
      background: #007bff;
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .picpost-actions button:hover {
      background: #0056b3;
    }
    .picpost-emoji-picker button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 22px;
      transition: transform 0.3s ease;
    }
    .picpost-emoji-picker button:hover {
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="picpost-container">
    <div class="picpost-header">
      <img src="profile.png" alt="Profile Picture" class="picpost-profile">
      <textarea class="picpost-input" placeholder="Share your thoughts..."></textarea>
    </div>
    <div class="picpost-drag-drop" id="dragDropArea">
      Drag & Drop Images Here or Click to Upload
    </div>
    <div class="picpost-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="picpost-actions">
      <div class="icons">
        <i class="fa fa-video"></i>
        <i class="fa fa-map-marker-alt"></i>
      </div>
      <button onclick="submitPost()">Post</button>
    </div>
  </div>
  <script>
    const textarea = document.querySelector('.picpost-input');
    const dragDropArea = document.getElementById('dragDropArea');
    dragDropArea.addEventListener('dragover', (event) => {
      event.preventDefault();
      dragDropArea.classList.add('drag-over');
    });
    dragDropArea.addEventListener('dragleave', () => {
      dragDropArea.classList.remove('drag-over');
    });
    dragDropArea.addEventListener('drop', (event) => {
      event.preventDefault();
      dragDropArea.classList.remove('drag-over');
      const files = event.dataTransfer.files;
      for (const file of files) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const img = document.createElement('img');
          img.src = e.target.result;
          img.style.maxWidth = '100%';
          img.style.marginTop = '10px';
          dragDropArea.appendChild(img);
        };
        reader.readAsDataURL(file);
      }
    });
    dragDropArea.addEventListener('click', () => {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = 'image/*';
      fileInput.multiple = true;
      fileInput.addEventListener('change', () => {
        const files = fileInput.files;
        for (const file of files) {
          const reader = new FileReader();
          reader.onload = (e) => {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.maxWidth = '100%';
            img.style.marginTop = '10px';
            dragDropArea.appendChild(img);
          };
          reader.readAsDataURL(file);
        }
      });
      fileInput.click();
    });
    function addEmoji(emoji) {
      textarea.value += emoji;
      textarea.focus();
    }
    function submitPost() {
      if (textarea.value.trim().length > 0) {
        alert('Post submitted!');
        textarea.value = '';
        dragDropArea.innerHTML = 'Drag & Drop Images Here or Click to Upload';
      } else {
        alert('Please write something before posting.');
      }
    }
  </script>
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>