Skip to content

Commit 19ab004

Browse files
SteveMan67SteveMan67
committed
started refactor of css, refactored input styles to input.css and theme styles to theme.css
1 parent a207264 commit 19ab004

12 files changed

Lines changed: 423 additions & 507 deletions

File tree

‎frontend/editor.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
<script type="module" src="/javascript/load-editor-level.js" defer></script>
1010
<link rel="stylesheet" href="/styles/style.css">
1111
<link rel="stylesheet" href="/styles/login.css">
12+
<link rel="stylesheet" href="/styles/theme.css">
13+
<link rel="stylesheet" href="/styles/input.css">
1214
<link rel="preconnect" href="https://fonts.googleapis.com">
1315
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1416
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">

‎frontend/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="/styles/style.css">
88
<link rel="stylesheet" href="/styles/home.css">
9+
<link rel="stylesheet" href="/styles/theme.css">
910
<script type="module" src="/javascript/level-browse.js" defer></script>
1011
<link rel="preconnect" href="https://fonts.googleapis.com">
1112
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -46,4 +47,4 @@
4647
</div>
4748
</body>
4849

49-
</html>
50+
</html>

‎frontend/level-meta.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="stylesheet" href="/styles/style.css">
99
<link rel="stylesheet" href="/styles/meta.css">
1010
<link rel="stylesheet" href="/styles/home.css">
11+
<link rel="stylesheet" href="/styles/theme.css">
1112
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1213
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
1314
<title>Platformed</title>
@@ -48,4 +49,4 @@
4849
</div>
4950
</body>
5051

51-
</html>
52+
</html>

‎frontend/level.html‎

Lines changed: 104 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,126 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="stylesheet" href="/styles/style.css" />
7-
<link rel="stylesheet" href="/styles/home.css" />
8-
<link rel="stylesheet" href="/styles/level.css" />
9-
<link rel="preconnect" href="https://fonts.googleapis.com" />
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11-
<link
12-
href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap"
13-
rel="stylesheet"
14-
/>
15-
<title>Platformed</title>
16-
</head>
173

18-
<body>
19-
<div class="level-grid">
20-
<div class="topbar">
21-
<a href="/" class="title">Platformed</a>
22-
<div class="right-nav">
23-
<a href="/editor" target="" class="link-button">Editor</a>
24-
<a href="/myLevels" class="link-button my-levels">My Levels</a>
25-
</div>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="/styles/themes.css">
8+
<link rel="stylesheet" href="/styles/style.css" />
9+
<link rel="stylesheet" href="/styles/home.css" />
10+
<link rel="stylesheet" href="/styles/theme.css">
11+
<link rel="stylesheet" href="/styles/level.css" />
12+
<link rel="preconnect" href="https://fonts.googleapis.com" />
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14+
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet" />
15+
<title>Platformed</title>
16+
</head>
17+
18+
<body>
19+
<div class="level-grid">
20+
<div class="topbar">
21+
<a href="/" class="title">Platformed</a>
22+
<div class="right-nav">
23+
<a href="/editor" target="" class="link-button">Editor</a>
24+
<a href="/myLevels" class="link-button my-levels">My Levels</a>
2625
</div>
27-
<div class="content">
28-
<div class="content-wrapper">
29-
<div class="game-wrapper">
30-
<div class="game">
31-
<canvas class="canvas"></canvas>
26+
</div>
27+
<div class="content">
28+
<div class="content-wrapper">
29+
<div class="game-wrapper">
30+
<div class="game">
31+
<canvas class="canvas"></canvas>
3232

33-
<div class="game-info">
34-
<p class="collected-coins"></p>
35-
</div>
33+
<div class="game-info">
34+
<p class="collected-coins"></p>
35+
</div>
3636

37-
<div class="fullscreen-control">
38-
<div class="svg maximize"></div>
39-
<div class="svg minimize"></div>
40-
</div>
37+
<div class="fullscreen-control">
38+
<div class="svg maximize"></div>
39+
<div class="svg minimize"></div>
40+
</div>
4141

