1
+ <!DOCTYPE html>
1
2
< html lang ="en ">
2
- <!-- Snipx Head -->
3
- <!-- ................................................ -->
4
3
< head >
5
- < meta charset ="UTF-8 " / >
4
+ < meta charset ="UTF-8 ">
6
5
< title > SnipX</ title >
7
- <!-- Google Font Imports -->
8
- <!-- ................................................ -->
9
- <!-- Material Icons -->
10
- <!-- Readex Pro (500) -->
6
+ <!-- SnipX Imports -->
7
+ < link rel ="stylesheet " href ="style.css ">
8
+ < script defer src ="main.js "> </ script >
9
+ <!-- Google Fonts Imports -->
10
+ <!-- Material Icons and Readex Pro Font -->
11
11
< link rel ="preconnect " href ="https://fonts.googleapis.com ">
12
12
< link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin >
13
- < link rel ="stylesheet " href ="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@500&display=swap ">
14
13
< link rel ="stylesheet " href ="https://fonts.googleapis.com/icon?family=Material+Icons ">
15
- <!-- SnipX Asset Imports -->
16
- <!-- ................................................ -->
17
- <!-- <link rel="stylesheet" href="css/theme.light.css"> -->
18
- < script type ="module " defer src ="index.js "> </ script >
14
+ < link rel ="stylesheet " href ="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@500&display=swap ">
19
15
</ head >
20
- <!-- Snipx Body -->
21
- <!-- ................................................ -->
22
- < body id ="snipx-body ">
23
- <!-- Snipx Header -->
24
- <!-- ................................................ -->
25
- < header id ="snipx-header ">
26
- < a id ="snipx-header-title "> SnipX</ a >
27
- < div id ="snipx-header-icons ">
28
- < span id ="snipx-header-turnon-icon " class ="material-icons "> toggle_on</ span >
29
- < span id ="snipx-header-turnoff-icon " class ="material-icons snipx-hide "> toggle_off</ span >
30
- < span id ="snipx-header-themelight-icon " class ="material-icons snipx-hide "> light_mode</ span >
31
- < span id ="snipx-header-themedark-icon " class ="material-icons snipx-hide "> dark_mode</ span >
32
- < span id ="snipx-header-settings-icon " class ="material-icons "> account_circle</ span >
16
+ < body >
17
+ <!-- Header Component -->
18
+ <!-- The header is displayed on every Section/Page -->
19
+ < header id ="header ">
20
+ <!-- Dynamically load the title through JS -->
21
+ <!-- Give user option to rename extension -->
22
+ < a id ="header_title "> SnipX</ a >
23
+ < div >
24
+ <!-- Load State and Theme Icons dynamically through JS -->
25
+ < span id ="state_button " class ="material-icons "> ...</ span >
26
+ < span id ="theme_button " class ="material-icons "> ...</ span >
27
+ < span id ="settings_button " class ="material-icons "> account_circle</ span >
33
28
</ div >
34
29
</ header >
35
- <!-- Snipx Editor -->
36
- <!-- ................................................ -->
37
- < main id ="snipx-editor ">
38
- < div id ="snipx-editor-menu ">
39
- < div id ="snipx-editor-menu-left ">
40
- < select id ="snipx-editor-menu-select " name ="types " id ="types ">
41
- < option id ="snipx-editor-menu-css " value ="css "> CSS</ option >
42
- < option id ="snipx-editor-menu-js " value ="js "> JS</ option >
43
- </ select >
44
- < div id ="snipx-editor-menu-actions ">
45
- < span id ="snipx-editor-action-shown " class ="material-icons snipx-editor-menu-action "> visibility</ span >
46
- < span id ="snipx-editor-action-hidden " class ="material-icons snipx-editor-menu-action snipx-hide "> visibility_off</ span >
47
- < span id ="snipx-editor-action-locked " class ="material-icons snipx-editor-menu-action " style ="margin-left: -3px; "> lock</ span >
48
- < span id ="snipx-editor-action-unlocked " class ="material-icons snipx-editor-menu-action " style ="margin-left: -3px; "> no_encryption</ span >
30
+
31
+ <!-- Both Sections/Pages are Hidden by default -->
32
+ <!-- Dynamically displayed through JS -->
33
+
34
+ <!-- Editor Page -->
35
+ < div id ="editor_page ">
36
+ < div >
37
+ < div id ="editor_menu ">
38
+ < div id ="editor_actions ">
39
+ < select value ="css " id ="editor_type ">
40
+ < option value ="css "> CSS</ option >
41
+ < option value ="js "> JS</ option >
42
+ </ select >
43
+ < div >
44
+ < span id ="editor_render " class ="material-icons "> ...</ span >
45
+ < span id ="editor_lock " class ="material-icons "> ...</ span >
46
+ </ div >
47
+ < a id ="editor_taburl "> ...</ a >
48
+ </ div >
49
+ < div id ="editor_events ">
50
+ < a id ="editor_clear "> Clear</ a >
51
+ < a id ="editor_save "> Save</ a >
49
52
</ div >
50
- < div id ="snipx-editor-menu-tablink "> </ div >
51
- </ div >
52
- < div id ="snipx-editor-menu-right ">
53
- < button id ="snipx-editor-menu-clearBtn " style ="border-right: 1px solid black; "> Clear</ button >
54
- < button id ="snipx-editor-menu-saveBtn "> Save</ button >
55
53
</ div >
56
54
</ div >
57
- <!-- Snipx CSS Editor -->
58
- <!-- ................................................ -->
59
- < textarea
60
- id ="snipx-editor-textarea-css "
61
- class ="snipx-editor-textarea snipx-hide "
62
- spellcheck ="false "> /* Add CSS Snippet Here! */</ textarea >
63
- <!-- Snipx JS Editor -->
64
- <!-- ................................................ -->
65
- < textarea
66
- id ="snipx-editor-textarea-js "
67
- class ="snipx-editor-textarea snipx-hide "
68
- spellcheck ="false "> /* Add JS Snippet Here! */</ textarea >
69
- </ main >
70
- <!-- Snipx Settings -->
71
- <!-- ................................................ -->
72
- < main id ="snipx-settings ">
73
- < div id ="snipx-settings-closer "> Settings</ div >
74
- </ main >
55
+ < textarea id ="editor_css " class ="editor "> /* CSS Editor */</ textarea >
56
+ < textarea id ="editor_js " class ="editor "> // JS Editor</ textarea >
57
+ </ div >
58
+
59
+ <!-- Settings Page -->
60
+ < section id ="settings_page ">
61
+ < div >
62
+ < h1 > Settings</ h1 >
63
+ </ div >
64
+ </ section >
65
+
75
66
</ body >
76
67
</ html >
0 commit comments