Compare commits

..

5 Commits

Author SHA1 Message Date
5eb40b6fd8 Allow Cross-Origin requests 2021-01-03 12:45:54 +05:30
55ce880e1e Add requirements.txt 2020-12-22 13:38:23 +05:30
441740b670 Change background and text colors 2020-12-21 20:37:24 +05:30
Anjuman
9b05dd44b6 Theme Inputs and Buttons. Change font and background 2020-12-21 20:11:32 +05:30
2105b4d1b0 Style inputs and button on admin page 2020-12-21 18:42:15 +05:30
5 changed files with 70 additions and 14 deletions

2
app.py
View File

@@ -1,8 +1,10 @@
import json import json
from flask import Flask, jsonify, request, render_template from flask import Flask, jsonify, request, render_template
from flask_cors import CORS
app = Flask(__name__) app = Flask(__name__)
CORS(app)
with open("data.json") as f: with open("data.json") as f:
data = json.load(f) data = json.load(f)

2
requirements.txt Normal file
View File

@@ -0,0 +1,2 @@
Flask>=1.1
flask-cors >= 3.0

View File

@@ -1,23 +1,67 @@
* { * {
font-family: 'Roboto', sans-serif; padding:0px;
margin:0px;
} }
header{ header{
padding: 50px; padding-top: 30px;
} padding-right: 30px;
body{ padding-left: 30px;
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"); padding-bottom: 40px;
font-weight: bolder;
font-size: 30px;
color: white;
} }
.input[type=text]{ body{
width:100%; background: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: left;
color: white;
min-height: 100vh;
}
.container{
margin: 10px 10px;
width: calc(100% - 20px);
display: flex;
justify-content: center;
}
input[type=text]{
width:43%;
background: white;
border:2px solid #aaa; border:2px solid #aaa;
border-radius:4px; border-radius:20px;
margin:8px 0; margin:8px 0;
outline:none; outline:none;
padding:8px; padding:8px;
box-sizing:border-box; box-sizing:border-box;
transition:.3s; transition:.3s;
} }
.change{
padding-bottom: 30px;
}
button[type=submit]{
border: 1px solid #000000;
border-radius: 15px;
background: white;
padding: 10px 20px;
font-size:20px ;
font-family: "montserrat";
cursor: pointer;
margin: 10px;
color: #000000;
transition: 0.8s;
position: relative;
overflow: hidden;
}
button[type=submit]:hover{
color:white;
}
input[type=text]:focus{ input[type=text]:focus{
border-color: dodgerBlue; border-color: dodgerBlue;
@@ -27,8 +71,8 @@ input[type=text]:focus{
h1{ h1{
text-align: center; text-align: center;
} }
.table-dec{ .table-dec{
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -64,6 +108,7 @@ h1{
.content-table tbody tr:nth-of-type(even) { .content-table tbody tr:nth-of-type(even) {
background-color: rgba(243, 243, 243, 0.7); background-color: rgba(243, 243, 243, 0.7);
color: #000;
} }
.content-table tbody tr:last-of-type { .content-table tbody tr:last-of-type {
@@ -80,3 +125,6 @@ h1{
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
} }
.button-dec {
}

BIN
static/background.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

View File

@@ -6,17 +6,21 @@
<title>Mock Car API Admin</title> <title>Mock Car API Admin</title>
<link rel="stylesheet" href="{{ url_for('static', filename='admin.css')}}" type="text/css"> <link rel="stylesheet" href="{{ url_for('static', filename='admin.css')}}" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<header> <header>
<h1>Mock Data API</h1> <h1>Mock Data API</h1>
</header> </header>
<div class="change"> <div class="change">
<input class="input-box" type="text" name="key" id="key" placeholder="Key"> <input class="input-box" type="text" name="key" id="key" placeholder="Key">
<input class="input-box" 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>
<div class='button-dec'> <div class='container'>
<button type="submit" id="#submit" onclick="updateData()">Change / Add</button> <button type="submit" id="#submit" onclick="updateData()">Change / Add</button>
</div> </div>
<div class="table-dec"> <div class="table-dec">