pear-bridge
Version:
Local HTTP Bridge for Pear Desktop Applications
164 lines (156 loc) • 5.61 kB
HTML
<html>
<head>
<title>Not Found</title>
</head>
<body>
<style>
pear-ctrl[data-platform=darwin] {
margin-top: 24px;
margin-left: 12px;
}
#window-controls {
-webkit-app-region: drag;
padding: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
white-space: nowrap;
position: fixed;
z-index: 100;
width: 100%;
height: 50px;
left: 0;
top: 0;
}
</style>
<template id="svg-pattern-template">
<svg id="svg-pattern" xmlns="http://www.w3.org/2000/svg" width="150" height="190" viewBox="0 0 150 190">
<defs>
<symbol id="complex-shape" viewBox="0 0 45 45">
<path d="M17.7632 2.75H19.3421V5.7125H17.7632V2.75Z" fill="#1E1E1E"/>
<path d="M16.9737 6.65V7.25H15.3947V8H21.7105V7.25H20.1316V6.0875H18.5526V6.65H16.9737Z" fill="#1E1E1E"/>
<path d="M23.2895 8.375H18.5526V8.9375H13.8158V10.2875H23.2895V8.375Z" fill="#1E1E1E"/>
<path d="M24.8684 10.6625H18.5526V11.225H12.2368V12.575H24.8684V10.6625Z" fill="#1E1E1E"/>
<path d="M24.8684 12.95H18.5526V13.5125H12.2368V14.8625H24.8684V12.95Z" fill="#1E1E1E"/>
<path d="M26.4474 15.2375H18.5526V15.8H10.6579V17.15H26.4474V15.2375Z" fill="#1E1E1E"/>
<path d="M26.4474 17.525H18.5526V18.0875H10.6579V19.4375H26.4474V17.525Z" fill="#1E1E1E"/>
<path d="M28.0263 19.8125H18.5526V20.375H9.07895V21.725H28.0263V19.8125Z" fill="#1E1E1E"/>
<path d="M29.6053 22.1H18.5526V22.6625H7.5V24.0125H29.6053V22.1Z" fill="#1E1E1E"/>
<path d="M29.6053 24.3875H18.5526V24.95H7.5V26.3H29.6053V24.3875Z" fill="#1E1E1E"/>
<path d="M29.6053 26.675H18.5526V27.2375H7.5V28.5875H29.6053V26.675Z" fill="#1E1E1E"/>
<path d="M26.4474 28.9625H18.5526V29.525H10.6579V30.875H26.4474V28.9625Z" fill="#1E1E1E"/>
<path d="M23.2895 31.25H18.5526V31.8125H13.8158V32.75H23.2895V31.25Z" fill="#1E1E1E"/>
</symbol>
<pattern id="logo-pattern" width="150" height="190" patternUnits="userSpaceOnUse">
<use href="#complex-shape" x="55" y="5" width="150" height="100"/>
<use href="#complex-shape" x="-20" y="95" width="150" height="100"/>
</pattern>
</defs>
<rect width="150" height="190" fill="url(#logo-pattern)"/>
</svg>
</template>
<template id="main-view">
<style>
#view {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 68px);
width: 100%;
box-sizing: border-box;
font-size: 16px;
background-repeat: repeat;
background-size: 150px 190px;
margin-top: 50px;
background-color: #151517;
}
#panel {
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
user-select: none;
}
#info, #message {
margin: 1em 0;
}
#headline {
font-weight: 400;
font-family: Inter, Helvetica, sans-serif;
font-size: 2.50em;
margin: 0.5em 0;
}
#message {
font-weight: 600;
font-family: Inter, Helvetica, sans-serif;
font-size: 1.25em;
}
#info {
font-family: Inter, Helvetica, sans-serif;
font-size: 1em;
font-weight: 400;
color: #CED3DC;
}
.cta-container {
display: flex;
justify-content: center;
gap: 1em;
margin-top: 2em;
}
.cta {
font-family: Inter, Helvetica, sans-serif;
cursor: pointer;
border-radius: 8px;
width: 10em;
height: 2.5em;
box-sizing: border-box;
display: inline-block;
font-weight: 600;
font-size: 1em;
color: #151517;
background: #B0D944;
line-height: 0;
border: none;
outline: none;
}
</style>
<div id="view">
<div id="panel">
<div id="headline">Entrypoint Not Found</div>
<div id="message">Application does not contain __url__</div>
<div id="info">__name__ __version__</div>
<div class="cta-container">
<button id="back" class="cta" style="display: none;">Back</button>
<button id="quit" class="cta">Quit</button>
</div>
</div>
</div>
</template>
<div id="window-controls"><pear-ctrl></pear-ctrl></div>
<main-view></main-view>
<script type="module">
customElements.define('main-view', class extends HTMLElement {
constructor() {
super()
const template = document.getElementById('main-view').content
this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true))
const svgTemplate = document.getElementById('svg-pattern-template').content
const svg = svgTemplate.querySelector('#svg-pattern')
const url = 'data:image/svg+xml;base64,' + btoa(new XMLSerializer().serializeToString(svg))
this.shadowRoot.querySelector('#view').style.backgroundImage = `url('${url}')`
}
connectedCallback() {
const shadowRoot = this.shadowRoot;
shadowRoot.querySelector('#back').onclick = () => window.history.back()
shadowRoot.querySelector('#quit').onclick = () => Pear.Window.self.close()
document.addEventListener('DOMContentLoaded', () => {
if (window.history.length > 1) {
shadowRoot.querySelector('#back').style.display = 'inline-block'
}
})
}
})
</script>
</body>
</html>