@@ -21,7 +21,6 @@ export default async function sendRedirectPage (event: H3Event, url: string, coo
21
21
if ( isCookieStrict || isIframe ) {
22
22
// Use meta refresh as redirection to fix issue with cookies samesite=strict
23
23
// See: https://stackoverflow.com/questions/42216700/how-can-i-redirect-after-oauth2-with-samesite-strict-and-still-get-my-cookies
24
- // Live demo: https://codepen.io/adenvt/pen/gOQjgyM
25
24
await send ( event , `
26
25
<!DOCTYPE html>
27
26
<html lang="en">
@@ -34,80 +33,99 @@ export default async function sendRedirectPage (event: H3Event, url: string, coo
34
33
35
34
<link rel="preconnect" href="https://fonts.googleapis.com">
36
35
<link rel="preconnect" href="https://fonts.gstatic.com">
36
+ <link rel="preconnect" href="https://cdn.jsdelivr.net">
37
37
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap">
38
38
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
39
39
40
40
<style>
41
- @keyframes progressbar {
42
- 0% {
43
- transform: translateX(-75%);
44
- }
45
-
46
- 100% {
47
- transform: translateX(225%);
48
- }
41
+ :root {
42
+ font-family: "DM Sans", sans-serif;
43
+ color: #6E7074;
49
44
}
50
45
51
- :root {
52
- font-family: 'DM Sans', sans-serif;
53
- color: #0D1117;
46
+ body {
47
+ background-color: #FDFDFD;
54
48
}
55
49
56
50
.container {
57
51
display: flex;
52
+ flex-direction: column;
58
53
align-items: center;
59
54
justify-content: center;
60
55
min-height: 100vh;
61
56
}
62
57
63
- .loading {
64
- width: 100%;
65
- border-radius: 9999px;
66
- height: 4px;
67
- background: #F3F3F3;
68
- overflow: hidden;
69
- isolation: isolate;
70
- }
71
-
72
- .loading__bar {
73
- border-radius: 9999px;
74
- height: 100%;
75
- width: 40%;
76
- background: #0065D1;
77
- animation: progressbar 1s alternate ease-in-out infinite;
58
+ .logo {
59
+ display: flex;
60
+ flex-grow: 1;
61
+ flex-direction: column;
62
+ justify-content: center;
63
+ align-items: center;
78
64
}
79
65
80
- h1 {
81
- font-size: 2rem;
82
- line-height: 1.67;
83
- margin-top: 0;
84
- margin-bottom: .5rem;
66
+ .spinner {
67
+ color: #C2C3C5;
68
+ font-size: 1.5rem;
69
+ margin-top: 1.5rem;
85
70
}
86
71
87
72
a {
88
73
color: #0057B4;
89
74
}
90
75
91
- body {
92
- background-color: #FDFDFD;
76
+ footer {
77
+ flex-shrink: 0;
78
+ font-size: .75rem;
79
+ line-height: 1rem;
93
80
}
94
81
</style>
95
82
</head>
96
83
97
84
<body>
98
85
<div class="container">
99
- <div>
100
- <h1>
101
- Processing...
102
- </h1>
103
- <div class="loading">
104
- <div class="loading__bar"></div>
105
- </div>
106
- <p>Please wait a while. If you are not redirect automatically, <a href="${ escape ( url ) } ">click here</a>.</p>
86
+ <div class="logo">
87
+ <svg width="136" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 136 36">
88
+ <g clip-path="url(#a)">
89
+ <ellipse cx="18.003" cy="17.983" fill="#E42E2C" rx="18.003" ry="17.983"/>
90
+ <ellipse cx="18.003" cy="17.983" fill="url(#b)" fill-opacity=".2" rx="18.003" ry="17.983" style="mix-blend-mode:multiply"/>
91
+ <path fill="#E42E2C" d="M26.654 33.73a18.351 18.351 0 0 0 5.583-4.717L51.714 4.377A20.409 20.409 0 0 0 44.782.805 20.064 20.064 0 0 0 37.06.11c-2.584.274-5.129.93-7.338 2.29-.978.603-1.392 1.134-2.09 2.028l-.042.054-21.402 27.07a17.747 17.747 0 0 0 6.29 3.56 17.925 17.925 0 0 0 7.213.768 18.18 18.18 0 0 0 6.963-2.15Z"/>
92
+ <path fill="#E42E2C" fill-rule="evenodd" d="m60.976 10.725-.018.018-.012.024c-1.03 1.715-1.65 3.405-1.863 5.084v17.827h2.958v-9.795c.889.955 1.857 1.69 2.922 2.213 1.278.614 2.678.925 4.194.925 2.69 0 4.998-.986 6.903-2.937 1.912-1.952 2.867-4.33 2.867-7.115 0-2.736-.961-5.089-2.885-7.029-1.924-1.94-4.243-2.918-6.958-2.918-1.546 0-3 .298-4.364.9-1.358.595-2.606 1.532-3.744 2.803Zm11.432.121a6.919 6.919 0 0 1 2.575 2.621 7.135 7.135 0 0 1 .956 3.588c0 1.246-.323 2.45-.974 3.605-.64 1.143-1.498 2.031-2.588 2.664a6.76 6.76 0 0 1-3.457.936 7.217 7.217 0 0 1-3.561-.936c-1.12-.639-1.979-1.49-2.581-2.56-.603-1.089-.907-2.299-.907-3.643 0-2.073.681-3.782 2.039-5.162s3.013-2.067 4.98-2.067a6.76 6.76 0 0 1 3.518.954Z" clip-rule="evenodd"/>
93
+ <path fill="#E42E2C" d="m82.209 15.911-.007.025v10.963h3.026v-6.543c0-2.87.146-4.785.426-5.788.377-1.125 1.053-2.171 2.045-3.138.98-.948 1.906-1.192 2.806-.857l.232.085L92.259 8.2l-.268-.152c-.773-.444-1.522-.68-2.24-.68-.968 0-2.13.492-3.47 1.398-1.388.936-2.472 2.402-3.275 4.366-.353.723-.615 1.654-.797 2.778ZM93.093 4.127c.438.438.98.663 1.594.663.621 0 1.157-.225 1.595-.663.45-.45.676-.99.676-1.611a2.15 2.15 0 0 0-.682-1.593 2.18 2.18 0 0 0-1.595-.657c-.62 0-1.156.225-1.594.663a2.18 2.18 0 0 0-.664 1.593 2.3 2.3 0 0 0 .67 1.605ZM96.185 7.867h-2.977v19.069h2.977V7.866ZM101.779 7.897h-3.19l8.791 19.069h.803l8.735-19.069h-3.201l-5.942 13.019-5.996-13.019ZM132.733 7.897l-5.77 13.31-5.942-13.31h-3.171l7.512 16.904-3.689 8.428h3.165l11.097-25.332h-3.202Z"/>
94
+ </g>
95
+ <defs>
96
+ <linearGradient id="b" x1="18.003" x2="10.688" y1="17.983" y2="11.861" gradientUnits="userSpaceOnUse">
97
+ <stop offset=".158"/>
98
+ <stop offset=".366" stop-opacity=".75"/>
99
+ <stop offset=".573" stop-opacity=".5"/>
100
+ <stop offset=".802" stop-opacity=".25"/>
101
+ <stop offset="1" stop-opacity="0"/>
102
+ </linearGradient>
103
+ <clipPath id="a">
104
+ <path fill="#fff" d="M0 0h136v36H0z"/>
105
+ </clipPath>
106
+ </defs>
107
+ </svg>
108
+ <svg data-testid="spinner" class="spinner spinner-ringgo" width="1em" height="1em" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
109
+ <circle class="spinner-ringgo__track" cx="9" cy="9" r="8" fill="transparent" stroke-width="2px" stroke-opacity="10%" stroke="currentColor"></circle>
110
+ <g>
111
+ <circle class="spinner-ringgo__ring" cx="9" cy="9" r="8" stroke-dasharray="50.2654825" stroke-linecap="round" stroke-width="2px" fill="transparent" stroke="currentColor">
112
+ <animate attributeName="stroke-dashoffset" values="45.2389342;5.02654825;45.2389342" keyTimes="0;.5;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"></animate>
113
+ <animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 9 9;45 9 9;360 9 9" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"></animateTransform>
114
+ </circle>
115
+ <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 9 9" to="360 9 9" dur="2s" repeatCount="indefinite"></animateTransform>
116
+ </g>
117
+ </svg>
107
118
</div>
119
+
120
+ <footer>
121
+ <p>
122
+ If you are not redirect automaticaly, <a href="${ escape ( url ) } ">click here</a>.
123
+ </p>
124
+ </footer>
108
125
</div>
109
126
</body>
110
- </html>` , 'text/html' )
127
+ </html>
128
+ ` , 'text/html' )
111
129
112
130
return
113
131
}
0 commit comments