cloud-run-websockets/chat-without-sessions/views/index.pug

//- Copyright 2021 Google LLC.
//-
//- Licensed under the Apache License, Version 2.0 (the "License");
//- you may not use this file except in compliance with the License.
//- You may obtain a copy of the License at
//-
//-     http://www.apache.org/licenses/LICENSE-2.0
//-
//- Unless required by applicable law or agreed to in writing, software
//- distributed under the License is distributed on an "AS IS" BASIS,
//- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//- See the License for the specific language governing permissions and
//- limitations under the License.

doctype html
html(lang="en")
  head
    title Socket.IO chat on App Engine
    meta(charset="utf-8")
    link(rel="shortcut icon" href="https://material.io/favicon.ico")
    link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css")
    link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700")
    link(href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet")
    link(rel="stylesheet" href="index.css")
    script(src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js")

  body

    form(id="signin")
      h1 Please sign in
      label(class="name mdc-text-field mdc-text-field--filled")
        span(class="mdc-text-field__ripple")
        input(id="name" name="name" type="text" class="mdc-text-field__input" aria-labelledby="name-label" required)
        span(class="mdc-floating-label" id="name-label") Name
        span(class="mdc-line-ripple")
      label(class="room mdc-text-field mdc-text-field--filled")
        span(class="mdc-text-field__ripple")
        input(id="room" name="room" type="text" class="mdc-text-field__input" aria-labelledby="room-label" required)
        span(class="mdc-floating-label" id="room-label") Room
        span(class="mdc-line-ripple")
      div(class="button-container")
        button(type="submit" class="mdc-button signin") 
          div(class="mdc-button__ripple")
          span(class="mdc-button__label") Sign in

    div(id="chatroom" class="page-wrap")
      h1
      ul(id="messages")
      footer(class="site-footer")
        form(id="chat")
          label(class="mdc-text-field mdc-text-field--filled")
            span(class="mdc-text-field__ripple")
            input(id="msg" type="text" class="mdc-text-field__input" autocomplete="off")
            span(class="mdc-line-ripple")
          div(class="button-container")
            button(type="submit" class="mdc-button send") 
              div(class="mdc-button__ripple")
              span(class="mdc-button__label") Send



    script(src="/socket.io/socket.io.js")
    script(src="https://code.jquery.com/jquery-1.11.1.js")
    script(src="/index.js")