static/index.html at main · Mirouterui/static · 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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MIROUTER-UI</title>
    <link rel="stylesheet" href="/css/mdui.min.css">
    <script src="/js/mdui.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.i18n.min.js"></script>

    <link rel="icon" href="/favicon.ico" type="image/x-icon">

</head>

<body class="mdui-theme-primary-blue-grey mdui-theme-accent-blue light">
    <script src="/js/echarts.min.js"></script>

    <div class="mdui-drawer mdui-drawer-close" id="sidebar">
    <div class="mdui-list" mdui-collapse="{accordion: true}">
        <li class="mdui-subheader" i18n="sidebar.subheader">路由器</li>
        <a href="/" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
            <div class="mdui-list-item-content" i18n="sidebar.home">首页</div>
        </a>
        <a href="/devicelist/index.html" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">devices</i>
            <div class="mdui-list-item-content" i18n="sidebar.devicelist">设备列表</div>
        </a>
        <a href="/router/index.html" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">router</i>
            <div class="mdui-list-item-content" i18n="sidebar.routerstatus">路由器状态</div>
        </a>
        <a href="/routerhistory/index.html" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">history</i>
            <div class="mdui-list-item-content" i18n="sidebar.historydata">历史数据</div>
        </a>
        <a href="/upnp/index.html" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">compare_arrows</i>
            <div class="mdui-list-item-content" i18n="sidebar.upnp">Upnp</div>
        </a>
        <a href="/temperature/index.html" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">wb_sunny</i>
            <div class="mdui-list-item-content" i18n="sidebar.routertemperature">路由器温度</div>
        </a>
        <a href="/choicerouter/index.html" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">list</i>
            <div class="mdui-list-item-content" i18n="sidebar.choicerouter">选择路由器</div>
        </a>
        <li class="mdui-subheader" i18n="sidebar.mrui">MRUI</li>
        <a href="/settings/index.html" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">settings</i>
            <div class="mdui-list-item-content" i18n="sidebar.settings">设置</div>
        </a>
        <a href="javascript:refreshToken()" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">refresh</i>
            <div class="mdui-list-item-content" i18n="sidebar.refreshtoken">刷新token</div>
        </a>
        <a href="https://github.com/Mirouterui/mirouter-ui/issues" class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">feedback</i>
            <div class="mdui-list-item-content" i18n="sidebar.feedback">反馈</div>
        </a>
    </div>
    <div class="copyright">
        <p><a href="https://github.com/Mirouterui/mirouter-ui" target="_blank">Mirouter-ui</a></p>
        <p>Maded by <a href="https://hzchu.top">Thun888</a></p>
    </div>
</div>
        <div class="mdui-appbar">
    <div class="mdui-toolbar mdui-color-teal mdui-appbar-scroll-hide">
        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#sidebar'}">
            <i class="mdui-icon material-icons">menu</i>
        </a>
        <a href="#" class="mdui-typo-headline" id="titletext">Mirouter-UI</a>
        <div class="mdui-toolbar-spacer"></div>
        <a href="/" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '回到主页'}" >
            <i class="mdui-icon material-icons">home</i>
        </a>
        <a class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '夜间模式'}" onclick="darkMode();">
            <i class="mdui-icon material-icons">brightness_medium</i>
        </a>
        <a href="javascript:location.reload();" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '刷新'}" >
            <i class="mdui-icon material-icons">refresh</i>
        </a>
    </div>
