Skip to content

Commit 2bf81d7

Browse files
RadonCodingRadonCoding
committed
Frontend design updates
1 parent f1fe744 commit 2bf81d7

3 files changed

Lines changed: 148 additions & 288 deletions

File tree

‎index.html‎

Lines changed: 65 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,15 @@
1717
<title>RadonCoding</title>
1818
</head>
1919
<body>
20-
<main>
21-
<section id="portfolio">
22-
<img
23-
class="portfolio__profile"
24-
src="https://avatars.githubusercontent.com/u/86915746?v=4"
25-
alt="Profile"
26-
/>
27-
<div class="portfolio__details">
28-
<h1 class="portfolio__title">RadonCoding</h1>
29-
<pre class="portfolio__comment">
20+
<section class="portfolio">
21+
<img
22+
class="portfolio__profile"
23+
src="https://avatars.githubusercontent.com/u/86915746?v=4"
24+
alt="Profile"
25+
/>
26+
<div class="portfolio__details">
27+
<h1 class="portfolio__title">RadonCoding</h1>
28+
<pre class="portfolio__comment">
3029
/**
3130
* - Full-stack developer
3231
* - Reverse engineer
@@ -36,57 +35,68 @@ <h1 class="portfolio__title">RadonCoding</h1>
3635
* TypeScript, Python, Go
3736
*
3837
*/</pre
39-
>
40-
</div>
41-
<nav class="portfolio__contacts">
42-
<a
43-
class="portfolio__contact"
44-
href="https://github.com/RadonCoding"
45-
data-tooltip="Opening GitHub"
46-
aria-label="Open GitHub"
47-
>
48-
<i class="bi bi-github"></i>
49-
</a>
38+
>
39+
</div>
40+
<nav class="portfolio__contacts">
41+
<a
42+
class="portfolio__contact"
43+
href="https://github.com/RadonCoding"
44+
data-tooltip="Opening GitHub"
45+
aria-label="Open GitHub"
46+
>
47+
<i class="bi bi-github"></i>
48+
</a>
5049

51-
<a
52-
class="portfolio__contact portfolio__contact--copy"
53-
data-copy="radonreborn"
54-
data-tooltip="Copied Username"
55-
aria-label="Copy Username"
56-
>
57-
<i class="bi bi-discord"></i>
58-
</a>
59-
</nav>
60-
</section>
50+
<a
51+
class="portfolio__contact portfolio__contact--copy"
52+
data-copy="radonreborn"
53+
data-tooltip="Copied Username"
54+
aria-label="Copy Username"
55+
>
56+
<i class="bi bi-discord"></i>
57+
</a>
58+
</nav>
59+
</section>
6160

62-
<section id="workspace">
63-
<div class="compiler">
64-
<header class="compiler__header">
65-
<span class="compiler__title">Compiler</span>
66-
<button id="compile-button" aria-label="Compile">
67-
<i class="bi bi-gear-fill"></i>
68-
</button>
69-
</header>
61+
<section class="workspace">
62+
<div class="compiler">
63+
<header class="compiler__header">
64+
<span class="compiler__title">Compiler</span>
65+
<button
66+
id="compile-button"
67+
class="compiler__button"
68+
aria-label="Compile"
69+
>
70+
<i class="bi bi-gear-fill"></i>
71+
</button>
72+
</header>
7073

71-
<div id="error-tooltip"></div>
74+
<div id="error-tooltip"></div>
7275

73-
<pre
74-
id="compiler-input"
75-
contenteditable="true"
76-
spellcheck="false"
77-
></pre>
76+
<pre
77+
id="compiler-input"
78+
class="compiler__input"
79+
contenteditable="true"
80+
spellcheck="false"
81+
></pre>
7882

79-
<div id="compiler-output" class="compiler__output">
80-
<div class="compiler__output-header">
81-
<span class="compiler__output-label">Output</span>
82-
<button id="toggle-output" aria-label="Toggle Output">
83-
<i class="bi bi-chevron-down"></i>
84-
</button>
85-
</div>
86-
<div id="compiler-console"></div>
83+
<div id="compiler-output" class="compiler__output">
84+
<div class="compiler__output-header">
85+
<span class="compiler__output-label">Output</span>
86+
<button
87+
id="compiler-output-toggle"
88+
class="compiler__output-toggle"
89+
aria-label="Toggle Output"
90+
>
91+
<i class="bi bi-chevron-down"></i>
92+
</button>
8793
</div>
94+
<div
95+
id="compiler-output-console"
96+
class="compiler__output-console"
97+
></div>
8898
</div>
89-
</section>
90-
</main>
99+
</div>
100+
</section>
91101
</body>
92102
</html>

‎src/compiler/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import example from "../assets/example.rn?raw";
77

88
async function compile() {
99
const input = document.getElementById("compiler-input")!;
10-
const output = document.getElementById("compiler-console")!;
10+
const output = document.getElementById("compiler-output-console")!;
1111

1212
function clearOutput() {
1313
output.innerText = "";
@@ -91,7 +91,7 @@ document.addEventListener("DOMContentLoaded", () => {
9191

9292
input.addEventListener("input", () => highlight(input));
9393

94-
const toggle = document.getElementById("toggle-output")!;
94+
const toggle = document.getElementById("compiler-output-toggle")!;
9595
const container = document.getElementById("compiler-output")!;
9696

9797
toggle.addEventListener("click", () => {

0 commit comments

Comments
 (0)