Spaces:
Sleeping
Sleeping
Create index.html
Browse files- public/index.html +93 -0
public/index.html
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>CDN Transfer Files [ Jonell Magallanes ] CC PROJECTS</title>
|
| 7 |
+
<script src="/socket.io/socket.io.js"></script>
|
| 8 |
+
<script src="script.js" defer></script>
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script>
|
| 11 |
+
tailwind.config = {
|
| 12 |
+
theme: {
|
| 13 |
+
extend: {
|
| 14 |
+
keyframes: {
|
| 15 |
+
fadeIn: {
|
| 16 |
+
'from': { opacity: '0', transform: 'scale(0.95)' },
|
| 17 |
+
'to': { opacity: '1', transform: 'scale(1)' }
|
| 18 |
+
},
|
| 19 |
+
bounce: {
|
| 20 |
+
'0%, 100%': { transform: 'translateY(0)' },
|
| 21 |
+
'50%': { transform: 'translateY(-10px)' }
|
| 22 |
+
},
|
| 23 |
+
fadeInOut: {
|
| 24 |
+
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
| 25 |
+
'10%': { opacity: '1', transform: 'translateY(0)' },
|
| 26 |
+
'90%': { opacity: '1', transform: 'translateY(0)' },
|
| 27 |
+
'100%': { opacity: '0', transform: 'translateY(-10px)' }
|
| 28 |
+
},
|
| 29 |
+
radar: {
|
| 30 |
+
'0%': { transform: 'scale(0.5)', opacity: '0' },
|
| 31 |
+
'50%': { opacity: '1' },
|
| 32 |
+
'100%': { transform: 'scale(1.5)', opacity: '0' }
|
| 33 |
+
}
|
| 34 |
+
},
|
| 35 |
+
animation: {
|
| 36 |
+
'fadeIn': 'fadeIn 0.5s ease-out forwards',
|
| 37 |
+
'bounce': 'bounce 1s infinite',
|
| 38 |
+
'fadeInOut': 'fadeInOut 3s ease-in-out forwards',
|
| 39 |
+
'radar': 'radar 2s infinite'
|
| 40 |
+
}
|
| 41 |
+
}
|
| 42 |
+
}
|
| 43 |
+
}
|
| 44 |
+
</script>
|
| 45 |
+
</head>
|
| 46 |
+
<body class="bg-gray-900 text-white flex flex-col items-center justify-center min-h-screen p-4 relative">
|
| 47 |
+
<div id="successNotification" class="fixed top-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg z-50 hidden animate-fadeInOut">
|
| 48 |
+
<div class="flex items-center gap-2">
|
| 49 |
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
| 50 |
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
| 51 |
+
</svg>
|
| 52 |
+
<span>Successfully Sent!</span>
|
| 53 |
+
</div>
|
| 54 |
+
</div>
|
| 55 |
+
|
| 56 |
+
<div id="modeSelection" class="flex flex-col items-center gap-6 animate-fadeIn max-w-md w-full">
|
| 57 |
+
<h1 class="text-3xl font-bold text-center text-gray-200">Realtime File Transfer</h1>
|
| 58 |
+
<div class="flex flex-col gap-4 w-full">
|
| 59 |
+
<button id="senderBtn" class="bg-blue-600 px-6 py-3 rounded-full text-lg active:scale-95 transition-all hover:bg-blue-500 hover:scale-105 w-full">Sender</button>
|
| 60 |
+
<button id="receiverBtn" class="bg-green-600 px-6 py-3 rounded-full text-lg active:scale-95 transition-all hover:bg-green-500 hover:scale-105 w-full">Receiver</button>
|
| 61 |
+
</div>
|
| 62 |
+
</div>
|
| 63 |
+
|
| 64 |
+
<div id="senderArea" class="hidden flex-col items-center gap-6 w-full max-w-md p-4">
|
| 65 |
+
<input type="file" id="fileInput" multiple class="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-700 file:text-white hover:file:bg-blue-800 transition-transform hover:scale-[1.02] cursor-pointer">
|
| 66 |
+
<div id="uploadStatus" class="w-full flex flex-col gap-2"></div>
|
| 67 |
+
<div id="onlineCount" class="text-green-400 text-sm flex items-center gap-1">
|
| 68 |
+
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
| 69 |
+
<span>0 receivers online</span>
|
| 70 |
+
</div>
|
| 71 |
+
</div>
|
| 72 |
+
|
| 73 |
+
<div id="receiverArea" class="hidden flex-col items-center gap-6 w-full max-w-md p-4">
|
| 74 |
+
<div class="relative">
|
| 75 |
+
<div class="w-32 h-32 rounded-full bg-green-900/20 flex items-center justify-center">
|
| 76 |
+
<div class="absolute w-full h-full rounded-full border-2 border-green-500/50 animate-radar"></div>
|
| 77 |
+
<div class="absolute w-16 h-16 rounded-full bg-green-600 flex items-center justify-center">
|
| 78 |
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
| 79 |
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
| 80 |
+
</svg>
|
| 81 |
+
</div>
|
| 82 |
+
</div>
|
| 83 |
+
</div>
|
| 84 |
+
<h2 id="waitingText" class="text-lg text-gray-400">Waiting for sender :> ...</h2>
|
| 85 |
+
<div id="filesList" class="w-full mt-6 space-y-4"></div>
|
| 86 |
+
</div>
|
| 87 |
+
|
| 88 |
+
<div id="networkInfo" class="absolute bottom-10 left-0 right-0 text-center text-xs text-gray-400"></div>
|
| 89 |
+
<div class="absolute bottom-4 left-0 right-0 text-center text-xs text-gray-500 font-medium">
|
| 90 |
+
<span>Developer Jonell Hutchin Magallanes</span>
|
| 91 |
+
</div>
|
| 92 |
+
</body>
|
| 93 |
+
</html>
|