MMM-Remote-Control/remote.html at master · Jopyth/MMM-Remote-Control · 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
<!doctype html>
<html lang="en">
  <head>
    <title>%%TRANSLATE:TITLE%%</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="google" content="notranslate" />

    <!-- PWA Manifest -->
    <link rel="manifest" href="modules/MMM-Remote-Control/manifest.json" />

    <!-- Theme colors for PWA -->
    <meta name="theme-color" content="#000000" />
    <meta name="msapplication-navbutton-color" content="#000000" />
    <meta name="msapplication-config" content="none" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="MM Remote" />

    <!-- Modern SVG favicon with dark mode support -->
    <link
      rel="icon"
      href="modules/MMM-Remote-Control/img/favicon.svg"
      type="image/svg+xml"
    />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/roboto.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link
      rel="stylesheet"
      href="modules/MMM-Remote-Control/remote/remote.css"
    />
    <link
      rel="apple-touch-icon"
      href="modules/MMM-Remote-Control/img/icon-192.png"
    />
    <meta name="mobile-web-app-capable" content="yes" />
  </head>

  <body>
    <div class="container normal">
      <div id="module_1_MMM-Remote-Control" class="app">
        <header class="header">
          <div
            id="back-button"
            class="hidden button"
            role="button"
            aria-label="%%TRANSLATE:BACK%%"
            tabindex="0"
          >
            <span class="fa fa-fw fa-angle-left" aria-hidden="true"></span>
          </div>
          <span class="header-title">%%TRANSLATE:TITLE%%</span>
          <div class="header-spacer"></div>
        </header>
        <main class="main-content">
          <!-- Navigation and menu content rendered dynamically after translations load -->
        </main>
        <div id="load-error">
          <span
            class="fa fa-fw fa-exclamation-circle"
            aria-hidden="true"
          ></span>
          <span class="text">%%TRANSLATE:LOAD_ERROR%%</span>
          <a href="https://github.com/jopyth/MMM-Remote-Control/issues"
            >%%TRANSLATE:ISSUE_LINK%%</a
          >
        </div>
        <div id="result-overlay" class="overlay hidden"></div>
        <div id="result" class="result hidden">
          <div id="close-result">
            <span class="fa fa-times-circle delete-button"></span>
          </div>
          <div id="result-contents">
            <!-- content is inserted here -->
          </div>
        </div>
        <div id="popup-container" class="popup hidden">
          <div id="close-popup">
            <span class="fa fa-times-circle delete-button"></span>
          </div>
          <div id="popup-contents" class="popup-contents">
            <!-- content is inserted here -->
          </div>
        </div>
        <div id="success-popup" class="success-popup hidden">
          <span class="fa fa-fw fa-check-circle"></span>
          <span class="text">%%TRANSLATE:DONE%%</span>
        </div>
      </div>
    </div>
    <script src="%%CONFIG_PATH%%"></script>
    <script src="socket.io/socket.io.js"></script>
    <script type="importmap">
      {
        "imports": {
          "marked": "./modules/MMM-Remote-Control/node_modules/marked/lib/marked.esm.js",
          "dompurify": "./modules/MMM-Remote-Control/node_modules/dompurify/dist/purify.es.mjs"
        }
      }
    </script>
    <script type="module">
      // TODO: Backward-compatibility shim for pre-ESM MagicMirror socketclient.js.
      // Remove in 2027 when old core versions are no longer supported.
      const loadLegacySocketClient = async () => {
        await new Promise((resolve, reject) => {
          const script = document.createElement("script");
          script.src = "js/socketclient.js";
          script.async = false;
          script.onload = resolve;
          script.onerror = reject;
          document.head.append(script);
        });

        if (!globalThis.MMSocket && typeof MMSocket !== "undefined") {
          globalThis.MMSocket = MMSocket;
        }
      };

      try {
        const socketClientModule = await import("./js/socketclient.js");
        if (socketClientModule?.MMSocket) {
          globalThis.MMSocket = socketClientModule.MMSocket;
        }
      } catch {
        await loadLegacySocketClient();
      }

      if (!globalThis.MMSocket) {
        await loadLegacySocketClient();
      }

      await import("./modules/MMM-Remote-Control/remote/remote-menu.mjs");
    </script>
  </body>
</html>