Skip to content

Commit 84ca5bb

Browse files
devenesdevenes
committed
💡 Create html template files
1 parent a05aa50 commit 84ca5bb

File tree

3 files changed

+277
-0
lines changed

3 files changed

+277
-0
lines changed

‎templates/add-update.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Docker Swarm Project</title>
8+
<style>
9+
body {
10+
max-width: 600px;
11+
margin: auto;
12+
background-color: rgb(0, 0, 0);
13+
color: rgb(255, 255, 255);
14+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
15+
}
16+
17+
div {
18+
margin-top: 100px;
19+
margin-bottom: 50px;
20+
margin-right: auto;
21+
margin-left: auto;
22+
}
23+
24+
img {
25+
display: block;
26+
margin-left: auto;
27+
margin-right: auto;
28+
}
29+
30+
input {
31+
box-sizing: border-box;
32+
width: 100%;
33+
padding: 15px;
34+
margin: 20px 0;
35+
display: inline-block;
36+
border: none;
37+
background: #f1f1f1;
38+
}
39+
40+
button {
41+
box-sizing: border-box;
42+
background-color: #4caf50;
43+
color: white;
44+
padding: 16px 20px;
45+
margin: 8px 0;
46+
border: none;
47+
cursor: pointer;
48+
width: 100%;
49+
opacity: 0.9;
50+
}
51+
52+
.warning {
53+
color: red;
54+
}
55+
56+
.sectionnote {
57+
color: rgba(190, 31, 164, 0.89);
58+
}
59+
60+
.footnote {
61+
color: rgba(0, 255, 221, 0.712);
62+
}
63+
</style>
64+
</head>
65+
66+
<body>
67+
68+
<h1>Project : Phonebook Application</h1>
69+
<h2>Welcome to {{developer_name}}'s Phonebook Application</h2>
70+
<h2 class="sectionnote">Enter a name and phone number to {{action_name}}</h2>
71+
72+
<form action="#" method="post">
73+
<label for="name"><b>Name:</b></label>
74+
<input placeholder="Full Name" type="text" name="username" id="name" required>
75+
<label for="number"><b>Phone Number:</b></label>
76+
<input placeholder="1234567890" name="phonenumber" id="number" required />
77+
<button type="submit">{{ action_name.title() }}</button>
78+
{% if not_valid %}
79+
<p class="warning"><b>{{ message }}</b></p>
80+
{% endif %}
81+
{% if show_result %}
82+
<h2 class="sectionnote"> {{ result }} </h1>
83+
{% endif %}
84+
</form>
85+
86+
<div align="center">
87+
<p class="footnote"><i>This app is developed in Python by <b>{{ developer_name }}</b> and deployed with Flask and
88+
Docker Swarm on AWS Cloud Infrastructure using CloudFormation.</i>
89+
</p>
90+
</div>
91+
</body>
92+
93+
</html>

