-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (87 loc) · 5.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MicroPython Package Installer</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Roboto+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/buttons.css">
<link rel="stylesheet" href="css/item-selection.css">
<link rel="stylesheet" href="css/package-list.css">
<link rel="stylesheet" href="css/search.css">
<link rel="stylesheet" href="css/advanced-options.css">
<link rel="stylesheet" href="css/status-bar.css">
<link rel="stylesheet" href="css/loading-spinner.css">
</head>
<body>
<!-- Upper Section -->
<div class="upper-section">
<div class="main-container">
<h1>📦 MicroPython Package Installer</h1>
<!-- Board Selection -->
<div class="container" id="device-selection">
<div class="container"><h2>Detected Boards</h2><button id="reload-link" class="secondary small">Reload</button></div>
<div class="item-selection-list"></div>
</div>
<!-- Search Field -->
<div class="container" id="search-container">
<h2>Packages</h2>
<div id="search">
<span id="search-icon">
<!-- Magnifying glass SVG -->
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4658 14.5783L11.0908 10.2033C12.1049 8.96159 12.6031 7.37764 12.4822 5.77899C12.3614 4.18033 11.6309 2.68924 10.4417 1.61402C9.25248 0.538793 7.69557 -0.0383303 6.09286 0.00197775C4.49016 0.0422858 2.96423 0.696942 1.83058 1.83058C0.696942 2.96423 0.0422858 4.49016 0.00197775 6.09286C-0.0383303 7.69557 0.538793 9.25248 1.61402 10.4417C2.68924 11.6309 4.18033 12.3614 5.77899 12.4822C7.37764 12.6031 8.96159 12.1049 10.2033 11.0908L14.5783 15.4658C14.6364 15.5244 14.7056 15.5709 14.7817 15.6026C14.8579 15.6344 14.9396 15.6507 15.0221 15.6507C15.1046 15.6507 15.1863 15.6344 15.2624 15.6026C15.3386 15.5709 15.4077 15.5244 15.4658 15.4658C15.5244 15.4077 15.5709 15.3386 15.6026 15.2624C15.6344 15.1863 15.6507 15.1046 15.6507 15.0221C15.6507 14.9396 15.6344 14.8579 15.6026 14.7817C15.5709 14.7056 15.5244 14.6364 15.4658 14.5783V14.5783ZM6.27208 11.2721C5.28318 11.2721 4.31648 10.9788 3.49423 10.4294C2.67199 9.88003 2.03113 9.09913 1.65269 8.1855C1.27425 7.27187 1.17523 6.26654 1.36816 5.29663C1.56108 4.32673 2.03729 3.43581 2.73655 2.73655C3.43581 2.03729 4.32673 1.56108 5.29663 1.36816C6.26654 1.17523 7.27187 1.27425 8.1855 1.65269C9.09913 2.03113 9.88003 2.67199 10.4294 3.49423C10.9788 4.31648 11.2721 5.28318 11.2721 6.27208C11.2721 7.59817 10.7453 8.86994 9.80762 9.80762C8.86994 10.7453 7.59817 11.2721 6.27208 11.2721V11.2721Z" fill="#434F54"/>
</svg>
</span>
<input id="search-field" type="search" placeholder="Search package..." oninput="performSearch()">
</div>
<div id="results-count" style="display: none;">0 packages found</div>
</div>
<div id="advanced-options-toggle" class="advanced-toggle" onclick="toggleAdvancedOptions()">
<span id="disclosure-icon">▸</span> <!-- Right-pointing triangle -->
Advanced Options
</div>
<div id="advanced-options" class="advanced-options">
<div class="container">
<input type="text" id="github-url" placeholder="Enter custom URL">
<button id="manual-install-btn" class="primary" onclick="manualInstall()">Install</button>
</div>
<div>
<input type="checkbox" id="compile-files" />
<label for="compile-files">Convert files to .mpy to optimize speed and size</label>
</div>
<div>
<input type="checkbox" id="overwrite-existing" />
<label for="overwrite-existing">Allow overwriting existing packages</label>
</div>
</div>
</div>
</div>
<!-- Status Bar -->
<div id="status-bar" class="status-bar hidden">
<span id="status-message"></span>
<div class="loading-spinner small hidden"></div>
<div id="status-bar-close" class="close-button">
<!-- Close button SVG -->
<svg id="close-icon" width="10" height="10" viewBox="0 0 10 10" fill="#eee" xmlns="http://www.w3.org/2000/svg">
<path d="M10 0.707107L9.29289 0L5 4.29289L0.707107 0L0 0.707107L4.29289 5L0 9.29289L0.707107 10L5 5.70711L9.29289 10L10 9.29289L5.70711 5L10 0.707107Z" fill="#eee"/>
</svg>
</div>
</div>
<!-- Divider -->
<hr class="divider">
<!-- Lower Section -->
<div class="lower-section">
<div id="overlay"></div> <!-- Translucent overlay to cover search results -->
<div id="search-results-wrapper">
<div id="package-list" class="scrollable-content main-container">
<!-- Package items will be dynamically added here by renderer.js -->
</div>
</div>
</div>
<!-- Include the renderer.js script -->
<script src="renderer.js"></script>
</body>
</html>