Updating project for Material Web Components and dark theme

3 years ago · b5093d5ffc
19 changed files with 385 additions and 528 deletions
--- a/assets/en.json
+++ b/assets/en.json
@ -1,99 +0,0 @@
-{
-  "bluetoothClass": "BlueTooth class",
-  "builtBy": "Built by",
-  "clickToCopy": "Click to copy",
-  "majorService": {
-    "group": "Major service",
-    "Information": "Information",
-    "Telephony": "Telephony",
-    "Audio": "Audio",
-    "Transfer": "Transfer",
-    "Capturing": "Capturing",
-    "Rendering": "Rendering",
-    "AccessPoint": "Access point",
-    "Positioning": "Positioning",
-    "LimitedDiscovery": "Limited discovery"
-  },
-  "majorDevice": {
-    "group": "Major device",
-    "Uncategorized": "Uncategorized",
-    "Miscellaneous": "Miscellaneous",
-    "Toy": "Toy",
-    "Wearable": "Wearable",
-    "Imaging": "Imaging",
-    "Peripheral": "Peripheral",
-    "AudioVideo": "Media",
-    "AccessPoint": "Access point",
-    "Phone": "Phone",
-    "Computer": "Computer"
-  },
-  "minorDevice": {
-    "group": "Minor device",
-    "None": "No minor devices",
-    "Toy": {
-      "Game": "Game",
-      "Controller": "Controller",
-      "Doll": "Doll",
-      "Vehicle": "Vehicle",
-      "Robot": "Robot"
-    },
-    "Wearable": {
-      "Watch": "Watch",
-      "Pager": "Pager",
-      "Jacket": "Jacket",
-      "Helmet": "Helmet",
-      "Glasses": "Glasses"
-    },
-    "Imaging": {
-      "Display": "Display",
-      "Camera": "Camera",
-      "Scanner": "Scanner",
-      "Printer": "Printer"
-    },
-    "Peripheral": {
-      "Keyboard": "Keyboard",
-      "Pointer": "Pointer",
-      "Uncategorized": "Uncategorized",
-      "Joystick": "Joystick",
-      "Gamepad": "Gamepad",
-      "RemoteControl": "Remote control",
-      "Sensor": "Sensor",
-      "Digitizer": "Digitizer",
-      "CardReader": "Card reader"
-    },
-    "AudioVideo": {
-      "Uncategorized": "Uncategorized",
-      "Headset": "Headset",
-      "Microphone": "Microphone",
-      "Loudspeaker": "Loudspeaker",
-      "Headphones": "Headphones",
-      "CarAudio": "Car audio",
-      "VideoCamera": "Video camera",
-      "Monitor": "Monitor",
-      "Conferencing": "Conferencing"
-    },
-    "AccessPoint": {
-      "Available": "Available",
-      "Level1": "1-17% use",
-      "Level2": "17-33% use",
-      "Level3": "33-50% use",
-      "Level4": "50-67% use",
-      "Level5": "67-83% use",
-      "Level6": "83-99% use",
-      "Unavailable": "Unavailable"
-    },
-    "Phone": {
-      "Uncategorized": "Uncategorized",
-      "Cell": "Cell",
-      "Cordless": "Cordless"
-    },
-    "Computer": {
-      "Uncategorized": "Uncategorized",
-      "Desktop": "Desktop",
-      "Server": "Server",
-      "Laptop": "Laptop",
-      "PDA": "PDA",
-      "Watch": "Watch"
-    }
-  }
-}
--- a/assets/es.json
+++ b/assets/es.json
@ -1,99 +0,0 @@
-{
-  "bluetoothClass": "Clase bluetooth",
-  "builtBy": "Construido por",
-  "clickToCopy": "Haga clic para copiar",
-  "majorService": {
-    "group": "Servicio mayor",
-    "Information": "Información",
-    "Telephony": "Telefonía",
-    "Audio": "Audio",
-    "Transfer": "Transferir",
-    "Capturing": "Capturando",
-    "Rendering": "Representación",
-    "AccessPoint": "Punto de acceso",
-    "Positioning": "Posicionamiento",
-    "LimitedDiscovery": "Descubrimiento limitado"
-  },
-  "majorDevice": {
-    "group": "Dispositivo principal",
-    "Uncategorized": "Sin categorizar",
-    "Miscellaneous": "Diverso",
-    "Toy": "Juguete",
-    "Wearable": "Usable",
-    "Imaging": "Imágenes",
-    "Peripheral": "Periférico",
-    "AudioVideo": "Medios de comunicación",
-    "AccessPoint": "Punto de acceso",
-    "Phone": "Teléfono",
-    "Computer": "Computadora"
-  },
-  "minorDevice": {
-    "group": "Dispositivo menor",
-    "None": "No hay dispositivos menores",
-    "Toy": {
-      "Game": "Juego",
-      "Controller": "Controlador",
-      "Doll": "Muñeca",
-      "Vehicle": "Vehículo",
-      "Robot": "Robot"
-    },
-    "Wearable": {
-      "Watch": "Reloj",
-      "Pager": "Buscapersonas",
-      "Jacket": "Chaqueta",
-      "Helmet": "Casco",
-      "Glasses": "Lentes"
-    },
-    "Imaging": {
-      "Display": "Monitor",
-      "Camera": "Cámara",
-      "Scanner": "Escáner",
-      "Printer": "Impresora"
-    },
-    "Peripheral": {
-      "Keyboard": "Teclado",
-      "Pointer": "Puntero",
-      "Uncategorized": "Sin categorizar",
-      "Joystick": "Palanca de mando",
-      "Gamepad": "Gamepad",
-      "RemoteControl": "Control remoto",
-      "Sensor": "Sensor",
-      "Digitizer": "Digitalizador",
-      "CardReader": "Lector de tarjetas"
-    },
-    "AudioVideo": {
-      "Uncategorized": "Sin categorizar",
-      "Headset": "Auriculares",
-      "Microphone": "Micrófono",
-      "Loudspeaker": "Altoparlante",
-      "Headphones": "Auriculares",
-      "CarAudio": "Audio del coche",
-      "VideoCamera": "Camara de video",
-      "Monitor": "Monitor",
-      "Conferencing": "Conferencia"
-    },
-    "AccessPoint": {
-      "Available": "Disponible",
-      "Level1": "1-17% de uso",
-      "Level2": "17-33% de uso",
-      "Level3": "33-50% de uso",
-      "Level4": "50-67% de uso",
-      "Level5": "67-83% de uso",
-      "Level6": "83-99% de uso",
-      "Unavailable": "Indisponible"
-    },
-    "Phone": {
-      "Uncategorized": "Sin categorizar",
-      "Cell": "Célula",
-      "Cordless": "Sin cable"
-    },
-    "Computer": {
-      "Uncategorized": "Sin categorizar",
-      "Desktop": "Escritorio",
-      "Server": "Servidor",
-      "Laptop": "Ordenador portátil",
-      "PDA": "PDA",
-      "Watch": "Reloj"
-    }
-  }
-}
--- a/assets/favicon.ico
+++ b/assets/favicon.ico
--- a/assets/icon.png
+++ b/assets/icon.png
--- a/assets/manifest.json
+++ b/assets/manifest.json
@ -0,0 +1,16 @@
+{
+	"background_color": "#242424",
+	"display": "standalone",
+	"icons": [
+		{
+			"sizes": "512x512",
+			"src": "icon.png",
+			"type": "image/png"
+		}
+	],
+	"name": "Bluetooth Class",
+	"scope": "/",
+	"short_name": "MobiusK",
+	"start_url": "/index.html",
+	"theme_color": "#3B5998"
+}
--- a/routes/404.pug
+++ b/routes/404.pug
@ -0,0 +1,6 @@
+extends ../templates/layout
+
+block content
+	p
+		a(href="/") &lArr; Return to home page
+		span The file you are looking for doesn't exist here
--- a/routes/500.pug
+++ b/routes/500.pug
@ -0,0 +1,8 @@
+extends ../templates/layout
+
+block content
+	p
+		a(href="/") &lArr; Return to home page
+		span
+			| Something went wrong with this website.
+			| An alert has likely been sent to me, but an email is the fastest way to get bugs fixed and is greatly appreciated.
--- a/routes/index.pug
+++ b/routes/index.pug
@ -2,20 +2,159 @@ extends ../templates/layout

 block content

