Skip to content

Commit 77e1b75

Browse files
tutosrivetutosrive
authored
Merge pull request #5 from Dev2Forge/develop
Update page
2 parents 09e8504 + e4b35bd commit 77e1b75

3 files changed

Lines changed: 383 additions & 0 deletions

File tree

‎docs/404.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Page 404 Terminal</title>
6+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
7+
<link rel="stylesheet" href="./assets/css/_404.css" />
8+
<script src="./assets/js/_404.mjs"></script>
9+
</head>
10+
<body class="" id="body">
11+
<main id="main">
12+
<header class="Menubar">
13+
<p class="title_Terminal">Terminal</p>
14+
<p class="title_404">404</p>
15+
<div class="Menu_BTN">
16+
<a href="#" id="min" onclick="BTNS('min')"></a>
17+
<a href="#" id="max" onclick="BTNS('max')"></a>
18+
<a href="./" id="close"></a>
19+
</div>
20+
</header>
21+
<div class="Terminal_body" id="Terminal">
22+
<p>Oops! This page has not been forged</p>
23+
<br />
24+
<p>Enter <span class="red"> help </span>for help</p>
25+
<br />
26+
<div class="Terminal_code">
27+
<div class="Terminal_line">
28+
<div class="code" id="code"></div>
29+
<span class="arrow">→</span><span class="user-input" id="userInput"></span> <label for="Keyboard"></label><input type="text" id="Keyboard" class="keyboard" />
30+
</div>
31+
</div>
32+
</div>
33+
</main>
34+
35+
<div class="min_app" id="min_app">
36+
<a href="#" onclick="BTNS('re')">
37+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="40" height="40">
38+
<path fill="#CFD8DC" d="M41,6H7C6.4,6,6,6.4,6,7v35h36V7C42,6.4,41.6,6,41,6z" />
39+
<path fill="#263238" d="M8 13H40V40H8z" />
40+
<path fill="#90A4AE" d="M13.5 8A1.5 1.5 0 1 0 13.5 11 1.5 1.5 0 1 0 13.5 8zM9.5 8A1.5 1.5 0 1 0 9.5 11 1.5 1.5 0 1 0 9.5 8z" />
41+
<g>
42+
<path fill="#18FFFF" d="M18.5 26.5l-3.5-2V22l6 3.4v2.1L15 31v-2.5L18.5 26.5zM23 29H33V31H23z" />
43+
</g>
44+
</svg>
45+
</a>
46+
</div>
47+
</body>
48+
</html>

