diff --git a/src/panel/getWebviewHtml.ts b/src/panel/getWebviewHtml.ts index 031a69a..864a116 100644 --- a/src/panel/getWebviewHtml.ts +++ b/src/panel/getWebviewHtml.ts @@ -14,24 +14,38 @@ import * as vscode from 'vscode'; -export function getWebviewHtml(webview: vscode.Webview, extensionUri: vscode.Uri): string { - const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'webview', 'script.js')); - const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'webview', 'style.css')); +export function getWebviewHtml( + webview: vscode.Webview, + extensionUri: vscode.Uri +): string { + const scriptUri = webview.asWebviewUri( + vscode.Uri.joinPath(extensionUri, 'webview', 'script.js') + ); + const styleUri = webview.asWebviewUri( + vscode.Uri.joinPath(extensionUri, 'webview', 'style.css') + ); + + const logoUri = webview.asWebviewUri( + vscode.Uri.joinPath(extensionUri, 'assets', 'launchmap-logo.png') + ); return ` - - - - - - - - - -
-
- - - - `; + + + + + + + + + +
+
+ Logo +

LaunchMap

+
+ + + +`; } diff --git a/webview/style.css b/webview/style.css index 5ccf14d..7f2d9ee 100644 --- a/webview/style.css +++ b/webview/style.css @@ -1,6 +1,7 @@ @import './styles/base.css'; @import './styles/edges.css'; @import './styles/events.css'; +@import './styles/watermark.css'; @import './styles/components/common.css'; @import './styles/components/arguments.css'; @import './styles/components/environment-varaiables.css'; diff --git a/webview/styles/base.css b/webview/styles/base.css index b7368dc..201e7fc 100644 --- a/webview/styles/base.css +++ b/webview/styles/base.css @@ -14,16 +14,57 @@ top: 12px; right: 12px; z-index: 1000; - background: linear-gradient(145deg, #0e61a9, #0a3f6b); color: #ffffff; border: 2px solid #1c90f3; border-radius: 8px; - font-size: 14px; font-weight: bold; padding: 8px 14px; + box-shadow: 0 0 8px rgba(28, 144, 243, 0.4); + transition: all 0.2s ease; + cursor: pointer; +} + +#export-btn:hover { + background: linear-gradient(145deg, #1287e2, #0b5185); + box-shadow: 0 0 12px rgba(28, 144, 243, 0.6); + transform: translateY(-1px); +} + +#export-btn:active { + transform: translateY(0); + box-shadow: 0 0 6px rgba(28, 144, 243, 0.3); +} +#zoom-layer { + transform-origin: 0 0; + will-change: transform; +} + +#editor { + width: 100%; + height: 100vh; + background-color: #1e1e1e; + color: white; + position: relative; + overflow: scroll; + font-family: monospace; + margin-top: 40px; +} + +#export-btn { + position: fixed; + top: 12px; + right: 12px; + z-index: 1000; + background: linear-gradient(145deg, #0e61a9, #0a3f6b); + color: #ffffff; + border: 2px solid #1c90f3; + border-radius: 8px; + font-size: 14px; + font-weight: bold; + padding: 8px 14px; box-shadow: 0 0 8px rgba(28, 144, 243, 0.4); transition: all 0.2s ease; cursor: pointer; @@ -41,6 +82,6 @@ } #zoom-layer { - transform-origin: 0 0; - will-change: transform; + transform-origin: 0 0; + will-change: transform; } \ No newline at end of file diff --git a/webview/styles/watermark.css b/webview/styles/watermark.css new file mode 100644 index 0000000..16d1899 --- /dev/null +++ b/webview/styles/watermark.css @@ -0,0 +1,55 @@ +#watermark { + position: fixed; + bottom: 24px; + left: 24px; + z-index: 1000; + background: none; + color: rgba(255, 255, 255, 0.82); + border-radius: 16px; + font-size: 36px; + font-weight: 700; + letter-spacing: 1px; + padding: 0; + cursor: default; + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); + opacity: 0.35; + user-select: none; + pointer-events: none; +} + +#watermark img { + width: 60px; + height: 60px; + margin-right: 0; + border-radius: 10px; + object-fit: contain; + opacity: 0.95; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); + pointer-events: none; +} + +#watermark p { + font-family: 'League Spartan', sans-serif; + font-weight: 700; + margin: 0; + color: rgba(220, 220, 220, 0.9); + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); + user-select: none; + pointer-events: none; +} + +@media (max-width: 768px) { + #watermark { + font-size: 24px; + gap: 10px; + } + + #watermark img { + width: 40px; + height: 40px; + } +} \ No newline at end of file