Skip to content

Commit 312e4cb

Browse files
alf180alf180
authored
Create Mgn storage
1 parent 973075e commit 312e4cb

File tree

1 file changed

+206
-0
lines changed

1 file changed

+206
-0
lines changed

‎Mgn storage

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
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>File Storage App</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<!-- Account Creation Form -->
12+
<div id="signup-form">
13+
<h2>MGN Storage</h2>
14+
<h2>Create Account</h2>
15+
<input type="email" id="signup-email" placeholder="Email" required>
16+
<input type="password" id="signup-password" placeholder="Password" required>
17+
<button onclick="signUp()">Sign Up</button>
18+
<p>Already have an account? <a href="#" onclick="showLogin()">Log In</a></p>
19+
</div>
20+
21+
<!-- Login Form -->
22+
<div id="login-form" style="display: none;">
23+
<h2>Log In</h2>
24+
<input type="email" id="login-email" placeholder="Email" required>
25+
<input type="password" id="login-password" placeholder="Password" required>
26+
<button onclick="logIn()">Log In</button>
27+
<p>Don't have an account? <a href="#" onclick="showSignup()">Sign Up</a></p>
28+
</div>
29+
30+
<!-- File Upload Section -->
31+
<div id="file-upload-section" style="display: none;">
32+
<h2>Upload Files</h2>
33+
<input type="file" id="file-input" multiple>
34+
<button onclick="uploadFiles()">Upload</button>
35+
<div id="loading" style="display: none;">Uploading...</div>
36+
<div id="file-list"></div>
37+
</div>
38+
</div>
39+
40+
<script src="script.js"></script>
41+
</body>
42+
</html>
43+
44+
<!-- CSS codes -->
45+
<style>
46+
/* General Styles */
47+
body {
48+
font-family: Arial, sans-serif;
49+
background-color: #f4f4f9;
50+
margin: 0;
51+
padding: 0;
52+
display: flex;
53+
justify-content: center;
54+
align-items: center;
55+
height: 100vh;
56+
}
57+
58+
.container {
59+
background: white;
60+
padding: 20px;
61+
border-radius: 8px;
62+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
63+
width: 90%;
64+
max-width: 400px;
65+
text-align: center;
66+
}
67+
68+
input {
69+
width: 100%;
70+
padding: 10px;
71+
margin: 10px 0;
72+
border: 1px solid #ccc;
73+
border-radius: 4px;
74+
box-sizing: border-box;
75+
}
76+
77+
button {
78+
width: 100%;
79+
padding: 10px;
80+
background-color: #3498db;
81+
color: white;
82+
border: none;
83+
border-radius: 4px;
84+
cursor: pointer;
85+
font-size: 16px;
86+
}
87+
88+
button:hover {
89+
background-color: #2980b9;
90+
}
91+
92+
a {
93+
color: #3498db;
94+
text-decoration: none;
95+
}
96+
97+
a:hover {
98+
text-decoration: underline;
99+
}
100+
101+
#loading {
102+
margin-top: 10px;
103+
color: #3498db;
104+
}
105+
106+
#file-list {
107+
margin-top: 20px;
108+
text-align: left;
109+
}
110+
111+
#file-list p {
112+
margin: 5px 0;
113+
}
114+
h2 {
115+
color: green;
116+
font-family: Arial, sans-serif; /* Set the font family */
117+
font-size: 24px; /* Set the font size */
118+
color: #333333; /* Set the text color */
119+
font-weight: bold; /* Set the font weight */
120+
text-align: center; /* Align the text to the center */
121+
margin: 20px 0; /* Add margin above and below the heading */
122+
padding: 10px; /* Add padding inside the heading */
123+
background-color: #f4f4f4; /* Set the background color */
124+
border-bottom: 2px solid #cccccc; /* Add a border at the bottom */
125+
text-transform: uppercase; /* Convert text to uppercase */
126+
letter-spacing: 2px; /* Add spacing between letters */
127+
}
128+
</style>
129+
130+
<!-- Javascript codes -->
131+
<script>
132+
// Simulated backend for demonstration
133+
let users = [];
134+
let files = [];
135+
136+
// Show Login Form
137+
function showLogin() {
138+
document.getElementById('signup-form').style.display = 'none';
139+
document.getElementById('login-form').style.display = 'block';
140+
}
141+
142+
// Show Signup Form
143+
function showSignup() {
144+
document.getElementById('login-form').style.display = 'none';
145+
document.getElementById('signup-form').style.display = 'block';
146+
}
147+
148+
// Sign Up
149+
function signUp() {
150+
const email = document.getElementById('signup-email').value;
151+
const password = document.getElementById('signup-password').value;
152+
153+
if (email && password) {
154+
users.push({ email, password });
155+
alert('Account created successfully!');
156+
showLogin();
157+
} else {
158+
alert('Please fill in all fields.');
159+
}
160+
}
161+
162+
// Log In
163+
function logIn() {
164+
const email = document.getElementById('login-email').value;
165+
const password = document.getElementById('login-password').value;
166+
167+
const user = users.find(u => u.email === email && u.password === password);
168+
if (user) {
169+
alert('Login successful!');
170+
document.getElementById('login-form').style.display = 'none';
171+
document.getElementById('file-upload-section').style.display = 'block';
172+
} else {
173+
alert('Invalid email or password.');
174+
}
175+
}
176+
177+
// Upload Files
178+
function uploadFiles() {
179+
const fileInput = document.getElementById('file-input');
180+
const loading = document.getElementById('loading');
181+
const fileList = document.getElementById('file-list');
182+
183+
if (fileInput.files.length === 0) {
184+
alert('Please select files to upload.');
185+
return;
186+
}
187+
188+
loading.style.display = 'block';
189+
190+
// Simulate file upload (replace with actual backend API call)
191+
setTimeout(() => {
192+
for (let file of fileInput.files) {
193+
files.push(file.name);
194+
fileList.innerHTML += `<p>${file.name} <a href="#" onclick="downloadFile('${file.name}')">Download</a></p>`;
195+
}
196+
loading.style.display = 'none';
197+
alert('Files uploaded successfully!');
198+
}, 2000);
199+
}
200+
201+
// Download File
202+
function downloadFile(filename) {
203+
alert(`Downloading ${filename}...`);
204+
// Simulate file download (replace with actual backend API call)
205+
}
206+
</script>

0 commit comments

Comments
 (0)