diff options
| author | martin f. krafft <madduck@madduck.net> | 2023-10-02 22:59:47 +0200 |
|---|---|---|
| committer | martin f. krafft <madduck@madduck.net> | 2023-10-02 22:59:47 +0200 |
| commit | ca72bcddd2423ebec0d031867293e172b9baa885 (patch) | |
| tree | 6a50a4afe92fbaec505d233ee1f4b0c8fdf7f410 | |
| parent | 9239012fbc3eca29c4c903877f3dfd2380236918 (diff) | |
TONI styling
| -rw-r--r-- | index.html | 29 | ||||
| -rw-r--r-- | style.css | 10 |
2 files changed, 25 insertions, 14 deletions
@@ -264,26 +264,28 @@ }); </script> </head> -<body> +<body style="background-image: linear-gradient(0deg,rgba(0,0,0,.4),rgba(0,0,0,.4)),url(/custom/background.jpg)"> <div class="px-4 py-3 my-3 text-center"> - <h1 class="display-5 fw-bold">Jitsi URL Generator</h1> + <img src="/custom/logo.svg" alt="Logo der TONI" title="TONI Logo" /> + + <h1 class="display-5 fw-bold mt-3 text-white">Videokonferenz-URL Generator</h1> <div class="col-lg-6 mx-auto mt-5"> <div class="mb-3 row d-none"> - <label for="jitsiDomain" class="col-sm-4 col-form-label">Jitsi Hostname</label> + <label for="jitsiDomain" class="col-sm-4 col-form-label text-white">Jitsi Hostname</label> <div class="col-sm-8"> <input type="text" class="form-control" id="jitsiDomain"> </div> </div> <div class="mb-3 row"> - <label for="peerName" class="col-sm-4 col-form-label">Peer Name (optional)</label> + <label for="peerName" class="col-sm-4 col-form-label fw-bold text-white">Projekt- oder Partnername</label> <div class="col-sm-8"> <input type="text" class="form-control" id="peerName"> </div> </div> <div class="mb-3 row"> - <label for="roomName" class="col-sm-4 col-form-label">Room Name</label> + <label for="roomName" class="col-sm-4 col-form-label fw-bold text-white">Konferenz-ID</label> <div class="col-sm-8"> <div class="input-group mb-3"> @@ -297,20 +299,21 @@ </div> </div> - </div> - - <div class="col-lg-10 mx-auto mt-3"> - <div class="fs-4"> - <code> - <a id="url" class="url" href='' target="jitsiUrlGenerator"></a> - </code> + <div class="mx-auto mt-3 row align-items-center"> + <div class="col-sm-4 fw-bold text-white">Konferenz-URL</div> + <div class="fs-5 col-sm-8"> + <code> + <a id="url" class="url" href='' target="jitsiUrlGenerator"></a> + </code> + </div> </div> + </div> </div> -<div class="divider"></div> +<div class="divider d-none"></div> <div class="container my-5"> @@ -1,6 +1,6 @@ .divider { height: 2rem; - background-color: rgba(0, 0, 0, .1); + background-color: rgba(255, 255, 255, .5); border: solid rgba(0, 0, 0, .15); border-width: 1px 0; box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); @@ -15,3 +15,11 @@ #monster { cursor: pointer; } + +code { + display: block; + margin: 0 auto; + background: white; + padding: 1rem 2rem; + border-radius: 0.25rem; +} |