fixairweb/index.html at main · BuniDev-coding/fixairweb · 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
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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mqtt/dist/mqtt.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.9.0/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <title>Air Purifier Dashboard</title>
    <link rel="stylesheet" href="Style.css">
</head>

<body>
    <div class="container">
        <div class="tabber">
            <div class="Air">
                <span class="air">Air</span> <span class="purifier">Purifier</span>
            </div>
            <div class="bar">

                <div class="logo">
                    <div class="image">
                        <img src="images/logo.png" alt="logo">
                    </div>
                </div>

                <div class="name">
                    <span class="group">Otopus Group</span>
                </div>

                <div class="subject">
                    <span class="cpe">CPE406</span>
                </div>

                <div id="clock"></div>
                <script src="app.js"></script>

            </div>
        </div>
        <div class="sizebox"> </div>
        <div class="pm">
            <div class="Pmdata">
                <span class="text-pm">PM</span>

                <img id="pmImage" alt="pmImage" class="iconpm">

                <div class="Value">
                    <p>PM: <span id="pmValue">Loading...</span> %</p>

                </div>


            </div>
            <div class="pmchat1">
                <div class="pmchat">
                    <canvas id="pmChart"></canvas> <!-- กราฟอุณหภูมิ -->
                    <script src="app.js"></script>
                </div>
            </div>
            <div class="boder">
                <div class="b1"></div>
                <div class="b2"></div>
            </div>
        </div>
        <div class="sizebox"> </div>
        <div class="tmp">
            <div class="boder">
                <div class="b1"></div>
                <div class="b2"></div>
            </div>
            <div class="tmpchat">
                <canvas id="tempChart"></canvas> <!-- กราฟอุณหภูมิ -->
                <script src="app.js"></script>
            </div>
            <div class="tmpdata">
                <span class="text-pm">Tmp</span>

                <img id="tempImage" alt="tempImage" class="icon">

                <div class="Value">
                    <p>Temp: <span id="tempValue">Loading...</span> °C</p>
                </div>
            </div>
        </div>
    </div>
    </div>

</body>

</html>
<script src="app.js" type="text/javascript"></script>