MatrixUploader/index.html at main · MatinHSDeveloper/MatrixUploader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ماتریکس آپلودر | MatrixUploader</title>
  <link rel="icon" type="image/jpg" href="upload.png" />
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      margin: 0;
      overflow-x: hidden;
      font-family: 'Vazir', sans-serif;
    }
    canvas {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      filter: blur(2px);
      opacity: 0.7;
    }
    @font-face {
      font-family: 'Vazir';
      src: url('https://cdn.fontcdn.ir/Fonts/Vazir/Vazir.woff2') format('woff2');
    }
    .progress-container {
      height: 8px;
      background-color: #374151;
      border-radius: 9999px;
      overflow: hidden;
      margin-top: 1rem;
    }
    .progress-bar {
      height: 100%;
      background-color: #10B981;
      width: 0;
      transition: width 0.3s ease;
    }
  </style>
</head>
<body class="bg-black text-white flex items-center justify-center min-h-screen">
  <canvas id="matrix"></canvas>
  <div class="container mx-auto p-4 max-w-md">
    <h1 class="text-3xl font-bold text-center mb-6 text-green-400">ماتریکس آپلودر</h1>
    <div class="bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
      <input type="file" id="fileInput" class="block w-full text-sm text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-green-600 file:text-white hover:file:bg-green-700 mb-4">
      <button id="uploadBtn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">آپلود</button>
      <div class="progress-container mt-4">
        <div id="progressBar" class="progress-bar"></div>
      </div>
      <p id="status" class="mt-2 text-center text-gray-300"></p>
      <p id="progressText" class="mt-2 text-center text-green-400 font-semibold"></p>
    </div>
  </div>
  <script>
    // Matrix Background
    const canvas = document.getElementById('matrix');
    const ctx = canvas.getContext('2d');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    const fontSize = 14;
    const columns = canvas.width / fontSize;
    const drops = Array(Math.floor(columns)).fill(1);

    function draw() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#0F0';
      ctx.font = fontSize + 'px monospace';
      for (let i = 0; i < drops.length; i++) {
        const text = chars.charAt(Math.floor(Math.random() * chars.length));
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
        drops[i]++;
      }
    }
    setInterval(draw, 33);

    window.addEventListener('resize', () => {
      canvas.height = window.innerHeight;
      canvas.width = window.innerWidth;
    });

    // File Upload Handling
    const fileInput = document.getElementById('fileInput');
    const uploadBtn = document.getElementById('uploadBtn');
    const status = document.getElementById('status');
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');

    uploadBtn.addEventListener('click', () => {
      const file = fileInput.files[0];
      if (!file) {
        status.textContent = 'لطفاً یک فایل انتخاب کنید.';
        return;
      }

      // Check file extension
      const forbiddenExtensions = ['.php', '.html'];
      const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
      if (forbiddenExtensions.includes(fileExtension)) {
        status.textContent = 'فایل‌های PHP و HTML مجاز نیستند.';
        return;
      }

      const formData = new FormData();
      formData.append('file', file);

      status.textContent = `در حال آپلود ${file.name}...`;
      progressText.textContent = '0%';
      progressBar.style.width = '0%';

      const xhr = new XMLHttpRequest();

      xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
          const percentComplete = Math.round((event.loaded / event.total) * 100);
          progressBar.style.width = `${percentComplete}%`;
          progressText.textContent = `${percentComplete}%`;
        }
      });

      xhr.open('POST', 'upload.php', true);
      xhr.responseType = 'json';

      xhr.onload = () => {
        if (xhr.status === 200) {
          const result = xhr.response;
          if (result.message) {
            status.textContent = result.message;
            progressBar.style.width = '100%';
            progressText.textContent = '100%';
          } else {
            status.textContent = result.error || 'خطا در آپلود فایل.';
            progressBar.style.width = '0%';
            progressText.textContent = '';
          }
        } else {
          status.textContent = 'خطا در ارتباط با سرور.';
          progressBar.style.width = '0%';
          progressText.textContent = '';
        }
      };

      xhr.onerror = () => {
        status.textContent = 'خطا در ارتباط با سرور. لطفاً دوباره تلاش کنید.';
        progressBar.style.width = '0%';
        progressText.textContent = '';
      };

      xhr.send(formData);
    });
  </script>
</body>

</html>