forked from cory/tildefriends
feat: Create the user settings app
This commit is contained in:
parent
4bfd9de100
commit
1444c945de
SSH Key Fingerprint:
SHA256:4dFCBYQmeZ32ZjN2tzEuVogmsKosrZFTyyZ+mI45fz0
4
apps/user_settings.json
Normal file
4
apps/user_settings.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"type": "tildefriends-app",
|
||||||
|
"emoji": "⚙️"
|
||||||
|
}
|
||||||
24
apps/user_settings/app.js
Normal file
24
apps/user_settings/app.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
async function main() {
|
||||||
|
// Get body.html
|
||||||
|
const body = utf8Decode(await getFile("body.html"));
|
||||||
|
|
||||||
|
// Build the document
|
||||||
|
const document = `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="tildefriends.css"/>
|
||||||
|
<link rel="stylesheet" href="style.css"/>
|
||||||
|
<script src="script.js" type="module"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${body}
|
||||||
|
</body>
|
||||||
|
</html>`;
|
||||||
|
|
||||||
|
// Send it to the browser
|
||||||
|
app.setDocument(document);
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
130
apps/user_settings/body.html
Normal file
130
apps/user_settings/body.html
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<h1>h1</h1>
|
||||||
|
<h2>h2</h2>
|
||||||
|
<h3>h3</h3>
|
||||||
|
|
||||||
|
Notice: this example app fetches an image and an audio file from a third-party website.
|
||||||
|
Those will not work offline. <a href="/">This is a link.</a>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<button class="red" onclick="hello()">button.red</button>
|
||||||
|
<button class="green">button.green</button>
|
||||||
|
<button class="blue">button.blue</button>
|
||||||
|
<button class="yellow">button.yellow</button>
|
||||||
|
<button>button</button>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<code>
|
||||||
|
x = 5;
|
||||||
|
y = 6;
|
||||||
|
z = x + y;
|
||||||
|
</code>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<audio controls>
|
||||||
|
<source src="https://www.audiocheck.net/Audio/audiocheck.net_brownnoise.ogg" type="audio/ogg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<img src="https://picsum.photos/id/37/500/250" alt="Italian Trulli">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="box flex">
|
||||||
|
Hello
|
||||||
|
<div class="box flex">
|
||||||
|
Hello
|
||||||
|
<div class="box flex">
|
||||||
|
Hello
|
||||||
|
<div class="box flex">
|
||||||
|
Hello
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim leo a urna gravida, vel pulvinar magna blandit. Cras eleifend, elit ac faucibus gravida, justo mauris ornare nisi, eget ultrices lorem tortor vitae purus. Quisque et dui arcu. Nam semper, mauris id molestie imperdiet, risus nunc dignissim dolor, nec cursus elit mi sit amet dui. Nulla aliquam id mauris sed posuere. Nam mollis velit luctus accumsan aliquam. In tempor, felis id finibus tincidunt, erat nulla vehicula orci, a venenatis mauris nunc et diam. Aliquam lorem sem, iaculis ut mollis in, feugiat a mauris. Nam laoreet vestibulum leo a aliquet. Nam sit amet neque erat.</p>
|
||||||
|
|
||||||
|
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor, sem ac pretium accumsan, dui sapien placerat ligula, ut maximus lacus eros sed tortor. Vivamus finibus facilisis felis, quis dictum felis vestibulum nec. Mauris eu facilisis est, nec tempor sem. Quisque ac ultricies tortor. Morbi et ante at dolor accumsan molestie. Curabitur facilisis condimentum lorem a luctus. Quisque lectus risus, vestibulum non malesuada quis, porta sed urna. Sed elementum magna in velit sagittis, vel fringilla ipsum pulvinar. Morbi nec lectus egestas, laoreet erat fringilla, tristique quam.</p>
|
||||||
|
|
||||||
|
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu mattis ante. Donec venenatis pretium ornare. Nulla vel purus cursus, molestie velit a, vehicula mi. Phasellus ac eleifend sapien, in euismod mauris. Donec quis nisi sodales, accumsan mi sed, malesuada purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent venenatis enim et nisi interdum, nec sodales diam suscipit. Etiam nisl neque, dapibus id felis eget, laoreet posuere eros. Donec arcu neque, aliquam vel fringilla ut, laoreet in velit. Ut tincidunt rutrum eros vel fringilla. Sed at eleifend sem. Pellentesque ut leo in ligula accumsan dignissim quis at justo. Donec luctus felis sed lacus pharetra aliquam. Nam volutpat quis tellus eget lobortis. Proin ultrices ante vitae quam efficitur accumsan.</p>
|
||||||
|
|
||||||
|
<p>Here is a quote from WWF's website:</p>
|
||||||
|
|
||||||
|
<blockquote cite="http://www.worldwildlife.org/who/index.html">
|
||||||
|
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Company</th>
|
||||||
|
<th>Contact</th>
|
||||||
|
<th>Country</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Alfreds Futterkiste</td>
|
||||||
|
<td>Maria Anders</td>
|
||||||
|
<td>Germany</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Centro comercial Moctezuma</td>
|
||||||
|
<td>Francisco Chang</td>
|
||||||
|
<td>Mexico</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ernst Handel</td>
|
||||||
|
<td>Roland Mendel</td>
|
||||||
|
<td>Austria</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Island Trading</td>
|
||||||
|
<td>Helen Bennett</td>
|
||||||
|
<td>UK</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Laughing Bacchus Winecellars</td>
|
||||||
|
<td>Yoshi Tannamuri</td>
|
||||||
|
<td>Canada</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Magazzini Alimentari Riuniti</td>
|
||||||
|
<td>Giovanni Rovelli</td>
|
||||||
|
<td>Italy</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h2>An Unordered HTML List</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tea</li>
|
||||||
|
<li>Milk</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>An Ordered HTML List</h2>
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tea</li>
|
||||||
|
<li>Milk</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<form">
|
||||||
|
<textarea rows="5" cols="32">This is a textarea.</textarea>
|
||||||
|
<br />
|
||||||
|
<div class="flex-column" style="align-items: start;">
|
||||||
|
<input type ="radio" />
|
||||||
|
<input type ="radio" />
|
||||||
|
<input type ="checkbox" />
|
||||||
|
<input type ="checkbox" />
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<input class="green" type="submit" value="Button">
|
||||||
|
</form>
|
||||||
3
apps/user_settings/script.js
Normal file
3
apps/user_settings/script.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
function hello() {
|
||||||
|
alert("Hello !");
|
||||||
|
}
|
||||||
1
apps/user_settings/style.css
Normal file
1
apps/user_settings/style.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
/* */
|
||||||
114
apps/user_settings/tildefriends.css
Normal file
114
apps/user_settings/tildefriends.css
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
/*
|
||||||
|
* Tilde Friends core stylesheet
|
||||||
|
* This is a prototype; things may change based on feedback.
|
||||||
|
*
|
||||||
|
* This Software is an external library that is part of
|
||||||
|
* Tilde Friends and is shared under the MIT license.
|
||||||
|
*
|
||||||
|
* Inject this file in your app at tildefriends.css
|
||||||
|
* and use this tag to import it:
|
||||||
|
* <link rel="stylesheet" href="tildefriends.css"/>
|
||||||
|
*
|
||||||
|
* Revision 0 / 2024 M02 19
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: white;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
.button,
|
||||||
|
input[type=button],
|
||||||
|
input[type=submit],
|
||||||
|
input[type=dropdown] {
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 4px;
|
||||||
|
|
||||||
|
&.red {
|
||||||
|
background-color: #bd1e24;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.green {
|
||||||
|
background-color: #18922d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blue {
|
||||||
|
background-color: #0067a7;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.yellow {
|
||||||
|
background-color: #ee9600;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(0.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
color: #268bd2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: #6c71c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #859900;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: #2aa198;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
border: 1px solid #ffffff40;
|
||||||
|
text-align: left;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background-color: #ffffff20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-flex-row {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background-color: #00000020;
|
||||||
|
border: 1px solid grey;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user