Skip to content

Commit 5c9dc5e

Browse files
flick9000flick9000
committed
support dialog
1 parent c3dcdd6 commit 5c9dc5e

File tree

3 files changed

+179
-0
lines changed

3 files changed

+179
-0
lines changed

‎website/src/assets/js/main.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,9 @@ document.querySelectorAll(".checkbox-wrapper").forEach((wrapper) => {
184184
});
185185

186186
document.getElementById("downloadBtn").addEventListener("click", function () {
187+
const supportDialog = document.getElementById("supportDialog");
188+
const closeSupportDialog = document.getElementById("closeSupportDialog");
189+
187190
var textContent = document.getElementById("code").innerText;
188191

189192
// Replace newlines with CRLF
@@ -197,4 +200,10 @@ document.getElementById("downloadBtn").addEventListener("click", function () {
197200
document.body.appendChild(link);
198201
link.click();
199202
document.body.removeChild(link);
203+
204+
supportDialog.showModal();
205+
206+
closeSupportDialog.addEventListener("click", () => {
207+
supportDialog.close();
208+
});
200209
});

‎website/src/components/Dialogs.astro‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<dialog id="supportDialog">
2+
<div class="modal-content">
3+
<div class="modal-header">
4+
<h1>Good to go!</h1>
5+
<svg
6+
class="close"
7+
id="closeSupportDialog"
8+
xmlns="http://www.w3.org/2000/svg"
9+
width="24"
10+
height="24"
11+
viewBox="-64 0 512 512"
12+
><path
13+
fill="currentColor"
14+
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7L86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256L41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256z"
15+
></path></svg
16+
>
17+
</div>
18+
<p>
19+
If you enjoy using WinScript, please consider supporting the project!
20+
You can star the project on GitHub or donate to help keep development going. Every bit of support helps keep WinScript open-source and improving for everyone.
21+
</p>
22+
<div class="modal-buttons">
23+
<a href="https://github.com/flick9000/winscript/">Star on GitHub -></a>
24+
<a href="https://ko-fi.com/flick9000">Buy me a coffee -></a>
25+
</div>
26+
</div>
27+
</dialog>
28+
29+
<style>
30+
@keyframes blur-in {
31+
from {
32+
backdrop-filter: blur(0px);
33+
}
34+
to {
35+
backdrop-filter: blur(25px);
36+
-webkit-backdrop-filter: blur(25px);
37+
}
38+
}
39+
40+
dialog[open] {
41+
display: flex;
42+
font-size: 16px;
43+
44+
opacity: 1;
45+
46+
@starting-style {
47+
opacity: 0;
48+
}
49+
}
50+
51+
dialog {
52+
display: none;
53+
position: fixed;
54+
opacity: 0;
55+
min-width: 100%;
56+
min-height: 100%;
57+
z-index: 1;
58+
top: 0;
59+
left: 0;
60+
right: 0;
61+
bottom: 0;
62+
overflow-y: hidden;
63+
background: hsla(253, 50%, 1%, 0.5);
64+
border: transparent;
65+
color: var(--text);
66+
transition-property: display opacity;
67+
transition-duration: 0.3s;
68+
transition-behavior: allow-discrete;
69+
animation: blur-in 0.3s forwards;
70+
}
71+
72+
.modal-content {
73+
display: flex;
74+
flex-direction: column;
75+
flex-flow: 1;
76+
margin: auto;
77+
background: hsla(253, 50%, 7%, 0.75);
78+
text-wrap: pretty;
79+
gap: 1.5em;
80+
padding: 1.5em;
81+
border: 1px solid rgba(255, 255, 255, 0.1);
82+
border-radius: 7px;
83+
width: clamp(300px, 50vw, 600px);
84+
min-height: fit-content;
85+
86+
a {
87+
text-decoration: underline;
88+
text-underline-offset: 0.5em;
89+
90+
&:focus-visible {
91+
outline: transparent;
92+
}
93+
}
94+
95+
p {
96+
opacity: 0.9;
97+
}
98+
}
99+
100+
.modal-header {
101+
display: flex;
102+
align-items: center;
103+
justify-content: space-between;
104+
padding-bottom: 1em;
105+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
106+
107+
h1 {
108+
font-size: revert;
109+
font-weight: 500;
110+
line-height: 1.5;
111+
}
112+
113+
.close {
114+
cursor: pointer;
115+
display: flex !important;
116+
}
117+
}
118+
119+
.modal-buttons {
120+
display: flex;
121+
flex-direction: column;
122+
align-items: center;
123+
justify-content: center;
124+
gap: 0.5em;
125+
126+
a {
127+
display: flex;
128+
align-items: center;
129+
justify-content: center;
130+
text-decoration: none;
131+
width: 100%;
132+
line-height: 1.25;
133+
font-size: 1em;
134+
padding: 0.5em 2em;
135+
border-radius: 7px;
136+
cursor: pointer;
137+
min-width: fit-content;
138+
transition: all 0.3s ease;
139+
color: var(--text);
140+
}
141+
a:focus-visible {
142+
outline: transparent;
143+
}
144+
a:nth-child(1) {
145+
background: linear-gradient(
146+
180deg,
147+
hsl(255, 50%, 37%) 0% 40%,
148+
hsl(255, 50%, 39%),
149+
hsl(263, 50%, 42%)
150+
);
151+
border-top: 1px solid var(--cta);
152+
}
153+
a:nth-child(2) {
154+
background-color: #18132b;
155+
border-top: 1px solid rgba(255, 255, 255, 0.1);
156+
}
157+
}
158+
159+
#start-modal .modal-content {
160+
width: clamp(300px, 75vw, 600px);
161+
}
162+
@media screen and (max-width: 600px) {
163+
.modal-content {
164+
width: 80%;
165+
height: 40%;
166+
}
167+
}
168+
</style>

‎website/src/pages/index.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import AppGroup from "../components/AppGroup.astro";
99
import MockupCode from "../components/MockupCode.astro";
1010
import ButtonEntry from "../components/ButtonEntry.astro";
1111
import Select from "../components/Select.astro";
12+
import Dialogs from "../components/Dialogs.astro";
1213
1314
const packageManagers = [
1415
{ value: "chocolatey", label: "Chocolatey" },
@@ -20,6 +21,7 @@ const packageManagers = [
2021
<div class="main-container">
2122
<Background />
2223
<Sidebar />
24+
<Dialogs />
2325
<div class="content">
2426
<div class="content-header">
2527
<h1 id="content-header">WinScript</h1>

0 commit comments

Comments
 (0)