-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
114 lines (108 loc) · 6.79 KB
/
Copy pathindex.html
File metadata and controls
114 lines (108 loc) · 6.79 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudShare</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/logo.png">
</head>
<body>
<div class="container">
<header class="header">
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
<h1>CloudShare</h1>
<div class="info-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<div class="info-modal">
<h4>Welcome to CloudShare!</h4>
<ul>
<li>Files are available in the cloud for <strong>24 hours</strong>.</li>
<li>Copy the generated code within <strong>30 seconds</strong> before it disappears.</li>
<li>The download URL for a received file is valid for <strong>1 hour</strong>.</li>
</ul>
<p class="welcome-message">I'm happy to have you here 💖</p>
</div>
</div>
</div>
<button id="theme-toggle" class="theme-btn">🌙</button>
</header>
<main>
<div id="offline-banner">
<p><strong>CloudShare Backend is Currently Offline</strong></p>
<p>This project was hosted on AWS Free Tier, which has now expired. As a result, file upload and download services are temporarily disabled. The frontend remains live for demonstration purposes. No user data is being collected or stored at this time.</p>
<p>To see how the project works, you can watch the demo video: <a href="https://youtu.be/NGL95asKHoM" target="_blank">Watch Demo</a></p>
<p>Thank you for checking out the project.</p>
</div>
<div class="action-buttons">
<button id="send-btn" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
Send
</button>
<button id="receive-btn" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Receive
</button>
</div>
<div id="send-section" class="hidden">
<div id="upload-area" class="upload-box">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
<p>Drag & drop your file here or</p>
<label class="file-label">Choose a file to send</label>
<input type="file" id="file-input" class="hidden">
<p id="file-status">(max 10 MB)</p>
</div>
<div id="code-display-section" class="hidden">
<div class="code-box">
<p>Share this code:</p>
<div class="code-output">
<span id="generated-code"></span>
<button id="copy-code-btn" class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
</button>
</div>
<p id="code-caption" class="hidden">after 30 sec the code disappear</p>
</div>
</div>
</div>
<div id="receive-section" class="hidden">
<div class="receive-box">
<label for="code-input">Enter Code to Receive File</label>
<input type="text" id="code-input" placeholder="Enter code...">
<button id="download-btn" class="btn">Download File</button>
</div>
</div>
</main>
</div>
<div id="feedback-modal" class="modal-overlay" style="display: none;">
<div class="feedback-content">
<button class="close-btn">×</button>
<h3>Thanks for using CloudShare!</h3>
<p>How would you rate your experience?</p>
<div class="rating">
<span class="star" data-value="1">😡</span>
<span class="star" data-value="2">😐</span>
<span class="star" data-value="3">😊</span>
<span class="star" data-value="4">😁</span>
<span class="star" data-value="5">🤩</span>
</div>
<textarea id="suggestion-box" placeholder="Any suggestions?"></textarea>
<button id="submit-feedback-btn" class="btn">Submit Feedback</button>
</div>
</div>
<div class="help-widget">
<button id="help-btn" class="help-emoji">❓</button>
<div id="help-content" class="hidden">
<h4>Help & Support</h4>
<p>mubemubendiran@gmail.com</p>
</div>
</div>
<div id="custom-notification" class="custom-notification hidden">
<span id="notification-emoji"></span>
<p id="notification-message"></p>
</div>
<script src="script.js"></script>
</body>
</html>