Skip to content

Commit a0c4ef1

Browse files
mr150mr150
authored
Merge pull request #3 from mlutcss/feat/logic
Frontend mvp
2 parents bf86ad2 + 427f9b4 commit a0c4ef1

15 files changed

Lines changed: 1225 additions & 143 deletions

‎index.html‎

Lines changed: 86 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,99 @@
11
<!doctype html>
2-
<html lang="en" class="Fnf-mUss -HeaderH16u">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" href="src/assets/img/favicon.png" type="image/x-icon">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>mlut playground</title>
8-
<link href="assets/style.css" rel="stylesheet">
9-
<script type="module" src="/src/components/style-tab.js"></script>
2+
<html lang="en" class="Fnf-mUss -HeaderH14u -SectionHeaderH10u">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="src/assets/img/favicon.png" type="image/x-icon">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>mlut playground</title>
8+
<link rel="stylesheet" href="/src/assets/style/style.css" />
109
</head>
11-
<body class="P0 M0 H100vh">
12-
<header class="W100p H-$headerH Ps-a T0 L0 Mxh18u D-g Gtc1fr;1fr P2u;5u Bgc-$core700">
13-
<!-- Logo part-->
14-
<div class="W50p D-f Ai-c">
15-
<div class=" D-f Ai-fe Gap3u W100p">
16-
<img class="D H7u" alt="mlut logo" src="src/assets/img/mlut.png">
17-
<span class="D-ib Fns5u C-$accent700">Playground</span>
18-
</div>
19-
</div>
10+
<body class="P0 M0 H100vh">
11+
<header class="W100p H-$headerH Mxh18u D-g Gtc1fr;1fr P2u;5u Bgc-$core700">
12+
<!-- Logo part-->
13+
<div class="W50p D-f Ai-c">
14+
<div class=" D-f Ai-fe Gap3u W100p">
15+
<img class="D H7u" alt="mlut logo" src="src/assets/img/mlut.png">
16+
<span class="D-ib Fns5u C-$accent700">Playground</span>
17+
</div>
18+
</div>
2019

2120
<!-- Navbar-->
2221

23-
<nav class=" D-f Ai-c Jc-fe P1u;3u">
24-
<ul class="Lsst-n D-f Jc-c Gap4u Ai-c P0 Fns5u M0">
25-
<li class="M0">
26-
<a href="https://mlut.style/" class="Txd-n C-$accent800 C-$brand_h -Ts Fnw600"> Main</a>
27-
</li>
28-
<li class="M0">
29-
<a href="https://mlutcss.github.io/mlut/" class="Txd-n C-$accent800 C-$brand_h -Ts Fnw600"> Docs</a>
30-
</li>
31-
</ul>
32-
</nav>
22+
<nav class=" D-f Ai-c Jc-fe P1u;3u">
23+
<ul class="Lsst-n D-f Jc-c Gap4u Ai-c P0 Fns5u M0">
24+
<li class="M0">
25+
<a href="https://mlut.style/" class="Txd-n C-$accent800 C-$brand_h -Ts Fnw600"> Main</a>
26+
</li>
27+
<li class="M0">
28+
<a href="https://mlutcss.github.io/mlut/" class="Txd-n C-$accent800 C-$brand_h -Ts Fnw600"> Docs</a>
29+
</li>
30+
</ul>
31+
</nav>
3332

3433
</header>
3534