‎docs/assets/css/_404.css‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
font-size: 18px;
15+
font-family: 'Poppins', sans-serif;
16+
background: #171f37;
17+
color: rgba(255, 255, 255, 0.8);
18+
overflow: hidden !important;
19+
}
20+
21+
a {
22+
text-decoration: none;
23+
}
24+
25+
svg {
26+
vertical-align: middle;
27+
}
28+
29+
main {
30+
width: 80%;
31+
height: 65%;
32+
-webkit-transition: all 0.3s ease-in-out;
33+
-moz-transition: all 0.3s ease-in-out;
34+
-ms-transition: all 0.3s ease-in-out;
35+
-o-transition: all 0.3s ease-in-out;
36+
transition: all 0.3s ease-in-out;
37+
}
38+
39+
.Menubar {
40+
width: 100%;
41+
background-color: #313335;
42+
display: flex;
43+
flex-direction: row;
44+
justify-content: space-between;
45+
align-items: center;
46+
border-radius: 1.2rem 1.2rem 0 0;
47+
padding: 0.3rem 0.5rem;
48+
user-select: none;
49+
}
50+
51+
.title_404 {
52+
font-size: 1.5em;
53+
}
54+
55+
.Menu_BTN {
56+
display: flex;
57+
justify-content: center;
58+
align-items: center;
59+
}
60+
61+
.Menu_BTN a {
62+
content: '';
63+
display: inline-block;
64+
width: 20px;
65+
height: 20px;
66+
border-radius: 50%;
67+
margin: 0 0.2rem;
68+
}
69+
70+
.Menu_BTN a:nth-child(3) {
71+
background-color: #fa615c;
72+
}
73+
74+
.Menu_BTN a:nth-child(2) {
75+
background-color: #ffbd48;
76+
}
77+
78+
.Menu_BTN a:nth-child(1) {
79+
background-color: #3fc950;
80+
}
81+
82+
.Terminal_body {
83+
background-color: #2b2b2b;
84+
width: 100%;
85+
height: 100%;
86+
border-radius: 0 0 1.2rem 1.2rem;
87+
padding: 1.2rem;
88+
font-family: 'Anonymous Pro', monospace;
89+
overflow-y: auto;
90+
}
91+
92+
.Terminal_body::-webkit-scrollbar {
93+
background-color: #2b2b2b;
94+
}
95+
96+
.Terminal_body::-webkit-scrollbar-thumb {
97+
background-color: #5c5c5c;
98+
}
99+
100+
.arrow {
101+
color: #ffc720;
102+
margin: 0 0 0 0.8rem;
103+
font-weight: bold;
104+
font-size: 1.4rem;
105+
}
106+
107+
.keyboard {
108+
opacity: 0;
109+
filter: alpha(opacity=0);
110+
}
111+
112+
.out_code {
113+
margin: 0.5rem 0;
114+
}
115+
116+
.red {
117+
color: #fa615c;
118+
}
119+
120+
.green {
121+
color: #3fc950;
122+
}
123+
124+
#userInput::after {
125+
content: '';
126+
width: 5px;
127+
height: 15px;
128+
margin: 0 2px;
129+
position: relative;
130+
display: inline-block;
131+
background: white;
132+
-webkit-animation: cursor 1s linear infinite;
133+
-o-animation: cursor 1s linear infinite;
134+
animation: cursor 1s linear infinite;
135+
}
136+
137+
@keyframes cursor {
138+
0%,
139+
100% {
140+
opacity: 1;
141+
}
142+
50% {
143+
opacity: 0;
144+
}
145+
}
146+
147+
/*max style*/
148+
.max main {
149+
width: 100%;
150+
height: 100%;
151+
}
152+
153+
.max .Menubar,
154+
.max .Terminal_body {
155+
border-radius: 0;
156+
}
157+
158+
/*min style*/
159+
.min_app {
160+
visibility: hidden;
161+
position: absolute;
162+
width: 50px;
163+
height: 50px;
164+
left: 0;
165+
bottom: 0;
166+
background: #3c3f41;
167+
border-radius: 50%;
168+
margin: 1rem;
169+
display: flex;
170+
justify-content: center;
171+
align-items: center;
172+
}
173+
174+
.min main {
175+
transform: translate(-640px, 260px) scale(0);
176+
}
177+
178+
.min .min_app {
179+
visibility: visible;
180+
}
181+
182+
@media (max-width: 991px) {
183+
main {
184+
width: 95%;
185+
height: 70%;
186+
}
187+
188+
.title_404 {
189+
font-size: 1em;
190+
}
191+
192+
.out_code {
193+
margin: 0.2rem 0;
194+
}
195+
196+
.keyboard {
197+
position: relative;
198+
width: 100%;
199+
left: 0;
200+
top: -35px;
201+
height: 50px;
202+
}
203+
204+
.min main {
205+
transform: translate(-200px, 660px) scale(0);
206+
}
207+
}

