python - Python Quart が HTML を正しくレンダリングしない

Question

以下を使用して、Python Quart で (青写真として) ページをレンダリングしています。

return await render_template(self.TEMPLATE_LOGIN_PAGE)

問題は、エラーメッセージが正しくレンダリングされていないことです - レンダリング中です

赤色なし
不適切な位置
Chrome で開発者ツールを使用すると、スタイリングが表示されない

Chrome でまったく同じページをファイルとしてネイティブに実行すると、正常に動作しますが、必要な追加のコードはありますか? HTMLは正しいと思います。

html:

  <!doctype html>
  <html lang="en">
    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">

      <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">

      <title>Integrated Test Management Suite | Login</title>
    </head>

    <body>

      <div class="wrapper">
          <div class="card">
              <form action="#" class="d-flex flex-column">
                  <div class="h3 text-center text-white">Login</div>
                  <div class="d-flex align-items-center input-field my-3 mb-4"> <span class="far fa-user p-2"></span> <input type="email" placeholder="Email" required class="form-control"> </div>
                  <div class="d-flex align-items-center input-field mb-4"> <span class="fas fa-lock p-2"></span> <input type="password" placeholder="Password" required class="form-control" id="pwd"> <button class="btn" onclick="showPassword()"> <span class="fas fa-eye-slash"></span> </button> </div>
                  <div class="d-sm-flex align-items-sm-center justify-content-sm-between">
                      <!--
                      <div class="d-flex align-items-center"> <label class="option"> <span class="text-light-white">Remember Me</span> <input type="checkbox" checked> <span class="checkmark"></span> </label> </div>
                      <div class="mt-sm-0 mt-3"><a href="#">Forgot password?</a></div>
                      -->
                  </div>
                  <div class="jumbotron" id="error_msg" class="jumbotron text-black">error_msg</div>
                  <div class="my-3"> <input type="submit" value="Login" class="btn btn-primary"> </div>
                  <div class="mb-3"> <span class="text-light-white">Don't have an account?</span> <a href="#" onclick="return false;">Sign Up</a> </div>
              </form>
              <div class="position-relative border-bottom my-3 line"> <span class="connect">or connect with</span> </div>
              <div class="text-center py-3 connections">
                  <a href="https://wwww.facebook.com" target="_blank" class="px-2" onclick="return false;"> <img src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" alt=""> </a>
                  <a href="https://www.google.com" target="_blank" class="px-2" onclick="return false;"> <img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" alt=""> </a>
               </div>
          </div>
      </div>
      
      </div>

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    </body>
  </html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif
}

body {
    background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    min-height: 93vh
}

.wrapper {
    max-width: 500px;
    margin: 50px auto
}

.wrapper .card {
    max-width: 400px;
    min-height: 450px;
    margin: 30px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    cursor: pointer;
    padding: 0.8rem
}

.wrapper .card a {
    text-decoration: none;
    color: #eee
}

.wrapper .card a:hover {
    color: #fff
}

.wrapper .card .input-field {
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #eee;
    padding: 0.3rem
}

.wrapper .card .input-field input {
    background-color: inherit
}

.wrapper .card .input-field input.form-control,
.wrapper .card .input-field input.form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
    color: #eee
}

.wrapper .card .input-field button.btn {
    color: #eee;
    padding: 0rem;
    padding-right: 0.5rem
}

.wrapper .card .input-field button.btn:hover {
    color: #fff
}

.wrapper .card .input-field button.btn:focus {
    border: none;
    outline: none;
    box-shadow: none
}

.wrapper .card .input-field input::placeholder {
    color: #eee
}

.wrapper .card .option {
    display: block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    user-select: none
}

.wrapper .card .option span.text-light-white:hover {
    color: #fff
}

.wrapper .card .option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border-radius: 2px
}

.wrapper .card .option:hover input~.checkmark {
    background-color: #f1f1f1
}

.wrapper .card .option input:checked~.checkmark {
    border: none;
    background-color: #333;
    transition: 300ms ease-in-out all
}

.checkmark:after {
    content: "\2713";
    position: absolute;
    display: none;
    color: #fff;
    font-size: 1rem
}

.wrapper .card .option input:checked~.checkmark:after {
    display: block
}

.wrapper .card .option .checkmark:after {
    left: 3px;
    top: -3px;
    width: 5px;
    height: 10px
}

.wrapper .card .btn.btn-primary {
    border-radius: 20px;
    width: 100px;
    background-color: #fff;
    color: #333;
    border: none
}

.wrapper .card .btn.btn-primary:hover {
    color: #fff;
    background: #333
}

.wrapper .card .btn.btn-primary:focus {
    border: none;
    box-shadow: none
}

.wrapper .card .text-light-white {
    color: #ddd
}

.wrapper .card .line span.connect {
    position: absolute;
    top: -12px;
    left: 33%;
    color: #000;
    padding: 0 0.3rem;
    z-index: 100;
    border-radius: 2px;
    background-color: #fff
}

.wrapper .card .connections a img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

#error_msg
{
    background: #ff4d4d;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

@media(max-width: 370px) {
    .wrapper .card .line:after {
        left: 27%
    }
}

@media(max-width: 350px) {
    .wrapper {
        margin: 10px auto
    }

    .wrapper .card {
        margin: 10px
    }
}

python - Python Quart が HTML を正しくレンダリングしない

1 に答える 1

Related

Reference