-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (114 loc) · 6.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./main.css">
<script src="main.js"></script>
</head>
<body>
<div class="grid-container">
<div class="grid-navbar">
<div class="flex-navbar">
<H3>Device Setup</H3>
</div>
</div>
<div class="grid-content">
<div class="grid-checklist">
<div id="checklistCards" class="flex-checklist">
<!-- Generated via JavaScript -->
</div>
</div>
<div class="grid-script">
<div class="flex-script">
<textarea class="script-text-area" id="scriptBox" name="script-box" wrap="off"></textarea>
</div>
</div>
</div>
<div class="grid-buttons">
<div class="grid-config-search">
<div id="checklistControls" class="flex-config-search">
<label>
<input type="button" id="selectChecklistButton" class="button" value="Deselect All">
</label>
<input type="text" id="checklistSearchBar" class="search-bar" placeholder="search...">
</div>
</div>
<div class="grid-script-buttons">
<div id="appControls" class="flex-script-buttons">
<!-- Buttons -->
<label>
<input type="button" id="generateScriptButton" class="button pad-right" value="Generate">
</label>
<!-- Radio Button 1 -->
<label class="custom-radial">
<input type="radio" id="radioMac" name="radioSelectOS" checked="checked">
<span class="custom-radial-checkmark"></span>
</label>
<p class="custom-checkbox-text">Mac</p>
<!-- Radio Button 2 -->
<label class="custom-radial">
<input type="radio" id="radioLinux" name="radioSelectOS">
<span class="custom-radial-checkmark"></span>
</label>
<p class="custom-checkbox-text">Linux</p>
<!-- Radio Button 3 -->
<label class="custom-radial">
<input type="radio" id="radioWindows" name="radioSelectOS">
<span class="custom-radial-checkmark"></span>
</label>
<p class="custom-checkbox-text">Windows</p>
<!-- Help Popup -->
<label>
<div class="help-button">
<div class="help-button-icon">?</div>
<div class="help-content">
<div class="grid-help-menu">
<div class="grid-help-menu-title">
<div class="flex-help-menu-title">
<H4>Help Menu</H4>
</div>
</div>
<div class="grid-help-menu-content">
<div class="grid-help-menu-content-tl">
<div class="flex-help-menu-content-tl">
<p>This site is meant for rapidly setting up a new development environment, or augmenting an existing one. All the applications and custom configuration are things that I personally use. This applications usage is divided into 3 sections.</p>
</div>
</div>
<div class="grid-help-menu-content-tr">
<div class="flex-help-menu-content-tr">
<H3>The Controls</H3>
<p>This is the bottom toolbar. You can control mass selection of the checkboxes, search the checkboxes, and control what operating system you wish to work with.</p>
</div>
</div>
<div class="grid-help-menu-content-br">
<div class="flex-help-menu-content-br">
<H3>The Script</H3>
<p>This is the right column. The install script gets generated based off what is checked in the checklist. When you click the text area, the script should be automatically copied to your clipboard.</p>
</div>
</div>
<div class="grid-help-menu-content-bl">
<div class="flex-help-menu-content-bl">
<H3>The Checklist</H3>
<p>This is the left column of available applications and configurations. When you click the checkbox, you are indicating you want the configured script value for that card.</p>
</div>
</div>
</div>
<div class="grid-help-menu-footer">
<div class="flex-help-menu-footer">
<p class="text-warning">This tool was built for personal use.<br>3rd Party Applications and their respective icons are not endorsements.<br>Be careful when using copied install scripts from the internet.<br>Use at your own risk.</p>
</div>
</div>
</div>
</div>
<div class="page-overlay"></div>
</div>
</label>
<!-- Link to GitHub -->
<label>
<a href="https://github.com/UsernameError3/dev-setup" target="_blank"><img class="github-icon" src="./img/github-mark-light-32px.png" alt="GitHub Link" ></a>
</label>
</div>
</div>
</div>
</div>
</body>
</html>