controller/rootfs/api/templates/workspace/workspace_invitation_accept.html at 876a8abef20bae50fab53bf7155484a8933f5dde · drycc/controller · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Workspace Invitation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        :root {
            --vscode-foreground: #CCCCCC;
            --vscode-editor-background: #1F1F1F;
            --vscode-textLink-foreground: #4daafc;
        }
        @media (prefers-color-scheme: light) {
            :root {
                --vscode-foreground: #3B3B3B;
                --vscode-editor-background: #FFFFFF;
                --vscode-textLink-foreground: #005FB8;
            }
        }
        html { height: 100%; }
        body {
            box-sizing: border-box;
            min-height: 100%;
            margin: 0;
            padding: 15px 30px;
            display: flex;
            flex-direction: column;
            color: var(--vscode-foreground);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif;
            background-color: var(--vscode-editor-background);
        }
        a { color: var(--vscode-textLink-foreground); text-decoration: none; }
        a:hover, a:focus { text-decoration: underline; }
        .container {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .title {
            font-size: 28px;
            font-weight: 300;
            margin: 0 0 12px 0;
            color: var(--vscode-foreground);
        }
        .subtitle {
            font-size: 18px;
            font-weight: 300;
            color: var(--vscode-foreground);
            opacity: 0.7;
            margin: 0 0 36px 0;
        }
        .detail {
            font-size: 14px;
            color: var(--vscode-foreground);
            opacity: 0.7;
            margin: 0 0 8px 0;
        }
        .icon-container {
            margin-bottom: 24px;
        }
        @keyframes rise-and-glow {
            0% { opacity: 0; transform: translateY(15px) scale(0.95); }
            50% { opacity: 0.8; transform: translateY(-2px) scale(1.02); }
            70% { opacity: 1; transform: translateY(1px) scale(0.99); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .drycc-icon {
            width: 128px;
            height: 128px;
            animation: rise-and-glow 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="icon-container">
                <svg class="drycc-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <circle stroke="#FF2F57" fill="#FF2F57" cx="3" cy="3" r="2"/>
                        <circle stroke="#FF2F57" fill="#FF2F57" cx="3" cy="13" r="2"/>
                        <circle stroke="#FF2F57" fill="#FF2F57" cx="13" cy="13" r="2"/>
                        <circle stroke="#FF2F57" fill="#FF2F57" cx="13" cy="3" r="2"/>
                        <rect stroke="#3FB1E5" fill="#3FB1E5" x="6.5" y="6.5" width="3" height="3"/>
                        <polygon stroke="#38BB4C" fill="#38BB4C" stroke-linejoin="round" points="8 11 10 15 6 15"/>
                        <polygon stroke="#38BB4C" fill="#38BB4C" stroke-linejoin="round" transform="translate(3,8) rotate(90) translate(-3,-8)" points="3 6 5 10 1 10"/>
                        <polygon stroke="#38BB4C" fill="#38BB4C" stroke-linejoin="round" transform="translate(8,3) rotate(180) translate(-8,-3)" points="8 1 10 5 6 5"/>
                        <polygon stroke="#38BB4C" fill="#38BB4C" stroke-linejoin="round" transform="translate(13,8) rotate(270) translate(-13,-8)" points="13 6 15 10 11 10"/>
                    </g>
                </svg>
            </div>
            {% if user_exists %}
            <h1 class="title">Invitation Accepted</h1>
            <p class="subtitle">You have been added to workspace <strong>{{ workspace_name }}</strong>.</p>
            <p class="detail">Use the Drycc CLI to log in: <code>drycc login</code></p>
            {% else %}
            <h1 class="title">You're Invited to <strong>{{ workspace_name }}</strong></h1>
            <p class="subtitle">You need an account to join this workspace.</p>
            <p class="detail">First, <a href="{{ register_url }}">sign up on Drycc Passport</a>.</p>
            <p class="detail">Then use the Drycc CLI to log in: <code>drycc login</code></p>
            {% endif %}
        </div>
    </div>
</body>
</html>