├── fonts
└── roboto-mono-medium.ttf
├── index.html
├── script
└── script.js
└── css
└── style.css
/fonts/roboto-mono-medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Teiem/homeFork/HEAD/fonts/roboto-mono-medium.ttf
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Home
8 |
9 |
10 |
11 |
12 | [user@home ~]$ tree
13 |
14 |
.
15 |
16 | -
17 |
[error]
18 |
19 |
20 |
[user@home ~]$ ddg
22 |
23 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/script/script.js:
--------------------------------------------------------------------------------
1 | const Config = {
2 | name: "user",
3 | scale: 1,
4 | Links: [
5 | [
6 | "site",
7 | [
8 | ["link", "https://www.example.com"],
9 | ["link", "https://www.example.com"]
10 | ]
11 | ],
12 | [
13 | "site",
14 | [
15 | ["link", "https://www.example.com"],
16 | ["link", "https://www.example.com"]
17 | ]
18 | ],
19 | [
20 | "site",
21 | [
22 | ["link", "https://www.example.com"],
23 | ["link", "https://www.example.com"],
24 | ["link", "https://www.example.com"]
25 | ]
26 | ],
27 | [
28 | "site",
29 | [
30 | ["link", "https://www.example.com"],
31 | ["link", "https://www.example.com"],
32 | ["link", "https://www.example.com"],
33 | ["link", "https://www.example.com"]
34 | ]
35 | ]
36 | ]
37 | }
38 |
39 | const Main = (() => {
40 | const list = document.getElementById("list");
41 | const names = document.querySelectorAll("[data-Name]");
42 | const search = document.getElementById("search");
43 | const form = document.forms[0];
44 |
45 | const init = () => {
46 | list.innerHTML = Config.Links.map(([gName, Links]) => `
47 |
48 | ${gName}
49 |
50 | ${Links.map(([lName, url]) => `
51 | -
52 | ${lName}
53 |
`
54 | ).join("")}
55 |
56 | `
57 | ).join("")
58 |
59 | names.forEach(el => {
60 | el.innerText = Config.name;
61 | });
62 |
63 | document.addEventListener("keydown", e => e.key.length === 1 && search.focus());
64 | search.addEventListener("keydown", () => (window.event ? event.keyCode : e.which) == 13 && form.submit());
65 | };
66 |
67 | return {
68 | init,
69 | };
70 | })();
71 |
72 | Main.init()
73 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Roboto Mono";
3 | src: url("../fonts/roboto-mono-medium.ttf");
4 | }
5 |
6 | :root {
7 | --font: "Roboto Mono";
8 | --background: #0f0e17;
9 | --foreground: #fffffe;
10 | --pink: #e53170;
11 | --red: #f25f4c;
12 | --orange: #ff8906;
13 | --branch: 1px solid #a7a9be;
14 | }
15 |
16 | html {
17 | font-size: 18px;
18 | overflow: hidden;
19 | }
20 |
21 | body {
22 | background: var(--background);
23 | width: 100vw;
24 | height: 100vh;
25 | margin: 0;
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | }
30 |
31 | .prompt {
32 | font-family: var(--font);
33 | color: var(--foreground);
34 | }
35 |
36 | .prompt~.prompt {
37 | padding: 1.5rem 0 0.3125rem;
38 | }
39 |
40 | span {
41 | color: var(--pink);
42 | }
43 |
44 | h1 {
45 | display: inline;
46 | font-family: var(--font);
47 | font-size: 1rem;
48 | font-weight: normal;
49 | color: var(--red);
50 | cursor: pointer;
51 | }
52 |
53 | .tree>ul {
54 | margin: 0;
55 | padding-left: 1rem;
56 | }
57 |
58 | ul {
59 | list-style: none;
60 | padding-left: 2.5rem;
61 | }
62 |
63 | li {
64 | position: relative;
65 | }
66 |
67 | li.hideChildren>ul {
68 | display: none;
69 | }
70 |
71 | li::before,
72 | li::after {
73 | content: "";
74 | position: absolute;
75 | left: -0.75rem;
76 | }
77 |
78 | li::before {
79 | border-top: var(--branch);
80 | top: 0.75rem;
81 | width: 0.5rem;
82 | }
83 |
84 | li::after {
85 | border-left: var(--branch);
86 | height: 100%;
87 | top: 0.25rem;
88 | }
89 |
90 | li:last-child::after {
91 | height: 0.5rem;
92 | }
93 |
94 | a {
95 | font-family: var(--font);
96 | font-size: 1rem;
97 | color: var(--foreground);
98 | text-decoration: none;
99 | outline: none;
100 | }
101 |
102 | a:hover,
103 | a:focus {
104 | color: var(--background);
105 | background: var(--orange);
106 | }
107 |
108 | form h1 {
109 | padding-left: 0.125rem;
110 | }
111 |
112 | /* you can fill the texarea above/below? the Viewport */
113 | #search {
114 | font-family: var(--font);
115 | font-size: 1rem;
116 | color: var(--foreground);
117 | background-color: var(--background);
118 | border: none;
119 | outline: none;
120 | position: absolute;
121 | width: 50vw;
122 | height: 50vh;
123 | word-break: break-all;
124 | resize: none;
125 | }
--------------------------------------------------------------------------------