</div>
            <div class="mdui-container">
                <div class="mdui-card mdui-m-a-2">
                    <!-- 卡片标题 -->
                    <div class="mdui-card-header">
                        <img class="mdui-card-header-avatar" src="/img/mirouter.png" style="border-radius: 0%;"/>
                        <div class="mdui-card-header-title" id="platform">platform</div>
                        <div class="mdui-card-header-subtitle" id="router_name">name</div>
                        <div class="mdui-card-menu">
                            <a href="/router/index.html">
                                <i id="info-3" class="mdui-icon material-icons" mdui-tooltip="{content: '查看路由器详细信息'}">info_outline</i>
                            </a>
                        </div>

                    </div>
                    <!-- 卡片内容 -->
                    <div class="mdui-card-content">
                        <!-- 网格布局 -->
                        <div class="mdui-row-xs-1 mdui-row-sm-2">
                            <!-- CPU 使用率 -->
                            <div class="mdui-col">
                                <div class="mdui-typo-subheading-opacity" i18n="general.cpu-used">CPU 使用率</div>
                                <div class="mdui-progress" id="cpu-used">
                                    <div class="mdui-progress-determinate mdui-color-indigo-400" style="width: 0%"></div>
                                </div>
                                <div class="mdui-typo-body-2-opacity" id="cpu-used-text">load</div>
                            </div>
                            <!-- 内存使用率 -->
                            <div class="mdui-col">
                                <div class="mdui-typo-subheading-opacity" i18n="general.mem-used">内存使用率</div>
                                <div class="mdui-progress" id="mem-used">
                                    <div class="mdui-progress-determinate mdui-color-pink-400" style="width: 0%"></div>
                                </div>
                                <div class="mdui-typo-body-2-opacity" id="mem-used-text">load</div>
                            </div>
                        </div>
                        <!-- 分割线 -->
                        <div class="mdui-divider gap"></div>
                        <div class="mdui-row-xs-1 mdui-row-sm-2">
                            <!-- 网络上传速度 -->
                            <div class="mdui-col">
                                <div class="mdui-typo-subheading-opacity" i18n="general.uploadspeed">上传速度</div>
                                <span class="mdui-typo-body-2-opacity" id="uploadspeed">load</span>
                                <div class="mdui-typo-subheading-opacity" i18n="general.maxuploadspeed">最大上传速度</div>
                                <span class="mdui-typo-body-2-opacity" id="maxuploadspeed">load</span>
                            </div>
                            <!-- 网络下载速度 -->
                            <div class="mdui-col">
                                <div class="mdui-typo-subheading-opacity" i18n="general.downloadspeed">下载速度</div>
                                <span class="mdui-typo-body-2-opacity" id="downloadspeed">load</span>
                                <div class="mdui-typo-subheading-opacity" i18n="general.maxdownloadspeed">最大下载速度</div>
                                <span class="mdui-typo-body-2-opacity" id="maxdownloadspeed">load</span>

                            </div>
                        </div>
                        <!-- 分割线 -->
                        <div class="mdui-divider gap"></div>
                        <!-- 总出入流量 -->
                        <div class="mdui-typo-subheading-opacity mdui-m-y-1" i18n="general.totaltraffic">总出入流量</div>
                        <div class="mdui-row-xs-1 mdui-row-sm-2">
                            <div class="mdui-col">

                                <span class="mdui-typo-body-2-opacity" i18n="general.upload">上传：</span>
                                <span id="uploadtotal">load</span>
                            </div>
                            <div class="mdui-col">

                                <span class="mdui-typo-body-2-opacity" i18n="general.download">下载：</span>
                                <span id="downloadtotal">load</span>
                            </div>
                        </div>
                    </div>
                    <div class="mdui-divider gap"></div>
                    <div class="mdui-card-content">
                        <div class="mdui-typo-subheading-opacity mdui-m-y-1" i18n="index.devicelist">设备列表（详细数据点击设备名称）</div>
                        <div class="mdui-table-fluid">
                            <table class="mdui-table mdui-table-hoverable">
                                <thead>
                                    <tr>
                                        <th i18n="general.th.devicename">设备名称</th>
                                        <th i18n="general.th.downloadspeed">下载速度</th>
                                        <th i18n="general.th.uploadspeed">上传速度</th>
                                        <th i18n="general.th.uploadtotal">总上传量</th>
                                        <th i18n="general.th.downloadtotal">总下载量</th>

                                    </tr>
                                </thead>
                                <tbody id="device-list">
                                </tbody>
                            </table>
                        </div>
                        <div class="mdui-divider gap"></div>

                        <span class="mdui-typo-subheading-opacity mdui-m-y-1">
                            累计终端: <strong><span id="devicenum">load</span></strong> 个，当前连接了 <strong><span id="devicenum_now">load</span></strong> 个设备
                        </span>
                    </div>
                </div>
                <script src="/js/index.js"></script>
            </div>
            <link rel="stylesheet" href="/css/general.css">
<script src="/js/general.js"></script>
</body>