-
<!DOCTYPE html>
+
<html lang="en">
<head>
-<meta charset="utf-8"/>
-<style>
-* {
- box-sizing: border-box;
-}
-
-body {
- font-family: "Roboto", "Helvetica", "Arial", sans-serif;
- margin: 0px;
-}
-
-/*the container must be positioned relative:*/
-.autocomplete {
- position: relative;
- display: inline-block;
-}
-
-input {
- border: 1px solid transparent;
- background-color: #f1f1f1;
- padding: 10px;
- font-size: 0.875rem;
-}
-
-input[type=text] {
- background-color: #f1f1f1;
- width: 100%;
-}
-
-/*
-input[type=submit] {
- background-color: DodgerBlue;
- color: #fff;
- cursor: pointer;
-}*/
-
-.autocomplete-items {
- position: absolute;
- border: 1px solid #d4d4d4;
- border-bottom: none;
- border-top: none;
- z-index: 99;
- /*position the autocomplete items to be the same width as the container:*/
- top: 100%;
- left: 0;
- right: 0;
-}
-
-.autocomplete-items div {
- padding: 10px;
- cursor: pointer;
- background-color: #fff;
- border-bottom: 1px solid #d4d4d4;
-}
-
-/*when hovering an item:*/
-.autocomplete-items div:hover {
- background-color: #e9e9e9;
-}
-
-/*when navigating through the items using the arrow keys:*/
-.autocomplete-active {
- background-color: DodgerBlue !important;
- color: #ffffff;
-}
-
-header {
- font-size: 0.875rem;
- font-weight: 500;
- line-height: 1.75;
- letter-spacing: 0.02857em;
- text-transform: uppercase;
-
- text-align: center;
- position: static;
- width: 100%;
- z-index: 1100;
- box-sizing: border-box;
- display: flex;
- flex-shrink: 0;
- flex-direction: column;
- box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
-
- color: #fff;
- background-color: #3F51B5;
-}
-
-h6 {
- margin: 0;
- font-size: 1.25rem;
- font-weight: 500;
- line-height: 1.6;
- letter-spacing: 0.0075em;
-}
-
-a {
- box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12);
- padding: 6px 16px;
- min-width: 64px;
- box-sizing: border-box;
- transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- line-height: 1.75;
- border-radius: 4px;
- border: 0;
- cursor: pointer;
- margin: 0;
- display: inline-flex;
- outline: 0;
- position: relative;
- align-items: center;
- user-select: none;
- vertical-align: middle;
- justify-content: center;
- text-decoration: none;
-}
-.MuiButton-label {
- width: 100%;
- display: inherit;
- align-items: inherit;
- justify-content: inherit;
-
- cursor: pointer;
-}
-
-.MuiTouchRipple-root {
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
- position: absolute;
- border-radius: inherit;
- pointer-events: none;
-}
-
-.MuiButton-containedSecondary {
- color: #fff;
- background-color: #009688;
-}
-
-.MuiSvgIcon-root {
- fill: currentColor;
- width: 1em;
- height: 1em;
- display: inline-block;
- font-size: 1.5rem;
- transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- flex-shrink: 0;
- user-select: none;
-}
-
-
-.MuiToolbar-gutters {
- padding-left: 24px;
- padding-right: 24px;
- min-height: 64px;
-
- display: flex;
- position: relative;
- align-items: center;
- color: #fff;
-}
-
-
-.MuiContainer-maxWidthLg {
- max-width: 1280px;
- padding-left: 32px;
- padding-right: 32px;
- width: 100%;
- box-sizing: border-box;
- margin-left: auto;
- margin-right: auto;
- margin-top: 30px;
- margin-bottom: 100px;
-}
-
-.MuiPaper-rounded {
- padding: 30px;
- text-align: left;
- box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);
- border-radius: 4px;
- color: rgba(0, 0, 0, 0.87);
- transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- background-color: #fff;
-}
-
-</style>
-</head>
-<body>
+ <meta charset="utf-8"/>
+ <title>OpenWrt Firmware Selector</title>
+ <link rel="stylesheet" href="index.css" />
+ <script src="i18n.js"></script>
+ <script src="config.js"></script>
+ <script src="index.js"></script>
+</head>
+<body onload="init()">
<header>
- <div class="MuiToolbar-gutters">
- <h6 class="MuiTypography-h6" edge="start">OpenWrt Firmware Selector</h6>
- <div style="flex-grow: 1;"></div>
- <a class="MuiButton-containedSecondary" tabindex="0" href="#">
- <span class="MuiButton-label">
- <span class="language-toggle-text">Change Language </span>
- <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path>
- </svg>
- </span>
- <span class="MuiTouchRipple-root"></span>
- </a>
- </div>
+ <div>
+<!--
+ <h6 class="tr-title">OpenWrt Firmware Selector</h6>
+-->
+ <img src="logo.png" alt="Logo">
+ <div style="flex-grow: 1;"></div>
+
+ <select id="language-selection" size="1">
+ <option value="ca">Català</option>
+ <option value="en">English</option>
+ <option value="es">Español</option>
+ <option value="de">Deutsch</option>
+ <option value="fr">Français</option>
+ <option value="it">Italiano</option>
+ <option value="no">Norsk</option>
+ <option value="pl">Polski</option>
+ <option value="tr">Türkçe</option>
+ </select>
+ </div>
</header>
-
-<div class="MuiContainer-maxWidthLg">
- <div class="MuiPaper-rounded">
- <h2>Download OpenWrt firmware for your device!</h5>
- <p>Please use the input below to download firmware for your device!</p>
- <br>
- <select id="releases" size="1" style="width:10em;">
- </select>
-
- <!--Make sure the form has the autocomplete function switched off:-->
- <div class="autocomplete" style="width:20em;">
- <input id="models" type="text" name="myCountry" placeholder="Model">
- </div>
+<div class="container">
+ <div>
+ <h2 class="tr-load">Download OpenWrt firmware for your device!</h2>
+ <p class="tr-message">Please use the input below to download firmware for your device!</p>
+ <br>
+
+ <select id="versions" size="1"></select>
+ <div id="models-autocomplete" class="autocomplete">
+ <input id="models" type="text" placeholder="Model" spellcheck="false" autocapitalize="off" autocorrect="off">
+ </div>
+
+ <br />
+ <br />
+
+ <div>
+ <img id="buildspinner" src="spinner.gif" alt="Logo">
+ <div id="buildstatus"></div>
+ </div>
+
+ <div id="images">
+ <div id="custom">
+ <h3 class="tr-customize">Customize</h3>
+ <div class="autocomplete">
+ <textarea id="packages" spellcheck="false" autocapitalize="off" autocorrect="off"></textarea>
+ </div>
+ <a href="javascript:build_asa_request()" class="custom-link">
+ <span>⚙</span><span class="tr-request-build">Request Build</span>
+ </a>
+ </div>
+
+ <div>
+ <h3 id="images-title" class="tr-version-build">Release Build</h3>
+ <div><span class="column tr-model">Model:</span> <span id="image-model"></span></div>
+ <div><span class="column tr-target">Target:</span> <span id="image-target"></span></div>
+ <div><span class="column tr-version">Version:</span> <span id="image-version"></span> (<span id="image-code"></span>)</div>
+ <div><span class="column tr-date">Date:</span> <span id="image-date"></span></div>
+ </div>
+
+ <div id="download-links">
+ <h3 id="downloads-title" class="tr-downloads">Downloads</h3>
+ </div>
+
+ <div>
+ <span id="factory-help" class="download-help tr-factory-help">Factory images are for flashing routers with OpenWrt for the first time using the web interface of the original firmware.</span>
+ <span id="sysupgrade-help" class="download-help tr-sysupgrade-help">Sysupgrade images are for flashing routers that already run OpenWrt. The image can be applied using the web interface or the console.</span>
+ <span id="kernel-help" class="download-help tr-kernel-help">Linux kernel as a separate image.</span>
+ <span id="rootfs-help" class="download-help tr-rootfs-help">Root file system as a separate image.</span>
+ <span id="sdcard-help" class="download-help tr-sdcard-help">Image that is meant to be flashed on an SD-Card.</span>
+ <span id="tftp-help" class="download-help tr-tftp-help">Image that can be applied using the TFTP meachnism of the bootloader</span>
+ <span id="other-help" class="download-help tr-other-help">Image of unknown purpose.</span>
+ </div>
+ </div>
+
+ <div id="footer">
+ <span><a href="https://github.com/mwarning/yet_another_firmware_selector">YAFS</a> v2.2.0</span>
+ </div>
+ </div>
</div>
-
-<script>
-
-function loadFile(url, callback) {
- var xmlhttp = new XMLHttpRequest();
- xmlhttp.onreadystatechange = function() {
- if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
- callback(xmlhttp.responseText, url);
- }
- };
- xmlhttp.open('GET', url, true);
- xmlhttp.send();
-}
-
-function setupImageList(select, items, onselection) {
-
-}
-
-function setupSelectList(select, items, onselection) {
- for (var i = 0; i < items.length; i += 1) {
- var option = document.createElement("OPTION");
- option.innerHTML = items[i];
- select.appendChild(option);
- }
-
- select.addEventListener("change", function(e) {
- onselection(items[select.selectedIndex]);
- });
-
- if (select.selectedIndex >= 0) {
- onselection(items[select.selectedIndex]);
- }
-}
-
-// Change the translation of the entire document
-function changeTranslation() {
- var mapping = translations[config.language];
- for (var id in mapping) {
- var elements = document.getElementsByClassName(id);
- for (var i in elements) {
- if (elements.hasOwnProperty(i)) {
- elements[i].innerHTML = mapping[id];
- }
- }
- }
-}
-
-function setupAutocompleteList(input, items, onselection) {
- /*the setupAutocompleteList function takes two arguments,
- the text field element and an array of possible autocompleted values:*/
- var currentFocus = -1;
-
- /*execute a function when someone writes in the text field:*/
- input.addEventListener("input", function(e) {
- var value = this.value;
- /*close any already open lists of autocompleted values*/
- closeAllLists();
- if (!value) { return false; }
-
- /*create a DIV element that will contain the items (values):*/
- var list = document.createElement("DIV");
- list.setAttribute("id", this.id + "-autocomplete-list");
- list.setAttribute("class", "autocomplete-items");
- /*append the DIV element as a child of the autocomplete container:*/
- this.parentNode.appendChild(list);
-
- /*for each item in the array...*/
- var c = 0;
- for (var i = 0; i < items.length; i += 1) {
- var item = items[i];
- // match
- var j = item.toUpperCase().indexOf(value.toUpperCase());
- if (j < 0) {
- continue;
- }
-
- c += 1;
- if (c >= 10) {
- var div = document.createElement("DIV");
- div.innerHTML = "...";
- list.appendChild(div);
- break;
- } else {
- var div = document.createElement("DIV");
- /*make the matching letters bold:*/
- div.innerHTML = item.substr(0, j)
- + "<strong>" + item.substr(j, value.length) + "</strong>"
- + item.substr(j + value.length)
- + "<input type='hidden' value='" + item + "'>";
-
- div.addEventListener("click", function(e) {
- /* set text field to selected value */
- input.value = this.getElementsByTagName("input")[0].value;
- /*close the list of autocompleted values,
- (or any other open lists of autocompleted values:*/
- closeAllLists();
- // callback
- onselection(input.value);
- });
-
- list.appendChild(div);
- }
- }
- });
-
- /*execute a function presses a key on the keyboard:*/
- input.addEventListener("keydown", function(e) {
- var x = document.getElementById(this.id + "-autocomplete-list");
- if (x) x = x.getElementsByTagName("div");
- if (e.keyCode == 40) {
- // key down
- currentFocus += 1;
- /*and and make the current item more visible:*/
- setActive(x);
- } else if (e.keyCode == 38) {
- // key up
- currentFocus -= 1;
- /*and and make the current item more visible:*/
- setActive(x);
- } else if (e.keyCode == 13) {
- /*If the ENTER key is pressed, prevent the form from being submitted,*/
- e.preventDefault();
- if (currentFocus > -1) {
- /*and simulate a click on the "active" item:*/
- if (x) x[currentFocus].click();
- }
- }
- });
-
- function setActive(x) {
- /*a function to classify an item as "active":*/
- if (!x) return false;
- /*start by removing the "active" class on all items:*/
- for (var i = 0; i < x.length; i++) {
- x[i].classList.remove("autocomplete-active");
- }
- if (currentFocus >= x.length) currentFocus = 0;
- if (currentFocus < 0) currentFocus = (x.length - 1);
- /*add class "autocomplete-active":*/
- x[currentFocus].classList.add("autocomplete-active");
- }
-
- function closeAllLists(elmnt) {
- /*close all autocomplete lists in the document,
- except the one passed as an argument:*/
- var x = document.getElementsByClassName("autocomplete-items");
- for (var i = 0; i < x.length; i++) {
- if (elmnt != x[i] && elmnt != input) {
- x[i].parentNode.removeChild(x[i]);
- }
- }
- }
-
- /*execute a function when someone clicks in the document:*/
- document.addEventListener("click", function (e) {
- closeAllLists(e.target);
- });
-}
-
-function $(id) {
- return document.getElementById(id);
-}
-
-loadFile('map.json', function(data) {
- var obj = JSON.parse(data);
- var releases = Object.keys(obj);
- var models = Object.keys(obj[releases[0]]);
-
- setupSelectList($("releases"), releases, function(value) {
- setupAutocompleteList($("models"), models, function(value) {
- console.log("clicked " + value);
- });
- });
-})
-
-</script>
-
</body>
-</html>
\ No newline at end of file
+</html>
projects / web / firmware-selector-openwrt-org.git / blobdiff