Skip to content

Commit 9c3ff36

Browse files
axelvfaxelvf
committed
Some magics from @pecasdesign 
1 parent 8c5e73e commit 9c3ff36

File tree

4 files changed

+62
-27
lines changed

4 files changed

+62
-27
lines changed

‎backup/index.html‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<!-- End Google Tag Manager -->
1212
<meta charset="UTF-8">
1313
<meta http-equiv="X-UA-Compatible" content="ie=edge">
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1415
<title>sysarmy - El soporte de quienes dan soporte</title>
1516
<link rel="shortcut icon" href="../favicon.png" />
1617
<meta name='keywords'
@@ -24,7 +25,9 @@
2425
<meta property="og:title" content="sysarmy - El soporte de quienes dan soporte" />
2526
<meta property="og:type" content="website" />
2627
<meta property="og:url" content="https://sysarmy.com/" />
27-
28+
<link rel="preconnect" href="https://fonts.googleapis.com">
29+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
30+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
2831
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
2932
<link rel="stylesheet" href="styles.css">
3033
</head>
@@ -35,40 +38,44 @@
3538
style="display:none;visibility:hidden"></iframe></noscript>
3639
<!-- End Google Tag Manager (noscript) -->
3740

38-
<!-- <div class="titlewbd">
39-
<h1>#worldbackupday</h1>
40-
</div> -->
41+
42+
<div class="all">
43+
<div class="titlewbd">
44+
<h1>#worldbackupday</h1>
45+
</div>
4146
<div class="copy-dialog">
4247
<div class="header">
4348
<h2>Copying Files</h2>
4449
</div>
4550
<div class="content">
4651
<div class="transfer-info">
47-
<p><span class="label">From:</span> <a href="#">/var/polemica</a></p>
48-
<p><span class="label">To:</span> <a href="#">/dev/null</a></p>
52+
<p> <b>From </b><a href="#">/var/polemica</a> <b>to</b> <a href="#">/dev/null</a> </p>
4953
</div>
5054
<div class="progress-section">
51-
<p id="itemsRemaining">Items remaining: Calculating...</p>
5255
<div class="progress-bar">
5356
<div class="progress" id="progressBar" style="width: 0%;"></div>
5457
</div>
55-
<p class="speed" id="transferSpeed">Speed: 12.5 MB/s</p>
56-
<p class="time" id="timeRemaining">Time remaining: Calculating...</p>
58+
5759
</div>
5860
<div class="graph-section">
59-
<canvas id="transferGraph" width="368" height="99"></canvas>
61+
<canvas id="transferGraph" width="329" height="99"></canvas>
6062
</div>
63+
<p class="time">Time remaining: <b id="timeRemaining">Calculating...</b></p>
6164
<div class="details" id="details">
6265
<!-- <p>Copying: Calculating... (250 MB)</p> -->
63-
<p>Items copied: Calculating...</p>
66+
<p id="itemsRemaining">Items remaining: Calculating...</p>
67+
<p class="speed" id="transferSpeed">Speed: 12.5 MB/s</p>
6468
</div>
69+
<button id="detailsBtn">More details</button>
6570
</div>
6671
<div class="buttons">
72+
6773
<button id="pauseBtn">Pause</button>
6874
<button id="cancelBtn">Cancel</button>
69-
<button id="detailsBtn">More details</button>
75+
7076
</div>
7177
</div>
78+
</div>
7279
<script src="script.js"></script>
7380
</body>
7481

‎backup/racks.jpg‎

361 KB
Loading

