<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>SkyDrop - Limitless Cloud</title>
      <script src="https://cdn.tailwindcss.com"></script>
      <style>
         @keyframes gradientFlow {
         0% { background-position: 0% 50%; }
         50% { background-position: 100% 50%; }
         100% { background-position: 0% 50%; }
         }
         @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
         }
         body {
         background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
         background-size: 400% 400%;
         animation: gradientFlow 15s ease infinite;
         }
         .glass-morphism {
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(20px);
         border: 1px solid rgba(255, 255, 255, 0.125);
         }
         .neon-border {
         box-shadow: 
         0 0 10px rgba(48, 43, 99, 0.6),
         0 0 20px rgba(15, 12, 41, 0.4),
         inset 0 0 15px rgba(255, 255, 255, 0.1);
         }
         .loader {
         border-top-color: transparent;
         animation: spin 1s linear infinite;
         }
      </style>
   </head>
   <body class="min-h-screen flex items-center justify-center p-4 text-white">
      <div class="glass-morphism neon-border rounded-3xl w-full max-w-md p-8 shadow-2xl relative overflow-hidden">
         <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 animate-pulse"></div>
         <div class="text-center mb-8">
            <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500 mb-2">SkyDrop</h1>
            <p class="text-gray-300 text-sm">即時クラウド共有</p>
         </div>
         <div class="mb-6">
            <div id="drop-zone" class="flex items-center justify-center w-full p-6 border-2 border-dashed border-purple-500 rounded-xl cursor-pointer hover:bg-white/10 transition duration-300">
               <div id="fileDetails" class="text-sm text-gray-300 hidden flex items-center justify-center">
                  <div id="fileThumbnailContainer" class="mr-4">
                     <img id="fileThumbnail" class="hidden mt-4" alt="Thumbnail" style="max-width: 100px; max-height: 100px; object-fit: cover;" />
                  </div>
                  <div id="fileInfo">
                     <p id="fileName"></p>
                     <p id="fileSize"></p>
                     <p id="fileType"></p>
                  </div>
               </div>
               <div id="fileLabel" class="text-gray-300">ファイルをここにドラッグ&ドロップ、またはクリックでアップロード</div>
               <input type="file" id="fileInput" class="hidden" />
            </div>
         </div>
         <button id="uploadButton" class="w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white py-3 rounded-xl hover:from-purple-700 hover:to-blue-600 transition duration-300 transform hover:scale-105 flex items-center justify-center space-x-2 mb-6">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
            </svg>
            <span>クラウドにアップロード</span>
         </button>
         <div id="loaderContainer" class="hidden flex justify-center items-center mb-6">
            <div class="loader border-4 border-white/50 border-t-white/100 h-10 w-10 rounded-full"></div>
         </div>
         <div id="resultContainer" class="hidden bg-white/5 rounded-xl p-4">
            <div class="mb-4">
               <label class="text-xs text-gray-400 mb-1 block">ダウンロードリンク</label>
               <input type="text" id="downloadUrl" readonly class="w-full bg-white/10 text-white p-2 rounded-lg border border-white/20 cursor-text">
            </div>
            <button id="copyButton" class="w-full bg-gradient-to-r from-green-500 to-teal-500 text-white py-3 rounded-xl hover:from-green-600 hover:to-teal-600 transition duration-300 transform hover:scale-105 flex items-center justify-center space-x-2">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
               </svg>
               <span>リンクをコピー</span>
            </button>
         </div>
         <span id="created" class="text-gray-300">created by <a href="https://x.com/4kuck"><u>@4kuck</u></a></span>
      </div>
      <script>
         document.addEventListener('DOMContentLoaded', function() {
             const dropZone = document.getElementById('drop-zone');
             const fileInput = document.getElementById('fileInput');
             const uploadButton = document.getElementById('uploadButton');
             const loaderContainer = document.getElementById('loaderContainer');
             const resultContainer = document.getElementById('resultContainer');
             const downloadUrlInput = document.getElementById('downloadUrl');
             const copyButton = document.getElementById('copyButton');
             const fileDetails = document.getElementById('fileDetails');
             const fileThumbnail = document.getElementById('fileThumbnail');
             const fileLabel = document.getElementById('fileLabel');
             const fileName = document.getElementById('fileName');
             const fileSize = document.getElementById('fileSize');
             const fileType = document.getElementById('fileType');
         
             
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
                 dropZone.addEventListener(event, e => e.preventDefault());
                 dropZone.addEventListener(event, e => e.stopPropagation());
             });
         
             // ドラッグ中のスタイルを追加
             dropZone.addEventListener('dragover', () => dropZone.classList.add('bg-white/20'));
             dropZone.addEventListener('dragleave', () => dropZone.classList.remove('bg-white/20'));
         
             dropZone.addEventListener('drop', (event) => {
             dropZone.classList.remove('bg-white/20');
             const files = event.dataTransfer.files;
             if (files.length > 0) {
                 // ドロップされたファイルを fileInput に設定する
                 const dataTransfer = new DataTransfer();
                 for (let i = 0; i < files.length; i++) {
                     dataTransfer.items.add(files[i]);
                 }
                 fileInput.files = dataTransfer.files; // fileInputに設定
                 handleFileSelect({ target: fileInput }); // fileInputのchangeイベントを手動で呼び出し
             }
         });
             // クリックでファイル選択を開く
             dropZone.addEventListener('click', () => {
                 fileInput.click();
             });
         
             // ファイル選択後の処理
         function handleFileSelect(event) {
             const fileInput = event.target;
         
             if (fileInput.files.length > 0) {
                 const file = fileInput.files[0];
         
                 // ファイルラベルを更新
                 fileLabel.textContent = "";
         
                 // ファイル詳細を表示
                 fileDetails.classList.remove('hidden');
                 fileName.textContent = `ファイル名: ${file.name}`;
                 fileSize.textContent = `サイズ: ${formatFileSize(file.size)}`;
                 fileType.textContent = `タイプ: ${file.type || '不明'}`;
                 // 画像ファイルの場合、サムネイルを表示
                 if (file.type.startsWith('image/')) {
         				    const reader = new FileReader();
         				    reader.onload = function(e) {
         				        fileThumbnail.src = e.target.result;
         				        fileThumbnail.classList.remove('hidden'); // サムネイル表示
         				        fileThumbnailContainer.classList.remove('hidden'); // サムネイル表示
         				        fileDetails.classList.remove('justify-center'); // 中央揃え解除
         				        fileDetails.classList.add('justify-start'); // 左揃え
         				    };
         				    reader.readAsDataURL(file); // 画像ファイルを読み込む
         				} else {
         				    fileThumbnail.classList.add('hidden'); // 画像でない場合はサムネイル非表示
         				    fileThumbnailContainer.classList.add('hidden'); // サムネイル非表示
         				    fileDetails.classList.remove('justify-start'); // 左揃え解除
         				    fileDetails.classList.add('justify-center'); // 中央揃え
         				}
             } else {
                 // リセット状態
                 fileLabel.textContent = 'ファイルをここにドラッグ&ドロップ、またはクリックでアップロード';
                 fileDetails.classList.add('hidden');
                 fileName.textContent = '';
                 fileSize.textContent = '';
                 fileType.textContent = '';
                 fileThumbnail.classList.add('hidden'); // サムネイルも非表示にする
             }
         }
         
             // ファイルサイズのフォーマット
             function formatFileSize(bytes) {
                 if (bytes === 0) return '0 Bytes';
                 const k = 1024;
                 const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                 const i = Math.floor(Math.log(bytes) / Math.log(k));
                 return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
             }
         
             // fileInputのchangeイベントを設定
             fileInput.addEventListener('change', handleFileSelect);
         
             // アップロードボタンの処理
             uploadButton.addEventListener('click', async () => {
                 const file = fileInput.files[0];
                 if (!file) {
                     alert("Please select a file.");
                     return;
                 }
         
                 // ボタン無効化、ローダー表示
                 uploadButton.disabled = true;
                 uploadButton.classList.add('opacity-50', 'cursor-not-allowed');
                 loaderContainer.classList.remove('hidden');
                 resultContainer.classList.add('hidden');
         
                 const filename = file.name;
                 const fileSize = file.size;
         
                 // 最初のリクエスト
                 const firstRequestUrl = "https://d.kuku.lu/_server.php";
                 const firstRequestData = new URLSearchParams();
                 firstRequestData.append("action", "getUploadURL");
                 firstRequestData.append("upload_files", JSON.stringify({ 0: { filename, size: fileSize } }));
         
                 try {
                     const firstResponse = await fetch(firstRequestUrl, {
                         method: "POST",
                         body: firstRequestData,
                         headers: { "Content-Type": "application/x-www-form-urlencoded" }
                     });
         
                     if (!firstResponse.ok) throw new Error(`First request failed: ${firstResponse.status}`);
         
                     const firstResponseData = await firstResponse.json();
                     const serverInfo = firstResponseData.servers[0];
                     const putUrl = serverInfo.url;
         
                     // 第二のリクエスト(ファイルアップロード)
                     const secondResponse = await fetch(putUrl, {
                         method: "PUT",
                         body: file
                     });
         
                     if (!secondResponse.ok) throw new Error(`Second request failed: ${secondResponse.status}`);
         
                     const downloadUrl = putUrl.split("?")[0];
         
                     // UI更新
                     downloadUrlInput.value = downloadUrl;
                     downloadUrlInput.onclick = () => {
                         downloadUrlInput.select();
                         navigator.clipboard.writeText(downloadUrl)
                             .then(() => alert("Download URL copied to clipboard!"))
                             .catch(err => alert("Failed to copy URL: " + err));
                     };
         
                     loaderContainer.classList.add('hidden');
                     resultContainer.classList.remove('hidden');
                     uploadButton.disabled = false;
                     uploadButton.classList.remove('opacity-50', 'cursor-not-allowed');
         
                     // コピー機能
                     copyButton.onclick = () => {
                         navigator.clipboard.writeText(downloadUrl)
                             .then(() => alert("Download URL copied to clipboard!"))
                             .catch(err => alert("Failed to copy URL: " + err));
                     };
         
                 } catch (error) {
             loaderContainer.classList.add('hidden');
             uploadButton.disabled = false;
             uploadButton.classList.remove('opacity-50', 'cursor-not-allowed');
             resultContainer.classList.add('hidden');
             alert(error.message);
         }
             });
         });
             
      </script>
   </body>
</html>