diff options
| author | martin f. krafft <madduck@madduck.net> | 2023-10-03 08:26:28 +0200 |
|---|---|---|
| committer | martin f. krafft <madduck@madduck.net> | 2023-10-03 08:26:52 +0200 |
| commit | 9bbf063166b8a37bf643f3080ffea95c3cc5e671 (patch) | |
| tree | 692c1ff55af14b5eaeceb94ffe65700133912686 | |
| parent | 434aad10a589b3705146ff0b443df6548a28d7e4 (diff) | |
nicer use of bootstrap grid
| -rw-r--r-- | index.html | 57 | ||||
| -rw-r--r-- | style.css | 22 |
2 files changed, 43 insertions, 36 deletions
@@ -264,55 +264,50 @@ }); </script> </head> -<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"> - <img src="/custom/logo.svg" alt="Logo der TONI" title="TONI Logo" /> +<body class="py-5 align-items-center"> - <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 text-white">Jitsi Hostname</label> - <div class="col-sm-8"> - <input type="text" class="form-control" id="jitsiDomain"> - </div> +<div class="container mt-5"> + <header class="row text-white justify-content-center"> + <div class="col-lg-8 text-center"> + <img src="/custom/logo.svg" alt="Logo der TONI" title="TONI Logo" /> + <h1 class="display-5 fw-bold">Videokonferenz-URL Generator</h1> </div> - <div class="mb-3 row"> - <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"> + </header> + + <div class="row mt-5 justify-content-center"> + <div class="mb-3 col-lg-3"> + <div class="form-floating"> + <input type="text" class="form-control fw-bold" placeholder="" id="peerName"> + <label for="peerName">Projekt- oder Partnername (optional)</label> </div> </div> - <div class="mb-3 row"> - <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"> - - <input type="text" class="form-control" id="roomName"> - <span class="input-group-text" id="monster"> - <img - src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAB00lEQVRIie3UPWtVQRAG4CeawmCpXMH4EQgWIX43gmAKLazEysbO/AALf0BE7CzVWkOKCxe1Ma0plZhCVPAiihAkEhQ1jQYFvddi5ySbw7nHRDvxhWX2zHlnZmdnZvnXsIQuBjPdUdxEG19itXEDRzLeYNgu1QVoBWkKuzCJTuiqVge3wvlU6Fq5w75SgIN4hK2ZbhlNzOFj6LbjGM5jION+xXE87xWAdCX341TzuIzPPTLehivYiwWcxZOcsKmH4c44eZ1z+BScb2HTKROqAoxLmTV/4zwP0gxf4+sJcCrkXMhrscrI9bMl2xX0VxjuDlkUtOiYMnJ9wd1TJpWL3MD72J+pcFqH6ZA78KFQ5lfUwEzs2xt0ntvMhC+sZtDAAxzAK0xIPZ3jttT/pCu5UPo/IHXUKF7iJBY3x4+H2B+nmJBatIyF4CxLT8di6f8PaUhHMYLTmOyLLOalAl2M/SE8rQhSh8N4hiFcx1sM9UudcBeXcE4amGEbL/JVvMG7+L6HblHkOyFPhPM/xTDGYt9idQ4eSyl9x74Kw+kKHdVZvsYWMahFgG6QX0jF+huMSM3QzQOQPbE1KNq6arIL/JSKvcYgR53xegKs8dnruf6PFfwC6NhvLfV5B6cAAAAASUVORK5CYII="/> - </span> + <div class="mb-3 col-lg-3"> + <div class="input-group"> + <div class="form-floating"> + <input type="text" class="form-control fw-bold" placeholder="" id="roomName"> + <label for="roomName">Konferenz-ID</label> </div> + <span class="input-group-text" id="monster"> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAB00lEQVRIie3UPWtVQRAG4CeawmCpXMH4EQgWIX43gmAKLazEysbO/AALf0BE7CzVWkOKCxe1Ma0plZhCVPAiihAkEhQ1jQYFvddi5ySbw7nHRDvxhWX2zHlnZmdnZvnXsIQuBjPdUdxEG19itXEDRzLeYNgu1QVoBWkKuzCJTuiqVge3wvlU6Fq5w75SgIN4hK2ZbhlNzOFj6LbjGM5jION+xXE87xWAdCX341TzuIzPPTLehivYiwWcxZOcsKmH4c44eZ1z+BScb2HTKROqAoxLmTV/4zwP0gxf4+sJcCrkXMhrscrI9bMl2xX0VxjuDlkUtOiYMnJ9wd1TJpWL3MD72J+pcFqH6ZA78KFQ5lfUwEzs2xt0ntvMhC+sZtDAAxzAK0xIPZ3jttT/pCu5UPo/IHXUKF7iJBY3x4+H2B+nmJBatIyF4CxLT8di6f8PaUhHMYLTmOyLLOalAl2M/SE8rQhSh8N4hiFcx1sM9UudcBeXcE4amGEbL/JVvMG7+L6HblHkOyFPhPM/xTDGYt9idQ4eSyl9x74Kw+kKHdVZvsYWMahFgG6QX0jF+huMSM3QzQOQPbE1KNq6arIL/JSKvcYgR53xegKs8dnruf6PFfwC6NhvLfV5B6cAAAAASUVORK5CYII="/> + </span> </div> </div> - <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"> + <div class="w-100"></div> + + <div class="mt-3 fs-5 col-lg-6 text-center"> + <div id="output" class="form-floating"> <code> <a id="url" class="url" href='' target="jitsiUrlGenerator"></a> </code> + <label for="url">Konferenz-URL</label> </div> </div> </div> - </div> - <div class="divider d-none"></div> <div class="container my-5 d-none"> @@ -1,3 +1,7 @@ +html, body { + height: 100%; +} + .divider { height: 2rem; background-color: rgba(255, 255, 255, .5); @@ -16,10 +20,18 @@ cursor: pointer; } -code { - display: block; - margin: 0 auto; +body { + background-image: linear-gradient(0deg,rgba(0,0,0,.0),rgba(0,0,0,.6),rgba(0,0,0,.8)),url(/custom/background.jpg) +} + +#output { background: white; - padding: 1rem 2rem; - border-radius: 0.25rem; + border-radius: .25rem; + padding: 1.625rem 1rem .625rem; +} + +#output label { + transform: scale(.85) translateY(-.5rem) translateX(.15rem); + opacity: .65; + font-size: smaller; } |