‎docs/assets/js/_404.mjs‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
const BLACKLISTED_KEY_CODES = [38, 40, 37, 39, 18, 20, 17, 16, 9, 27, 144];
2+
//List of commands
3+
const COMMANDS = {
4+
help: 'The page you want to visit does not exist, or it may have been deleted, or the wrong address was entered. To see the commands, enter the word <span class="red"> commands</span>',
5+
exit: '',
6+
report: "<span class='green'>This page report has been successfully sent to support.</span>",
7+
commands: 'List of commands: <span class="red"> help</span> , <span class="red"> report</span> ,<span class="red"> exit</span>\n',
8+
cls: '',
9+
};
10+
11+
let userInput;
12+
let terminalOutput;
13+
let Terminal;
14+
let Keyboard;
15+
const app = () => {
16+
userInput = document.getElementById('userInput');
17+
terminalOutput = document.getElementById('code');
18+
Terminal = document.getElementById('Terminal');
19+
Keyboard = document.getElementById('Keyboard');
20+
Keyboard.focus();
21+
if (screen.width < 991) {
22+
Keyboard.addEventListener('keyup', key);
23+
} else {
24+
document.addEventListener('keypress', key);
25+
}
26+
document.addEventListener('keydown', backSpace);
27+
};
28+
29+
//When the user click the 'Enter' key
30+
const execute = function executeCommand(input) {
31+
let output;
32+
33+
if (input.length === 0) {
34+
return;
35+
}
36+
//If what the user entered is not in the command list
37+
if (!COMMANDS.hasOwnProperty(input)) {
38+
output = `<p>The command entered is not correct</p>`;
39+
}
40+
//If user enter the word cls
41+
else if (input === 'cls') {
42+
terminalOutput.innerHTML = '';
43+
return;
44+
}
45+
//If the user enters one of the words 'exit' and 'close'
46+
else if (input === 'close' || input === 'exit') {
47+
document.location.href = '../../index.html'; // The link that the user enters after sending the exit
48+
return;
49+
}
50+
//If the user enters the word report
51+
else if (input === 'report') {
52+
terminalOutput.innerHTML = `${terminalOutput.innerHTML}<p>${COMMANDS[input]}</p>`;
53+
54+
return;
55+
}
56+
//Otherwise, the text of the command will be displayed as output
57+
else {
58+
output = COMMANDS[input];
59+
}
60+
61+
terminalOutput.innerHTML = `${terminalOutput.innerHTML}<p class="out_code">${output}</p>`;
62+
Terminal.scrollTop = terminalOutput.scrollHeight;
63+
};
64+
let str = '';
65+
//when user click any key
66+
const key = function keyEvent(event) {
67+
let currentKey = event.key;
68+
Keyboard.focus();
69+
Keyboard.innerHTML = event.target.value;
70+
if (BLACKLISTED_KEY_CODES.includes(event.keyCode)) {
71+
return;
72+
}
73+
if (!currentKey || currentKey === 'Unidentified' || screen.width < 991) {
74+
currentKey = event.target.value;
75+
}
76+
if (event.key === 'Enter') {
77+
execute(userInput.innerHTML);
78+
userInput.innerHTML = '';
79+
currentKey = '';
80+
event.target.value = '';
81+
str = '';
82+
} else {
83+
if (screen.width < 991) {
84+
str = currentKey;
85+
} else {
86+
str += currentKey;
87+
}
88+
event.preventDefault();
89+
userInput.innerHTML = str;
90+
}
91+
};
92+
//when user click 'BackSpace' key
93+
const backSpace = function backSpace(e) {
94+
//if user click backspace
95+
if (e.keyCode === 8) {
96+
userInput.innerHTML = userInput.innerHTML.slice(0, userInput.innerHTML.length - 1);
97+
str = str.slice(0, str.length - 1);
98+
}
99+
};
100+
//When the user clicks on a control buttons
101+
const BTNS = function MenuBTN(t) {
102+
switch (t) {
103+
case 'max':
104+
if (document.getElementById('body').className !== 'max') {
105+
document.getElementById('body').className = 'max';
106+
} else {
107+
document.getElementById('body').className = '';
108+
}
109+
break;
110+
case 'min':
111+
if (document.getElementById('body').className === 'max') {
112+
document.getElementById('body').className = 'max min';
113+
} else if (document.getElementById('body').className !== 'max') {
114+
document.getElementById('body').className = 'min';
115+
}
116+
break;
117+
case 're':
118+
if (document.getElementById('body').className === 'max min') {
119+
document.getElementById('body').className = 'max';
120+
}
121+
if (document.getElementById('body').className === 'min') {
122+
document.getElementById('body').className = '';
123+
}
124+
break;
125+
}
126+
};
127+
128+
document.addEventListener('DOMContentLoaded', app);

0 commit comments

Comments
 (0)