From 1444c945deaa01bf6f116f837dbbd79f3afa12ed Mon Sep 17 00:00:00 2001 From: Tasia Date: Thu, 22 Feb 2024 23:18:12 +0100 Subject: [PATCH] feat: Create the user settings app --- apps/user_settings.json | 4 + apps/user_settings/app.js | 24 +++++ apps/user_settings/body.html | 130 ++++++++++++++++++++++++++++ apps/user_settings/script.js | 3 + apps/user_settings/style.css | 1 + apps/user_settings/tildefriends.css | 114 ++++++++++++++++++++++++ 6 files changed, 276 insertions(+) create mode 100644 apps/user_settings.json create mode 100644 apps/user_settings/app.js create mode 100644 apps/user_settings/body.html create mode 100644 apps/user_settings/script.js create mode 100644 apps/user_settings/style.css create mode 100644 apps/user_settings/tildefriends.css diff --git a/apps/user_settings.json b/apps/user_settings.json new file mode 100644 index 000000000..94b066293 --- /dev/null +++ b/apps/user_settings.json @@ -0,0 +1,4 @@ +{ + "type": "tildefriends-app", + "emoji": "⚙️" +} \ No newline at end of file diff --git a/apps/user_settings/app.js b/apps/user_settings/app.js new file mode 100644 index 000000000..e01f0e369 --- /dev/null +++ b/apps/user_settings/app.js @@ -0,0 +1,24 @@ +async function main() { + // Get body.html + const body = utf8Decode(await getFile("body.html")); + + // Build the document + const document = ` + + + + + + + + + + ${body} + + `; + + // Send it to the browser + app.setDocument(document); +} + +main(); diff --git a/apps/user_settings/body.html b/apps/user_settings/body.html new file mode 100644 index 000000000..b0a7dc8ac --- /dev/null +++ b/apps/user_settings/body.html @@ -0,0 +1,130 @@ +

h1

+

h2

+

h3

+ +Notice: this example app fetches an image and an audio file from a third-party website. +Those will not work offline. This is a link. + +
+
+ + + + + + + +
+
+ + +x = 5; +y = 6; +z = x + y; + + +
+
+ + + +
+ +Italian Trulli + + +
+ Hello +
+ Hello +
+ Hello +
+ Hello +
+
+
+
+ +

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.

+ +

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.

+ +

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.

+ +

Here is a quote from WWF's website:

+ +
+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. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly
+ +

An Unordered HTML List

+ + + +

An Ordered HTML List

+ +
    +
  1. Coffee
    2. +
  2. Tea
    3. +
  3. Milk
    4. +
+ + + +
+
+ + + + +
+
+ + \ No newline at end of file diff --git a/apps/user_settings/script.js b/apps/user_settings/script.js new file mode 100644 index 000000000..93968b41c --- /dev/null +++ b/apps/user_settings/script.js @@ -0,0 +1,3 @@ +function hello() { + alert("Hello !"); +} \ No newline at end of file diff --git a/apps/user_settings/style.css b/apps/user_settings/style.css new file mode 100644 index 000000000..c84ecefcd --- /dev/null +++ b/apps/user_settings/style.css @@ -0,0 +1 @@ +/* */ \ No newline at end of file diff --git a/apps/user_settings/tildefriends.css b/apps/user_settings/tildefriends.css new file mode 100644 index 000000000..01c0e50e0 --- /dev/null +++ b/apps/user_settings/tildefriends.css @@ -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: + * + * + * 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; +}