42-
<div class="mobile-controls hidden">
43-
<div class="joystick">
44-
<div class="knob"></div>
45-
</div>
46-
<div class="jump">
47-
<img src="/assets/icons/jump.svg" alt="" />
48-
</div>
42+
<div class="mobile-controls hidden">
43+
<div class="joystick">
44+
<div class="knob"></div>
4945
</div>
50-
<div class="loading-screen">
51-
<p>loading...</p>
52-
<div class="progress-bar">
53-
<div class="progress-bar-fill"></div>
54-
</div>
46+
<div class="jump">
47+
<img src="/assets/icons/jump.svg" alt="" />
5548
</div>
56-
<div class="win-screen hidden">
57-
<p>You win!</p>
58-
<div class="options">
59-
<a href="/">Back to levels</a>
60-
<button class="play-again">Play Again</button>
61-
</div>
49+
</div>
50+
<div class="loading-screen">
51+
<p>loading...</p>
52+
<div class="progress-bar">
53+
<div class="progress-bar-fill"></div>
54+
</div>
55+
</div>
56+
<div class="win-screen hidden">
57+
<p>You win!</p>
58+
<div class="options">
59+
<a href="/">Back to levels</a>
60+
<button class="play-again">Play Again</button>
6261
</div>
6362
</div>
6463
</div>
65-
<div class="info">
66-
<div class="row">
67-
<div class="name-wrapper">
68-
<h2 class="name"></h2>
69-
<p>-</p>
70-
<p class="username"></p>
64+
</div>
65+
<div class="info">
66+
<div class="row">
67+
<div class="name-wrapper">
68+
<h2 class="name"></h2>
69+
<p>-</p>
70+
<p class="username"></p>
71+
</div>
72+
<div class="approval-wrapper">
73+
<p class="approval-percentage">100%</p>
74+
<div class="thumbs-up-wrapper">
75+
<div class="svg fill thumbs-up"></div>
76+
<div class="svg nofill thumbs-up" id="thumbs-up"></div>
7177
</div>
72-
<div class="approval-wrapper">
73-
<p class="approval-percentage">100%</p>
74-
<div class="thumbs-up-wrapper">
75-
<div class="svg fill thumbs-up"></div>
76-
<div class="svg nofill thumbs-up" id="thumbs-up"></div>
77-
</div>
78-
<div class="thumbs-down-wrapper">
79-
<div class="svg thumbs-down fill"></div>
80-
<div class="svg thumbs-down nofill" id="thumbs-down"></div>
81-
</div>
78+
<div class="thumbs-down-wrapper">
79+
<div class="svg thumbs-down fill"></div>
80+
<div class="svg thumbs-down nofill" id="thumbs-down"></div>
8281
</div>
8382
</div>
84-
<div class="row">
85-
<p class="description"></p>
86-
<div class="plays-wrapper">
87-
<p>plays/finishes</p>
88-
<p class="plays-finshes">
89-
<span class="plays"></span>/<span class="finishes"></span>
90-
</p>
91-
</div>
83+
</div>
84+
<div class="row">
85+
<p class="description"></p>
86+
<div class="plays-wrapper">
87+
<p>plays/finishes</p>
88+
<p class="plays-finshes">
89+
<span class="plays"></span>/<span class="finishes"></span>
90+
</p>
9291
</div>
9392
</div>
9493
</div>
9594
</div>
9695
</div>
97-
<script type="module"></script>
98-
<script type="module" src="/javascript/site.js"></script>
99-
<script type="module">
100-
import { init, setMode } from "/javascript/site.js";
101-
import {
102-
loadMapFromData,
103-
loadOwnerData,
104-
} from "/javascript/file-utils.js";
105-
setMode("play");
106-
window.addEventListener("loading:progress", async (e) => {
107-
const { loaded, total } = e.detail;
108-
const percentage = (loaded / total) * 100;
109-
document.querySelector(".progress-bar-fill").style.width =
110-
`${percentage}px`;
111-
});
112-
window.addEventListener("level:loaded", async (e) => {
113-
const levelData = await e.detail;
114-
await loadMapFromData(levelData.data);
115-
init();
96+
</div>
97+
<script type="module"></script>
98+
<script type="module" src="/javascript/site.js"></script>
99+
<script type="module">
100+
import {init, setMode} from "/javascript/site.js";
101+
import {
102+
loadMapFromData,
103+
loadOwnerData,
104+
} from "/javascript/file-utils.js";
105+
setMode("play");
106+
window.addEventListener("loading:progress", async (e) => {
107+
const {loaded, total} = e.detail;
108+
const percentage = (loaded / total) * 100;
109+
document.querySelector(".progress-bar-fill").style.width =
110+
`${percentage}px`;
111+
});
112+
window.addEventListener("level:loaded", async (e) => {
113+
const levelData = await e.detail;
114+
await loadMapFromData(levelData.data);
115+
init();
116+
117+
const loadingScreen = document.querySelector(".loading-screen");
118+
if (loadingScreen) {
119+
loadingScreen.remove();
120+
}
121+
});
122+
</script>
123+
<script type="module" src="/javascript/level.js" defer></script>
124+
</body>
116125

117-
const loadingScreen = document.querySelector(".loading-screen");
118-
if (loadingScreen) {
119-
loadingScreen.remove();
120-
}
121-
});
122-
</script>
123-
<script type="module" src="/javascript/level.js" defer></script>
124-
</body>
125126
</html>

‎frontend/login.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
99
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
1010
<link rel="stylesheet" href="/styles/login.css">
11+
<link rel="stylesheet" href="/styles/themes.css">
1112
<title>Document</title>
1213
</head>
1314

@@ -42,4 +43,4 @@ <h1>Login</h1>
4243
<script src="/javascript/login.js" defer></script>
4344
</body>
4445

45-
</html>
46+
</html>

‎frontend/new-level.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<link rel="stylesheet" href="/styles/style.css">
88
<link rel="stylesheet" href="/styles/home.css">
99
<link rel="stylesheet" href="/styles/meta.css">
10+
<link rel="stylesheet" href="/styles/theme.css">
1011
<link rel="preconnect" href="https://fonts.googleapis.com">
1112
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1213
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
@@ -49,4 +50,4 @@
4950
<script src="./javascript/new-level.js" defer></script>
5051
</body>
5152

52-
</html>
53+
</html>

‎frontend/register.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
99
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
1010
<link rel="stylesheet" href="/styles/login.css">
11+
<link rel="stylesheet" href="/styles/theme.css">
1112
<title>Document</title>
1213
</head>
1314

@@ -36,4 +37,4 @@ <h1>Register</h1>
3637
<script src="/javascript/register.js" defer></script>
3738
</body>
3839

39-
</html>
40+
</html>

0 commit comments

Comments
 (0)