‎templates/delete.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Docker Swarm Project</title>
8+
<style>
9+
body {
10+
max-width: 600px;
11+
margin: auto;
12+
background-color: rgb(0, 0, 0);
13+
color: rgb(255, 255, 255);
14+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
15+
}
16+
17+
div {
18+
margin-top: 100px;
19+
margin-bottom: 50px;
20+
margin-right: auto;
21+
margin-left: auto;
22+
}
23+
24+
img {
25+
display: block;
26+
margin-left: auto;
27+
margin-right: auto;
28+
}
29+
30+
input {
31+
box-sizing: border-box;
32+
width: 100%;
33+
padding: 15px;
34+
margin: 20px 0;
35+
display: inline-block;
36+
border: none;
37+
background: #f1f1f1;
38+
}
39+
40+
button {
41+
box-sizing: border-box;
42+
background-color: #4caf50;
43+
color: white;
44+
padding: 16px 20px;
45+
margin: 8px 0;
46+
border: none;
47+
cursor: pointer;
48+
width: 100%;
49+
opacity: 0.9;
50+
}
51+
52+
.warning {
53+
color: red;
54+
}
55+
56+
.sectionnote {
57+
color: rgba(190, 31, 164, 0.89);
58+
}
59+
60+
.footnote {
61+
color: rgba(0, 255, 221, 0.712);
62+
}
63+
</style>
64+
</head>
65+
66+
<body>
67+
68+
<h1>Project : Phonebook Application</h1>
69+
<h2>Welcome to {{developer_name}}'s Phonebook Application</h2>
70+
<h2 class="sectionnote">Enter a name to delete</h2>
71+
72+
<form action="#" method="post">
73+
<label for="name"><b>Name:</b></label>
74+
<input placeholder="Full Name" type="text" name="username" id="name" required>
75+
<button type="submit">Delete</button>
76+
{% if not_valid %}
77+
<p class="warning"><b>{{ message }}</b></p>
78+
{% endif %}
79+
{% if show_result %}
80+
<h2 class="sectionnote"> {{ result }} </h1>
81+
{% endif %}
82+
</form>
83+
84+
<div align="center">
85+
<p class="footnote"><i>This app is developed in Python by <b>{{ developer_name }}</b> and deployed with Flask and
86+
Docker Swarm on AWS Cloud Infrastructure using CloudFormation.</i>
87+
</p>
88+
</div>
89+
</body>
90+
91+
</html>

‎templates/index.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Docker Swarm Project</title>
8+
<style>
9+
body {
10+
max-width: 600px;
11+
margin: auto;
12+
background-color: rgb(0, 0, 0);
13+
color: rgb(255, 255, 255);
14+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
15+
}
16+
17+
div {
18+
margin-top: 100px;
19+
margin-bottom: 50px;
20+
margin-right: auto;
21+
margin-left: auto;
22+
}
23+
24+
img {
25+
display: block;
26+
margin-left: auto;
27+
margin-right: auto;
28+
}
29+
30+
input {
31+
box-sizing: border-box;
32+
width: 100%;
33+
padding: 15px;
34+
margin: 20px 0;
35+
display: inline-block;
36+
border: none;
37+
background: #f1f1f1;
38+
}
39+
40+
button {
41+
box-sizing: border-box;
42+
background-color: #4caf50;
43+
color: white;
44+
padding: 16px 20px;
45+
margin: 8px 0;
46+
border: none;
47+
cursor: pointer;
48+
width: 100%;
49+
opacity: 0.9;
50+
}
51+
52+
.warning {
53+
color: red;
54+
}
55+
56+
.sectionnote {
57+
color: rgba(190, 31, 164, 0.89);
58+
}
59+
60+
.footnote {
61+
color: rgba(0, 255, 221, 0.712);
62+
}
63+
</style>
64+
</head>
65+
66+
<body>
67+
68+
<h1>Project : Phonebook Application</h1>
69+
<h2>Welcome to {{developer_name}}'s Phonebook Application</h2>
70+
<h2 class="sectionnote">Enter a name to search</h2>
71+
72+
<form action="#" method="post">
73+
<label for="name"><b>Name:</b></label>
74+
<input placeholder="Keyword" type="text" name="username" id="name">
75+
<button type="submit">Search</button>
76+
{% if show_result %}
77+
<h1>Result for '{{ keyword }}' </h1>
78+
<ul>
79+
{% for person in persons %}
80+
<li>Name: <b>{{ person['name'] }} </b> ---- Phone Number: <b>{{ person['number'] }}</b></li>
81+
{% endfor %}
82+
</ul>
83+
{% endif %}
84+
</form>
85+
86+
<div align="center">
87+
<p class="footnote"><i>This app is developed in Python by <b>{{ developer_name }}</b> and deployed with Flask and
88+
Docker Swarm on AWS Cloud Infrastructure using CloudFormation.</i>
89+
</p>
90+
</div>
91+
</body>
92+
93+
</html>

0 commit comments

Comments
 (0)