refactor

yhornisse / bremer

Browse code refactor master
1 parent b75ef32 commit 9c2227eefa89bc6e607c4e605e58f22a7f0a6b36 yhornisse authored on 12 Aug 2023

Patch

Showing 1 changed file

Ignore Space Show notes View src/main/resources/static/bremer/login.html
<!-- ~ Copyright (c) 2023. yo-saito. All Rights Reserved. --> <!doctype html> <html> <head> <meta charset="UTF-8"/> <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> .absolute { position: absolute; } .relative { position: relative; } div img, div input { display: inline-block; } h1 { background-color: #333333; color: white; margin: 0; padding: 0.5rem; } h1 img { height: 2.5rem; } .icon-slot { z-index: 2; margin-top: 0.5rem; margin-left: 0.5rem; } .icon-slot { height: 1rem; } .input-text { padding-left: 2.3rem; height: 2rem; border: none; outline: none; border-bottom: 2px solid #333333; background-color: white; width: 90%; } .button-area { width: 100%; text-align: center; margin: 1rem auto 0 auto; } .button-area button { width: 90%; height: 3rem; line-height: 1.5rem; font-size: 1.5rem; color: white; } .button-area img { height: 1.2rem; } </style> <script> window.onload = function () { const searchParams = new URLSearchParams(window.location.search) if (searchParams.has('failed')) { document.getElementById("warn").innerText = "ログインに失敗しました" } } </script> </head> <body style="margin: 0; padding: 0;"> <h1> <img src="/bremer/icon/bremer.png"> Bremer App </h1> <form method="POST" action="/bremer/login" style="padding: 1rem;"> <div id="warn" style="color: red;"> </div> <div style="margin:1rem auto 0 auto;"> <div class="relative"> <img class="icon-slot absolute" src="/bremer/icon/user.png"> <input type="text" name="id" placeholder="User ID" class="input-text"/> </div> </div> <div style="margin:1rem auto 0 auto;"> <div class="relative"> <img class="icon-slot absolute" src="/bremer/icon/lock.png"> <input type="password" name="password" placeholder="Password" class="input-text"/> </div> </div> <div class="button-area"> <button type="submit" style="width: 80%; background-color: #333333;"> <img src="/bremer/icon/login.png"> <span style="display: inline-block">ログイン</span> </button> </div> </form> </body> </html> <!-- ~ Copyright (c) 2023. yo-saito. All Rights Reserved. --> <!doctype html> <html> <head> <meta charset="UTF-8"/> <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> .absolute { position: absolute; } .relative { position: relative; } div img, div input { display: inline-block; } h1 { background-color: #333333; color: white; margin: 0; padding: 0.5rem; } h1 img { height: 2.5rem; } .icon-slot { z-index: 2; margin-top: 0.5rem; margin-left: 0.5rem; } .icon-slot { height: 1rem; } .input-text { padding-left: 2.3rem; height: 2rem; border: none; outline: none; border-bottom: 2px solid #333333; background-color: white; width: 90%; } .button-area { width: 100%; text-align: center; margin: 1rem auto 0 auto; } .button-area button { width: 90%; height: 3rem; font-size: 1.5rem; color: white; } .button-area img { margin-top: 0.5rem; height: 1.5rem; } </style> <script> window.onload = function () { const searchParams = new URLSearchParams(window.location.search) if (searchParams.has('failed')) { document.getElementById("warn").innerText = "ログインに失敗しました" } } </script> </head> <body style="margin: 0; padding: 0;"> <h1> <img src="/bremer/icon/bremer.png"> Bremer App </h1> <form method="POST" action="/bremer/login" style="padding: 1rem;"> <div id="warn" style="color: red;"> </div> <div style="margin:1rem auto 0 auto;"> <div class="relative"> <img class="icon-slot absolute" src="/bremer/icon/user.png"> <input type="text" name="id" placeholder="User ID" class="input-text"/> </div> </div> <div style="margin:1rem auto 0 auto;"> <div class="relative"> <img class="icon-slot absolute" src="/bremer/icon/lock.png"> <input type="password" name="password" placeholder="Password" class="input-text"/> </div> </div> <div class="button-area"> <button type="submit" style="width: 80%; background-color: #333333;"> <img src="/bremer/icon/login.png"> ログイン </button> </div> </form> </body> </html>

Ignore Space Show notes View

src/main/resources/static/bremer/login.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name=viewport
        content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>
    .absolute {
      position: absolute;
    }

.relative {
      position: relative;
    }

div img, div input {
      display: inline-block;
    }

h1 {
      background-color: #333333;
      color: white;
      margin: 0;
      padding: 0.5rem;
    }

h1 img {
      height: 2.5rem;
    }

.icon-slot {
      z-index: 2;
      margin-top: 0.5rem;
      margin-left: 0.5rem;
    }

.icon-slot {
      height: 1rem;
    }

.input-text {
      padding-left: 2.3rem;
      height: 2rem;
      border: none;
      outline: none;
      border-bottom: 2px solid #333333;
      background-color: white;
      width: 90%;
    }

.button-area {
      width: 100%;
      text-align: center;
      margin: 1rem auto 0 auto;
    }

.button-area button {
      width: 90%;
      height: 3rem;
      line-height: 1.5rem;
      font-size: 1.5rem;
      color: white;
    }

.button-area img {
      height: 1.2rem;
    }
  </style>
  <script>
    window.onload = function () {
      const searchParams = new URLSearchParams(window.location.search)
      if (searchParams.has('failed')) {
        document.getElementById("warn").innerText = "ログインに失敗しました"
      }
    }
  </script>
</head>
<body style="margin: 0; padding: 0;">
<h1>
  <img src="/bremer/icon/bremer.png">
  Bremer App
</h1>
<form method="POST" action="/bremer/login" style="padding: 1rem;">
  <div id="warn" style="color: red;">
  </div>
  <div style="margin:1rem auto 0 auto;">
    <div class="relative">
      <img class="icon-slot absolute" src="/bremer/icon/user.png">
      <input type="text" name="id" placeholder="User ID" class="input-text"/>
    </div>
  </div>
  <div style="margin:1rem auto 0 auto;">
    <div class="relative">
      <img class="icon-slot absolute" src="/bremer/icon/lock.png">
      <input type="password" name="password" placeholder="Password" class="input-text"/>
    </div>
  </div>
  <div class="button-area">
    <button type="submit" style="width: 80%; background-color: #333333;">
      <img src="/bremer/icon/login.png">
      <span style="display: inline-block">ログイン</span>
    </button>
  </div>
</form>
</body>
</html>

.relative {
      position: relative;
    }

div img, div input {
      display: inline-block;
    }

h1 {
      background-color: #333333;
      color: white;
      margin: 0;
      padding: 0.5rem;
    }

h1 img {
      height: 2.5rem;
    }

.icon-slot {
      z-index: 2;
      margin-top: 0.5rem;
      margin-left: 0.5rem;
    }

.icon-slot {
      height: 1rem;
    }

.input-text {
      padding-left: 2.3rem;
      height: 2rem;
      border: none;
      outline: none;
      border-bottom: 2px solid #333333;
      background-color: white;
      width: 90%;
    }

.button-area {
      width: 100%;
      text-align: center;
      margin: 1rem auto 0 auto;
    }

.button-area button {
      width: 90%;
      height: 3rem;
      font-size: 1.5rem;
      color: white;
    }

.button-area img {
      margin-top: 0.5rem;
      height: 1.5rem;
    }
  </style>
  <script>
    window.onload = function () {
      const searchParams = new URLSearchParams(window.location.search)
      if (searchParams.has('failed')) {
        document.getElementById("warn").innerText = "ログインに失敗しました"
      }
    }
  </script>
</head>
<body style="margin: 0; padding: 0;">
<h1>
  <img src="/bremer/icon/bremer.png">
  Bremer App
</h1>
<form method="POST" action="/bremer/login" style="padding: 1rem;">
  <div id="warn" style="color: red;">
  </div>
  <div style="margin:1rem auto 0 auto;">
    <div class="relative">
      <img class="icon-slot absolute" src="/bremer/icon/user.png">
      <input type="text" name="id" placeholder="User ID" class="input-text"/>
    </div>
  </div>
  <div style="margin:1rem auto 0 auto;">
    <div class="relative">
      <img class="icon-slot absolute" src="/bremer/icon/lock.png">
      <input type="password" name="password" placeholder="Password" class="input-text"/>
    </div>
  </div>
  <div class="button-area">
    <button type="submit" style="width: 80%; background-color: #333333;">
      <img src="/bremer/icon/login.png">
      ログイン
    </button>
  </div>
</form>
</body>
</html>

Show line notes below