-	h1(i18n="bluetoothClass") BlueTooth class
+	// Project header and code result of the generated form below

-	form
+	h1 BlueTooth Class

-		.row.center-align
-			.input-field.col.s4.offset-s4
-				p#bluetoothClass.text-center.underlined(onclick="copyBluetoothClassField()")
-				span.helper-text(i18n="clickToCopy") Click to copy
+	p
+		| Identify a device with
+		|
+		a(href="https://www.systutorials.com/docs/linux/man/8-hciconfig/") hciconfig
+		| :

-		h2(i18n="majorService.group") Major service
-		include ../templates/major-service
+	code
+		| hciconfig 0 class
+		|
+		span#bluetoothClass

-		h3(i18n="majorDevice.group") Major device
-		include ../templates/major-device
+	// All available options for users to build a Bluetooth Class code from

-		h4(i18n="minorDevice.group") Minor device
-		include ../templates/minor-device
+	-
+		const codes = {
+			majorServices: {
+				"Information":       0x800000,
+				"Telephony":         0x400000,
+				"Audio":             0x200000,
+				"Transfer":          0x100000,
+				"Capturing":         0x080000,
+				"Rendering":         0x040000,
+				"Access point":      0x020000,
+				"Positioning":       0x010000,
+				"Limited discovery": 0x002000
+			},
+			majorDevices: {
+				"Uncategorized": 0x1F00,
+				"Toy":           0x0800,
+				"Wearable":      0x0700,
+				"Imaging":       0x0600,
+				"Peripheral":    0x0500,
+				"Media":         0x0400,
+				"Access point":  0x0300,
+				"Phone":         0x0200,
+				"Computer":      0x0100,
+				"Miscellaneous": 0x0000,
+			},
+			minorDevices: {
+				"Toy": {
+					"Game":       0x14,
+					"Controller": 0x10,
+					"Doll":       0x0C,
+					"Vehicle":    0x08,
+					"Robot":      0x04,
+				},
+				"Wearable": {
+					"Glasses": 0x14,
+					"Helmet":  0x10,
+					"Jacket":  0x0C,
+					"Pager":   0x08,
+					"Watch":   0x04,
+				},
+				"Imaging": {
+					"Display": 0x10,
+					"Camera":  0x20,
+					"Scanner": 0x40,
+					"Printer": 0x80,
+				},
+				"Peripheral": {
+					"Uncategorized":   0x00,
+					"Keyboard":        0x40,
+					"Pointer":         0x80,
+					"Joystick":        0x04,
+					"Gamepad":         0x08,
+					"Remote control":  0x0C,
+					"Sensor":          0x10,
+					"Digitizer":       0x14,
+					"Card reader":     0x18,
+				},
+				"Media": {
+					"Uncategorized": 0x00,
+					"Headset":       0x04,
+					"Microphone":    0x10,
+					"Loudspeaker":   0x14,
+					"Headphones":    0x18,
+					"Car audio":     0x20,
+					"Video camera":  0x30,
+					"Monitor":       0x38,
+					"Conferencing":  0x40,
+				},
+				"Access point": {
+					"Available":   0x00,
+					"1-17% use":   0x20, // Level 1
+					"17-33% use":  0x40, // Level 2
+					"33-50% use":  0x60, // Level 3
+					"50-67% use":  0x80, // Level 4
+					"67-83% use":  0xA0, // Level 5
+					"83-99% use":  0xC0, // Level 6
+					"Unavailable": 0xE0,
+				},
+				"Phone": {
+					"Uncategorized": 0x00,
+					"Cell":          0x04,
+					"Cordless":      0x08,
+				},
+				"Computer": {
+					"Uncategorized": 0x00,
+					"Desktop":       0x04,
+					"Server":        0x08,
+					"Laptop":        0x0C,
+					"PDA":           0x14,
+					"Watch":         0x18,
+				},
+				"Miscellaneous": {},
+				"Uncategorized": {}
+			}
+		}
+
+	// Mixins used to generate checkboxes and radio buttons
+
+	mixin checkbox(group, key, value)
+		.mdc-layout-grid__cell
+			.mdc-form-field
+				.mdc-checkbox
+					input.mdc-checkbox__native-control(type="checkbox", id=group + key, value=value)
+					.mdc-checkbox__background
+						svg.mdc-checkbox__checkmark(viewBox="0 0 24 24")
+							path.mdc-checkbox__checkmark-path(fill="none", d="M1.73,12.91 8.1,19.28 22.79,4.59")
+				label(for=group + key) #{key}
+
+	mixin radio(group, key, value)
+		.mdc-layout-grid__cell
+			.mdc-form-field
+				.mdc-radio
+					input.mdc-radio__native-control(type="radio", name=group, id=group + key, value=value)
+					.mdc-radio__background
+						.mdc-radio__outer-circle
+						.mdc-radio__inner-circle
+				label(for=group + key) #{key}
+
+	// Input selections per group
+
+	h2 Major service
+	.mdc-layout-grid__inner
+		each value, key in codes.majorServices
+			+checkbox("majorService", key, value)
+
+	h3 Major device
+	.mdc-layout-grid__inner
+		each value, key in codes.majorDevices
+			+radio("majorDevice", key, value)
+
+	h4 Minor device
+	.minor-devices
+		each devices, groupKey in codes.minorDevices
+			.mdc-layout-grid__inner(class=groupKey)
+				each value, key in devices
+					+radio("minorDevice" + groupKey, key, value)
+				else
+					.mdc-layout-grid__cell--span-12
+						p No options for this combination
--- a/scripts/bluetooth.js
+++ b/scripts/bluetooth.js
@ -1,68 +0,0 @@
-let bluetoothClass = 0;
-
-// Grab references to our DOM elements
-const bluetoothClassField = document.getElementById("bluetoothClass");
-const minorDeviceGroups = document.querySelectorAll("[class^='minor-devices'] > *");
-const checkboxesAndRadios = document.querySelectorAll("input[type='checkbox'], input[type='radio']");
-
-/**
- * Write a hex string of our current Bluetooth class to the input
- */
-function updateBluetoothClassField() {
-	let hex = bluetoothClass.toString(16);
-	hex = hex.toLocaleUpperCase();
-	hex = hex.padStart(6, "0");
-	hex = "0x" + hex;
-	bluetoothClassField.innerHTML = hex;
-}
-
-/**
- * Copy the current value of the Bluetooth class field to the clipboard
- */
-function copyBluetoothClassField() {
-	navigator.clipboard.writeText(bluetoothClassField.innerHTML);
-}
-
-/**
- * Depending on our selected major device category, hide or show groups of minor devices
- */
-function updateBluetoothMinorDeviceFields() {
-
-	// Determine the ID of the selected major device
-	const majorDevice = bluetoothClass & 0x1F00;
-	const majorDeviceRadio = document.querySelector(`input[type='radio'][name='majorDevice'][value='${majorDevice}']`);
-	const majorDeviceId = majorDeviceRadio.id.replace("majorDevice", "");
-
-	// Hide all minor device fields that don't match our major device id and uncheck them
-	minorDeviceGroups.forEach((element) => {
-		element.querySelectorAll("input").forEach((minorDevice) => minorDevice.checked = false);
-		element.classList.add("hidden");
-		if (element.classList.contains(majorDeviceId)) {
-			element.classList.remove("hidden");
-		}
-	});
-}
-
-// Watch the page checkboxes and radio buttons for updating the Bluetooth class
-checkboxesAndRadios.forEach((element) => {
-	element.addEventListener("change", () => {
-
-		if (element.id.startsWith("majorService")) {
-			// Major services can be combined, so XOR is all we need
-			bluetoothClass ^= element.value;
-		} else if (element.id.startsWith("majorDevice")) {
-			// Major devices cannot conflict, so zero out any current major and minor devices
-			bluetoothClass = (bluetoothClass & ~0x1FFC) | element.value;
-			updateBluetoothMinorDeviceFields();
-		} else if (element.id.startsWith("minorDevice")) {
-			// Minor devices cannot conflict, so zero out any current minor devices
-			bluetoothClass = (bluetoothClass & ~0xFC) | element.value;
-		}
-
-		updateBluetoothClassField();
-	});
-});
-
-// Default the bluetooth class field and minor device fields on page load
-updateBluetoothClassField();
-updateBluetoothMinorDeviceFields();
--- a/scripts/index.js
+++ b/scripts/index.js
@ -1,14 +0,0 @@
-// Materialize CSS
-//=require ../../../node_modules/materialize-css/js/cash.js
-//=require ../../../node_modules/materialize-css/js/global.js
-//=require ../../../node_modules/materialize-css/js/component.js
-//=require ../../../node_modules/materialize-css/js/anime.min.js
-//=require ../../../node_modules/materialize-css/js/buttons.js
-//=require ../../../node_modules/materialize-css/js/forms.js
-//=require ../../../node_modules/materialize-css/js/waves.js
-
-// Internationalization script shared between sites in root of project sub-modules
-//=require ../../shared/scripts/i18n.js
-
-// Project scripts
-//=require bluetooth.js
--- a/scripts/index.ts
+++ b/scripts/index.ts
@ -0,0 +1,83 @@
+// This entire application relies on bitwise operators, so we'll stop tslint from complaining right away
+// tslint:disable:no-bitwise
+
+// Container for our bluetooth class code
+let bluetoothClass: number = 0;
+
+// Grab references to our DOM elements
+const bluetoothClassField: HTMLElement | null = document.getElementById("bluetoothClass");
+const minorDeviceGroups: NodeListOf<HTMLElement> = document.querySelectorAll("[class^='minor-devices'] > *");
+const checkboxesAndRadios: NodeListOf<HTMLInputElement> = document.querySelectorAll("input[type='checkbox'], input[type='radio']");
+
+/**
+ * Write a hex string of our current Bluetooth class to the input
+ */
+function updateBluetoothClassField() {
+
+	let hex: string = bluetoothClass.toString(16);
+	hex = hex.toLocaleUpperCase();
+	hex = hex.padStart(6, "0");
+	hex = "0x" + hex;
+
+	if (bluetoothClassField != null) {
+		bluetoothClassField.innerHTML = hex;
+	}
+}
+
+/**
+ * Depending on our selected major device category, hide or show groups of minor devices
+ */
+function updateBluetoothMinorDeviceFields() {
+
+	// Determine the ID of the selected major device
+
+	const majorDevice: number = bluetoothClass & 0x1F00;
+	const majorDeviceRadio: HTMLElement | null = document.querySelector(`input[type='radio'][name='majorDevice'][value='${majorDevice}']`);
+
+	let majorDeviceId: string;
+	if (majorDeviceRadio != null) {
+		majorDeviceId = majorDeviceRadio.id.replace("majorDevice", "");
+	}
+
+	// Hide all minor device fields that don't match our major device id and uncheck them
+	minorDeviceGroups.forEach((element: HTMLElement) => {
+		element.querySelectorAll("input").forEach((minorDevice: HTMLInputElement) => minorDevice.checked = false);
+		element.classList.add("hidden");
+		if (element.className.includes(majorDeviceId)) {
+			element.classList.remove("hidden");
+		}
+	});
+}
+
+// Watch the page checkboxes and radio buttons for updating the Bluetooth class
+checkboxesAndRadios.forEach((element: HTMLInputElement) => {
+	element.addEventListener("change", () => {
+
+		const value: number = parseFloat(element.value);
+
+		if (element.id.startsWith("majorService")) {
+			// Major services can be combined, so XOR is all we need
+			bluetoothClass ^= value;
+		} else if (element.id.startsWith("majorDevice")) {
+			// Major devices cannot conflict, so zero out any current major and minor devices
+			bluetoothClass = (bluetoothClass & ~0x1FFC) | value;
+			updateBluetoothMinorDeviceFields();
+		} else if (element.id.startsWith("minorDevice")) {
+			// Minor devices cannot conflict, so zero out any current minor devices
+			bluetoothClass = (bluetoothClass & ~0xFC) | value;
+		}
+
+		updateBluetoothClassField();
+	});
+});
+
+// Default the bluetooth class field and minor device fields on page load
+updateBluetoothClassField();
+updateBluetoothMinorDeviceFields();
+
+// Load our service worker to enable PWA functionality
+if ("serviceWorker" in navigator) {
+	window.addEventListener("load", () => {
+		navigator.serviceWorker.register("service-worker.js").then();
+	});
+}
--- a/styles/_material.scss
+++ b/styles/_material.scss
@ -1,39 +0,0 @@
-// Color
-@import "../../../node_modules/materialize-css/sass/components/color-variables";
-// @import "../../../node_modules/materialize-css/sass/components/color-classes";
-
-// Variables
-@import "../../../node_modules/materialize-css/sass/components/variables";
-
-// Reset
-@import "../../../node_modules/materialize-css/sass/components/normalize";
-
-// Components
-@import "../../../node_modules/materialize-css/sass/components/global";
-// @import "../../../node_modules/materialize-css/sass/components/badges";
-// @import "../../../node_modules/materialize-css/sass/components/icons-material-design";
-@import "../../../node_modules/materialize-css/sass/components/grid";
-// @import "../../../node_modules/materialize-css/sass/components/navbar";
-@import "../../../node_modules/materialize-css/sass/components/typography";
-// @import "../../../node_modules/materialize-css/sass/components/transitions";
-// @import "../../../node_modules/materialize-css/sass/components/cards";
-// @import "../../../node_modules/materialize-css/sass/components/toast";
-// @import "../../../node_modules/materialize-css/sass/components/tabs";
-// @import "../../../node_modules/materialize-css/sass/components/tooltip";
-@import "../../../node_modules/materialize-css/sass/components/buttons";
-// @import "../../../node_modules/materialize-css/sass/components/dropdown";
-@import "../../../node_modules/materialize-css/sass/components/waves";
-// @import "../../../node_modules/materialize-css/sass/components/modal";
-// @import "../../../node_modules/materialize-css/sass/components/collapsible";
-// @import "../../../node_modules/materialize-css/sass/components/chips";
-// @import "../../../node_modules/materialize-css/sass/components/materialbox";
-@import "../../../node_modules/materialize-css/sass/components/forms/forms";
-// @import "../../../node_modules/materialize-css/sass/components/table_of_contents";
-// @import "../../../node_modules/materialize-css/sass/components/sidenav";
-// @import "../../../node_modules/materialize-css/sass/components/preloader";
-// @import "../../../node_modules/materialize-css/sass/components/slider";
-// @import "../../../node_modules/materialize-css/sass/components/carousel";
-// @import "../../../node_modules/materialize-css/sass/components/tapTarget";
-// @import "../../../node_modules/materialize-css/sass/components/pulse";
-// @import "../../../node_modules/materialize-css/sass/components/datepicker";
-// @import "../../../node_modules/materialize-css/sass/components/timepicker";
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@ -1,13 +0,0 @@
-// Bluetooth blue: #3B5998
-// Darker blue: #14306B
-// Paletton: http://paletton.com/#uid=23K0u0klOszcgHQhAwKqLpHt8k9
-
-$primary-color: #3B5998;
-$secondary-color: #14306B;
-
-$h1-fontsize: 1.90rem;
-$h2-fontsize: 1.78rem;
-$h3-fontsize: 1.46rem;
-$h4-fontsize: 1.30rem;
-$h5-fontsize: 1.15rem;
-$h6-fontsize: 1.00rem;
--- a/styles/_wrapper.scss
+++ b/styles/_wrapper.scss
@ -1,21 +0,0 @@
-// Pushing footer to bottom of page
-
-body {
-	display: flex;
-	flex-direction: column;
-	min-height: 100vh;
-}
-
-main {
-	flex: 1 0 auto;
-}
-
-// Off-white background colors
-body {
-	background-color: whitesmoke;
-}
-
-// Content breathing room
-footer {
-	margin: 20px 0;
-}
--- a/styles/index.scss
+++ b/styles/index.scss
@ -1,40 +1,120 @@
-// Global variables
-@import "variables";
+// Variables
+// Primary blue color supplied by Lish in profile picture art
+// Ensure that changes in color get propagated to manifest.json options and layout.pug meta attributes
+// Paletton: http://paletton.com/#uid=23K0u0klOszcgHQhAwKqLpHt8k9

