[239084] Gazelle.rocks Home Page with live updates [dev.]

(IF1<IWebRequest, S>) req -> {
  new LPairS gridItems; // title + contents
  
  S logInCSS = [[
    .modal {
      padding-right: 15px;
    }
    
    .modal-content {
      background-color: #fefefe;
      /*margin: 5% auto 5% auto;*/ 
      border: 1px solid #888;
      /*width: 40%; */
    }
    
    .modal input[type=text], .modal input[type=password] {
      width: 100%;
      padding: 15px;
      margin: 5px 0 10px 0;
      display: inline-block;
      border: none;
      background: #f1f1f1;
    }
    
    .modal input[type=text]:focus, .modal input[type=password]:focus {
      background-color: #ddd;
      outline: none;
    }
    
    .modal button:hover {
      opacity:1;
      background-color:MediumSeaGreen;
    }
    
    .register, .login {
      padding: 14px 20px;
      color:white;
      background-color:#333;
      float: left;
      width: 50%;
    }
    
    .container {
      padding: 16px;
    }
  ]];
  
  S logIn = [[
    <div id="id01" class="modal">
      <form class="modal-content" method="POST" action="https://gazelle.rocks/crud/User">
        <div class="container">
          <label for="email"><b>Username</b></label>
          <input type="text" placeholder="Enter Username" name="user" required>
    
          <label for="psw"><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="pw" required>
    
          <div class="clearfix">
            <button type="submit" class="login">Login</button>
            <button type="button" onclick="location.href='https://gazelle.rocks/register'" class="register">Register</button>
          </div>
        </div>
      </form>
    </div>
  ]];
  
  addPair(gridItems, "Welcome to our AI system!",
    "What can I do here?" + ul(
      "Talk to a bot" + ul(
        targetBlank(gazelle_talkToBotURL(227992), "Pixabay Bot") + " [finds images]",
        targetBlank(gazelle_talkToBotURL(237247), "FAQ Bot") + " [answers questions about Gazelle]",
      ),
      "Get a log-in (elsewhere on this page)",
      ahref("mailto:info@botcompany.de", "Contact the author")));
  addPair(gridItems, "Login / Register", hcss(logInCSS) + logIn);
  addPair(gridItems, "Posts", "The AI database contains " + ahref("https://gazelle.rocks/latestModifiedPosts",
      span(nPosts(getAllPosts()), id := "postCount")
    + hscript([[wsInitialMsg(JSON.stringify({"liveDiv": "postCount"}));]]) + "."));
  addPair(gridItems, "Links", joinWithBR(
    targetBlank("https://twitch.tv/stefanreich", "Twitch"),
    targetBlank("https://youtube.com/c/stefanreich", "YouTube"),
    targetBlank("https://BotCompany.de", "BotCompany"),
    targetBlank("https://wikify.live", "Wikify"),
  ));
  
  ret hhtml_title_body("Gazelle :: Chat Bot Lab",
    hmobilefix() + hsansserif() + loadJQuery2() + hcss_gridStyle(rowHeight := "150px")
  + hInitWebSocket(onMessage := "(" + js_evalOnWebSocketMessage() + ")(event);")
  + hscript([[wsVerbose = true; wsInitialMsg('{"test":"test"}');]])
  + h2(himgsnippet(#1102967, style := "height: 1em; vertical-align: bottom", title := "Gazelle.rocks Logo") + " Gazelle :: Chat Bot Lab", style := "text-align: center")
  + div_vbar(gazelle_navLinks("https://gazelle.rocks", ""), style := "text-align: center")
  + div(
    concatMap_strings(gridItems, p -> div(
      htitledSectionWithDiv(p.a, p.b, class := "grid-section"), class := "grid-item")),
    class := "grid-container")
    + hscript([[var botConfig = "codePost=]] + 237247 + [["; ]])
    + hjssrc("https://gazelle.rocks/script"));
}