Move css to seperate file and retheme admin page
This commit is contained in:
Anjuman
parent
46fc7a7a63
commit
4d66f92aac
|
|
@ -0,0 +1,82 @@
|
||||||
|
* {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
padding: 50px;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-image: url("https://images.unsplash.com/photo-1528459584353-5297db1a9c01?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1075&q=80");
|
||||||
|
}
|
||||||
|
|
||||||
|
.input[type=text]{
|
||||||
|
width:100%;
|
||||||
|
border:2px solid #aaa;
|
||||||
|
border-radius:4px;
|
||||||
|
margin:8px 0;
|
||||||
|
outline:none;
|
||||||
|
padding:8px;
|
||||||
|
box-sizing:border-box;
|
||||||
|
transition:.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text]:focus{
|
||||||
|
border-color:dodgerBlue;
|
||||||
|
box-shadow:0 0 8px 0 dodgerBlue;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1{
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.table-dec{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.content-table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 25px 0;
|
||||||
|
font-size: 0.9em;
|
||||||
|
min-width: 400px;
|
||||||
|
border-radius: 5px 5px 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-table thead tr {
|
||||||
|
width:100%;
|
||||||
|
background-color: #009879;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-table th,
|
||||||
|
.content-table td {
|
||||||
|
padding: 12px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-table tbody tr {
|
||||||
|
border-bottom: 1px solid #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-table tbody tr:nth-of-type(even) {
|
||||||
|
background-color: rgba(243, 243, 243, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-table tbody tr:last-of-type {
|
||||||
|
border-bottom: 2px solid #009879;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-table tbody tr.active-row {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #009879;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
@ -4,52 +4,38 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Mock Car API Admin</title>
|
<title>Mock Car API Admin</title>
|
||||||
<style type="text/css" media="screen">
|
<link rel="stylesheet" href="{{ url_for('static', filename='admin.css')}}" type="text/css">
|
||||||
body {
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
margin: 5em;
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet">
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
table, tr, td {
|
|
||||||
border: black 1px solid;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.change {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
<h1>Mock Data API</h1>
|
<h1>Mock Data API</h1>
|
||||||
|
</header>
|
||||||
<div class="change">
|
<div class="change">
|
||||||
<input type="text" name="key" id="key" placeholder="Key">
|
<input class="input-box" type="text" name="key" id="key" placeholder="Key">
|
||||||
<input type="text" name="value" id="value" placeholder="Valid JSON values">
|
<input class="input-box" type="text" name="value" id="value" placeholder="Valid JSON values">
|
||||||
|
</div>
|
||||||
|
<div class='button-dec'>
|
||||||
<button type="submit" id="#submit" onclick="updateData()">Change / Add</button>
|
<button type="submit" id="#submit" onclick="updateData()">Change / Add</button>
|
||||||
</div>
|
</div>
|
||||||
<table>
|
<div class="table-dec">
|
||||||
|
<table class="content-table">
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Key</td>
|
<td>Key</td>
|
||||||
<td>Value</td>
|
<td>Value</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</thead>
|
||||||
{% for key, value in data.items() %}
|
{% for key, value in data.items() %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{ key }}</td>
|
<td>{{ key }}</td>
|
||||||
<td>{{ value }}</td>
|
<td>{{ value }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
<script charset="utf-8">
|
<script charset="utf-8">
|
||||||
function updateData() {
|
function updateData() {
|
||||||
const key = document.querySelector("#key").value;
|
const key = document.querySelector("#key").value;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue