ByMAS.TOP | Просмотр архива

Просмотр архива Drag and Drop
Файл drag.html
Вес запакованого файла 2.1Kb (2164 b)
Вес распакованого файла: 7.4Kb (7574 b)
Метод сжатия: 8
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag and Drop</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
  <style>
    body {
      background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
      min-height: 100vh;
      margin: 0;
      font-family: 'Montserrat', Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .form-container {
      width: 350px;
      margin: 40px auto 0 auto;
      background: #fff;
      border-radius: 16px;
      padding: 32px 24px 24px 24px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .form-container label {
      font-weight: 600;
      color: #1976d2;
      font-size: 16px;
    }
    textarea {
      width: 100%;
      min-height: 80px;
      resize: vertical;
      margin-bottom: 16px;
      font-size: 15px;
      padding: 10px;
      border-radius: 8px;
      border: 1.5px solid #e3e3e3;
      background: #f7faff;
      transition: border-color 0.2s;
      font-family: 'Montserrat', Arial, sans-serif;
      box-sizing: border-box;
      max-width: 100%;
      display: block;
    }
    textarea:focus {
      border-color: #1976d2;
      outline: none;
    }
    .button-row {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin-bottom: 0.5em;
    }
    button {
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      background: #1976d2;
      color: #fff;
      font-size: 15px;
      font-family: 'Montserrat', Arial, sans-serif;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
      transition: background 0.2s, box-shadow 0.2s;
    }
    button:disabled {
      background: #aaa;
      cursor: not-allowed;
    }
    button:hover:not(:disabled) {
      background: #125ea7;
      box-shadow: 0 4px 16px rgba(25, 118, 210, 0.13);
    }
    #drop-area {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      border: 2.5px dashed #1976d2;
      border-radius: 16px;
      background: #f4faff;
      color: #1976d2;
      font-size: 18px;
      box-shadow: 0 2px 12px rgba(25, 118, 210, 0.04);
      z-index: 10;
      transition: border-color 0.3s, background 0.3s, color 0.3s;
      display: none;
    }
    #drop-area.active {
      display: flex;
    }
    #drop-area.dragover {
      border-color: #0d47a1;
      color: #0d47a1;
      background: #e3f0ff;
    }
    @keyframes pulse {
      from { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.13); }
      to { box-shadow: 0 0 16px 8px rgba(25, 118, 210, 0.13); }
    }
    #status {
      text-align: center;
      margin-top: 20px;
      font-family: 'Montserrat', Arial, sans-serif;
      color: #1976d2;
      font-size: 16px;
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      margin: 0;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.85);
      z-index: 20;
    }
    #status.active {
      display: flex;
    }
    .file-info {
      margin: 14px 0 0 0;
      font-size: 15px;
      color: #1976d2;
      text-align: center;
      font-weight: 500;
      letter-spacing: 0.2px;
    }
    @media (max-width: 500px) {
      .form-container {
        width: 98vw;
        padding: 12px 2vw 12px 2vw;
        margin: 0;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
      }
      #drop-area, #status {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        font-size: 15px;
        padding: 0 8px;
      }
      textarea {
        min-height: 60px;
        font-size: 14px;
        padding: 8px;
      }
      .button-row {
        flex-direction: column;
        gap: 8px;
      }
      button {
        width: 100%;
        font-size: 15px;
        padding: 10px 0;
        border-radius: 6px;
      }
      .file-info {
        font-size: 13px;
      }
    }
  </style>
</head>

<body>
  <div class="form-container">
    <form id="comment-form" method="post" enctype="multipart/form-data" action="drop.php">
      <label for="comment">Комментарий:</label><br>
      <textarea id="comment" name="comment" required placeholder="Введите ваш комментарий..."></textarea><br>
      <div class="button-row">
        <button type="button" id="attach-btn">📎 Прикрепить файл</button>
        <input type="file" id="file-input" name="file" style="display:none">
        <button type="submit" id="send-btn">Отправить</button>
      </div>
    </form>
    <div id="drop-area">
      <span style="font-size: 32px; margin-right: 12px;">⬇️</span> Перетащите файл сюда
    </div>
    <div class="file-info" id="file-info"></div>
    <div id="status"></div>
  </div>
  <script>
    const dropArea = document.getElementById('drop-area');
    const fileInfo = document.getElementById('file-info');
    const status = document.getElementById('status');
    let dragCounter = 0;

    document.body.addEventListener('dragenter', (e) => {
      e.preventDefault();
      dragCounter++;
      if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files')) {
        dropArea.classList.add('active');
      }
    });

    document.body.addEventListener('dragover', (e) => {
      e.preventDefault();
      if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files')) {
        dropArea.classList.add('active');
      }
    });

    document.body.addEventListener('dragleave', (e) => {
      dragCounter--;
      if (dragCounter === 0) {
        dropArea.classList.remove('active');
      }
    });

    dropArea.addEventListener('dragover', (e) => {
      e.preventDefault();
      dropArea.classList.add('dragover');
    });

    dropArea.addEventListener('dragleave', (e) => {
      dropArea.classList.remove('dragover');
    });

    dropArea.addEventListener('drop', (e) => {
      e.preventDefault();
      dragCounter = 0;
      dropArea.classList.remove('active', 'dragover');
      const files = e.dataTransfer.files;
      if (files.length > 0) {
        fileInfo.textContent = `Файл: ${files[0].name}`;
        fileInput.files = files;
      }
    });

    document.body.addEventListener('drop', (e) => {
      e.preventDefault();
      dragCounter = 0;
      dropArea.classList.remove('active', 'dragover');
    });

    const attachBtn = document.getElementById('attach-btn');
    const fileInput = document.getElementById('file-input');

    attachBtn.addEventListener('click', (e) => {
      e.preventDefault();
      fileInput.click();
    });

    fileInput.addEventListener('change', (e) => {
      if (fileInput.files.length > 0) {
        fileInfo.textContent = `Файл: ${fileInput.files[0].name}`;
      }
    });

    document.addEventListener('paste', function(e) {
      if (e.clipboardData && e.clipboardData.files.length > 0) {
        const files = e.clipboardData.files;
        fileInput.files = files;
        fileInfo.textContent = `Файл: ${files[0].name}`;
      }
    });
  </script>
</body>

</html>
Назад К файлу Главная
Вход
