@silexlabs/silex-dashboard
Version:
Dashboard for Silex v3
278 lines (262 loc) • 8.38 kB
HTML
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/connectors-9d0c9569a2ce8afaa4a30a0534b3d0597c761c7e0e5280dcbc966dc2b709e98e.css" />
<!-- font google -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap" rel="stylesheet">
<style>
.before-js > * {
visibility: hidden;
opacity: 0;
transition: opacity .5s ease;
}
.before-js[data-gjs-type] > *, /* This is only inside the editor, .before-js needs to be on the body */
.after-js > * {
visibility: visible;
opacity: 1;
}
.before-js:before {
content: 'Loading';
position: absolute;
top: 49%;
left: 49%;
}
.before-js[data-gjs-type]:before, /* This is only inside the editor, .before-js needs to be on the body */
.after-js:before {
content: none;
}
/*BTNS*/
.button, .pointer {
cursor: pointer}
.button{
min-width:110px;
}
details {
max-height: 2em;
display: block;
overflow: hidden;
transition: max-height .75s ease;
}
details[open] {
max-height: 40em;
}
/*BTNS*/
a {
text-decoration: none;
color:#8873FE;
}
a:hover {
text-decoration: underline;
}
.uppercase {
text-transform: uppercase;
}
.underline:hover{
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-position: under;
}
/*footer position*/
.main-min-height {
min-height: calc(100vh - 560px);
}
/*footer position*/
/*label*/
::placeholder {
color: #8873FE;
}
input:focus {
border: 2px solid #9977FE;
background-color:#ffffff;
}
:focus {
outline: none;
}
/*label*/
.skeleton-anim:after {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
background:
linear-gradient(0.25turn, transparent, rgba(255,255,255,.75), transparent),
linear-gradient(transparent, transparent),
radial-gradient(38px circle at 19px 19px, transparent 50%, transparent 51%),
linear-gradient(transparent, transparent);
background-repeat: no-repeat;
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
animation: loading 1.5s infinite;
}
@keyframes loading {
to {
background-position: 200% 0, 0 0, 0 190px, 50px 195px;
}
}
/*FX ANIMATIONS*/
/*scale-round-inside_pour-BTN*/
.fx-scale-round {
position:relative;
z-index: 10;
overflow: hidden;
}
.fx-scale-round::after {
content: "";
background: #ffffff;
position: absolute;
z-index: -1;
border-radius: 50%;
left: -50%;
right: -50%;
top: -100%;
bottom: -100%;
transform: scale(0, 0);
transform-origin: center bottom;
transition: all 0.3s ease-out;
}
.fx-scale-round:hover {
transform-origin: center bottom;
transform: scale(1.1);
transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
}
.fx-scale-round:hover::after {
transform: scale(1, 1);
transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
}
/*scale-round-inside_pour-BTN*/
/*scale*/
.fx-scale:hover {
transform-origin: center bottom;
transform: scale(1.1);
transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
}
/*flash*/
.fx-flash:hover {
animation: flash-in .25s ;
}
/*flash-in animation*/
@keyframes flash-in{
0% {
opacity:.25;
}
100% {
opacity:1;
}
}
/*flash-in animation*/
/*FX ANIMATIONS*/
</style>
<script src="/js/vue.global.prod.js"></script>
<script src="/js/main.js"></script>
<script type="module">
const CONNECTORS_PATH = ''
const { createApp } = Vue;
const { api, constants, types } = silex;
const {
ConnectorType,
} = types
const {
setServerUrl,
getUser,
logout,
websiteDelete,
websiteDuplicate,
websiteList,
websiteCreate,
websiteMetaWrite,
connectorList,
} = api
function toSafeId(name) {
return name.replace(/[/\\?%*:|"<>]/g, '_')
}
const App = {
data() {
return {
websites: [],
connectors: [],
newWebsiteName: '',
showCreationForm: false,
error: null,
message: null,
loggedIn: false,
loading: true,
storage: null,
user: null,
showMenu: false,
empty: false,
}
},
mounted() {
this.init()
},
methods: {
async init() {
try {
// Init Silex server path
// Go up one level because of the language prefix
setServerUrl(window.location.origin)
await this.getConnectors()
} catch (error) {
console.error(error)
this.loading = false
this.error = ` - ${error.message}`
this.message = ''
}
},
getIcon(connector) {
return decodeURIComponent(connector.icon.split(',').slice(1).join(','))
},
getHref(connector) {
console.log(connector, connector.oauthUrl)
return connector.oauthUrl
},
getConnectorStyle(connector) {
return {
backgroundImage: `url(${connector.icon})`,
//color: connector.color,
//backgroundColor: connector.background
}
},
async getConnectors() {
try {
this.loading = true
const connectors = await connectorList({ type: ConnectorType.STORAGE })
this.connectors = connectors
this.loading = false
} catch (error) {
this.loading = false
console.error(error)
this.error = ` - ${error.message}`
this.message = ''
}
},
openLogin() {}
},
};
// Prepare elements for vue
document.querySelectorAll('[v-text], [v-html]')
.forEach(el => el.innerText = '')
document.querySelectorAll('[data-remove-href]')
.forEach(el => {
el.removeAttribute('href')
el.removeAttribute('data-remove-href')
})
// Create the app
const app = createApp(App);
// Mount the app
app.mount('.app');
// Remove loading
setTimeout(() => {
document.querySelector('.before-js').classList.add('after-js')
}, 100)
</script>
<title>Silex Dashboard</title>
<link rel="icon" href="/assets/favicon-32x32.png" />
<meta name="og:title" property="og:title" content="Silex Dashboard"/>
<link href="https://fonts.googleapis.com" rel="preconnect" ><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin ><link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" ></head>
<body id="i2hcfw" class="body app before-js"><A id="ixzhcr" href="/" class="button button-bar__item--secondary"></A><div id="imawg3" class="bg-silex-purpel"><div id="imgx81"><div id="iikf0s" class="box box_login"><div id="ie0dxn" class="text-centered"><img id="ior0hl" src="/assets/logo-silex.svg"/><P id="it2175" class="subtitle-16">Please login to continue<br/></P></div><H3 id="iqc1xf" class="margin-top">Recommended</H3><div id="in62y2"><DIV id="isqe61"><A id="i44y9w" href="https://" class="connector__card"><div id="io3lid" class="button-bar__item__icon"></div><div id="i87asw" class="connector__description">Login with <span href="" id="i0tt68">Name</span><br/></div></A></DIV></div><DETAILS id="ihn6fj"><SUMMARY id="i8w75b" class="margin-30">Advanced</SUMMARY><div id="igp4xl"><DIV id="ibi9qh"><A href="https://" class="connector__card"><div class="button-bar__item__icon"></div><div class="connector__description">Login with <span href="">Name</span><br/></div></A></DIV></div></DETAILS><div id="i3cney" class="button-bar"><A id="iacshy" class="button big-button connector__card"><div id="iiwn36"><div class="button-bar__item__icon"></div><div id="if4gvb">Name<br/></div></div><div id="isndui">This connector is about blablabla<br/></div></A></div><div id="ijflxq" class="text-centered">Do you need help? Check <a href="http://localhost:6805/?id=dashboard">the documentation</a>, the video tutorials or just ask for help in the forums or poke us in the chat.<br/></div></div><div id="i9msnk" class="text-white top-space-20">Insert your text here</div><div id="i6akll" class="button button--tertiary text-centered"></div></div></div><FOOTER class="footer"><div id="iprzeh" class="footer__column"><H3 href="" class="footer__item">Insert your text here</H3><A href="#" class="footer__item">Insert your text here</A></div></FOOTER></body>
</html>