fix(web): initialize index.html and update styles

This commit is contained in:
Masahiko AMANO 2023-01-27 16:53:24 +03:00
parent b791c60b81
commit 46e67488f1
4 changed files with 32 additions and 15 deletions

View File

@ -32,18 +32,20 @@
<h1>Welcome to Tanabata!</h1> <h1>Welcome to Tanabata!</h1>
</header> </header>
<main> <main>
<form id="auth"> <div class="contents-wrapper">
<div class="form-group"> <form id="auth">
<label for="password">Password</label> <div class="form-group">
<input type="password" id="password" name="password" class="form-control" maxlength="32" placeholder="Password"> <label for="password">Password</label>
<div class="invalid-feedback">Invalid password!</div> <input type="password" id="password" name="password" class="form-control" maxlength="32" placeholder="Password">
<div class="valid-feedback">Authorization success!</div> <div class="invalid-feedback">Invalid password!</div>
</div> <div class="valid-feedback">Authorization success!</div>
<div class="form-group button-flex"> </div>
<input type="submit" id="submit" class="btn btn-primary" value="Submit"> <div class="form-group button-flex">
<a href="/" class="btn btn-secondary">Back to home</a> <input type="submit" id="submit" class="btn btn-primary" value="Submit">
</div> <a href="/" class="btn btn-secondary">Back to home</a>
</form> </div>
</form>
</div>
</main> </main>
<script src="js/auth.js"></script> <script src="js/auth.js"></script>
</body> </body>

View File

@ -1,10 +1,9 @@
form { form {
margin: 0;
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin: 0;
padding: 2vw 2vw;
box-sizing: border-box;
} }
.button-flex { .button-flex {

View File

@ -54,6 +54,16 @@ main:hover {
box-shadow: 0 0 1vw black; box-shadow: 0 0 1vw black;
} }
.contents-wrapper {
margin: 0;
padding: 2vw 2vw;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-around;
}
h2 { h2 {
margin: 0; margin: 0;
padding: 14px 0; padding: 14px 0;

View File

@ -29,5 +29,11 @@
</head> </head>
<body> <body>
<h1>Welcome to Tanabata!</h1> <h1>Welcome to Tanabata!</h1>
<main>
<h2>Select Tanabata service</h2>
<div class="contents-wrapper">
<a href="/tfm" class="btn btn-primary">TFM</a>
</div>
</main>
</body> </body>
</html> </html>