js testing

main/pub/chat/fab/hymn.hook

@@ -0,0 +1,24 @@
+::
+::
+::::  /hook/hymn/fab/chat/pub/
+  ::
+^-  manx
+;html
+  ;head
+    ;meta(charset "utf-8");
+    ;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js");
+    ;meta(name "viewport", content "width=432, initial-scale=1");
+    ;script(type "text/javascript", src "//use.typekit.net/fkv0sjk.js");
+    ;script:'''
+            try{Typekit.load();}catch(e){}
+            '''
+    ;link(type "text/css", rel "stylesheet", href "/gen/main/pub/chat/src/main.css");
+    ;script(type "text/javascript", src "/gep/hart.js");
+    ;title: Radio
+  ==
+  ;body
+    ;div#c;
+    ;script(type "text/javascript", src "/gen/main/lib/urb.js");
+    ;script(type "text/javascript", src "/gen/main/pub/chat/src/main.js");
+  ==
+==

main/pub/chat/src/main.css

@@ -0,0 +1,204 @@
+@font-face {
+  font-family: "bau";
+  src: url("http://office-for.com/lib/etc/bau/bauregular.otf");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "bau";
+  src: url("http://office-for.com/lib/etc/bau/bauregularitalic.otf");
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: "bau";
+  src: url("http://office-for.com/lib/etc/bau/baumedium.otf");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "bau";
+  src: url("http://office-for.com/lib/etc/bau/baumediumitalic.otf");
+  font-weight: 500;
+  font-style: italic;
+}
+@font-face {
+  font-family: "bau";
+  src: url("http://office-for.com/lib/etc/bau/baubold.otf");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: "bau";
+  src: url("http://office-for.com/lib/etc/bau/baubolditalic.otf");
+  font-weight: 600;
+  font-style: italic;
+}
+.iden,
+.time,
+#length {
+  font-family: "source-code-pro";
+}
+html,
+body {
+  height: 100%;
+  font-family: "bau";
+}
+#length,
+.time {
+  font-size: 0.6rem;
+  letter-spacing: 0;
+  font-weight: 200;
+}
+.iden,
+#station {
+  font-size: 0.7rem;
+}
+html,
+body {
+  font-size: 18px;
+}
+body {
+  background-color: #fefefe;
+  padding: 0;
+  margin: 0;
+}
+#c {
+  width: 66rem;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  padding: 1rem 1rem 0 1rem;
+  margin-left: -33rem;
+  background-color: #fff;
+  height: 100%;
+}
+#station-container {
+  left: 0;
+}
+#station {
+  width: 18rem;
+  text-align: right;
+}
+.message {
+  margin-bottom: 0.2rem;
+}
+#messages .message .time {
+  opacity: 0;
+}
+#messages .message:last-child .time,
+#messages .message:hover .time {
+  opacity: 1;
+}
+.time {
+  margin-right: 0.6rem;
+}
+.member {
+  width: 12rem;
+  margin: 0.3rem 0.6rem 0.3rem 0;
+}
+#messages {
+  margin-bottom: 2rem;
+  height: auto;
+}
+.attr {
+  width: 18rem;
+  text-align: right;
+  margin-right: 2rem;
+}
+.mess,
+.attr,
+.iden,
+.attr > div,
+#station .member div,
+#writing {
+  display: inline-block;
+}
+.iden > div {
+  display: inline;
+}
+.mess,
+#writing,
+#length {
+  vertical-align: top;
+}
+.mess {
+  font-size: 0.8rem;
+  letter-spacing: 0.03rem;
+  word-wrap: break-word;
+}
+.name {
+  font-weight: 500;
+}
+.ship {
+  font-weight: 200;
+}
+#writing-container {
+  bottom: 4rem;
+  margin-bottom: 1rem;
+}
+.writing #length {
+  display: inline;
+  margin-left: 1rem;
+  margin-top: 1.2rem;
+}
+#writing {
+  font-size: 0.8rem;
+  outline: none;
+  min-height: 1.2rem;
+  padding: 0.3rem 0.6rem;
+  margin-left: -0.6rem;
+  background-color: #f9f9f9;
+}
+#writing:focus {
+  background-color: #eee;
+}
+.pending {
+  color: #ccc;
+}
+#scrolling {
+  display: none;
+}
+.scrolling #scrolling {
+  position: fixed;
+  bottom: 3rem;
+  left: 2rem;
+  height: 1rem;
+  padding: 1rem;
+  height: 2rem;
+  background-color: #f9f9f9;
+  font-weight: 500;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+}
+@media (max-width: 40rem) {
+  #c {
+    left: 0;
+    margin-left: 0;
+    width: 24rem;
+  }
+  .attr {
+    width: 8rem;
+    margin-right: 1rem;
+  }
+  .iden,
+  #station {
+    font-size: 0.5rem;
+  }
+  .iden > div {
+    display: block;
+  }
+  .attr > .time {
+    display: none;
+  }
+  .mess {
+    max-width: 12rem;
+    margin-bottom: 1rem;
+  }
+  #writing {
+    max-width: 12rem;
+  }
+  #station {
+    width: 8rem;
+  }
+}