nuxbe-mobile/index.html at main · Team-Nifty-GmbH/nuxbe-mobile · 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
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Nuxbe</title>
    <link rel="stylesheet" href="/src/style.css">
</head>
<body>
    <!-- Setup Screen (hidden by default, shown by JS if no saved server) -->
    <div id="setup-screen" class="screen" style="display: none;">
        <div class="container">
            <div class="logo">
                <svg
                    class="logo-icon"
                    viewBox="0 0 351 377"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    style="width: 80px; height: 80px; margin: 0 auto 1rem auto;"
                >
                    <path
                        d="M204.853 276.557C195.935 267.64 191.477 257.98 191.477 244.604V132.396C191.477 119.02 195.935 109.36 204.853 100.443L304.428 0.867188L350.5 47.6824L209.311 188.128L350.5 329.317L304.428 376.133L204.853 276.557ZM0.5 329.317L141.689 188.128L0.5 47.6824L46.5722 0.867188L146.148 100.443C155.065 109.36 159.523 119.02 159.523 132.396V244.604C159.523 257.98 155.065 267.64 146.148 276.557L46.5722 376.133L0.5 329.317Z"
                        fill="currentColor"
                    />
                </svg>
                <p class="subtitle" data-i18n="setup.title">Connect to your Nuxbe ERP Server</p>
            </div>

            <div class="setup-form">
                <!-- Server History -->
                <div id="server-history" class="server-history" style="display: none;"></div>

                <div class="input-group">
                    <label for="server-url" data-i18n="setup.serverUrl">Server URL</label>
                    <input
                        type="url"
                        id="server-url"
                        data-i18n-placeholder="setup.serverUrlPlaceholder"
                        placeholder="https://my-server.com"
                        autocomplete="url"
                        autocapitalize="none"
                    >
                    <span class="error-message" id="url-error"></span>
                </div>

                <button id="connect-btn" class="btn btn-primary">
                    <span class="btn-text" data-i18n="setup.connect">Connect</span>
                    <span class="loader" style="display: none;"></span>
                </button>

                <div class="divider">
                    <span data-i18n="setup.or">or</span>
                </div>

                <button id="scan-qr-btn" class="btn btn-secondary">
                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path>
                    </svg>
                    <span data-i18n="setup.scanQr">Scan QR Code</span>
                </button>
            </div>

            <div class="help-text">
                <p data-i18n="setup.helpText">Ask your administrator for the QR code or server URL.</p>
            </div>
        </div>
    </div>

    <!-- WebView Container (not used, navigation happens via window.location.href) -->
    <div id="webview-container" class="screen" style="display: none;">
        <p>Navigating to server...</p>
    </div>

    <!-- Loading Screen -->
    <div id="loading-screen" class="screen" style="display: none;">
        <div class="loading-content">
            <div class="spinner"></div>
            <p id="loading-text" data-i18n="loading.connectingToServer">Connecting to server...</p>
            <button id="cancel-loading-btn" class="btn btn-secondary" style="margin-top: 2rem;" data-i18n="loading.cancel">
                Cancel
            </button>
        </div>
    </div>

    <!-- Fallback screen shown when navigated back to this page (e.g. via swipe).
         Hidden by JS on normal init. Visible by default so the user is never stuck on a blank page. -->
    <div id="fallback-screen" class="screen">
        <div class="container" style="text-align: center;">
            <svg viewBox="0 0 351 377" fill="none" xmlns="http://www.w3.org/2000/svg"
                 style="width: 60px; height: 60px; margin: 0 auto 1.5rem; color: var(--secondary-color);">
                <path d="M204.853 276.557C195.935 267.64 191.477 257.98 191.477 244.604V132.396C191.477 119.02 195.935 109.36 204.853 100.443L304.428 0.867188L350.5 47.6824L209.311 188.128L350.5 329.317L304.428 376.133L204.853 276.557ZM0.5 329.317L141.689 188.128L0.5 47.6824L46.5722 0.867188L146.148 100.443C155.065 109.36 159.523 119.02 159.523 132.396V244.604C159.523 257.98 155.065 267.64 146.148 276.557L46.5722 376.133L0.5 329.317Z" fill="currentColor"/>
            </svg>
            <p style="color: var(--secondary-color); margin-bottom: 1.5rem;">Connection to server lost.</p>
            <button class="btn btn-primary" style="width: 100%;" onclick="window.history.forward()">
                <span>Go back</span>
            </button>
            <button class="btn btn-secondary" style="width: 100%; margin-top: 0.75rem;" onclick="sessionStorage.removeItem('nuxbe_was_active'); location.reload()">
                <span>Reconnect</span>
            </button>
        </div>
    </div>
    <script>
        (function() {
            var fallback = document.getElementById('fallback-screen');
            var isReturning = sessionStorage.getItem('nuxbe_was_active');

            if (isReturning) {
                // We previously navigated away — this is a swipe-back (fresh load).
                // Keep fallback visible, hide everything else.
                document.getElementById('setup-screen').style.display = 'none';
                document.getElementById('loading-screen').style.display = 'none';
                document.getElementById('webview-container').style.display = 'none';
            } else {
                // Normal first load — hide fallback, let main JS handle screens.
                fallback.style.display = 'none';
            }

            // Handle bfcache restoration (swipe-back restores cached page state).
            window.addEventListener('pageshow', function(event) {
                if (event.persisted) {
                    fallback.style.display = '';
                    document.getElementById('setup-screen').style.display = 'none';
                    document.getElementById('loading-screen').style.display = 'none';
                    document.getElementById('webview-container').style.display = 'none';
                }
            });

            // Mark that this page was active, so we can detect swipe-back on fresh load.
            window.addEventListener('pagehide', function() {
                sessionStorage.setItem('nuxbe_was_active', 'true');
            });
        })();
    </script>

    <script type="module" src="/src/app.js"></script>
</body>
</html>