changed styling on the welcome page

This commit is contained in:
Louis Vallat 2019-11-28 00:50:09 +01:00
parent 8c3aab8c3d
commit 9d33bf21e6
3 changed files with 109 additions and 23 deletions

View File

@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
body {
min-height: 100vh;
@ -9,6 +10,10 @@ body {
font-family: 'Montserrat', sans-serif;
}
.lato {
font-family: 'Lato', sans-serif;
}
.noto-sans {
font-family: 'Noto Sans', sans-serif;
}
@ -61,4 +66,8 @@ body {
.halo-hover:hover {
transition: all 500ms;
box-shadow: 0 0 100px white;
}
.width50P {
width: 50%;
}

75
assets/css/welcome.css Normal file
View File

@ -0,0 +1,75 @@
h1 {
font-size: 3.5em;
}
#header {
position: absolute;
top: 25px;
left: 35px;
right: 35px;
z-index: auto;
}
.button {
display: inline-block;
text-decoration: none;
border: none;
border-radius: 7px;
padding: 10px 25px;
transition: all 250ms;
margin-bottom: 10px;
font-size: large;
}
.btn-violet {
background-color: rgb(169, 89, 201);
}
.btn-violet:hover {
transition: all 250ms;
background-color: rgb(145, 47, 184);
}
.btn-red {
background-color: #EC7063;
}
.btn-red:hover {
transition: all, 250ms;
background-color: rgb(211, 59, 42);
}
.btn-blue {
background-color: rgb(59, 140, 233);
}
.btn-blue:hover {
transition: all, 250ms;
background-color: rgb(51, 104, 202);
}
.btn-dark {
background-color: #424949;
}
.btn-dark:hover {
transition: all, 250ms;
background-color: #282b2b;
}
.btn-green {
background-color: #2ECC71;
}
.btn-green:hover {
transition: all, 250ms;
background-color: rgb(20, 172, 53);
}
body {
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(90, 92, 106, 1) 0%, rgba(32, 45, 58, 1) 81.3%);
}
#buttonList, #buttonList2 {
margin-top: 10px;
}

View File

@ -13,32 +13,34 @@ if (!is_connected()) {
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style type="text/css">
body {
font: 14px sans-serif;
text-align: center;
}
</style>
<!-- TODO : ADD SEO STUFF -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/common.css" rel="stylesheet">
<link href="/assets/css/welcome.css" rel="stylesheet">
<title>Food inventory - Welcome</title>
</head>
<body>
<div class="page-header">
<h1>Hi, <b><?php echo htmlspecialchars(get_user_info_from_session_id("first_name")); ?></b>. Welcome to food-inventory.</h1>
<body class="white">
<div id="header">
<h1 class="montserrat">Hi, <b><?php echo htmlspecialchars(get_user_info_from_session_id("first_name")); ?></b>. Welcome to food-inventory.</h1>
<div class="flex-container flex-evenly" id="buttonList">
<a href="reset-password.php" class="button lato white btn-violet">Reset Your Password</a>
<a href="logout.php" class="button lato white btn-red">Sign Out of Your Account</a>
</div>
<div class="flex-container flex-evenly" id="buttonList2">
<div class="flex-container flex-evenly width50P">
<a href="list-cupboards.php" class="button lato white btn-blue">List cupboards</a>
<a href="list-products.php" class="button lato white btn-blue">List products</a>
</div>
<div class="flex-container flex-evenly width50P">
<a href="add-cupboard.php" class="button lato white btn-green">Add cupboard</a>
<a href="add-product.php" class="button lato white btn-green">Add product</a>
</div>
</p>
</div>
</div>
<p>
<a href="reset-password.php" class="btn btn-warning">Reset Your Password</a>
<a href="logout.php" class="btn btn-danger">Sign Out of Your Account</a>
</p>
<p>
<a href="list-cupboards.php" class="btn btn-info">List cupboards</a>
<a href="list-products.php" class="btn btn-info">List products</a>
</p>
<p>
<a href="add-cupboard.php" class="btn btn-info">Add cupboard</a>
<a href="add-product.php" class="btn btn-info">Add product</a>
</p>
</body>
</html>