Skip to content

Commit aec412a

Browse files
author
Ubuntu
committed
Added some tweaks
1 parent c24e907 commit aec412a

File tree

2 files changed

+103
-32
lines changed

2 files changed

+103
-32
lines changed

‎app.py

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import os
2-
from flask import Flask, render_template, request, redirect, url_for
2+
from flask import Flask, render_template, request, redirect, url_for, jsonify
33
from flask_mysqldb import MySQL
44

55
app = Flask(__name__)
@@ -13,6 +13,18 @@
1313
# Initialize MySQL
1414
mysql = MySQL(app)
1515

16+
def init_db():
17+
with app.app_context():
18+
cur = mysql.connection.cursor()
19+
cur.execute('''
20+
CREATE TABLE IF NOT EXISTS messages (
21+
id INT AUTO_INCREMENT PRIMARY KEY,
22+
message TEXT
23+
);
24+
''')
25+
mysql.connection.commit()
26+
cur.close()
27+
1628
@app.route('/')
1729
def hello():
1830
cur = mysql.connection.cursor()
@@ -28,8 +40,9 @@ def submit():
2840
cur.execute('INSERT INTO messages (message) VALUES (%s)', [new_message])
2941
mysql.connection.commit()
3042
cur.close()
31-
return redirect(url_for('hello'))
43+
return jsonify({'message': new_message})
3244

3345
if __name__ == '__main__':
46+
init_db()
3447
app.run(host='0.0.0.0', port=5000, debug=True)
3548

‎templates/index.html

+88-30
Original file line numberDiff line numberDiff line change
@@ -13,78 +13,104 @@
1313
}
1414

1515
body {
16-
background-color: #f4f4f4;
16+
background-color: #121212;
17+
color: #e0e0e0;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
min-height: 100vh;
22+
overflow: hidden;
1723
}
1824

1925
.container {
2026
max-width: 800px;
21-
margin: 50px auto;
22-
padding: 20px;
23-
background-color: #fff;
24-
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
25-
border-radius: 5px;
26-
transition: box-shadow 0.3s ease;
27+
width: 100%;
28+
margin: 20px auto;
29+
padding: 30px;
30+
background-colP0+r\P0+r\or: #1e1e1e;
31+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
32+
border-radius: 10px;
33+
transition: box-shadow 0.3s ease, transform 0.3s ease;
2734
}
2835

2936
.container:hover {
30-
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
37+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
38+
transform: translateY(-5px);
3139
}
3240

3341
h1 {
34-
color: #007BFF;
42+
color: #ff9800;
3543
margin-bottom: 20px;
36-
border-bottom: 2px solid #f0f0f0;
44+
border-bottom: 2px solid #333;
3745
padding-bottom: 10px;
46+
text-align: center;
47+
font-size: 1.8rem;
3848
}
3949

4050
p {
41-
color: #666;
42-
margin-bottom: 10px;
51+
color: #ccc;
52+
margin-bottom: 15px;
53+
font-size: 1rem;
4354
}
4455

4556
form {
4657
display: flex;
4758
flex-direction: column;
48-
gap: 10px;
59+
gap: 15px;
4960
}
5061

5162
input[type="text"] {
52-
padding: 10px;
53-
border: 1px solid #ccc;
63+
padding: 12px;
64+
border: 1px solid #333;
65+
background-color: #2c2c2c;
66+
color: #fff;
5467
border-radius: 4px;
5568
font-size: 16px;
56-
transition: border-color 0.3s ease;
69+
transition: border-color 0.3s ease, box-shadow 0.3s ease;
5770
}
5871

5972
input[type="text"]:hover, input[type="text"]:focus {
60-
border-color: #007BFF;
73+
border-color: #ff9800;
74+
box-shadow: 0 0 8px rgba(255, 152, 0, 0.25);
6175
}
6276

6377
input[type="submit"] {
64-
padding: 10px 15px;
65-
background-color: #007BFF;
78+
padding: 12px 20px;
79+
background: linear-gradient(135deg, #ff9800, #e65100);
6680
color: #fff;
6781
border: none;
6882
border-radius: 4px;
6983
cursor: pointer;
70-
transition: background-color 0.3s ease, transform 0.3s ease;
84+
transition: background 0.3s ease, transform 0.3s ease, box-shP0+r\P0+r\P0+r\P0+r\P0+r\adow 0.3s ease;
85+
font-size: 16px;
7186
}
7287

7388
input[type="submit"]:hover {
74-
background-color: #0056b3;
89+
background: linear-gradient(135deg, #e65100, #ff9800);
90+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
7591
transform: translateY(-2px);
7692
}
7793

7894
input[type="submit"]:active {
7995
transform: translateY(0);
96+
box-shadow: none;
8097
}
8198

8299
@media (max-width: 600px) {
83100
.container {
84-
margin: 20px 10px;
101+
padding: 20px;
102+
margin: 10px;
103+
}
104+
105+
h1 {
106+
font-size: 1.5rem;
85107
}
86108

87-
input[type="text"] {
109+
p {
110+
font-size: 0.9rem;
111+
}
112+
113+
input[type="text"], input[type="submit"] {
88114
font-size: 14px;
89115
}
90116
}
@@ -93,17 +119,49 @@
93119

94120
<body>
95121
<div class="container">
96-
<h1>Hello Dosto,
97-
Let's make a 2 Tier Application with Flask and MYSQL!</h1>
98-
{% for message in messages %}
99-
<p>{{ message[0] }}</p>
100-
{% endfor %}
101-
102-
<form action="/submit" method="post">
122+
<h1>Hello Dosto,<br>Let's make a 2 Tier Application with Flask and MYSQL!</h1>
123+
<div class="messages">
124+
{% for message in messages %}
125+
<p>{{ message[0] }}</p>
126+
{% endfor %}
127+
</div>
128+
129+
<form id="messageForm">
103130
<input type="text" name="new_message" placeholder="Enter a new message">
104131
<input type="submit" value="Submit">
105132
</form>
106133
</div>
134+
135+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
136+
<script>
137+
$(document).ready(function() {
138+
$("#messageForm").on("submit", function(event) {
139+
event.preventDefault(); // Prevent the form from submitting the traditional way
140+
141+
$.ajax({
142+
url: "/submit",
143+
type: "POST",
144+
data: {
145+
new_message: $("input[name='new_message']").val()
146+
},
147+
success: function(response) {
148+
if (response && response.message) {
149+
// Append the new message to the list of messages
150+
$(".messages").append("<p>" + response.message + "</p>");
151+
// Clear the input field
152+
$("input[name='new_message']").val("");
153+
} else {
154+
console.error("Unexpected response format:", response);
155+
}
156+
},
157+
error: function(xhr, status, error) {
158+
console.error("AJAX Error:", status, error);
159+
}
160+
});
161+
});
162+
});
163+
</script>
107164
</body>
108165

109166
</html>
167+

0 commit comments

Comments
 (0)