Skip to content

Commit 11d9e69

Browse files
LondheShubham153LondheShubham153
authored
Minor tweaks
1 parent d632d6c commit 11d9e69

File tree

1 file changed

+76
-59
lines changed

1 file changed

+76
-59
lines changed

‎templates/index.html

+76-59
Original file line numberDiff line numberDiff line change
@@ -4,110 +4,122 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Flask App</title>
7+
<title>Flask App 🚀</title>
88
<style>
9-
body, h1, p, form, input {
9+
/* Import Google Font */
10+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
11+
12+
/* Reset Default Styles */
13+
* {
1014
margin: 0;
1115
padding: 0;
12-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
box-sizing: border-box;
17+
font-family: 'Poppins', sans-serif;
1318
}
1419

20+
/* Background with subtle gradient */
1521
body {
16-
background-color: #121212;
17-
color: #e0e0e0;
22+
background: linear-gradient(to bottom, #0f0f0f, #1c1c1c);
23+
color: #fff;
1824
display: flex;
1925
justify-content: center;
2026
align-items: center;
2127
min-height: 100vh;
22-
overflow: hidden;
28+
padding: 20px;
2329
}
2430

31+
/* Glassmorphic Container */
2532
.container {
26-
max-width: 800px;
33+
max-width: 600px;
2734
width: 100%;
28-
margin: 20px auto;
2935
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;
36+
background: rgba(255, 255, 255, 0.1);
37+
backdrop-filter: blur(10px);
38+
border-radius: 15px;
39+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
40+
border: 1px solid rgba(255, 255, 255, 0.2);
41+
text-align: center;
42+
transition: transform 0.3s ease, box-shadow 0.3s ease;
3443
}
3544

3645
.container:hover {
37-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
3846
transform: translateY(-5px);
47+
box-shadow: 0 12px 24px rgba(255, 255, 255, 0.1);
3948
}
4049

50+
/* Elegant Heading */
4151
h1 {
42-
color: #ff9800;
52+
font-size: 2rem;
53+
font-weight: 600;
54+
background: linear-gradient(135deg, #ff9800, #e65100);
55+
-webkit-background-clip: text;
56+
-webkit-text-fill-color: transparent;
4357
margin-bottom: 20px;
44-
border-bottom: 2px solid #333;
45-
padding-bottom: 10px;
46-
text-align: center;
47-
font-size: 1.8rem;
4858
}
4959

50-
p {
51-
color: #ccc;
52-
margin-bottom: 15px;
53-
font-size: 1rem;
60+
/* Messages Box */
61+
.messages {
62+
margin-bottom: 20px;
63+
padding: 15px;
64+
background: rgba(255, 255, 255, 0.1);
65+
border-radius: 10px;
66+
max-height: 200px;
67+
overflow-y: auto;
5468
}
5569

56-
form {
57-
display: flex;
58-
flex-direction: column;
59-
gap: 15px;
70+
.messages p {
71+
padding: 10px;
72+
background: rgba(255, 255, 255, 0.2);
73+
border-radius: 8px;
74+
margin-bottom: 5px;
75+
font-size: 0.95rem;
6076
}
6177

78+
/* Animated Input Fields */
6279
input[type="text"] {
80+
width: 100%;
6381
padding: 12px;
64-
border: 1px solid #333;
65-
background-color: #2c2c2c;
82+
border: 1px solid rgba(255, 255, 255, 0.3);
83+
background: rgba(255, 255, 255, 0.05);
6684
color: #fff;
67-
border-radius: 4px;
85+
border-radius: 8px;
6886
font-size: 16px;
69-
transition: border-color 0.3s ease, box-shadow 0.3s ease;
87+
transition: all 0.3s ease;
88+
text-align: center;
7089
}
7190

72-
input[type="text"]:hover, input[type="text"]:focus {
91+
input[type="text"]:focus {
7392
border-color: #ff9800;
74-
box-shadow: 0 0 8px rgba(255, 152, 0, 0.25);
93+
box-shadow: 0 0 12px rgba(255, 152, 0, 0.5);
94+
outline: none;
7595
}
7696

97+
/* Glowing Submit Button */
7798
input[type="submit"] {
78-
padding: 12px 20px;
99+
width: 100%;
100+
padding: 12px;
79101
background: linear-gradient(135deg, #ff9800, #e65100);
80102
color: #fff;
81103
border: none;
82-
border-radius: 4px;
104+
border-radius: 8px;
83105
cursor: pointer;
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;
85106
font-size: 16px;
107+
transition: all 0.3s ease;
86108
}
87109

88110
input[type="submit"]:hover {
89-
background: linear-gradient(135deg, #e65100, #ff9800);
90-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
111+
box-shadow: 0 0 20px rgba(255, 152, 0, 0.6);
91112
transform: translateY(-2px);
92113
}
93114

94-
input[type="submit"]:active {
95-
transform: translateY(0);
96-
box-shadow: none;
97-
}
98-
115+
/* Mobile Responsive */
99116
@media (max-width: 600px) {
100117
.container {
101118
padding: 20px;
102-
margin: 10px;
103119
}
104120

105121
h1 {
106-
font-size: 1.5rem;
107-
}
108-
109-
p {
110-
font-size: 0.9rem;
122+
font-size: 1.6rem;
111123
}
112124

113125
input[type="text"], input[type="submit"] {
@@ -119,37 +131,43 @@
119131

120132
<body>
121133
<div class="container">
122-
<h1>Hello Dosto,<br>Let's make a 2 Tier Application with Flask and MYSQL!</h1>
134+
<h1>🚀 Flask + MySQL App</h1>
135+
123136
<div class="messages">
124137
{% for message in messages %}
125138
<p>{{ message[0] }}</p>
126139
{% endfor %}
127140
</div>
128141

129142
<form id="messageForm">
130-
<input type="text" name="new_message" placeholder="Enter a new message">
131-
<input type="submit" value="Submit">
143+
<input type="text" name="new_message" placeholder="Type your message..." required>
144+
<input type="submit" value="Send">
132145
</form>
133146
</div>
134147

148+
<!-- jQuery for Smooth AJAX Requests -->
135149
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
136150
<script>
137151
$(document).ready(function() {
138152
$("#messageForm").on("submit", function(event) {
139-
event.preventDefault(); // Prevent the form from submitting the traditional way
153+
event.preventDefault(); // Prevent page reload
154+
155+
let messageInput = $("input[name='new_message']");
156+
let message = messageInput.val().trim();
157+
158+
if (message === "") {
159+
alert("Message cannot be empty!");
160+
return;
161+
}
140162

141163
$.ajax({
142164
url: "/submit",
143165
type: "POST",
144-
data: {
145-
new_message: $("input[name='new_message']").val()
146-
},
166+
data: { new_message: message },
147167
success: function(response) {
148168
if (response && response.message) {
149-
// Append the new message to the list of messages
150169
$(".messages").append("<p>" + response.message + "</p>");
151-
// Clear the input field
152-
$("input[name='new_message']").val("");
170+
messageInput.val("");
153171
} else {
154172
console.error("Unexpected response format:", response);
155173
}
@@ -164,4 +182,3 @@ <h1>Hello Dosto,<br>Let's make a 2 Tier Application with Flask and MYSQL!</h1>
164182
</body>
165183

166184
</html>
167-

0 commit comments

Comments
 (0)