-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
125 lines (103 loc) · 3.85 KB
/
home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script type="text/javascript" src="{{ url_for('static', filename='script/script.js') }}">
</script>
<title>Concrete Strength Prediction</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: hwb(64 74% 3%);
padding: 20px;
}
h1 {
color: hsl(125, 90%, 31%);
text-align: center;
margin-bottom: 20px;
}
p {
color: #fa6711;
text-align: center;
margin-bottom: 20px;
font-size: 0.5cm;
}
h2 {
text-align: center;
color: hsl(268, 97%, 53%);
margin-top: 20px;
margin-bottom: 30px;
}
.form-container {
margin: 0 auto;
max-width: 600px;
padding: 20px;
background-color: hwb(59 19% 2% / 0.253);
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.form-group label {
font-weight: bold;
}
.form-text {
font-size: 12px;
color: #6c757d;
}
.btn-primary {
display: block;
width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Concrete Strength Prediction</h1>
<p class="text-center">Concrete is the most important material in civil engineering. The
concrete compressive strength is a highly nonlinear function of age and
ingredients. These ingredients include cement, blast furnace slag, fly ash,
water, superplasticizer, coarse aggregate, and fine aggregate. To know concrete strength, Please Enter ingredients and Age values below and hit Submit</p>
</header>
<hr>
<section class="form-container">
<h2>Enter Ingredients and Age Values</h2>
<form method="POST" action="/predict">
<div class="form-group">
<label for="Cement">Cement (kg)</label>
<input type="number" class="form-control" id="Cement" name="Cement" placeholder="Enter the cement amount in kg">
</div>
<div class="form-group">
<label for="Blast">Blast Furnace Slag (kg)</label>
<input type="number" class="form-control" id="Blast" name="Blast" placeholder="Enter the slag amount in kg">
</div>
<div class="form-group">
<label for="Fly">Fly Ash (kg)</label>
<input type="number" class="form-control" id="Fly" name="Fly" placeholder="Enter the fly ash amount in kg">
</div>
<div class="form-group">
<label for="Water">Water (kg)</label>
<input type="number" class="form-control" id="Water" name="Water" placeholder="Enter the water amount in kg">
</div>
<div class="form-group">
<label for="Superplasticizer">Superplasticizer (kg)</label>
<input type="text" class="form-control" id="Superplasticizer" name="Superplasticizer" placeholder="Enter the superplasticizer amount in kg">
</div>
<div class="form-group">
<label for="Coarse">Coarse Aggregate (kg)</label>
<input type="number" class="form-control" id="Coarse" name="Coarse" placeholder="Enter the coarse aggregate amount in kg">
</div>
<div class="form-group">
<label for="Fine">Fine Aggregate (kg)</label>
<input type="number" class="form-control" id="Fine" name="Fine" placeholder="Enter the fine aggregate amount in kg">
</div>
<div class="form-group">
<label for="Age">Age (days)</label>
<input type="number" class="form-control" id="Age" name="Age" placeholder="Enter the age of the concrete in days">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</section>
</body>
</html>