‎backup/script.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function updateTransfer() {
4141
const hours = Math.floor((secondsLeft % (24 * 3600)) / 3600);
4242
const minutes = Math.floor((secondsLeft % 3600) / 60);
4343
const seconds = Math.floor(secondsLeft % 60);
44-
timeRemaining.textContent = `Time remaining: ${days}d ${hours}h ${minutes}m ${seconds}s`;
44+
timeRemaining.textContent = `${days}d ${hours}h ${minutes}m ${seconds}s`;
4545

4646
// Dynamic speed (fluctuates between 10-15 MB/s)
4747
const speed = 10 + Math.random() * 5;
@@ -55,7 +55,7 @@ function updateTransfer() {
5555
// Check if finished
5656
if (secondsLeft <= 0) {
5757
itemsRemaining.textContent = 'Items remaining: 0';
58-
timeRemaining.textContent = 'Time remaining: Finished';
58+
timeRemaining.textContent = 'Finished';
5959
progressBar.style.width = '100%';
6060
pauseBtn.disabled = true;
6161
cancelBtn.disabled = true;
@@ -101,7 +101,7 @@ cancelBtn.addEventListener('click', () => {
101101
alert('Copy operation canceled. #nohaybackup');
102102
clearInterval(updateInterval);
103103
itemsRemaining.textContent = 'Items remaining: 0';
104-
timeRemaining.textContent = 'Time remaining: Canceled';
104+
timeRemaining.textContent = 'Canceled';
105105
progressBar.style.width = '100%';
106106
pauseBtn.disabled = true;
107107
cancelBtn.disabled = true;

‎backup/styles.css‎

Lines changed: 40 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,45 @@ body {
77
background-color: #f0f0f0;
88
background-image: url('racks.jpg');
99
margin: 0;
10+
background-repeat: no-repeat;
11+
background-size: cover;
12+
background-position: center;
1013
}
14+
.all {
15+
margin: 0 auto;
1116

17+
}
1218
.titlewbd {
13-
font-family: Poppins-Bold;
14-
font-size: 50px;
19+
font-family: "Poppins", sans-serif;
20+
font-size: 40px;
21+
font-weight: 600;
1522
line-height: 1.1;
1623
color: #fff;
1724
text-transform: uppercase;
1825
padding-bottom: 25px;
1926
text-align: center;
20-
margin: 0;
27+
margin: 0 auto;
2128
}
2229

30+
@media only screen and (max-width: 600px) {
31+
.titlewbd {
32+
font-size: 16px;
33+
}
34+
}
2335
.copy-dialog {
24-
width: 400px;
36+
max-width: 360px;
2537
background-color: white;
2638
border: 1px solid #ccc;
2739
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
2840
border-radius: 5px;
2941
overflow: hidden;
42+
margin: 0 auto;
3043
}
3144

3245
.header {
33-
background-color: #0078d7;
34-
color: white;
46+
background-color: #f1f1f1;
47+
color: black;
3548
padding: 10px;
36-
text-align: center;
3749
}
3850

3951
.header h2 {
@@ -72,15 +84,23 @@ body {
7284
background-color: #e0e0e0;
7385
border-radius: 3px;
7486
overflow: hidden;
87+
position: relative;
7588
}
7689

7790
.progress {
7891
height: 100%;
7992
background-color: #28a745;
8093
transition: width 0.5s ease;
8194
}
82-
83-
.speed, .time {
95+
#itemsRemaining {
96+
font-size: 12px;
97+
color: #666;
98+
}
99+
.speed {
100+
font-size: 12px;
101+
color: #666;
102+
}
103+
.time {
84104
font-size: 12px;
85105
color: #666;
86106
}
@@ -89,6 +109,7 @@ body {
89109
margin: 10px 0;
90110
border: 1px solid #ddd;
91111
border-radius: 3px;
112+
background-color: #F1F1F1;
92113
}
93114

94115
.details {
@@ -106,12 +127,9 @@ body {
106127
}
107128

108129
button {
109-
padding: 5px 15px;
110130
border: none;
111131
border-radius: 3px;
112132
cursor: pointer;
113-
background-color: #0078d7;
114-
color: white;
115133
}
116134

117135
button:hover {
@@ -121,4 +139,14 @@ button:hover {
121139
button:disabled {
122140
background-color: #ccc;
123141
cursor: not-allowed;
142+
}
143+
#pauseBtn, #cancelBtn {
144+
padding: 5px 15px;
145+
background-color: #0078d7;
146+
color: white;
147+
}
148+
#detailsBtn {
149+
background-color:white;
150+
color: #0078d7;
151+
padding:0;
124152
}

0 commit comments

Comments
 (0)