mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-04 18:58:36 +00:00
Style the demo index.html with a dark background
Note that the slide_puzzle is a bit different because it tries to fill the viewport with the canvas
This commit is contained in:
Olivier Goffart
parent
8f51e8feda
commit
40fc7422ea
7 changed files with 226 additions and 15 deletions
|
|
@ -13,9 +13,45 @@
|
|||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Slint UI Widget Gallery Demo (Web Assembly version)</title>
|
||||
<title>Slint Widget Gallery Demo (Web Assembly version)</title>
|
||||
</head>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(108.19% 165.77% at 1.67% -32.72%, #2C2F36 10%, #040708 96.35%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
max-width: 1100px;
|
||||
margin: 0px auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
p:not(.links) {
|
||||
text-align: left;
|
||||
padding: 1ex 5ex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
padding: 0.5ex 1ex
|
||||
}
|
||||
|
||||
a {
|
||||
color: #DBFF00
|
||||
}
|
||||
|
||||
a:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
canvas:focus {
|
||||
outline: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
canvas:focus {
|
||||
outline: none;
|
||||
touch-action: none;
|
||||
|
|
@ -35,13 +71,15 @@
|
|||
</style>
|
||||
|
||||
<body>
|
||||
<p>This is the <a href="https://sixtyfps.io">Slint</a> UI Widget Gallery Demo compiled to WebAssembly. It demonstrates different re-usable graphical
|
||||
<h1>Slint Gallery</h1>
|
||||
<p>This is the <a href="https://sixtyfps.io">Slint</a> UI Widget Gallery Demo compiled to WebAssembly. It demonstrates
|
||||
different re-usable graphical
|
||||
elements.</p>
|
||||
<div id="spinner" style="position: relative;">
|
||||
<div class="spinner">Loading...</div>
|
||||
</div>
|
||||
<canvas id="canvas" width="640" height="480"></canvas>
|
||||
<p>
|
||||
<p class="links">
|
||||
<a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/gallery/gallery.slint">
|
||||
View Source Code on GitHub</a> -
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -13,7 +13,39 @@
|
|||
|
||||
<head>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
||||
<title>Slint Image filter demo</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(108.19% 165.77% at 1.67% -32.72%, #2C2F36 10%, #040708 96.35%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
max-width: 1100px;
|
||||
margin: 0px auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
p:not(.links) {
|
||||
text-align: left;
|
||||
padding: 1ex 5ex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
padding: 0.5ex 1ex
|
||||
}
|
||||
|
||||
a {
|
||||
color: #DBFF00
|
||||
}
|
||||
|
||||
a:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* beautify ignore:start */
|
||||
.spinner:before {
|
||||
content: ''; box-sizing: border-box; position: absolute;
|
||||
|
|
@ -31,12 +63,13 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Image Filter</h1>
|
||||
<p>This is the <a href="https://sixtyfps.io">Slint</a> Image Filter example compiled to WebAssembly.</p>
|
||||
<div id="spinner" style="position: relative;">
|
||||
<div class="spinner">Loading...</div>
|
||||
</div>
|
||||
<canvas id="canvas"></canvas>
|
||||
<p>
|
||||
<p class="links">
|
||||
<a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/imagefilter/main.rs">
|
||||
View Source Code on GitHub</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,38 @@
|
|||
<head>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(108.19% 165.77% at 1.67% -32.72%, #2C2F36 10%, #040708 96.35%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
max-width: 1100px;
|
||||
margin: 0px auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
p:not(.links) {
|
||||
text-align: left;
|
||||
padding: 1ex 5ex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
padding: 0.5ex 1ex
|
||||
}
|
||||
|
||||
a {
|
||||
color: #DBFF00
|
||||
}
|
||||
|
||||
a:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* beautify ignore:start */
|
||||
.spinner:before {
|
||||
content: ''; box-sizing: border-box; position: absolute;
|
||||
|
|
@ -36,7 +68,7 @@
|
|||
<div class="spinner">Loading...</div>
|
||||
</div>
|
||||
<canvas id="canvas"></canvas>
|
||||
<p>
|
||||
<p class="links">
|
||||
<a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/memory/main.rs">
|
||||
View Source Code on GitHub</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,38 @@
|
|||
<head>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(108.19% 165.77% at 1.67% -32.72%, #2C2F36 10%, #040708 96.35%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
max-width: 1100px;
|
||||
margin: 0px auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
p:not(.links) {
|
||||
text-align: left;
|
||||
padding: 1ex 5ex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
padding: 0.5ex 1ex
|
||||
}
|
||||
|
||||
a {
|
||||
color: #DBFF00
|
||||
}
|
||||
|
||||
a:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* beautify ignore:start */
|
||||
.spinner:before {
|
||||
content: ''; box-sizing: border-box; position: absolute;
|
||||
|
|
@ -36,7 +68,7 @@
|
|||
<div class="spinner">Loading...</div>
|
||||
</div>
|
||||
<canvas id="canvas"></canvas>
|
||||
<p>
|
||||
<p class="links">
|
||||
<a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/plotter/main.rs">
|
||||
View Source Code on GitHub</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -13,12 +13,39 @@
|
|||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Slint UI Printer Demo (Web Assembly version)</title>
|
||||
<title>Slint Printer Demo (Web Assembly version)</title>
|
||||
<style>
|
||||
canvas {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(108.19% 165.77% at 1.67% -32.72%, #2C2F36 10%, #040708 96.35%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
max-width: 1100px;
|
||||
margin: 0px auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
p:not(.links) {
|
||||
text-align: left;
|
||||
padding: 1ex 5ex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
padding: 0.5ex 1ex
|
||||
}
|
||||
|
||||
a {
|
||||
color: #DBFF00
|
||||
}
|
||||
|
||||
a:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
canvas:focus {
|
||||
outline: none;
|
||||
touch-action: none;
|
||||
|
|
@ -56,14 +83,16 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<p class="hide-in-mobile-landscape">This is the <a href="https://sixtyfps.io">Slint</a> UI Printer Demo compiled to WebAssembly. It simulates the
|
||||
<h1 class="hide-in-mobile-landscape">Printer Demo</h1>
|
||||
<p class="hide-in-mobile-landscape">This is the <a href="https://sixtyfps.io">Slint</a> Printer Demo compiled to
|
||||
WebAssembly. It simulates the
|
||||
touch user interface of
|
||||
the advanced "Print Machine 2000", without actually printing anything.</p>
|
||||
<div id="spinner" style="position: relative;">
|
||||
<div class="spinner">Loading...</div>
|
||||
</div>
|
||||
<canvas id="canvas" width="640" height="480" unselectable="on"></canvas>
|
||||
<p class="hide-in-mobile-landscape">
|
||||
<p class="hide-in-mobile-landscape links">
|
||||
<a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/printerdemo/ui/printerdemo.slint">
|
||||
View Source Code on GitHub</a> -
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -13,12 +13,40 @@
|
|||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Slint UI Printer Demo (Web Assembly version)</title>
|
||||
<title>Slint Printer Demo (Old)</title>
|
||||
<style>
|
||||
canvas {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(108.19% 165.77% at 1.67% -32.72%, #2C2F36 10%, #040708 96.35%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
max-width: 1100px;
|
||||
margin: 0px auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
p:not(.links) {
|
||||
text-align: left;
|
||||
padding: 1ex 5ex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
padding: 0.5ex 1ex
|
||||
}
|
||||
|
||||
a {
|
||||
color: #DBFF00
|
||||
}
|
||||
|
||||
a:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
canvas:focus {
|
||||
outline: none;
|
||||
touch-action: none;
|
||||
|
|
@ -57,14 +85,16 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<p class="hide-in-mobile-landscape">This is the <a href="https://sixtyfps.io">Slint</a> UI Printer Demo compiled to WebAssembly. It simulates the
|
||||
<h1 class="hide-in-mobile-landscape">Old Printer Demo</h1>
|
||||
<p class="hide-in-mobile-landscape">This is the <a href="https://sixtyfps.io">Slint</a> Printer Demo compiled to
|
||||
WebAssembly. It simulates the
|
||||
touch user interface of
|
||||
the advanced "Print Machine 2000", without actually printing anything.</p>
|
||||
<div id="spinner" style="position: relative;">
|
||||
<div class="spinner">Loading...</div>
|
||||
</div>
|
||||
<canvas id="canvas" width="640" height="480" unselectable="on"></canvas>
|
||||
<p class="hide-in-mobile-landscape">
|
||||
<p class="hide-in-mobile-landscape links">
|
||||
<a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/printerdemo_old/ui/printerdemo.slint">
|
||||
View Source Code on GitHub</a> -
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -10,6 +10,23 @@
|
|||
<title>Slint Slide Puzzle Demo (Web Assembly version)</title>
|
||||
</head>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(108.19% 165.77% at 1.67% -32.72%, #2C2F36 10%, #040708 96.35%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #DBFF00
|
||||
}
|
||||
|
||||
a:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
canvas:focus {
|
||||
outline: none;
|
||||
touch-action: none;
|
||||
|
|
@ -56,7 +73,7 @@
|
|||
build is done for demonstration purposes. Native applications are the real target of the toolkit.
|
||||
</p>
|
||||
<canvas id="canvas"></canvas>
|
||||
<p>
|
||||
<p class="links">
|
||||
<a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/slide_puzzle/">
|
||||
View Source Code on GitHub</a> -
|
||||
<a
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue