docker-appdash/template.html at main · julispace/docker-appdash · 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
<!-- template.html -->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>App Dashboard</title>
    <style>
        :root{
            --bg1: #0f1720;
            --bg2: #07101a;
            --card: rgba(255,255,255,0.06);
            --card-hover: rgba(255,255,255,0.12);
            --accent: #22c1c3;
            --muted: rgba(255,255,255,0.7);
            --gap: 18px;
            --tile-size: 140px;
            --logo-size: 96px;
            font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
        }
        html,body{height:100%;}
        body {
            background: linear-gradient(180deg,var(--bg1),var(--bg2));
            color: #e6eef1;
            margin: 0;
            padding: 32px;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
        }
        header{
            display:flex;align-items:center;gap:12px;margin-bottom:20px;
        }
        header h1{font-weight:600;margin:0;font-size:18px}
        .grid{
            display:grid;
            grid-template-columns:repeat(auto-fill,minmax(var(--tile-size),1fr));
            gap:var(--gap);
            align-items:start;
        }
        .app-entry{
            background:var(--card);
            border-radius:10px;
            padding:14px;
            text-align:center;
            transition:transform .18s ease, box-shadow .18s ease, background-color .18s;
            box-shadow: 0 2px 12px rgba(0,0,0,0.35);
        }
        .app-entry:hover{transform:translateY(-6px);background:var(--card-hover);box-shadow:0 8px 24px rgba(2,6,23,0.6)}
        .app-link{color:inherit;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px}
        .logo-wrap{width:var(--logo-size);height:var(--logo-size);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));}
        .logo-wrap.placeholder{font-size:36px;color:var(--muted);background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(0,0,0,0.04));}
        .app-logo{max-width:100%;max-height:100%;object-fit:contain;display:block}
        .app-name{font-size:14px;color:#e6eef1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
        .controls{margin-left:auto}
        .small{font-size:12px;color:var(--muted)}
        footer{margin-top:28px;color:var(--muted);font-size:13px}
        @media (max-width:520px){
            :root{--tile-size:120px;--logo-size:76px}
            body{padding:16px}
        }
    </style>
    <script>
        function navigateToApp(port){
            var baseUrl = window.location.protocol + '//' + window.location.hostname;
            window.location.href = baseUrl + ':' + port;
        }
        async function regenerate(){
            try{
                await fetch('/regenerate');
                location.reload();
            }catch(e){
                console.error(e);
                alert('Failed to regenerate');
            }
        }
    </script>
</head>
<body>
    <header>
        <h1>App Dashboard</h1>
        <div class="controls">
            <button onclick="regenerate()">Refresh</button>
            <span class="small">Click logo to open app</span>
        </div>
    </header>
    <main class="grid">
        {content}
    </main>
    <footer>
        Generated from Docker labels. Add labels with prefix <code>org.appdash.app.&lt;id&gt;.&lt;prop&gt;</code> (port, name, logo).
    </footer>
</body>
</html>