index.blade.php 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- Required meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. {{-- <META http-equiv="refresh" content="1">--}}
  8. <title>{{env('APP_ENV').' '.__('auto.管理控制台')}}</title>
  9. <!-- plugins:css -->
  10. <link rel="stylesheet" href="/assets/vendors/iconfonts/mdi/css/materialdesignicons.min.css">
  11. <link rel="stylesheet" href="/assets/vendors/css/vendor.bundle.base.css">
  12. <!-- endinject -->
  13. <!-- inject:css -->
  14. <link rel="stylesheet" href="/assets/css/style.css">
  15. <!-- endinject -->
  16. <link rel="shortcut icon" href="/assets/images/favicon.png" />
  17. <style>
  18. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  19. ::-webkit-scrollbar
  20. {
  21. width: 0px;
  22. height: 0px;
  23. background-color: #F5F5F5;
  24. }
  25. .sidebar .nav .nav-item.active > .nav-link .menu-title {
  26. color: #343a40;
  27. font-family: "ubuntu-medium", sans-serif;
  28. }
  29. .sidebar .nav .nav-item.active > .nav-link i {
  30. color: #bba8bff5;
  31. }
  32. .sidebar .nav.sub-menu .nav-item .nav-link.active {
  33. color: #343a40;
  34. background: transparent;
  35. }
  36. /* 移动端响应式优化 */
  37. @media screen and (max-width: 991px) {
  38. /* 侧边栏遮罩层 */
  39. .sidebar-overlay {
  40. position: fixed;
  41. top: 70px;
  42. left: 0;
  43. right: 0;
  44. bottom: 0;
  45. background-color: rgba(0, 0, 0, 0.5);
  46. z-index: 998;
  47. opacity: 0;
  48. visibility: hidden;
  49. transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
  50. }
  51. .sidebar-overlay.active {
  52. opacity: 1;
  53. visibility: visible;
  54. }
  55. /* 侧边栏在移动端默认隐藏,通过汉堡菜单切换 */
  56. .sidebar-offcanvas {
  57. position: fixed !important;
  58. height: calc(100vh - 70px) !important;
  59. max-height: calc(100vh - 70px) !important;
  60. top: 70px !important;
  61. bottom: 0 !important;
  62. overflow-y: auto !important;
  63. overflow-x: hidden !important;
  64. left: -280px;
  65. width: 260px !important;
  66. -webkit-transition: all 0.25s ease-out;
  67. -o-transition: all 0.25s ease-out;
  68. transition: all 0.25s ease-out;
  69. background: #fff;
  70. z-index: 999;
  71. box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  72. }
  73. .sidebar-offcanvas.active {
  74. left: 0;
  75. }
  76. /* 确保侧边栏内部元素不限制滚动 */
  77. .sidebar-offcanvas .nav {
  78. height: auto !important;
  79. max-height: none !important;
  80. }
  81. /* 侧边栏滚动条优化 */
  82. .sidebar-offcanvas::-webkit-scrollbar {
  83. width: 5px;
  84. height: 5px;
  85. }
  86. .sidebar-offcanvas::-webkit-scrollbar-track {
  87. background: #f1f1f1;
  88. }
  89. .sidebar-offcanvas::-webkit-scrollbar-thumb {
  90. background: #888;
  91. border-radius: 3px;
  92. }
  93. .sidebar-offcanvas::-webkit-scrollbar-thumb:hover {
  94. background: #555;
  95. }
  96. /* 主内容区域占满屏幕 */
  97. .page-body-wrapper {
  98. padding-left: 0 !important;
  99. min-height: 100vh;
  100. background-color: #f2edf3;
  101. }
  102. #mainiframe {
  103. width: 100% !important;
  104. min-height: calc(100vh - 70px);
  105. background-color: #f2edf3;
  106. }
  107. /* 导航栏优化 */
  108. .navbar-toggler {
  109. display: block !important;
  110. }
  111. .navbar-brand-wrapper {
  112. width: 70px !important;
  113. }
  114. /* 搜索框隐藏 */
  115. .search-field {
  116. display: none !important;
  117. }
  118. /* 导航菜单图标间距 */
  119. .navbar-nav-right .nav-item {
  120. margin-left: 0.5rem;
  121. }
  122. /* 下拉菜单优化 */
  123. .navbar-nav .dropdown-menu {
  124. position: absolute;
  125. right: 0;
  126. left: auto;
  127. }
  128. /* 菜单项优化 */
  129. .sidebar .nav .nav-item .nav-link {
  130. padding: 1rem 1.5rem;
  131. }
  132. .sidebar .nav .nav-item .nav-link .menu-title {
  133. font-size: 0.875rem;
  134. }
  135. .sidebar .nav.sub-menu {
  136. padding: 0;
  137. }
  138. .sidebar .nav.sub-menu .nav-item {
  139. padding-left: 0;
  140. }
  141. }
  142. @media screen and (max-width: 576px) {
  143. /* 更小屏幕的额外优化 */
  144. .navbar-nav-right .nav-item {
  145. margin-left: 0.25rem;
  146. }
  147. .navbar-nav-right .nav-link i {
  148. font-size: 1.1rem;
  149. }
  150. .sidebar-offcanvas {
  151. width: 240px !important;
  152. left: -250px;
  153. }
  154. }
  155. </style>
  156. </head>
  157. <body>
  158. <div class="container-scroller">
  159. <!-- partial:partials/_navbar.html -->
  160. <nav class="navbar default-layout-navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
  161. <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
  162. <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
  163. <span class="mdi mdi-menu"></span>
  164. </button>
  165. <a class="navbar-brand brand-logo" href="/admin/bx_nb">
  166. {{-- <img src="/uploads/config/20181107/5be269ef937d1.png" alt="logo"/>--}}
  167. </a>
  168. <a class="navbar-brand brand-logo-mini" href="/admin/bx_nb"><img src="/assets/images/logo-mini.svg" alt="logo"/></a>
  169. </div>
  170. <div class="navbar-menu-wrapper d-flex align-items-stretch">
  171. <div class="search-field d-none d-md-block">
  172. </div>
  173. <ul class="navbar-nav navbar-nav-right">
  174. <li class="nav-item nav-profile dropdown">
  175. <a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
  176. {{-- <div class="nav-profile-img">--}}
  177. {{-- <img src="{{ session('admin')->avatar }}" alt="image">--}}
  178. {{-- <span class="availability-status online"></span>--}}
  179. {{-- </div>--}}
  180. {{-- <div class="nav-profile-text">--}}
  181. {{-- <p class="mb-1 text-black">{{ session('admin')->account }}</p>--}}
  182. {{-- </div>--}}
  183. </a>
  184. <div class="dropdown-menu navbar-dropdown" aria-labelledby="profileDropdown">
  185. <a class="dropdown-item" onclick="editInfo({{ session('admin')->id }})" href="javascript:;">
  186. <i class="mdi mdi-border-color mr-2 text-success"></i>
  187. {{__('auto.修改信息')}}}
  188. </a>
  189. <div class="dropdown-divider"></div>
  190. <a class="dropdown-item" href="/logout">
  191. <i class="mdi mdi-logout mr-2 text-primary"></i>
  192. {{__('auto.退出登录')}}
  193. </a>
  194. </div>
  195. </li>
  196. <li class="nav-item d-none d-lg-block full-screen-link">
  197. <a class="nav-link">
  198. <i class="mdi mdi-fullscreen" id="fullscreen-button"></i>
  199. </a>
  200. </li>
  201. <li class="nav-item dropdown">
  202. <a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="/admin/complaint/opinion" data-toggle="dropdown" aria-expanded="false">
  203. <i class="mdi mdi-email-outline"></i>
  204. <div id="add_text" style="color: red;font-size: 20px;font-family: 'Microsoft YaHei';">
  205. </div>
  206. </a>
  207. </li>
  208. <li class="nav-item dropdown">
  209. <a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
  210. <i class="mdi mdi-bell-outline"></i>
  211. <div id="xitong_text" style="color: red;font-size: 20px;font-family: 'Microsoft YaHei';">
  212. </div>
  213. </a>
  214. </li>
  215. </ul>
  216. </div>
  217. </nav>
  218. <!-- partial -->
  219. <div class="container-fluid page-body-wrapper">
  220. <!-- partial:partials/_sidebar.html -->
  221. <nav class="sidebar sidebar-offcanvas" id="sidebar" style="overflow-y:auto;overflow-x:hidden;max-height: calc(100vh - 70px);width:{{session('admin')->locale=="zh_CN"?"230px":"250px"}}">
  222. <ul class="nav">
  223. {{-- <li class="nav-item nav-profile">--}}
  224. {{-- <a href="#" class="nav-link">--}}
  225. {{-- <div class="nav-profile-image">--}}
  226. {{-- <img src="{{ session('admin')->avatar }}" alt="profile">--}}
  227. {{-- <span class="login-status online"></span>--}}
  228. {{-- </div>--}}
  229. {{-- <div class="nav-profile-text d-flex flex-column">--}}
  230. {{-- <span class="font-weight-bold mb-2">{{ session('admin')->account }}</span>--}}
  231. {{-- <span class="text-secondary text-small">{{ session('admin')->nickname }}</span>--}}
  232. {{-- </div>--}}
  233. {{-- <i class="mdi mdi-bookmark-check text-success nav-profile-badge"></i>--}}
  234. {{-- </a>--}}
  235. {{-- </li>--}}
  236. <li class="nav-item">
  237. <a class="nav-link" href="{{ url('console') }}" data-url="{{ url('console') }}" target="main">
  238. <span class="menu-title">@lang('menu.游戏概况')</span>
  239. <i class="mdi mdi-home menu-icon"></i>
  240. </a>
  241. </li>
  242. @foreach($menu as $k=>$v)
  243. @if($v->hasChild)
  244. <li class="nav-item">
  245. <a class="nav-link" data-toggle="collapse" href="#system-pages-{{$v->id}}" aria-expanded="false" aria-controls="general-pages">
  246. <span class="menu-title">{{ $v->name }}</span>
  247. <i class="menu-arrow"></i>
  248. <i class="{{ $v->icon }} menu-icon"></i>
  249. </a>
  250. <div class="collapse" id="system-pages-{{$v->id}}">
  251. <ul class="nav flex-column sub-menu">
  252. @foreach($v->children as $key=>$val)
  253. <li class="nav-item"> <a class="nav-link" target="main" data-url="{{ $val->url }}" href="{{ $val->url }}">{{ $val->name }}</a></li>
  254. @endforeach
  255. </ul>
  256. </div>
  257. </li>
  258. @else
  259. <li class="nav-item">
  260. <a class="nav-link" target="main" data-url="{{ $v->url }}" href="{{ $v->url }}">
  261. <span class="menu-title">{{ $v->name }}</span>
  262. <i class="{{ $v->icon }} menu-icon"></i>
  263. </a>
  264. </li>
  265. @endif
  266. @endforeach
  267. @if(session('admin')->roles[0]->id == 1)
  268. <li class="nav-item">
  269. <a
  270. class="nav-link"
  271. data-toggle="collapse"
  272. href="#system-pages"
  273. aria-expanded="false"
  274. aria-controls="general-pages"
  275. >
  276. <span class="menu-title">{{__('auto.系统设置')}}</span>
  277. <i class="menu-arrow"></i>
  278. <i class="mdi mdi-settings menu-icon"></i>
  279. </a>
  280. <div class="collapse" id="system-pages">
  281. <ul class="nav flex-column sub-menu">
  282. @if (hidden() != 'general_administrator')
  283. <li class="nav-item"> <a class="nav-link" target="main" href="/admin/menu/list">菜单</a></li>
  284. <li class="nav-item"> <a class="nav-link" target="main" href="/admin/permission/list">权限</a></li>
  285. <li class="nav-item"> <a class="nav-link" target="main" href="/admin/role/list">角色</a></li>
  286. <li class="nav-item"> <a class="nav-link" target="main" href="/admin/administrator/list">管理员</a></li>
  287. @endif
  288. <li class="nav-item"> <a class="nav-link" target="main" href="/admin/burying_point/weight">埋点权重配置</a></li>
  289. <li class="nav-item"> <a class="nav-link" target="main" href="/admin/IpWhiteList/list">IP白名单管理</a></li>
  290. <li class="nav-item"> <a class="nav-link" target="main" href="/admin/login_ip/list">后台账号登录管理IP管理</a></li>
  291. </ul>
  292. </div>
  293. </li>
  294. @endif
  295. {{--<li class="nav-item sidebar-actions">--}}
  296. {{--<span class="nav-link">--}}
  297. {{--<div class="border-bottom">--}}
  298. {{--<h6 class="font-weight-normal mb-3">Projects</h6> --}}
  299. {{--</div>--}}
  300. {{--<button class="btn btn-block btn-lg btn-gradient-primary mt-4">+ Add a project</button>--}}
  301. {{--<div class="mt-4">--}}
  302. {{--<div class="border-bottom">--}}
  303. {{--<p class="text-secondary">Categories</p> --}}
  304. {{--</div>--}}
  305. {{--<ul class="gradient-bullet-list mt-4">--}}
  306. {{--<li>Free</li>--}}
  307. {{--<li>Pro</li>--}}
  308. {{--</ul>--}}
  309. {{--</div>--}}
  310. {{--</span>--}}
  311. {{--</li>--}}
  312. </ul>
  313. </nav>
  314. <iframe id="mainiframe" name="main" width="100%" src="{{ url('console') }}" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0"></iframe>
  315. <!-- main-panel ends -->
  316. </div>
  317. <!-- page-body-wrapper ends -->
  318. </div>
  319. <!-- container-scroller -->
  320. <script src="/assets/js/jquery-3.0.0.min.js"></script>
  321. <script src="/assets/layer/layer.js"></script>
  322. <script>
  323. var ws = {};//new WebSocket('ws://8.129.90.91:9500') // 内网
  324. // var ws = new WebSocket('ws://65.1.231.63:9500') // 外网
  325. var message_num = 0
  326. var withdrawal_num = 0
  327. ws.onopen = function () {
  328. // Web Socket 已连接上,使用 send() 方法发送数据
  329. var data = '{"type":"get_count"}'
  330. ws.send(data)
  331. };
  332. ws.onmessage = function (evt) {
  333. var received_msg = evt.data;
  334. if (received_msg == ''){
  335. return;
  336. }
  337. received_msg = JSON.parse(received_msg)
  338. var type = received_msg.type
  339. switch (type) {
  340. case 'ping':
  341. ws.send('pong')
  342. break;
  343. case 'back_count':
  344. var message_count = received_msg.message_count
  345. var withdrawal_count = received_msg.withdrawal_count
  346. if (message_count > 0){
  347. if (message_num != message_count){
  348. playSound()
  349. message_num = message_count
  350. }
  351. $("#add_text").html('<span class="count-symbol bg-warning">&nbsp;&nbsp;'+message_count+'&nbsp;&nbsp;</span>')
  352. }else {
  353. $("#add_text").html('')
  354. }
  355. if (withdrawal_count > 0){
  356. if (withdrawal_num != message_count){
  357. withdrawal_num = withdrawal_count
  358. playSound()
  359. }
  360. $("#xitong_text").html('<span class="count-symbol bg-danger">&nbsp;&nbsp;'+withdrawal_count+'&nbsp;&nbsp;</span>')
  361. }else {
  362. $("#xitong_text").html('')
  363. }
  364. var data = '{"type":"get_count"}'
  365. ws.send(data)
  366. break
  367. }
  368. }
  369. ws.onclose = function () {
  370. // 关闭 websocket
  371. console.log('关闭socket')
  372. };
  373. function playSound() {
  374. var borswer = window.navigator.userAgent.toLowerCase();
  375. if(borswer.indexOf('ie') >= 0) {
  376. var strEmbed = '<embed name="embedPlay" src="/mp3/yinxiao.mp3" autostart="true" hidden="true" loop="false" />';
  377. if($('body').find('embed').length <= 0) {
  378. $('body').append(strEmbed);
  379. }
  380. var embed = document.embedPlay;
  381. //浏览器不支持audio,则使用embed播放
  382. embed.volume = 100;
  383. } else {
  384. //非IE内核浏览器
  385. var strAudio = '<audio id="audioPlay" src="/mp3/yinxiao.mp3" hidden="true" autoplay="autoplay"/>';
  386. if($('body').find('audio').length <= 0) {
  387. $('body').append(strAudio);
  388. }
  389. var audio = $('#audioPlay')[0];
  390. audio.play()
  391. }
  392. }
  393. </script>
  394. <script>
  395. function updateURLParam(param, value) {
  396. if(value.includes("system-pages"))return;
  397. var currentURL = window.location.href + '#';
  398. if(value.includes('{{ url('console') }}')){
  399. window.history.replaceState(null, null, currentURL.split('#')[0]);
  400. return
  401. }
  402. var regex = new RegExp(param + "=.*?#");
  403. var newURL = currentURL.replace(regex, param + "=" + value + "#");
  404. if (!regex.test(currentURL)) {
  405. newURL = currentURL + param + "=" + value;
  406. }
  407. currentURL=currentURL.trimEnd("#");
  408. window.history.replaceState(null, null, newURL);
  409. }
  410. document.addEventListener('DOMContentLoaded', function () {
  411. // 恢复菜单状态
  412. const collapsedItems = localStorage.getItem('collapsedItems');
  413. if (collapsedItems) {
  414. const ids = JSON.parse(collapsedItems);
  415. ids.forEach(id => {
  416. const element = document.getElementById(id);
  417. if (element) {
  418. element.classList.add('show');
  419. }
  420. });
  421. }
  422. // 添加事件监听器来保存菜单状态
  423. document.querySelectorAll('.nav-link[data-toggle="collapse"]').forEach(link => {
  424. link.addEventListener('click', function () {
  425. const targetId = link.getAttribute('href').substring(1);
  426. const targetElement = document.getElementById(targetId);
  427. if (targetElement) {
  428. let collapsedItems = localStorage.getItem('collapsedItems');
  429. collapsedItems = collapsedItems ? JSON.parse(collapsedItems) : [];
  430. if (targetElement.classList.contains('show')) {
  431. const index = collapsedItems.indexOf(targetId);
  432. if (index > -1) {
  433. collapsedItems.splice(index, 1);
  434. }
  435. } else {
  436. if (!collapsedItems.includes(targetId)) {
  437. collapsedItems.push(targetId);
  438. }
  439. }
  440. localStorage.setItem('collapsedItems', JSON.stringify(collapsedItems));
  441. }
  442. });
  443. });
  444. document.querySelectorAll('.nav-link').forEach(link => {
  445. link.addEventListener('click', function (e) {
  446. e.preventDefault();
  447. const url = link.getAttribute('href');
  448. if(url=="#")return;
  449. if(url.includes("system-pages"))return;
  450. document.getElementById('mainiframe').src = url;
  451. updateURLParam('page', url);
  452. });
  453. });
  454. const urlParams = new URLSearchParams(window.location.hash);
  455. const page = urlParams.get('#page')
  456. if (page) {
  457. document.getElementById('mainiframe').src = page;
  458. } else {
  459. document.getElementById('mainiframe').src = '{{ url('console') }}';
  460. }
  461. });
  462. function reurl(){
  463. url = location.href;
  464. var times = url.split("?t=");
  465. if(times[1] != 1){
  466. url += "?t=1";
  467. self.location.replace(url);
  468. }
  469. }
  470. οnlοad=reurl
  471. function editInfo(id) {
  472. var page = layer.open({
  473. type: 2,
  474. title: '{{__('auto.修改个人信息')}}',
  475. shadeClose: true,
  476. shade: 0.8,
  477. area: ['70%', '90%'],
  478. content: '/edit/info/'+id
  479. });
  480. }
  481. // 移动端侧边栏优化
  482. $(document).ready(function() {
  483. function adjustSidebar() {
  484. if ($(window).width() <= 991) {
  485. var $sidebar = $('#sidebar');
  486. var navbarHeight = $('.navbar').outerHeight() || 70;
  487. var windowHeight = $(window).height();
  488. var sidebarHeight = windowHeight - navbarHeight;
  489. $sidebar.css({
  490. 'height': sidebarHeight + 'px',
  491. 'max-height': sidebarHeight + 'px',
  492. 'overflow-y': 'auto',
  493. 'overflow-x': 'hidden'
  494. });
  495. }
  496. }
  497. adjustSidebar();
  498. $(window).on('resize', adjustSidebar);
  499. // 点击侧边栏外部区域关闭菜单
  500. if ($(window).width() <= 991) {
  501. // 创建遮罩层
  502. var $overlay = $('<div class="sidebar-overlay"></div>');
  503. $('body').append($overlay);
  504. // 监听侧边栏状态变化
  505. var observer = new MutationObserver(function(mutations) {
  506. mutations.forEach(function(mutation) {
  507. if (mutation.attributeName === 'class') {
  508. var $sidebar = $('#sidebar');
  509. if ($sidebar.hasClass('active')) {
  510. $overlay.addClass('active');
  511. } else {
  512. $overlay.removeClass('active');
  513. }
  514. }
  515. });
  516. });
  517. var sidebarElement = document.getElementById('sidebar');
  518. if (sidebarElement) {
  519. observer.observe(sidebarElement, {
  520. attributes: true
  521. });
  522. }
  523. // 点击遮罩层关闭侧边栏
  524. $overlay.on('click', function() {
  525. $('#sidebar').removeClass('active');
  526. $('body').removeClass('sidebar-icon-only');
  527. });
  528. // 点击汉堡菜单按钮
  529. $('.navbar-toggler').on('click', function() {
  530. setTimeout(function() {
  531. if ($('#sidebar').hasClass('active')) {
  532. $overlay.addClass('active');
  533. } else {
  534. $overlay.removeClass('active');
  535. }
  536. }, 50);
  537. });
  538. }
  539. });
  540. </script>
  541. <!-- plugins:js -->
  542. <script src="/assets/vendors/js/vendor.bundle.base.js"></script>
  543. <script src="/assets/vendors/js/vendor.bundle.addons.js"></script>
  544. <!-- endinject -->
  545. <!-- Plugin js for this page-->
  546. <!-- End plugin js for this page-->
  547. <!-- inject:js -->
  548. <script src="/assets/js/off-canvas.js"></script>
  549. {{--<script src="/assets/js/misc.js"></script>--}}
  550. <!-- endinject -->
  551. <!-- Custom js for this page-->
  552. <script src="/assets/js/dashboard.js"></script>
  553. <!-- End custom js for this page-->
  554. </body>
  555. </html>