Better UI for index page in the embedded web server (#226)

* UI Possible Simple Layout * Worked in all the comments * Seperated style.css * Fixed indentation * Fixed mixed spaces/tabs * Improved visuals
toitlang · Sep 2, 2022 · 85205ff · 85205ff
1 parent b7c2529
commit 85205ff
Showing 1 changed file with 101 additions and 15 deletions.
diff --git a/src/jaguar.toit b/src/jaguar.toit
@@ -288,39 +288,125 @@ handle_browser_request request/http.Request writer/http.ResponseWriter -> none:
  CHIP_IMAGE ::= "https://toit.io/static/chip-e4ce030bdea3996fa7ad44ff63d88e52.svg"
 
  if path == "index.html":
+ uptime ::= Duration --s=Time.monotonic_us / Duration.MICROSECONDS_PER_SECOND
+
  writer.headers.set "Content-Type" "text/html"
  writer.write """
  <html>
  <head>
  <link rel="stylesheet" href="style.css">
  <title>$device.name (Jaguar device)</title>
  </head>
- <body>
- <h1>Jaguar: $device.name</h1>
- <h2>Uptime: $(Duration --s=Time.monotonic_us / Duration.MICROSECONDS_PER_SECOND)</h2>
- <h2>Toit SDK version: $vm_sdk_version</h2>
- <h2 class=help>Run code on this device using <a href="https://github.com/toitlang/jaguar"><code>jag run</code></a></h2>
- <h2 class=help>Monitor the serial port console using <a href="https://github.com/toitlang/jaguar"><code>jag monitor</code></a></h2>
- <p>
- <img src="$CHIP_IMAGE" alt="Picture of an embedded device" width=200 />
- </p>
+ <body> 
+ <div class="box"> 
+ <section class="text-center">
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
+ <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z" />
+ </svg>
+ </section>
+ <h1 class="mt-40">$device.name</h1>
+ <p class="text-center">Jaguar device<p>
+ <p class="hr mt-40" ></p>
+ <section class="grid grid-cols-2 mt-20">
+ <p>Uptime</p>
+ <p><b class="text-black">$uptime</b></p>
+ <p>SDK</p>
+ <p><b class="text-black">$vm_sdk_version</b></p>
+ </section>
+ <p class="hr mt-20"></p>
+ <p class="mt-40">Run code on this device using</p>
+ <b><a href="https://github.com/toitlang/jaguar">&gt; jag run</a></b>
+ <p class="mt-20">Monitor the serial port console using</p>
+ <p class="mb-20"><b><a href="https://github.com/toitlang/jaguar">&gt; jag monitor</a></b></p> 
+ </div>
  </body>
  </html>
  """
  else if path == "style.css":
  writer.headers.set "Content-Type" "text/css"
  writer.write """
  body {
- background-color: #ffffff;
- font-family: Verdana, sans-serif;
- color: #505050;
+ background-color: #F8FAFC;
+ color: #444;
+ }
+ h1 {
+ font-family: -apple-system, "Helvetica Neue", Arial;
+ text-align: center;
+ font-size: 40px;
+ margin-top: 0px;
+ margin-bottom: 15px;
+ color: #444;
+ }
+ p {
+ margin:0
+ }
+ .box {
+ position: relative;
+ border:none;
+ background: #fff;
+ border-radius: 16px;
+ box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset,
+ rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(226, 232, 240) 0px 20px 25px -5px, rgb(226, 232, 240) 0px 8px 10px -6px;
+ box-sizing: border-box;
+ display: block;
+ line-height: 24px;
+ padding: 12px;
+ width: 360px;
+ margin: auto;
+ /* margin-left: 40px; */
+ margin-top: 60px;
+ padding-left:20px;
+ 
+ }
+ .icon {
+ padding-top: 20px;
+ color: #6366E9;
+ position: relative;
+ width: 140px
+ }
+ p, div {
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ font-size: 14px;
+ color: rgb(100, 116, 139);
+ }
+ .text-center {
+ text-align: center;
+ }
+ .hr {
+ -webkit-font-smoothing: antialiased;
+ background-image: linear-gradient(to right, rgba(226, 232, 240, 0), rgb(226, 232, 240), rgba(226, 232, 240, 0));
+ height: 1px;
+ width: 100%;
  }
  a {
+ color: #6366E9;
+ }
+ a:link {
  text-decoration: none;
- color: #000000;
+ color: #6366E9;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ .text-black {
+ color: black;
+ }
+ .mt-40 {
+ margin-top: 40px;
+ }
+ .mt-20 {
+ margin-top: 20px;
+ }
+ .mb-20 {
+ margin-bottom: 20px;
+ }
+ .grid {
+ display: grid;
  }
- .help {
- font-style: oblique;
+ .grid-cols-2  {
+ grid-template-columns: 1fr 3fr; 
  }
  """
  else if path == "favicon.ico":