Skip to content

Commit 3742a8b

Browse files
abdurhamanmohammeda-a11yabdurhamanmohammeda-a11y
authored
Refactor index.html for improved UI and functionality
Updated title and improved styling for better user experience. Enhanced form inputs and added functionality for success messages. Signed-off-by: abdurhamanmohammeda-a11y <abdurhamanmohammeda@gmail.com>
1 parent cddb2d7 commit 3742a8b

File tree

1 file changed

+199
-101
lines changed

1 file changed

+199
-101
lines changed

‎index.html‎

Lines changed: 199 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -3,123 +3,230 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Abdurhaman | SBM & Crusher Expert</title>
6+
<title>Abdurhaman | SBM Crusher Expert</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
78
<style>
8-
:root { --primary: #39FF14; --bg: #0d1117; --card-bg: #161b22; --text: #c9d1d9; }
9-
body { background-color: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; padding: 15px; margin: 0; }
10-
.container { max-width: 800px; margin: auto; }
11-
.card { background-color: var(--card-bg); padding: 20px; border: 1px solid #30363d; border-radius: 12px; margin-bottom: 20px; }
12-
h1, h2 { color: var(--primary); text-align: center; }
13-
img { width: 100%; border-radius: 12px; border: 2px solid var(--primary); margin-bottom: 20px; }
14-
input, textarea, select { width:100%; padding:12px; margin:8px 0; border-radius:8px; border:1px solid #30363d; background:#0d1117; color:white; box-sizing:border-box; }
15-
.btn { display: block; width: 100%; padding: 15px; border-radius: 8px; font-weight: bold; text-align: center; text-decoration: none; font-size: 16px; margin-top: 10px; cursor: pointer; border: none; }
16-
.btn-wa { background-color: #25D366; color: white; }
17-
.btn-diag { background-color: var(--primary); color: black; }
18-
.payment-box { border: 2px dashed var(--primary); padding: 15px; border-radius: 10px; text-align: center; }
19-
.acc { font-size: 1.1em; font-weight: bold; color: white; display: block; margin: 5px 0; }
20-
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
21-
th, td { border: 1px solid #30363d; padding: 10px; text-align: left; }
22-
th { background-color: #1c2128; color: var(--primary); }
9+
:root {
10+
--primary: #39FF14; /* Neon Green */
11+
--secondary: #00d4ff; /* Cyan */
12+
--bg: #0b0e14;
13+
--card-bg: #1a1f29;
14+
--text: #e0e6ed;
15+
--wa-green: #25D366;
16+
}
17+
18+
body {
19+
background-color: var(--bg);
20+
color: var(--text);
21+
font-family: 'Roboto', sans-serif;
22+
margin: 0;
23+
padding: 0;
24+
}
25+
26+
.container {
27+
max-width: 600px;
28+
margin: auto;
29+
padding: 20px;
30+
}
31+
32+
header {
33+
text-align: center;
34+
padding: 40px 0;
35+
background: linear-gradient(180deg, #161b22 0%, var(--bg) 100%);
36+
border-bottom: 2px solid var(--primary);
37+
border-radius: 0 0 30px 30px;
38+
margin-bottom: 30px;
39+
}
40+
41+
h1 {
42+
font-family: 'Orbitron', sans-serif;
43+
color: var(--primary);
44+
margin: 0;
45+
letter-spacing: 2px;
46+
font-size: 24px;
47+
}
48+
49+
.card {
50+
background: var(--card-bg);
51+
padding: 20px;
52+
border-radius: 15px;
53+
margin-bottom: 20px;
54+
border: 1px solid #30363d;
55+
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
56+
}
57+
58+
h2 {
59+
font-size: 18px;
60+
color: var(--secondary);
61+
border-left: 4px solid var(--primary);
62+
padding-left: 10px;
63+
margin-top: 0;
64+
}
65+
66+
input, textarea, select {
67+
width: 100%;
68+
padding: 12px;
69+
margin: 10px 0;
70+
border-radius: 8px;
71+
border: 1px solid #30363d;
72+
background: #0d1117;
73+
color: white;
74+
font-size: 16px;
75+
box-sizing: border-box;
76+
}
77+
78+
.btn {
79+
display: block;
80+
width: 100%;
81+
padding: 15px;
82+
border-radius: 10px;
83+
font-weight: bold;
84+
text-align: center;
85+
text-decoration: none;
86+
cursor: pointer;
87+
border: none;
88+
transition: 0.3s;
89+
font-size: 16px;
90+
}
91+
92+
.btn-save { background: var(--primary); color: #000; }
93+
.btn-save:hover { background: #32cd32; transform: scale(1.02); }
94+
95+
.btn-wa {
96+
background: var(--wa-green);
97+
color: white;
98+
margin-top: 15px;
99+
display: flex;
100+
align-items: center;
101+
justify-content: center;
102+
gap: 10px;
103+
}
104+
105+
.btn-tool { background: var(--secondary); color: #000; margin-top: 10px; }
106+
107+
.payment-info {
108+
background: rgba(57, 255, 20, 0.05);
109+
padding: 15px;
110+
border-radius: 10px;
111+
border: 1px dashed var(--primary);
112+
text-align: center;
113+
}
114+
115+
.acc-no {
116+
display: block;
117+
font-family: 'Orbitron', sans-serif;
118+
font-size: 18px;
119+
color: #fff;
120+
margin: 5px 0;
121+
}
122+
123+
footer {
124+
text-align: center;
125+
padding: 30px;
126+
font-size: 12px;
127+
color: #8b949e;
128+
}
129+
130+
table {
131+
width: 100%;
132+
border-collapse: collapse;
133+
margin-top: 10px;
134+
}
135+
136+
th, td {
137+
border: 1px solid #30363d;
138+
padding: 10px;
139+
text-align: left;
140+
font-size: 14px;
141+
}
142+
143+
th { background: #21262d; color: var(--primary); }
144+
145+
#successMsg {
146+
display: none;
147+
color: var(--primary);
148+
text-align: center;
149+
font-weight: bold;
150+
margin-top: 10px;
151+
}
23152
</style>
24153
</head>
25154
<body>
26-
<div class="card">
27-
<h2>📊 Diagnostic Database</h2>
28-
<script>var submitted=false;</script>
29-
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){alert('✅ Data Saved!');}"></iframe>
30155

31-
<form action="https://docs.google.com/forms/d/e/1FAIpQLSfBD6dhFgvDR6M9wp8Tf5_zay2kM-8PC4Aj0_MtPFX7R8PL_g/formResponse"
32-
method="POST" target="hidden_iframe" onsubmit="submitted=true;">
33-
34-
<input type="text" name="entry.1743519808" id="dbName" placeholder="Your Name" required oninput="updateLink()">
35-
<select name="entry.444299974" required>
36-
<option value="" disabled selected>Select Machine Type</option>
37-
<option value="Jaw Crusher">Jaw Crusher</option>
38-
<option value="Cone Crusher">Cone Crusher</option>
39-
<option value="SBM Screen">SBM Screen</option>
40-
</select>
41-
<textarea name="entry.2062602714" id="dbIssue" rows="3" placeholder="Describe the fault..." required oninput="updateLink()"></textarea>
42-
43-
<button type="submit" class="btn btn-diag">📥 Save to Database</button>
44-
45-
<a id="waLink" href="https://wa.me/251904267186" target="_blank" class="btn btn-wa">
46-
💬 Send Message via WhatsApp
47-
</a>
48-
</form>
49-
</div>
50156
<div class="container">
51157
<header>
52-
<h1>🛠 Abdurhaman Mechatronics</h1>
53-
<p style="text-align:center;">SBM & Crusher Software Specialist</p>
158+
<h1>ABDURHAMAN MECHATRONICS</h1>
159+
<p style="color: #8b949e; margin-top: 10px;">SBM Crusher & Automation Expert</p>
54160
</header>
55161

56-
<img src="Maashinii.jpg" alt="SBM Machine" onerror="this.src='https://via.placeholder.com/800x400/161b22/39FF14?text=Crusher+Database+Active';">
57-
58162
<div class="card">
59-
<h2>📊 Diagnostic Database</h2>
60-
<p style="font-size: 12px; color: #8b949e; text-align:center;">Data is saved directly to Abdurhaman's Google Sheet</p>
163+
<h2>👨‍🔧 Diagnostic Database</h2>
164+
<p style="font-size: 13px; color: #8b949e;">Fill the form to save your machine status in our cloud.</p>
61165

62166
<script>var submitted=false;</script>
63-
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){alert('✅ Success: Data saved to Abdurhaman\'s Database!');}"></iframe>
167+
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){showSuccess();}"></iframe>
64168

65-
<form action="https://docs.google.com/forms/d/e/1FAIpQLSd9eI-O0qO9S0Xw7YfFAnG8XGfG9v5u5Z9v9Z9v9Z9v9Z9v9Z/formResponse"
169+
<form action="https://docs.google.com/forms/d/e/1FAIpQLSfBD6dhFgvDR6M9wp8Tf5_zay2kM-8PC4Aj0_MtPFX7R8PL_g/formResponse"
66170
method="POST" target="hidden_iframe" onsubmit="submitted=true;">
67171

68-
<input type="text" name="entry.1743519808" id="dbName" placeholder="Your Name" required oninput="updateLink()">
172+
<input type="text" name="entry.1743519808" id="dbName" placeholder="Customer Name" required oninput="updateLink()">
69173

70174
<select name="entry.444299974" required>
71175
<option value="" disabled selected>Select Machine Type</option>
72176
<option value="Jaw Crusher">Jaw Crusher</option>
73177
<option value="Cone Crusher">Cone Crusher</option>
74-
<option value="SBM Screen">SBM Screen</option>
75178
<option value="VSI Crusher">VSI Crusher</option>
179+
<option value="SBM Screen">SBM Screen</option>
76180
</select>
77181

78-
<textarea name="entry.2062602714" id="dbIssue" rows="3" placeholder="Describe the fault..." required oninput="updateLink()"></textarea>
79-
80-
<button type="submit" class="btn btn-diag">📥 Save to Database</button>
182+
<textarea name="entry.2062602714" id="dbIssue" rows="3" placeholder="Describe the fault (e.g., Bearing noise, E15 error)..." required oninput="updateLink()"></textarea>
81183

82-
<p style="text-align:center; font-size:12px; margin-top:15px; color:#8b949e;">After saving, contact via WhatsApp:</p>
184+
<button type="submit" class="btn btn-save">📥 SAVE TO DATABASE</button>
83185

186+
<div id="successMsg">✅ Data saved! Now click WhatsApp below.</div>
187+
84188
<a id="waLink" href="https://wa.me/251904267186" target="_blank" class="btn btn-wa">
85-
💬 Send Message via WhatsApp
189+
<span>Contact via WhatsApp</span>
86190
</a>
87191
</form>
88192
</div>
89193

90194
<div class="card">
91-
<h2>⚖️ Production Calculator</h2>
92-
<input type="number" id="feedRate" placeholder="Feed Rate (m³/hr)">
93-
<button onclick="calculateTPH()" class="btn btn-diag" style="background:#00bcd4; color:white;">Calculate TPH</button>
94-
<p id="tphResult" style="color: var(--primary); text-align: center; font-weight: bold; margin-top: 10px;"></p>
195+
<h2>⚙️ Crusher Software Tools</h2>
196+
<div style="margin-bottom: 20px;">
197+
<label style="font-size: 14px;">Production Calculator (TPH)</label>
198+
<input type="number" id="feedRate" placeholder="Enter Feed Rate (m³/hr)">
199+
<button onclick="calculateTPH()" class="btn btn-tool">Calculate Tons/Hour</button>
200+
<p id="tphResult" style="text-align: center; color: var(--primary); font-weight: bold;"></p>
201+
</div>
202+
203+
<button onclick="interpretFault()" class="btn btn-tool" style="background: #ff9800;">Check Error Codes (E01-E15)</button>
95204
</div>
96205

97206
<div class="card">
98-
<h2>🩺 Smart Fault Finder</h2>
99-
<button onclick="interpretFault()" class="btn btn-diag" style="background-color: #ff9800;">Check Error Code (E01-E15)</button>
207+
<h2>🏗 Essential Spare Parts</h2>
208+
<table>
209+
<tr><th>Part Name</th><th>Specifications</th></tr>
210+
<tr><td>Jaw Plates</td><td>Mn18Cr2 / Mn22Cr2</td></tr>
211+
<tr><td>Mantle/Concave</td><td>High Manganese Steel</td></tr>
212+
<tr><td>Bearings</td><td>SKF / NSK Explorer</td></tr>
213+
</table>
100214
</div>
101215

102216
<div class="card">
103-
<h2>💳 Payment & Service</h2>
104-
<div class="payment-box">
105-
<p>CBE: <span class="acc">1000347503707</span></p>
106-
<p>Telebirr: <span class="acc">0988535068</span></p>
217+
<h2>💳 Service Payment</h2>
218+
<div class="payment-info">
219+
<p style="margin: 0; font-size: 14px; color: #8b949e;">Commercial Bank of Ethiopia (CBE)</p>
220+
<span class="acc-no">1000347503707</span>
221+
<p style="margin: 10px 0 0; font-size: 14px; color: #8b949e;">Telebirr</p>
222+
<span class="acc-no">0988535068</span>
107223
</div>
108-
<table>
109-
<tr><th>Spare Part</th><th>Material</th></tr>
110-
<tr><td>Jaw Plates</td><td>Mn18Cr2</td></tr>
111-
<tr><td>Bearings</td><td>SKF/NSK</td></tr>
112-
</table>
113224
</div>
114225

115-
<footer style="text-align: center; color: #8b949e; font-size: 11px; padding: 20px;">
116-
&copy; 2026 Abdurhaman Mohammed | Dire Dawa, Ethiopia
226+
<footer>
227+
<p>&copy; 2026 Abdurhaman Mohammed | All Rights Reserved.</p>
228+
<p>Dire Dawa, Ethiopia</p>
117229
</footer>
118-
<footer style="padding: 20px; text-align: center; background: #1a1a1a;">
119-
<a href="LINKII_GOOGLE_SHEETS_KEE" target="_blank" style="color: #FFA500; text-decoration: none; font-size: 0.8rem;">
120-
🔑 Admin Access (Database)
121-
</a>
122-
</footer>
123230
</div>
124231

125232
<script>
@@ -131,42 +238,33 @@ <h2>💳 Payment & Service</h2>
131238
waLink.href = "https://wa.me/251904267186?text=" + encodedText;
132239
}
133240

241+
function showSuccess() {
242+
document.getElementById('successMsg').style.display = 'block';
243+
setTimeout(() => {
244+
document.getElementById('successMsg').style.display = 'none';
245+
}, 5000);
246+
}
247+
134248
function calculateTPH() {
135249
const feed = document.getElementById('feedRate').value;
136250
if (feed) {
137251
const tph = feed * 2.6;
138-
document.getElementById('tphResult').innerText = "Result: " + tph.toFixed(1) + " Tons/Hour";
252+
document.getElementById('tphResult').innerText = "Estimated: " + tph.toFixed(1) + " Tons/Hr";
139253
}
140254
}
141255

142256
function interpretFault() {
143257
const faults = {
144-
"E01": "Phase Failure: Check power panel.",
145-
"E02": "High Temp: Grease bearings.",
146-
"E05": "Jamming: Metal in chamber.",
147-
"E10": "Toggle Fracture: Safety plate broken.",
148-
"E15": "Bearing Noise: Lubrication needed."
258+
"E01": "Phase Failure: Check electrical supply.",
259+
"E02": "High Temperature: Check bearing lubrication.",
260+
"E05": "Chamber Jam: Remove oversized rocks.",
261+
"E10": "Toggle Plate Broken: Safety mechanism triggered.",
262+
"E15": "Vibration Sensor: High vibration detected."
149263
};
150-
const code = prompt("Enter Code:").toUpperCase();
151-
alert(faults[code] || "Contact Abdurhaman for Expert Help.");
264+
const code = prompt("Enter Error Code (e.g., E15):").toUpperCase();
265+
alert(faults[code] || "Code not recognized. Please contact Abdurhaman.");
152266
}
153267
</script>
154-
<script>
155-
function updateLink() {
156-
const name = document.getElementById('dbName').value;
157-
const msg = document.getElementById('dbIssue').value;
158-
const waLink = document.getElementById('waLink');
159-
const encodedText = encodeURIComponent("Hello Abdurhaman, I am " + name + ". Issue: " + msg);
160-
waLink.href = "https://wa.me/251904267186?text=" + encodedText;
161-
}
162-
</script>
163-
<section id="admin-panel" style="margin-top: 50px; border-top: 5px solid #FFA500; padding: 20px; background: #1a1a1a; color: white;">
164-
<h2>SBM Admin Dashboard</h2>
165-
<p>Odeeffannoo Google Sheets irraa kalleattiin ilaaluuf:</p>
166-
<a href="LINKII_GOOGLE_SHEETS_KEE_AS_GALCHI" target="_blank"
167-
style="background: #FFA500; color: black; padding: 10px 20px; text-decoration: none; font-weight: bold; border-radius: 5px;">
168-
Open Google Sheets (Database)
169-
</a>
170-
</section>
171268
</body>
269+
</html>
172270

0 commit comments

Comments
 (0)