diff --git a/desktop/src/app/components/apps/browser/browser.component.html b/desktop/src/app/components/apps/browser/browser.component.html new file mode 100644 index 0000000..271a0d9 --- /dev/null +++ b/desktop/src/app/components/apps/browser/browser.component.html @@ -0,0 +1,29 @@ +
+ +
+ +
+ + +
+
+ + +
+ + @if (isLoading()) { +
Loading…
+ } +
+
diff --git a/desktop/src/app/components/apps/browser/browser.component.scss b/desktop/src/app/components/apps/browser/browser.component.scss new file mode 100644 index 0000000..b6340b4 --- /dev/null +++ b/desktop/src/app/components/apps/browser/browser.component.scss @@ -0,0 +1,96 @@ +:host { + display: block; + width: 100%; + height: 100%; +} + +.browser { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background: #1e1e1e; +} + +.browser-toolbar { + display: flex; + align-items: center; + height: 40px; + padding: 0 8px; + background: #2d2d2d; + border-bottom: 1px solid #404040; + gap: 6px; +} + +.nav-btn { + width: 32px; + height: 30px; + border: none; + background: transparent; + color: #ccc; + font-size: 18px; + cursor: pointer; + border-radius: 4px; + + &:hover { + background: rgba(255, 255, 255, 0.08); + } +} + +.url-bar { + flex: 1; + display: flex; + height: 30px; + border: 1px solid #555; + border-radius: 6px; + background: #383838; + overflow: hidden; + + &:focus-within { + border-color: #0078d4; + } +} + +.url-input { + flex: 1; + border: none; + outline: none; + background: transparent; + color: #e0e0e0; + font-size: 13px; + padding: 0 10px; +} + +.go-btn { + width: 50px; + border: none; + background: #0078d4; + color: #fff; + font-size: 12px; + cursor: pointer; + + &:hover { + background: #1a86d9; + } +} + +.browser-content { + flex: 1; + position: relative; +} + +.browser-frame { + width: 100%; + height: 100%; + border: none; + background: #fff; +} + +.browser-loading { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #888; + font-size: 14px; +} diff --git a/desktop/src/app/components/apps/browser/browser.component.ts b/desktop/src/app/components/apps/browser/browser.component.ts new file mode 100644 index 0000000..45f8444 --- /dev/null +++ b/desktop/src/app/components/apps/browser/browser.component.ts @@ -0,0 +1,40 @@ +import { Component, signal } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'app-browser', + standalone: true, + imports: [CommonModule], + templateUrl: './browser.component.html', + styleUrl: './browser.component.scss', +}) +export class BrowserComponent { + readonly url = signal('https://www.wikipedia.org'); + readonly inputUrl = signal('https://www.wikipedia.org'); + readonly isLoading = signal(false); + + navigate(): void { + let target = this.inputUrl().trim(); + if (!target.startsWith('http://') && !target.startsWith('https://')) { + target = 'https://' + target; + } + this.inputUrl.set(target); + this.url.set(target); + } + + onUrlKeydown(event: KeyboardEvent): void { + if (event.key === 'Enter') { + this.navigate(); + } + } + + onLoad(): void { + this.isLoading.set(false); + } + + refresh(): void { + this.isLoading.set(true); + this.url.set(this.url() + ' '); // Force iframe reload + setTimeout(() => this.url.set(this.inputUrl()), 50); + } +}