Skip to content

Commit 7e49a95

Browse files
SakshayMahnaSakshayMahna
authored
Merge pull request #55 from TahaMjp/Watermark
Introduce watermark with click-through and non-selectable behavior
2 parents 78dc052 + 68ac0a2 commit 7e49a95

4 files changed

Lines changed: 133 additions & 22 deletions

File tree

‎src/panel/getWebviewHtml.ts‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,38 @@
1414

1515
import * as vscode from 'vscode';
1616

17-
export function getWebviewHtml(webview: vscode.Webview, extensionUri: vscode.Uri): string {
18-
const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'webview', 'script.js'));
19-
const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'webview', 'style.css'));
17+
export function getWebviewHtml(
18+
webview: vscode.Webview,
19+
extensionUri: vscode.Uri
20+
): string {
21+
const scriptUri = webview.asWebviewUri(
22+
vscode.Uri.joinPath(extensionUri, 'webview', 'script.js')
23+
);
24+
const styleUri = webview.asWebviewUri(
25+
vscode.Uri.joinPath(extensionUri, 'webview', 'style.css')
26+
);
27+
28+
const logoUri = webview.asWebviewUri(
29+
vscode.Uri.joinPath(extensionUri, 'assets', 'launchmap-logo.png')
30+
);
2031

2132
return `
22-
<!DOCTYPE html>
23-
<html>
24-
<head>
25-
<meta charset="UTF-8">
26-
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval' ${webview.cspSource}; style-src ${webview.cspSource};">
27-
<link href="${styleUri}" rel="stylesheet">
28-
</head>
29-
<body>
30-
<button id="export-btn">💾 Export JSON</button>
31-
<div id="editor">
32-
</div>
33-
<script src="${scriptUri}" type="module"></script>
34-
</body>
35-
</html>
36-
`;
33+
<!DOCTYPE html>
34+
<html>
35+
<head>
36+
<meta charset="UTF-8">
37+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} https:; script-src 'unsafe-inline' 'unsafe-eval' ${webview.cspSource}; style-src ${webview.cspSource};">
38+
<link href="${styleUri}" rel="stylesheet">
39+
</head>
40+
<body>
41+
<button id="export-btn">💾 Export JSON</button>
42+
<div id="editor"></div>
43+
<div id="watermark">
44+
<img src="${logoUri}" alt="Logo" />
45+
<p>LaunchMap</p>
46+
</div>
47+
<script src="${scriptUri}" type="module"></script>
48+
</body>
49+
</html>
50+
`;
3751
}

‎webview/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import './styles/base.css';
22
@import './styles/edges.css';
33
@import './styles/events.css';
4+
@import './styles/watermark.css';
45
@import './styles/components/common.css';
56
@import './styles/components/arguments.css';
67
@import './styles/components/environment-varaiables.css';

‎webview/styles/base.css‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,57 @@
1414
top: 12px;
1515
right: 12px;
1616
z-index: 1000;
17-
1817
background: linear-gradient(145deg, #0e61a9, #0a3f6b);
1918
color: #ffffff;
2019
border: 2px solid #1c90f3;
2120
border-radius: 8px;
22-
2321
font-size: 14px;
2422
font-weight: bold;
2523
padding: 8px 14px;
24+
box-shadow: 0 0 8px rgba(28, 144, 243, 0.4);
25+
transition: all 0.2s ease;
26+
cursor: pointer;
27+
}
28+
29+
#export-btn:hover {
30+
background: linear-gradient(145deg, #1287e2, #0b5185);
31+
box-shadow: 0 0 12px rgba(28, 144, 243, 0.6);
32+
transform: translateY(-1px);
33+
}
34+
35+
#export-btn:active {
36+
transform: translateY(0);
37+
box-shadow: 0 0 6px rgba(28, 144, 243, 0.3);
38+
}
2639

40+
#zoom-layer {
41+
transform-origin: 0 0;
42+
will-change: transform;
43+
}
44+
45+
#editor {
46+
width: 100%;
47+
height: 100vh;
48+
background-color: #1e1e1e;
49+
color: white;
50+
position: relative;
51+
overflow: scroll;
52+
font-family: monospace;
53+
margin-top: 40px;
54+
}
55+
56+
#export-btn {
57+
position: fixed;
58+
top: 12px;
59+
right: 12px;
60+
z-index: 1000;
61+
background: linear-gradient(145deg, #0e61a9, #0a3f6b);
62+
color: #ffffff;
63+
border: 2px solid #1c90f3;
64+
border-radius: 8px;
65+
font-size: 14px;
66+
font-weight: bold;
67+
padding: 8px 14px;
2768
box-shadow: 0 0 8px rgba(28, 144, 243, 0.4);
2869
transition: all 0.2s ease;
2970
cursor: pointer;
@@ -41,6 +82,6 @@
4182
}
4283

4384
#zoom-layer {
44-
transform-origin: 0 0;
45-
will-change: transform;
85+
transform-origin: 0 0;
86+
will-change: transform;
4687
}

‎webview/styles/watermark.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
#watermark {
2+
position: fixed;
3+
bottom: 24px;
4+
left: 24px;
5+
z-index: 1000;
6+
background: none;
7+
color: rgba(255, 255, 255, 0.82);
8+
border-radius: 16px;
9+
font-size: 36px;
10+
font-weight: 700;
11+
letter-spacing: 1px;
12+
padding: 0;
13+
cursor: default;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
gap: 14px;
18+
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
19+
opacity: 0.35;
20+
user-select: none;
21+
pointer-events: none;
22+
}
23+
24+
#watermark img {
25+
width: 60px;
26+
height: 60px;
27+
margin-right: 0;
28+
border-radius: 10px;
29+
object-fit: contain;
30+
opacity: 0.95;
31+
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
32+
pointer-events: none;
33+
}
34+
35+
#watermark p {
36+
font-family: 'League Spartan', sans-serif;
37+
font-weight: 700;
38+
margin: 0;
39+
color: rgba(220, 220, 220, 0.9);
40+
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
41+
user-select: none;
42+
pointer-events: none;
43+
}
44+
45+
@media (max-width: 768px) {
46+
#watermark {
47+
font-size: 24px;
48+
gap: 10px;
49+
}
50+
51+
#watermark img {
52+
width: 40px;
53+
height: 40px;
54+
}
55+
}

0 commit comments

Comments
 (0)