StartThon/ussd.html at main · CharafeddineMechalikh/StartThon · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recharge Station</title>
    <style>
        body { display: flex; height: 100vh; margin: 0; }
        .left { width: 40%; padding: 20px; background: #f4f4f4; }
        .right { width: 60%; height: 100vh; border-left: 2px solid #ccc; }
        iframe { width: 100%; height: 100%; border: none; }
        input, button { display: block; width: 90%; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>

    <!-- Left Side: Input Form -->
    <div class="left">
        <h2>Recharge Balance</h2>
        <label>Phone Number:</label>
        <input type="text" id="phone" placeholder="Enter phone number">

        <label>Recharge Code:</label>
        <input type="text" id="recharge_code" placeholder="Enter recharge code">

        <button onclick="startRecharge()">Submit</button>
    </div>

    <!-- Right Side: Modem Web UI -->
    <div class="right">
        <iframe src="http://192.168.8.1/html/home.html"></iframe>
    </div>

    <script>
        function startRecharge() {
            let phone = document.getElementById("phone").value;
            let code = document.getElementById("recharge_code").value;

            if (phone && code) {
                alert("Recharging " + phone + " with code " + code);
                // Here you can trigger a backend script to send USSD via your modem
            } else {
                alert("Please enter all details");
            }
        }
    </script>

</body>
</html>