aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 22:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

welcome screen

Browse Source
This commit is contained in:
dmc
2024-01-15 20:52:36 +01:00
parent df2bd1336f
commit 68c77b2a05
2 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/usage.mp4 Normal file
View File

Binary file not shown.

20
lib/system-status.js
View File

@@ -13,10 +13,24 @@ customElements.define('pear-welcome', class extends HTMLElement {
super()
this.template = document.createElement('template')
this.template.innerHTML = `
<style>
blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem; margin-top: -1rem; margin-bottom: 1rem; border-radius: 2px; }
blockquote::before { content: "✔"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
video { float: right; outline: 1px solid #323532; border-radius: 2px; }
#welcome { float: left; width: calc(100% - 420px); }
</style>
<blockquote>
<p>Pear is installed.</p>
<p> Pear is in the system PATH and ready to go .</p>
</blockquote>
<p>✔ Pear is in the system PATH and ready to go.</p>
<div id="welcome">
<h2> Welcome... </h2>
<p> ...to the Internet of Peers. <p>
<p> Pear provides the \`pear\` Command-line Interface as the primary interface for developing, sharing & maintaining unstoppable peer-to-peer applications and systems. </p>
<p> To get started, open a terminal, type \`pear\` and hit return. </p>
</div>
<video width="420" height="390" autoplay muted>
<source src="./assets/usage.mp4" type="video/mp4">
</video>
`
this.root = this.attachShadow({ mode: 'open' })
@@ -38,7 +52,7 @@ customElements.define('system-status', class extends HTMLElement {
<div id="panel">
<style>
#panel { user-select: none; }
blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem }
blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem; border-radius: 2px; }
blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
button { background: #151517; color: #B0D944; border: 1px solid; padding: .575em .65em; cursor: pointer; margin-top: 2.65rem; font-size: 1.25rem; }
#tip { text-indent: 4px; margin-top: -.25rem }