Spaces:
Sleeping
Sleeping
File size: 4,088 Bytes
d24225f 2d10051 d24225f 1d9bb7c d24225f 9b24e09 d24225f 9b24e09 d24225f 2324f64 d24225f 1f6a386 d24225f 1f6a386 2d10051 d24225f a2ceb50 d24225f 2324f64 d24225f bef287a d24225f 1f6a386 3502e7e 412c43a 1f6a386 d24225f 1f6a386 d24225f 1f6a386 d24225f 1f6a386 d24225f 1f6a386 |
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 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<title>Smart Manufacturing Machines Efficiency Prediction</title>
<style>
body {
font-family: Arial, sans-serif;
background-color:rgb(169, 176, 181);
background-image: url('https://www.shutterstock.com/shutterstock/photos/2235931143/display_1500/stock-photo-big-data-technology-and-data-science-data-scientist-querying-analysing-and-visualizing-complex-2235931143.jpg');
margin: 0;
height: 100vh;
background-size: cover;
animation: scrollBackground 30s linear infinite;
padding: 20px;
color: #333;
}
@keyframes scrollBackground {
0% {
background-position: 0 0;
}
100% {
background-position: -1000px 0;
}
}
h1 {
text-align: center;
color:rgb(214, 210, 210);
}
.form-container {
max-width: 900px;
margin: 0 auto;
background-color: rgba(30, 30, 30, 0.85);
padding: 25px 30px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(231, 49, 49, 0.1);
color: #fff;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns */
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 6px;
font-weight: bold;
color:rgb(210, 210, 210);
}
input[type="text"], select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
transition: border-color 0.3s;
}
input[type="text"]:focus, select:focus {
border-color:rgb(255, 250, 250);
outline: none;
}
.submit-btn {
display: block;
margin: 30px auto 0 auto;
padding: 12px 30px;
background-color:rgb(12, 3, 3);
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-btn:hover {
background-color:hsl(25, 63.70%, 44.30%);
}
h2 {
text-align: center;
margin-top: 25px;
color:rgb(209, 236, 6);
}
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h1>Smart Manufacturing Machines Efficiency Prediction</h1>
<form method="post" class="form-container">
<div class="form-grid">
<!-- First, manually add dropdown for Operation_Mode -->
<div class="form-group">
<label for="Operation_Mode">Operation Mode:</label>
<select name="Operation_Mode" required>
<option value="">Select Mode</option>
<option value="1">Ideal</option>
<option value="2">Active</option>
<option value="3">Maintenance</option>
</select>
</div>
<!-- Then loop through the rest of the features, skipping Operation_Mode -->
{% for feature in features %}
{% if feature != 'Operation_Mode' %}
<div class="form-group">
<label for="{{ feature }}">{{ feature }}:</label>
<input type="text" name="{{ feature }}" placeholder="{{ placeholders[feature] }}" required>
</div>
{% endif %}
{% endfor %}
</div>
<button type="submit" class="submit-btn">PREDICT</button>
</form>
{% if prediction %}
<h2>Prediction : {{ prediction }}</h2>
{% endif %}
</body>
</html>
|