PWA-Template/index.html at main · TolinSimpson/PWA-Template · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="PWA Template - A Progressive Web App Template">
    <meta name="theme-color" content="#4285f4">

    <!-- PWA Meta Tags -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="PWA Template">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">

    <!-- Icons -->
    <link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512x512.png">
    <link rel="apple-touch-icon" href="icons/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="152x152" href="icons/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="icons/icon-512x512.png">
    <link rel="apple-touch-icon" sizes="167x167" href="icons/icon-192x192.png">

    <!-- Manifest -->
    <link rel="manifest" href="manifest.json">

    <!-- Styles -->
    <link rel="stylesheet" href="styles.css">

    <title>PWA Template</title>
</head>
<body>
    <div id="app">
        <header class="header">
            <h1>PWA Template</h1>
            <button id="install-btn" class="install-btn" style="display: none;">Install App</button>
        </header>

        <main class="main">
            <section class="hero">
                <h2>PWA Template</h2>
                <p>A minimal Progressive Web App with encrypted storage.</p>
            </section>

            <div id="status" class="status"></div>

            <section class="storage-demo">
                <h3>Storage Demo</h3>

                <div class="demo-form">
                    <input type="text" id="demo-key" placeholder="Key" value="demo-data">
                    <textarea id="demo-data" placeholder="Data to store...">{"message": "Hello PWA!"}</textarea>
                    <input type="password" id="demo-password" placeholder="Password (optional)">

                    <div class="demo-buttons">
                        <button id="save-data-btn" class="demo-btn save-btn">Save</button>
                        <button id="load-data-btn" class="demo-btn load-btn">Load</button>
                        <button id="export-data-btn" class="demo-btn export-btn">Export</button>
                        <button id="import-data-btn" class="demo-btn import-btn">Import</button>
                        <button id="inspect-storage-btn" class="demo-btn inspect-btn">Inspect</button>
                        <button id="clear-data-btn" class="demo-btn clear-btn">Clear</button>
                    </div>
                </div>

                <div id="demo-output" class="demo-output"></div>
            </section>

            <section class="cache-management">
                <h3>Cache & Update Management</h3>

                <div class="cache-info">
                    <div class="cache-stats">
                        <div class="stat-item">
                            <span class="stat-label">App Version:</span>
                            <span id="app-version" class="stat-value">Loading...</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">Cache Entries:</span>
                            <span id="cache-entries" class="stat-value">Loading...</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">Last Update Check:</span>
                            <span id="last-check" class="stat-value">Loading...</span>
                        </div>
                    </div>
                </div>

                <div class="cache-actions">
                    <button id="check-update-btn" class="cache-btn check-btn">🔄 Check for Updates</button>
                    <button id="clear-cache-btn" class="cache-btn clear-btn">🗑️ Clear All Caches</button>
                    <button id="force-update-btn" class="cache-btn force-btn">⚡ Force Update</button>
                    <button id="refresh-cache-info-btn" class="cache-btn refresh-btn">📊 Refresh Cache Info</button>
                </div>

                <div id="cache-output" class="cache-output"></div>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 PWA Template. Built with vanilla HTML, CSS, and JavaScript.</p>
        </footer>
    </div>

    <!-- Scripts -->
    <script src="encrypted-storage.js"></script>
    <script src="app.js"></script>
</body>
</html>