-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathdemo.html
148 lines (146 loc) · 5.15 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>Browser Window web component</title>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #222;
color: #eee;
}
}
a[href] {
color: inherit;
}
img {
max-width: 100%;
height: auto;
}
p:first-child {
margin-top: 0;
}
.demo-layout {
display: flex;
flex-wrap: wrap;
gap: 3em 2em;
margin: 2em 0;
}
.demo-layout > * {
flex-grow: 1;
flex-basis: 20em;
}
.demo-bg-container {
display: flex;
justify-content: center;
align-items: center;
background-image: url(public/wallpaper.jpg);
background-size: cover;
padding: 3em;
}
</style>
<script type="module" src="./browser-window.js"></script>
<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://esm.sh/@zachleat/[email protected]"></script>
</head>
<body>
<header>
<h1>Browser Window component</h1>
</header>
<main>
<p>Used in demos as a way to fake a Safari-esque web browser window. Go back to the <a href="https://github.com/zachleat/browser-window/">source code on GitHub</a>.</p>
<div class="demo-layout">
<browser-window>
This is a test.
</browser-window>
<browser-window os="windows">
This one uses Windows-style buttons.
</browser-window>
<browser-window shadow>
This one has a big ’ol shadow.
</browser-window>
<!-- Make sure shadow inherits through -->
<div style="--bw-shadow-hsl: 150deg 30% 60%;">
<browser-window shadow>
This one has different shadow color.
</browser-window>
</div>
<browser-window mode="light" style="--bw-background: #ffcdcd;" url="https://example.com/">
This one has a themed color (light).
</browser-window>
<browser-window mode="dark" style="--bw-background: #5a0000;" url="https://example.com/">
This one has a themed color (dark).
</browser-window>
<browser-window flush>
<div style="background: #eee; color: #000; padding: .5em;">This content is flush to the window</div>
</browser-window>
<browser-window grayscale>
This one has grayscale buttons.
</browser-window>
<browser-window url="https://www.zachleat.com/web/">
This one has a URL bar.
</browser-window>
<browser-window mode="dark" url="" icon="" shadow="" flush="">
Testing
</browser-window>
<browser-window url="exalskjdkl">
This one has an invalid URL but still renders.
</browser-window>
<browser-window url="https://www.zachleat.com/web/" os="windows">
This one has a URL bar with Windows-style buttons.
</browser-window>
<browser-window url="https://www.zachleat.com/web/">
<img src="public/avatar.png" alt="Default Avatar" width="24" height="24" slot="icon">
This one has a URL bar with a specified icon.
</browser-window>
<browser-window url="https://www.zachleat.com/web/" icon>
This one has a URL bar with icon.
</browser-window>
<browser-window mode="light" url="https://www.zachleat.com/web/" icon>
This one forces light mode.
</browser-window>
<browser-window mode="dark" url="https://www.zachleat.com/web/" icon>
This one forces dark mode.
</browser-window>
<browser-window url="https://www.zachleat.com/web/" icon style="font-size: 12px">
This one scales with the parent font size (smaller).
</browser-window>
<browser-window url="https://www.zachleat.com/web/" icon style="font-size: 20px">
This one scales with the parent font size (larger).
</browser-window>
<div>
<resize-asaurus>
<browser-window url="https://github.com/zachleat/resizeasaurus" icon>
This one is resizeable using <a href="https://github.com/zachleat/resizeasaurus"><code><resize-asaurus></code></a>.
</browser-window>
</resize-asaurus>
</div>
<div>
<p>This one has an image screenshot.</p>
<browser-window url="https://resizeasaurus.zachleat.dev/demo.html" flush>
<img src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fresizeasaurus.zachleat.dev%2Fdemo.html/opengraph/" alt="resizeasaurus Web Component Demo screenshot" width="1200" height="630" loading="lazy" decoding="async">
</browser-window>
</div>
<div>
<p>This one has an iframe.</p>
<browser-window url="https://example.com/" flush>
<iframe src="https://example.com/" sandbox scrolling="no" style="pointer-events: none; width: 100%; height: 200px; border: none"></iframe>
</browser-window>
</div>
<div class="demo-bg-container">
<browser-window style="--bw-background: rgba(255,255,255,0.9);--bw-foreground: #000;">
This one has a background image container.
</browser-window>
</div>
<browser-window mode="dark" flush style="--bw-border: none;">
<div style="background-color: #fff; color: #555; padding: 1em;">This one tests border removal override (dark).</div>
</browser-window>
<browser-window mode="light" style="--bw-border: none">
This one tests border removal.
</browser-window>
</div>
</main>
</body>
</html>