-// Material framework
-@import "material";
+$mdc-theme-primary: #14306B;
+$mdc-theme-secondary: #3B5998;
+$colorBackground: #242424;

-// Content wrap styles
-@import "wrapper";
+$textColor: #dddddd;
+$mdc-checkbox-border-color: $textColor;
+$mdc-radio-unchecked-color: $textColor;

-// Give anchors and top level headers our branding color
-a, h1 {
-	color: $primary-color;
+// Font import
+
+@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+
+// Material components
+
+@import "../../node_modules/@material/layout-grid/mdc-layout-grid.scss";
+@import "../../node_modules/@material/form-field/mdc-form-field.scss";
+@import "../../node_modules/@material/checkbox/mdc-checkbox.scss";
+@import "../../node_modules/@material/radio/mdc-radio.scss";
+
+// Content wrapper
+
+body, html {
+	background-color: $colorBackground;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
 }

-// Our input text fields are all either readonly
-input[type='text'] {
-	cursor: default;
+html {
+	font-size: 16px;
+	min-width: 300px;
 }

-// Self-explanatory
-.text-center {
-	text-align: center;
+body {
+	border-color: $mdc-theme-secondary;
+	border-style: solid;
+	border-width: 5px 0 4px;
+	display: flex;
+	font-family: Roboto, sans-serif;
+	font-weight: 400;
+	line-height: 1.5;
+	min-height: 100vh;
 }

-// Hide fields as necessary
-.hidden {
-	display: none;
+.container, main {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	position: relative;
+}
+
+.container {
+	margin: 0 auto;
+	padding: 1.5rem;
+	@media screen and (min-width: 1408px) {
+		max-width: 1344px;
+	}
+}
+
+footer {
+	margin-top: 3rem;
+}
+
+// Typography color
+
+body, .mdc-form-field {
+	color: $textColor;
+}
+
+// Typography sizing
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: 400;
+	margin: 1rem 0;
 }

-// Make our checkbox labels all the same width, and a more readable color
-label span {
-	color: rgba(0, 0, 0, 0.72);
-	min-width: 190px;
+h1 {
+	font-size: 2rem;
 }

-// Utility class for underlining text
-.underlined {
-	text-decoration-color: $primary-color !important;
-	text-decoration: underline;
+h2 {
+	font-size: 1.7rem;
+}
+
+h3 {
+	font-size: 1.5rem;
+}
+
+h4 {
+	font-size: 1.25rem;
+}
+
+h5 {
+	font-size: 1.15rem;
+}
+
+p {
+	margin: .5rem 0;
+}
+
+// Coloring links while removing underlines
+
+a {
+	color: lighten($mdc-theme-secondary, 25%);
+	text-decoration: none;
+	&:hover {
+		color: lighten($mdc-theme-secondary, 35%);
+	}
+}
+
+// Hiding elements
+
+.hidden {
+	display: none;
 }
--- a/templates/layout.pug
+++ b/templates/layout.pug
@ -5,28 +5,27 @@ html(lang="en")
 	head

 		meta(charset="utf-8")
-		meta(name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no")
 		meta(name="description", content="Builder for hcitool class codes")
+		meta(name="theme-color", content="#3B5998")
+		meta(name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no")

-		title(i18n="bluetoothClass") BlueTooth Class
+		title BlueTooth Class

-		link(rel="shortcut icon", href="/favicon.ico")
-		link(rel="stylesheet", href="/index.css")
+		link(rel="shortcut icon", href="icon.png")
+		link(rel="stylesheet", href="bluetooth-class.css")
+		link(rel="manifest", href="manifest.json")

-	body.container
+	body
+		.container.mdc-layout-grid

-		.text-center
-			noscript This application requires JavaScript to run!
 			main
+				noscript This application requires JavaScript to run!
 				block content

-		footer.center-align
-			div
-				button#enI18nButton.btn-flat.waves-effect.waves-light(onclick="languageChange('en')") English
-				button#esI18nButton.btn-flat.waves-effect.waves-light(onclick="languageChange('es')") Español
-			h5
-				span(i18n="builtBy") Built by
-				a(href="https://mobiusk.com")  MobiusK
+			footer
+				span
+					| Built by
+					|
+					a(href="https://mobiusk.com") MobiusK

-	block scripts
-		script(src="/index.js")
+	script(src="bluetooth-class.js")
--- a/templates/major-device.pug
+++ b/templates/major-device.pug
@ -1,20 +0,0 @@
-
-	const majorDevices = {
-	"Uncategorized": 0x1F00,
-	"Toy":           0x0800,
-	"Wearable":      0x0700,
-	"Imaging":       0x0600,
-	"Peripheral":    0x0500,
-	"AudioVideo":    0x0400,
-	"AccessPoint":   0x0300,
-	"Phone":         0x0200,
-	"Computer":      0x0100,
-	"Miscellaneous": 0x0000,
-	}
-
-.row
-	each value, key in majorDevices
-		.col.s12.m6.l4
-			label(for="majorDevice" + key)
-				input.with-gap(type="radio", name="majorDevice", id="majorDevice" + key, value=value)
-				span(i18n="majorDevice." + key) #{key}
--- a/templates/major-service.pug
+++ b/templates/major-service.pug
@ -1,19 +0,0 @@
-
-	const majorServices = {
-	"Information":      0x800000,
-	"Telephony":        0x400000,
-	"Audio":            0x200000,
-	"Transfer":         0x100000,
-	"Capturing":        0x080000,
-	"Rendering":        0x040000,
-	"AccessPoint":      0x020000,
-	"Positioning":      0x010000,
-	"LimitedDiscovery": 0x002000
-	}
-
-.row
-	each value, key in majorServices
-		.col.s12.m6.l4
-			label(for="majorService" + key)
-				input(type="checkbox", id="majorService" + key, value=value)
-				span(i18n="majorService." + key) #{key}
--- a/templates/minor-device.pug
+++ b/templates/minor-device.pug
@ -1,82 +0,0 @@
-
-	const minorDevices = {
-	"Toy": {
-	"Game":       0x14,
-	"Controller": 0x10,
-	"Doll":       0x0C,
-	"Vehicle":    0x08,
-	"Robot":      0x04,
-	},
-	"Wearable": {
-	"Glasses": 0x14,
-	"Helmet":  0x10,
-	"Jacket":  0x0C,
-	"Pager":   0x08,
-	"Watch":   0x04,
-	},
-	"Imaging": {
-	"Display": 0x10,
-	"Camera":  0x20,
-	"Scanner": 0x40,
-	"Printer": 0x80,
-	},
-	"Peripheral": {
-	"Uncategorized":  0x00,
-	"Keyboard":       0x40,
-	"Pointer":        0x80,
-	"Joystick":       0x04,
-	"Gamepad":        0x08,
-	"RemoteControl":  0x0C,
-	"Sensor":         0x10,
-	"Digitizer":      0x14,
-	"CardReader":     0x18,
-	},
-	"AudioVideo": {
-	"Uncategorized": 0x00,
-	"Headset":       0x04,
-	"Microphone":    0x10,
-	"Loudspeaker":   0x14,
-	"Headphones":    0x18,
-	"CarAudio":      0x20,
-	"VideoCamera":   0x30,
-	"Monitor":       0x38,
-	"Conferencing":  0x40,
-	},
-	"AccessPoint": {
-	"Available":   0x00,
-	"Level1":      0x20,
-	"Level2":      0x40,
-	"Level3":      0x60,
-	"Level4":      0x80,
-	"Level5":      0xA0,
-	"Level6":      0xC0,
-	"Unavailable": 0xE0,
-	},
-	"Phone": {
-	"Uncategorized": 0x00,
-	"Cell":          0x04,
-	"Cordless":      0x08,
-	},
-	"Computer": {
-	"Uncategorized": 0x00,
-	"Desktop":       0x04,
-	"Server":        0x08,
-	"Laptop":        0x0C,
-	"PDA":           0x14,
-	"Watch":         0x18,
-	},
-	"Miscellaneous": {},
-	"Uncategorized": {}
-	}
-
-.minor-devices
-	each devices, groupKey in minorDevices
-		.row(class=groupKey)
-			each value, key in devices
-				.col.s12.m6.l4
-					label(for="minorDevice" + groupKey + key)
-						input.with-gap(type="radio", name="minorDevice" + groupKey, id="minorDevice" + groupKey + key, value=value)
-						span(i18n="minorDevice." + groupKey + "." + key) #{key}
-			else
-				.col.s12
-					p(i18n="minorDevice.None") No minor devices