Compare commits
29 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
fa9876cb21 | ||
|
|
76d60330ea | ||
|
|
6bc0694776 | ||
|
|
a80ba8d598 | ||
|
|
c1bcfe6023 | ||
|
|
c43f16c5a3 | ||
|
|
65c7db6793 | ||
|
|
c9cff82d2d | ||
|
|
2779bac5da | ||
|
|
b44034c114 | ||
|
|
8ee0f166ae | ||
|
cca0087220 | ||
|
|
93559fc358 | ||
|
f06db1db91 | ||
|
|
abbb05f02d | ||
|
|
a1df530743 | ||
|
|
031f11c456 | ||
|
|
f675f7d8cc | ||
|
|
6ccfab84ac | ||
|
|
ae6866118b | ||
|
|
46f56682f1 | ||
|
|
5c8eafce99 | ||
|
|
aa5fb9e290 | ||
|
|
470a1fa1e0 | ||
|
|
3a64f5801a | ||
|
|
bc3d82fd56 | ||
|
|
d561cce786 | ||
|
|
3e92a445ec | ||
|
011142dc1a |
11 changed files with 203 additions and 154 deletions
49
.github/workflows/deploy.yml
vendored
Normal file
49
.github/workflows/deploy.yml
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
name: Deploy
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
name: Build
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout repo
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Setup Node
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
|
||||||
|
- name: Install dependencies
|
||||||
|
uses: bahmutov/npm-install@v1
|
||||||
|
|
||||||
|
- name: Build project
|
||||||
|
run: npx vite build --base="/FlowOS/"
|
||||||
|
|
||||||
|
- name: Upload production-ready build files
|
||||||
|
uses: actions/upload-artifact@v3
|
||||||
|
with:
|
||||||
|
name: production-files
|
||||||
|
path: ./dist
|
||||||
|
|
||||||
|
deploy:
|
||||||
|
name: Deploy
|
||||||
|
needs: build
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
if: github.ref == 'refs/heads/master'
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Download artifact
|
||||||
|
uses: actions/download-artifact@v3
|
||||||
|
with:
|
||||||
|
name: production-files
|
||||||
|
path: ./dist
|
||||||
|
|
||||||
|
- name: Deploy to GitHub Pages
|
||||||
|
uses: peaceiris/actions-gh-pages@v3
|
||||||
|
with:
|
||||||
|
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
publish_dir: ./dist
|
||||||
12
index.html
12
index.html
|
|
@ -5,6 +5,18 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>FlowOS</title>
|
<title>FlowOS</title>
|
||||||
<link rel="shortcut icon" href="./src/assets/flow.png" type="image/png">
|
<link rel="shortcut icon" href="./src/assets/flow.png" type="image/png">
|
||||||
|
|
||||||
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9675905177363247" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<!-- Google tag (gtag.js) -->
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X4XVQRWEVM"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
|
||||||
|
gtag('config', 'G-X4XVQRWEVM');
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="./src/bootloader.ts" type="module"></script>
|
<script src="./src/bootloader.ts" type="module"></script>
|
||||||
|
|
|
||||||
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "flowos",
|
"name": "flowos",
|
||||||
"version": "2.3.0",
|
"version": "2.4.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "flowos",
|
"name": "flowos",
|
||||||
"version": "2.3.0",
|
"version": "2.4.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"ansi-to-html": "^0.7.2",
|
"ansi-to-html": "^0.7.2",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "flowos",
|
"name": "flowos",
|
||||||
"version": "2.3.0",
|
"version": "2.4.0",
|
||||||
"description": "The most aesthetic webOS.",
|
"description": "The most aesthetic webOS.",
|
||||||
"main": "src/bootloader.ts",
|
"main": "src/bootloader.ts",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
56
public/privacy.html
Normal file
56
public/privacy.html
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<h1>Privacy Policy for Flow Works</h1>
|
||||||
|
|
||||||
|
<p>At FlowOS, accessible from https://flow-works.me, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by FlowOS and how we use it.</p>
|
||||||
|
|
||||||
|
<p>If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us.</p>
|
||||||
|
|
||||||
|
<h2>Log Files</h2>
|
||||||
|
|
||||||
|
<p>FlowOS follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
|
||||||
|
|
||||||
|
<h2>Cookies and Web Beacons</h2>
|
||||||
|
|
||||||
|
<p>Like any other website, FlowOS uses "cookies". These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
|
||||||
|
|
||||||
|
<h2>Google DoubleClick DART Cookie</h2>
|
||||||
|
|
||||||
|
<p>Google is one of a third-party vendor on our site. It also uses cookies, known as DART cookies, to serve ads to our site visitors based upon their visit to www.website.com and other sites on the internet. However, visitors may choose to decline the use of DART cookies by visiting the Google ad and content network Privacy Policy at the following URL – <a href="https://policies.google.com/technologies/ads">https://policies.google.com/technologies/ads</a></p>
|
||||||
|
|
||||||
|
<h2>Our Advertising Partners</h2>
|
||||||
|
|
||||||
|
<p>Some of advertisers on our site may use cookies and web beacons. Our advertising partners are listed below. Each of our advertising partners has their own Privacy Policy for their policies on user data. For easier access, we hyperlinked to their Privacy Policies below.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>Google</p>
|
||||||
|
<p><a href="https://policies.google.com/technologies/ads">https://policies.google.com/technologies/ads</a></p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Privacy Policies</h2>
|
||||||
|
|
||||||
|
<P>You may consult this list to find the Privacy Policy for each of the advertising partners of FlowOS.</p>
|
||||||
|
|
||||||
|
<p>Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on FlowOS, which are sent directly to users' browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.</p>
|
||||||
|
|
||||||
|
<p>Note that FlowOS has no access to or control over these cookies that are used by third-party advertisers.</p>
|
||||||
|
|
||||||
|
<h2>Third Party Privacy Policies</h2>
|
||||||
|
|
||||||
|
<p>FlowOS's Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options. </p>
|
||||||
|
|
||||||
|
<p>You can choose to disable cookies through your individual browser options. To know more detailed information about cookie management with specific web browsers, it can be found at the browsers' respective websites.</p>
|
||||||
|
|
||||||
|
<h2>Children's Information</h2>
|
||||||
|
|
||||||
|
<p>Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity.</p>
|
||||||
|
|
||||||
|
<p>FlowOS does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records.</p>
|
||||||
|
|
||||||
|
<h2>Online Privacy Policy Only</h2>
|
||||||
|
|
||||||
|
<p>This Privacy Policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in FlowOS. This policy is not applicable to any information collected offline or via channels other than this website.</p>
|
||||||
|
|
||||||
|
<h2>Consent</h2>
|
||||||
|
|
||||||
|
<p>By using our website, you hereby consent to our Privacy Policy and agree to its Terms and Conditions.</p>
|
||||||
|
|
@ -49,9 +49,6 @@ html {
|
||||||
|
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
.bx {
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
toolbar {
|
toolbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -64,6 +61,8 @@ toolbar {
|
||||||
border: 1px solid var(--surface-0);
|
border: 1px solid var(--surface-0);
|
||||||
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.2);
|
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.2);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
position: relvative;
|
||||||
|
z-index: 1001;
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
&.outlined {
|
&.outlined {
|
||||||
|
|
@ -168,128 +167,9 @@ window-area {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
launcher {
|
.gradient-blur {
|
||||||
position: absolute;
|
mask: linear-gradient(to bottom, transparent, black 5%), linear-gradient(to top, transparent, black 35%);
|
||||||
display: flex;
|
mask-size: 100% 50%;
|
||||||
flex-direction: column;
|
mask-repeat: no-repeat;
|
||||||
justify-content: center;
|
mask-position: top, bottom;
|
||||||
align-items: center;
|
|
||||||
top: 0;
|
|
||||||
background: color-mix(in srgb, var(--crust) 20%, transparent);
|
|
||||||
z-index: 99999999999999999999999;
|
|
||||||
width: calc(100vw + 20px);
|
|
||||||
height: calc(100vh + 20px);
|
|
||||||
gap: 20px;
|
|
||||||
transition: 0.2s opacity, 0.2s backdrop-filter;
|
|
||||||
margin: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
&[style*="opacity: 1;"] {
|
|
||||||
apps * {
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
apps {
|
|
||||||
max-height: 70vh;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 40px;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 40px;
|
|
||||||
overflow: scroll;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
app {
|
|
||||||
flex: 1 0 21%;
|
|
||||||
flex-grow: 0;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
min-width: 125px;
|
|
||||||
max-width: 125px;
|
|
||||||
text-align: center;
|
|
||||||
overflow: visible;
|
|
||||||
transition: transform 0.1s ease-in-out;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
|
|
||||||
div {
|
|
||||||
background: var(--surface-0);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.75));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: var(--app-radius);
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: fit-content;
|
|
||||||
height: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: background 0.1s ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
background: var(--mantle);
|
|
||||||
border: 2px solid var(--crust);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
width: 300px;
|
|
||||||
max-width: 100vw;
|
|
||||||
text-align: center;
|
|
||||||
transition: border 0.2s;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
border: 2px solid var(--text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
preloader {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 9999999;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: var(--crust);
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: opacity 1s;
|
|
||||||
|
|
||||||
.status, .done {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.done div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
flex {
|
|
||||||
flex: 1;
|
|
||||||
}
|
}
|
||||||
|
|
@ -116,7 +116,12 @@ window.console.group = (...args: any) => {
|
||||||
try {
|
try {
|
||||||
const args = new URLSearchParams(window.location.search)
|
const args = new URLSearchParams(window.location.search)
|
||||||
const kernel = new Kernel()
|
const kernel = new Kernel()
|
||||||
await kernel.boot(boot, progress, args)
|
writeln('/-----------------------------------------------\\')
|
||||||
|
writeln('| FlowOS is now discontinued. Starting in 10s...|')
|
||||||
|
writeln('\\-----------------------------------------------/')
|
||||||
|
setTimeout(() => {
|
||||||
|
kernel.boot(boot, progress, args).catch(e => console.error(e))
|
||||||
|
}, 10000)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
writeln()
|
writeln()
|
||||||
writeln('An error occured while booting FlowOS.')
|
writeln('An error occured while booting FlowOS.')
|
||||||
|
|
|
||||||
|
|
@ -16,15 +16,34 @@ const BootLoader: Process = {
|
||||||
const { fs } = process
|
const { fs } = process
|
||||||
const wm = await process.loadLibrary('lib/WindowManager')
|
const wm = await process.loadLibrary('lib/WindowManager')
|
||||||
const launcher = await process.loadLibrary('lib/Launcher')
|
const launcher = await process.loadLibrary('lib/Launcher')
|
||||||
|
const { Input } = await process.loadLibrary('lib/Components')
|
||||||
|
|
||||||
const input = new HTML('input').attr({
|
const input = Input.new().attr({
|
||||||
type: 'text',
|
type: 'text',
|
||||||
placeholder: 'Search'
|
placeholder: 'Search'
|
||||||
|
}).style({
|
||||||
|
width: '100%',
|
||||||
|
'border-radius': '10px',
|
||||||
|
padding: '5px',
|
||||||
|
'margin-bottom': '10px',
|
||||||
|
position: 'sticky',
|
||||||
|
top: '0'
|
||||||
}).on('keyup', () => {
|
}).on('keyup', () => {
|
||||||
apps.elm.innerHTML = ''
|
apps.elm.innerHTML = ''
|
||||||
renderApps().catch(e => console.error(e))
|
renderApps().catch(e => console.error(e))
|
||||||
}).appendTo(launcher.element)
|
}).appendTo(launcher.element)
|
||||||
const apps = new HTML('apps').appendTo(launcher.element)
|
|
||||||
|
const apps = new HTML('div').style({
|
||||||
|
overflow: 'scroll',
|
||||||
|
height: 'max-content',
|
||||||
|
position: 'relative'
|
||||||
|
})
|
||||||
|
|
||||||
|
new HTML('div').style({
|
||||||
|
height: '100%',
|
||||||
|
overflow: 'scroll',
|
||||||
|
'padding-bottom': '30px'
|
||||||
|
}).append(apps).appendTo(launcher.element).class('gradient-blur')
|
||||||
|
|
||||||
const renderApps = async (): Promise<void> => {
|
const renderApps = async (): Promise<void> => {
|
||||||
apps.html('')
|
apps.html('')
|
||||||
|
|
@ -36,13 +55,21 @@ const BootLoader: Process = {
|
||||||
const path = Buffer.from(data).toString()
|
const path = Buffer.from(data).toString()
|
||||||
const executable = await process.kernel.getExecutable(path) as Process
|
const executable = await process.kernel.getExecutable(path) as Process
|
||||||
|
|
||||||
const appElement = new HTML('app').on('click', () => {
|
const appElement = new HTML('div').style({
|
||||||
|
display: 'flex',
|
||||||
|
'align-items': 'center',
|
||||||
|
padding: '5px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
gap: '10px',
|
||||||
|
'border-bottom': '1px solid var(--surface-0)'
|
||||||
|
}).on('click', () => {
|
||||||
process.launch(path).catch((e: any) => console.error(e))
|
process.launch(path).catch((e: any) => console.error(e))
|
||||||
launcher.toggle()
|
launcher.toggle()
|
||||||
}).appendTo(apps)
|
}).appendTo(apps)
|
||||||
new HTML('img').attr({
|
new HTML('img').attr({
|
||||||
src: executable.config.icon ?? nullIcon,
|
src: executable.config.icon ?? nullIcon,
|
||||||
alt: `${executable.config.name} icon`
|
alt: `${executable.config.name} icon`,
|
||||||
|
height: '40px'
|
||||||
}).appendTo(appElement)
|
}).appendTo(appElement)
|
||||||
new HTML('div').text(executable.config.name).appendTo(appElement)
|
new HTML('div').text(executable.config.name).appendTo(appElement)
|
||||||
}).catch((e: any) => console.error(e))
|
}).catch((e: any) => console.error(e))
|
||||||
|
|
@ -72,6 +99,19 @@ const BootLoader: Process = {
|
||||||
await wm.windowArea.appendTo(document.body)
|
await wm.windowArea.appendTo(document.body)
|
||||||
|
|
||||||
splashElement.cleanup()
|
splashElement.cleanup()
|
||||||
|
|
||||||
|
launcher.element.prepend(new HTML('div')
|
||||||
|
.html(`
|
||||||
|
<ins class="adsbygoogle"
|
||||||
|
style="display:block"
|
||||||
|
data-ad-format="fluid"
|
||||||
|
data-ad-layout-key="-if+5+1+2-3"
|
||||||
|
data-ad-client="ca-pub-9675905177363247"
|
||||||
|
data-ad-slot="2569234651"></ins>
|
||||||
|
<script>
|
||||||
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||||
|
</script>
|
||||||
|
`))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ const Components: Library = {
|
||||||
padding: '2.5px',
|
padding: '2.5px',
|
||||||
outline: 'none',
|
outline: 'none',
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
border: '1px solid const(--surface-0)'
|
border: '1px solid var(--surface-0)'
|
||||||
})
|
})
|
||||||
return input
|
return input
|
||||||
}
|
}
|
||||||
|
|
@ -30,8 +30,8 @@ const Components: Library = {
|
||||||
function shiftColor (col: string, amt: number): string {
|
function shiftColor (col: string, amt: number): string {
|
||||||
const num = parseInt(col, 16)
|
const num = parseInt(col, 16)
|
||||||
const r = (num >> 16) + amt
|
const r = (num >> 16) + amt
|
||||||
const b = ((num >> 8) & 0x00FF) + amt
|
const b = ((num >> 8) & 0x00_FF) + amt
|
||||||
const g = (num & 0x0000FF) + amt
|
const g = (num & 0x00_00_FF) + amt
|
||||||
const newColor = g | (b << 8) | (r << 16)
|
const newColor = g | (b << 8) | (r << 16)
|
||||||
return newColor.toString(16)
|
return newColor.toString(16)
|
||||||
}
|
}
|
||||||
|
|
@ -52,7 +52,7 @@ const Components: Library = {
|
||||||
button.style({
|
button.style({
|
||||||
background: 'var(--primary)',
|
background: 'var(--primary)',
|
||||||
color: 'var(--base)',
|
color: 'var(--base)',
|
||||||
border: '1px solid #' + shiftColor(document.documentElement.style.getPropertyValue('--primary').replace('#', ''), -40) + ''
|
border: `1px solid #${shiftColor(document.documentElement.style.getPropertyValue('--primary').replace('#', ''), -40)}`
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return button
|
return button
|
||||||
|
|
@ -77,11 +77,9 @@ const Components: Library = {
|
||||||
'border-radius': '5px',
|
'border-radius': '5px',
|
||||||
padding: '2.5px',
|
padding: '2.5px',
|
||||||
background: 'var(--base)',
|
background: 'var(--base)',
|
||||||
border: '1px solid const(--surface-1)'
|
border: '1px solid var(--surface-1)'
|
||||||
}).appendMany(
|
}).appendMany(
|
||||||
...options.map((option) => {
|
...options.map((option) => new HTML('option').text(option))
|
||||||
return new HTML('option').text(option)
|
|
||||||
})
|
|
||||||
)
|
)
|
||||||
return dropdown
|
return dropdown
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,25 +9,34 @@ const Launcher: Library = {
|
||||||
targetVer: '1.0.0-indev.0'
|
targetVer: '1.0.0-indev.0'
|
||||||
},
|
},
|
||||||
init: (l, k) => {
|
init: (l, k) => {
|
||||||
Launcher.data.element = new l.HTML('launcher').style({
|
Launcher.data.element = new l.HTML('div').style({
|
||||||
opacity: '0',
|
background: `${document.documentElement.style.getPropertyValue('--mantle')}E0`,
|
||||||
'backdrop-filter': 'blur(0px)',
|
width: '350px',
|
||||||
'pointer-events': 'none'
|
height: '500px',
|
||||||
|
margin: '20px',
|
||||||
|
padding: '10px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
'border-radius': '20px',
|
||||||
|
border: '1px solid var(--surface-0)',
|
||||||
|
position: 'fixed',
|
||||||
|
bottom: '-500px',
|
||||||
|
left: '0',
|
||||||
|
transition: 'bottom 0.5s cubic-bezier(1,0,0,1)',
|
||||||
|
'z-index': '1000',
|
||||||
|
'box-shadow': '0 0 10px 0 rgba(0,0,0,0.5)',
|
||||||
|
'user-select': 'none',
|
||||||
|
'backdrop-filter': 'blur(10px)'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
toggle: () => {
|
toggle: () => {
|
||||||
if (isLauncherOpen) {
|
if (isLauncherOpen) {
|
||||||
Launcher.data.element.style({
|
Launcher.data.element.style({
|
||||||
opacity: '0',
|
bottom: '-500px'
|
||||||
'backdrop-filter': 'blur(0px)',
|
|
||||||
'pointer-events': 'none'
|
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
Launcher.data.element.style({
|
Launcher.data.element.style({
|
||||||
opacity: '1',
|
bottom: '68px'
|
||||||
'backdrop-filter': 'blur(10px)',
|
|
||||||
'pointer-events': 'all'
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ const StatusBar: Library = {
|
||||||
<div class="outlined" data-toolbar-id="start"><span class="material-symbols-rounded">space_dashboard</span></div>
|
<div class="outlined" data-toolbar-id="start"><span class="material-symbols-rounded">space_dashboard</span></div>
|
||||||
|
|
||||||
<div data-toolbar-id="apps"></div>
|
<div data-toolbar-id="apps"></div>
|
||||||
<flex></flex>
|
<div style="flex:1;"></div>
|
||||||
<div class="outlined" data-toolbar-id="plugins"><span class="material-symbols-rounded">expand_less</span></div>
|
<div class="outlined" data-toolbar-id="plugins"><span class="material-symbols-rounded">expand_less</span></div>
|
||||||
<div class="outlined" data-toolbar-id="controls">
|
<div class="outlined" data-toolbar-id="controls">
|
||||||
<span class="material-symbols-rounded battery">battery_2_bar</span>
|
<span class="material-symbols-rounded battery">battery_2_bar</span>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue