Rewrite of the web_serial example website.

Fixes: #2632

1 files changed, 188 insertions, 0 deletions

diff --git a/examples/device/webusb_serial/website/style.css b/examples/device/webusb_serial/website/style.css
new file mode 100644
index 000000000..b73735d13
--- /dev/null
+++ b/examples/device/webusb_serial/website/style.css
@@ -0,0 +1,188 @@
+/* Reset default margins and make html, body full height */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f5f5;
+  color: #333;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* Header row styling */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5em 1em;
+  flex-shrink: 0;
+}
+
+h1, h2 {
+  margin: 0;
+}
+
+.github-link {
+  font-weight: 600;
+}
+
+/* Main is flex column */
+main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+
+/* Controls top row in main*/
+.controls-section, .status-section {
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+/* Container for the two columns */
+.io-container {
+  display: flex;
+  flex: 1;
+  /* fill remaining vertical space */
+  width: 100%;
+}
+
+/* Both columns flex equally and full height */
+.column {
+  flex: 1;
+  padding: 1rem;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.sender {
+  display: flex;
+  flex-direction: column;
+}
+
+.sender-entry {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: none;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  /* light gray line */
+  padding: 0.5rem 1rem;
+  margin: 0;
+  gap: 0;
+  text-align: left;
+  cursor: pointer;
+  font-size: 1rem;
+  color: inherit;
+}
+
+.sender-entry:hover {
+  background-color: #f0f0f0;
+}
+
+.monospaced {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 1rem;
+  color: #333;
+}
+
+.scrollbox-wrapper {
+  position: relative;
+  padding: 0.5rem;
+  flex: 1;
+
+  display: block;
+  overflow: hidden;
+}
+
+.scrollbox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  overflow-x: auto;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  background-color: #fff;
+  border-radius: 0.5rem;
+  white-space: nowrap;
+}
+
+.send-container {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.send-mode-command {
+  background-color: light-gray;
+}
+
+.send-mode-instant {
+  background-color: blue;
+}
+
+/* UI Styles */
+.controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  flex: 1
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0.3rem;
+  cursor: pointer;
+}
+
+.good {
+  background-color: #2ecc71;
+  /* green */
+  color: #fff;
+}
+
+.danger {
+  background-color: #e74c3c;
+  /* red */
+  color: #fff;
+}
+
+.input {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 1rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  background-color: #fafafa;
+  color: #333;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.input::placeholder {
+  color: #aaa;
+  font-style: italic;
+}
+
+.input:focus {
+  border-color: #0078d7;
+  box-shadow: 0 0 6px rgba(0, 120, 215, 0.5);
+  background-color: #fff;
+}