36-
<main class="D-f Ai-str H100vh Pt-$headerH ">
37-
38-
<!-- Left part-->
39-
<div class="W50p D-f Fld-c ">
40-
41-
<!-- HTML sample's wrapper-->
42-
<div class="H50p D-f Fld-c">
43-
<!-- Header-->
44-
<div class="H12u P0;5u Bgc-$core800 Bdt1;s;$accent700 Bdb1;s;$accent700 D-f Jc-sb Ai-c">
45-
<span class="C-$brand Fnw600"> HTML</span>
46-
<button class="D-ib -Sz8u Bd-n Bdrd2u Bgc-tp Bgc-$brand_h -Ts -Ctx">
47-
<svg class="-Sz100p St-$accent800 Tsd-ih ^:h:_St-$core800">
48-
<use href="src/assets/img/icons.svg#copy"></use>
49-
</svg>
50-
</button>
51-
</div>
52-
<!-- HTML part's body-->
53-
<div class="Flg1">
54-
<textarea id="markup" placeholder="Enter HTML markup"
55-
class="D -Sz100p Bd-n Ol-n_f P4u Rs Bgc-$core700 C-$accent800"></textarea>
56-
</div>
57-
</div>
58-
59-
<!-- CSS sample's wrapper-->
60-
<div class="H50p D-f Fld-c -Ctx-wrapper">
61-
<!-- Header-->
62-
<div class="H12u P0;5u Bgc-$core800 Bdt1;s;$accent700 Bdb1;s;$accent700 D-f Jc-sb Ai-c">
63-
<div class="D-f Jc-sb Gap5u C-$accent800">
64-
<style-tab checked="checked" radioId="CSS" name="Style" text="CSS"></style-tab>
65-
<style-tab radioId="SCSS" name="Style" text="SCSS"></style-tab>
35+
<div class="H-calc(100%;-;var(--ml-headerH)) W100p Ps-r loader">
36+
<main-comp class="H100p Ps-r ">
37+
<main class="D-f Ai-str H100p Ps-r">
38+
<!-- Left part-->
39+
<div class="W50p D-f Fld-c">
40+
<!-- HTML sample's wrapper-->
41+
<div class="H50p D-f Fld-c">
42+
<!-- Header-->
43+
<div class="H-$sectionHeaderH P0;5u Bgc-$core800 Bdt1;s;$accent700 Bdb1;s;$accent700 D-f Jc-sb Ai-c">
44+
<span class="C-$brand Fnw600"> HTML</span>
45+
<copy-button lang="html"></copy-button>
46+
</div>
47+
<!-- HTML part's body-->
48+
<div class="H-calc(100%;-;$sectionHeaderH) Bgc-$core700">
49+
<code-editor lang="html"></code-editor>
50+
</div>
51+
</div>
52+
<!-- CSS sample's wrapper-->
53+
<div class="H50p">
54+
<tab-switch></tab-switch>
55+
</div>
6656
</div>
67-
<button class="D-ib -Sz8u Bd-n Bdrd2u Bgc-tp Bgc-$brand_h -Ts -Ctx-button">
68-
<svg class="-Sz100p St-$accent800 Tsd-ih ^button:h:_St-$core800">
69-
<use href="src/assets/img/icons.svg#copy"></use>
70-
</svg>
71-
</button>
72-
</div>
73-
74-
<!-- CSS part's body-->
75-
76-
<div class="Flg1 C-$accent800">
77-
<textarea id="css-area" placeholder="Enter CSS styles" data-type="style"
78-
class="D-n -Sz100p Bd-n Ol-n_f P4u Rs-n Bgc-$core700 C-$accent800"></textarea>
79-
<textarea id="scss-area" placeholder="Enter SCSS styles" data-type="style"
80-
class="D-n -Sz100p Bd-n Ol-n_f P4u Rs-n Bgc-$core700 C-$accent800"></textarea>
81-
</div>
82-
</div>
83-
84-
</div>
8557

86-
<!-- The right part-->
87-
<div class="W50p D-f Fld-c ">
88-
<!-- Preview part-->
89-
<div class="Flg1 Bdl1;s;$accent700 D-f Fld-c">
90-
<!-- Header-->
91-
<div class="H12u Flg0 P0;5u Bgc-$core800 Bdt1;s;$accent700 Bdb1;s;$accent700 D-f Jc-sb Ai-c">
92-
<span class="C-$brand Fnw600"> Preview</span>
93-
<div>
94-
<button class="D-ib -Sz8u Bd-n Bdrd2u Bgc-tp Bgc-$brand_h -Ts -Ctx">
95-
<svg class="-Sz100p St-$accent800 Tsd-ih ^:h:_St-$core800">
96-
<use href="src/assets/img/icons.svg#refresh"></use>
97-
</svg>
98-
</button>
58+
<!-- The right part-->
59+
<div class="W50p D-f Fld-c ">
60+
<!-- Preview part-->
61+
<div class="Flg1 Bdl1;s;$accent700 D-f Fld-c">
62+
<!-- Header-->
63+
<div class="H-$sectionHeaderH Flg0 P0;5u Bgc-$core800 Bdt1;s;$accent700 Bdb1;s;$accent700 D-f Jc-sb Ai-c">
64+
<span class="C-$brand Fnw600"> Preview</span>
65+
</div>
66+
<!-- Preview's Body -->
67+
<div class="H-calc(100%;-;$sectionHeaderH) Ps-r">
68+
<code-preview class="preview-loader"></code-preview>
69+
</div>
70+
</div>
9971
</div>
100-
</div>
72+
</main>
73+
</main-comp>
74+
</div>
75+
<script type="importmap">
76+
{
77+
"imports": {
78+
"immutable": "https://unpkg.com/immutable@^4.0.0",
79+
"sass": "https://unpkg.com/sass@^1.63.0/sass.default.js"
80+
}
81+
}
82+
</script>
83+
<script type="module" src="/src/assets/scripts/loader-helper.js"></script>
84+
<script type="module" src="/src/components/style-tab.js"></script>
85+
<script type="module" src="/src/components/copy-button.js"></script>
86+
<script type="module" src="/src/components/content-loader.js"></script>
87+
<script type="module" src="/src/components/code-editor.js"></script>
88+
<script type="module" src="/src/components/code-preview.js"></script>
89+
<script type="module" src="/src/components/tab-switch.js"></script>
90+
<script type="module" src="/src/components/main-comp.js"></script>
91+
<script type="module">
92+
globalThis.mlut = {
93+
githubToken: 'ghp_3'+'zrlp3dAxUL'+'fPGhkJAzZgG5gn'+'23saW1BlQH1',
94+
};
95+
</script>
96+
<script type="module" src="https://unpkg.com/@mlut/core@latest/dist/index.js"></script>
10197

102-
<!-- Preview's Body -->
103-
<iframe src="https://mlut.style/" class="W100p Flg1 Bd-n">
104-
</iframe>
105-
</div>
106-
</div>
107-
</main>
108-
</body>
98+
</body>
10999
</html>

0 commit comments

Comments
 (0)