Tooloop/Tooloop-Kiosk-Browser
2
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

make the fallback page useful, fixes #3

Browse Source
This commit is contained in:
Daniel Stock
2024-05-31 15:01:11 +02:00
parent 57588242c4
commit a8b98c9226
1 changed files with 156 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+156 -12
View File
@@ -6,32 +6,176 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooloop Kiosk Browser</title> <title>Tooloop Kiosk Browser</title>
<style> <style>
* {
font-family: system-ui, sans-serif;
font-weight: lighter;
}
html, html,
body { body {
background-color: black; font-family: system-ui, sans-serif;
display: flex; display: flex;
height: 100%; height: 100%;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
font-size: 18px;
color: white;
margin: 0;
padding: 0;
} }
h1, p { html {
color: darkslateblue; /* background-color: #000; */
margin: 0.25em; background-image: url('images/icon-512.png');
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
body {
backdrop-filter: blur(10px) brightness(50%);
}
h1,
h2 {
line-height: 1;
margin: 1rem 0 1.333rem 0;
}
p {
line-height: 1.333;
margin: 1rem 0;
}
pre,
code {
background-color: hsl(0, 0%, 25%);
color: #f2f2f2;
font-size: 0.9rem;
padding: 0.1666em 0.333em;
}
pre {
overflow: auto;
}
#info {
max-width: 1280px;
margin: 0;
padding: 0 4rem;
height: 540px;
display: flex;
flex-direction: column;
}
#header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
#header img {
width: 3rem;
height: 3rem;
}
#header h1 {
font-weight: 400;
}
.columns {
display: flex;
gap: 2rem;
flex-grow: 1;
max-height: 100%;
}
.card {
width: calc(calc(50% - 5rem));
color: black;
background-color: white;
padding: 1.1666rem 2rem;
border-radius: 0.5rem;
overflow: auto;
}
.card h2 {
color: #E6004D;
font-weight: 500;
}
@media screen and (max-width: 1024px) {
body,
html {
display: block;
/* height: auto; */
}
#info {
height: initial;
padding: 1rem;
}
.columns {
display: block;
}
.card {
width: calc(100% - 4rem);
}
.card+.card {
margin-top: 1rem;
}
pre {
white-space: preserve;
}
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Tooloop Kiosk Browser</h1> <main id="info">
<p>www.tooloop.de</p>
<div id="header" role="banner">
<img src="images/icon-512.png" alt="Application Icon" role="presentation">
<h1>Tooloop Kiosk Browser</h1>
</div>
<div class="columns">
<article class="card">
<h2>Add your content</h2>
<p>You can load a local page or an online ressource.</p>
<p>
Put your local content in <code>/assets/data/index.html</code>
or configure a URL in the config file (&rarr; see <i>Configuration</i>).
</p>
</article>
<article class="card">
<h2>Configuration</h2>
<p>If you need a config file, put it in either of these locations:</p>
<ol>
<li><code>/assets/presentation/config.json</code></li>
<li>The application folder</li>
</ol>
<p>Here is an example:</p>
<p>
<pre><code>{
"url": "https://www.tooloop.de",
"allowedDomains": [
"tooloop.de",
"www.tooloop.de"
],
"logPath": "/assets/logs/Tooloop-Kiosk-Browser.log"
}</code></pre>
</p>
</article>
</div>
</main>
</body> </body>
</html> </html>