G

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>gj Storage</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f4f7fa;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #2d3e50;
      color: white;
      padding: 20px;
      text-align: center;
    }

    main {
      max-width: 800px;
      margin: 30px auto;
      padding: 20px;
      background: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      border-radius: 10px;
    }

    h1 {
      margin-top: 0;
    }

    input[type="file"] {
      display: block;
      margin: 20px 0;
    }

    .file-preview {
      margin-top: 20px;
    }

    .file-item {
      background: #f0f0f0;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
    }

    .file-item a {
      text-decoration: none;
      color: #007bff;
    }

    .file-item img,
    .file-item video,
    .file-item iframe {
      max-width: 100%;
      margin-top: 10px;
      border-radius: 5px;
    }

    .hidden {
      display: none;
    }

    #loginScreen {
      text-align: center;
      padding: 100px 20px;
    }

    input[type="password"] {
      padding: 10px;
      font-size: 16px;
      width: 200px;
      margin-top: 10px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      margin-top: 10px;
      cursor: pointer;
    }

    .error {
      color: red;
      margin-top: 10px;
    }
  </style>
</head>
<body>

  <div id="loginScreen">
    <h2>Enter Password to Access Your Storage</h2>
    <input type="password" id="passwordInput" placeholder="Enter password" />
    <br>
    <button onclick="checkPassword()">Login</button>
    <p class="error" id="errorMsg" style="display: none;">Incorrect password</p>
  </div>

  <div id="siteContent" class="hidden">
    <header>
      <h1>GJ Storage</h1>
    </header>

    <main>
      <h2>Upload Any File</h2>
      <input type="file" id="fileInput" />
      <div class="file-preview" id="filePreview"></div>
    </main>
  </div>

  <script>
    const PASSWORD = "GJ@72GJ@72"; // Set your password here

    function checkPassword() {
      const input = document.getElementById('passwordInput').value;
      if (input === PASSWORD) {
        document.getElementById('loginScreen').style.display = 'none';
        document.getElementById('siteContent').classList.remove('hidden');
      } else {
        document.getElementById('errorMsg').style.display = 'block';
      }
    }

    const fileInput = document.getElementById('fileInput');
    const filePreview = document.getElementById('filePreview');

    fileInput.addEventListener('change', () => {
      const file = fileInput.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function (e) {
        const fileItem = document.createElement('div');
        fileItem.className = 'file-item';

        // Download link
        const link = document.createElement('a');
        link.href = e.target.result;
        link.download = file.name;
        link.textContent = `📄 ${file.name}`;
        fileItem.appendChild(link);

        // Preview for images/videos/PDFs
        if (file.type.startsWith('image/')) {
          const img = document.createElement('img');
          img.src = e.target.result;
          fileItem.appendChild(img);
        } else if (file.type.startsWith('video/')) {
          const video = document.createElement('video');
          video.src = e.target.result;
          video.controls = true;
          fileItem.appendChild(video);
        } else if (file.type === 'application/pdf') {
          const iframe = document.createElement('iframe');
          iframe.src = e.target.result;
          iframe.width = "100%";
          iframe.height = "400px";
          fileItem.appendChild(iframe);
        }

        filePreview.appendChild(fileItem);
      };

      reader.readAsDataURL(file);
    });
  </script>

</body>
</html>

Comments

Post a Comment