mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 05:14:23 +00:00
start styling setup
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
</template>
|
||||
|
||||
<style>
|
||||
:root, :root.light {
|
||||
:root {
|
||||
--primary-color: #2c3e50;
|
||||
--accent-background: rgb(30, 30, 82);
|
||||
--secondary-color: white;
|
||||
@@ -23,21 +23,6 @@
|
||||
--PI: 3.14159265358979;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--primary-color: white;
|
||||
--accent-background: rgb(56, 56, 112);
|
||||
--secondary-color: white;
|
||||
--background-color: rgb(32, 32, 32);
|
||||
--popup-color: rgb(58, 58, 58);
|
||||
--accent-color: #42b983;
|
||||
--hover-color: rgb(83, 83, 83);
|
||||
--accent-background-hover: #4380a8;
|
||||
--overlay-color: rgba(104, 104, 104, 0.575);
|
||||
--inactive-color: rgb(190, 190, 190);
|
||||
--highlight-backdrop: rgb(85, 63, 207);
|
||||
--hint-color: rgb(88, 91, 110);
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
:root {
|
||||
--primary-color: white;
|
||||
@@ -60,16 +45,6 @@
|
||||
color: var( --secondary-color );
|
||||
}
|
||||
|
||||
#themeSelector {
|
||||
background-color: rgba( 0, 0, 0, 0 );
|
||||
color: var( --primary-color );
|
||||
font-size: 130%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
@@ -136,6 +111,48 @@
|
||||
.clr-open {
|
||||
border: black solid 1px !important;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 2%;
|
||||
background: linear-gradient(90deg, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214), rgb(30, 36, 131), rgb(41, 128, 109), rgb(146, 50, 47));
|
||||
background-size: 300px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 3s;
|
||||
font-size: 75%;
|
||||
color: white;
|
||||
margin-bottom: 5vh;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-size: 200%;
|
||||
background-position: -100%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
border-radius: 500px;
|
||||
border-style: solid;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 60vw;
|
||||
font-size: 110%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -8,46 +8,48 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>Basic Setup</h1>
|
||||
<p>To make setting up the database and email accounts easier, you can enter the required values below.</p>
|
||||
<p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#basic-setup" target="_blank">here</a></p>
|
||||
<h2>Database</h2>
|
||||
<p>A database is a piece of software that specializes in storing data. libreevent can use most SQL based databases as well as a custom JSON-based database. You are strongly encouraged to use a SQL based database, as they perform significantly better. Read more
|
||||
<a href="https://libreevent.janishutz.com/docs/setup/installation#database">here</a>
|
||||
</p>
|
||||
<form>
|
||||
<label for="host">Database host name</label><br>
|
||||
<input type="url" name="host" id="host"><br>
|
||||
<label for="database">Database name</label><br>
|
||||
<input type="text" name="database" id="database"><br>
|
||||
<label for="user">Database user</label><br>
|
||||
<input type="text" name="user" id="user"><br>
|
||||
<label for="password">Password</label><br>
|
||||
<input type="password" name="password" id="password"><br>
|
||||
<label for="port">Database port (default usually fine)</label><br>
|
||||
<input type="number" name="port" id="port" min="1" value="3306" max="65535"><br>
|
||||
</form>
|
||||
<h2>Email</h2>
|
||||
<h3>Account</h3>
|
||||
<form>
|
||||
<label for="host">SMTP Server</label><br>
|
||||
<input type="url" name="host" id="host"><br>
|
||||
<label for="port">SMTP Port (default usually fine)</label><br>
|
||||
<input type="number" name="port" id="port" value="587" min="1" max="65535"><br>
|
||||
<label for="user">Email account name</label><br>
|
||||
<input type="email" name="user" id="user"><br>
|
||||
<label for="pass">Password</label><br>
|
||||
<input type="password" name="pass" id="pass"><br>
|
||||
</form>
|
||||
<h3>Display</h3>
|
||||
<form>
|
||||
<label for="display">Display name (what is shown to user in from field)</label><br>
|
||||
<input type="url" name="display" id="display"><br>
|
||||
<label for="dpEmail">Email address to show</label><br>
|
||||
<input type="text" name="dpEmail" id="dpEmail"><br>
|
||||
</form>
|
||||
<button @click="submit()">Continue</button>
|
||||
<div class="wrapper">
|
||||
<div class="content">
|
||||
<h1>Basic Setup</h1>
|
||||
<p>To make setting up the database and email accounts easier, you can enter the required values below.</p>
|
||||
<p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#basic-setup" target="_blank">here</a></p>
|
||||
<h2>Database</h2>
|
||||
<p>A database is a piece of software that specializes in storing data. libreevent can use most SQL based databases as well as a custom JSON-based database. You are strongly encouraged to use a SQL based database, as they perform significantly better. Read more
|
||||
<a href="https://libreevent.janishutz.com/docs/setup/installation#database">here</a>
|
||||
</p>
|
||||
<form>
|
||||
<label for="host">Database host name</label><br>
|
||||
<input type="url" name="host" id="host"><br>
|
||||
<label for="database">Database name</label><br>
|
||||
<input type="text" name="database" id="database"><br>
|
||||
<label for="user">Database user</label><br>
|
||||
<input type="text" name="user" id="user"><br>
|
||||
<label for="password">Password</label><br>
|
||||
<input type="password" name="password" id="password"><br>
|
||||
<label for="port">Database port (default usually fine)</label><br>
|
||||
<input type="number" name="port" id="port" min="1" value="3306" max="65535"><br>
|
||||
</form>
|
||||
<h2>Email</h2>
|
||||
<h3>Account</h3>
|
||||
<form>
|
||||
<label for="host">SMTP Server</label><br>
|
||||
<input type="url" name="host" id="host"><br>
|
||||
<label for="port">SMTP Port (default usually fine)</label><br>
|
||||
<input type="number" name="port" id="port" value="587" min="1" max="65535"><br>
|
||||
<label for="user">Email account name</label><br>
|
||||
<input type="email" name="user" id="user"><br>
|
||||
<label for="pass">Password</label><br>
|
||||
<input type="password" name="pass" id="pass"><br>
|
||||
</form>
|
||||
<h3>Display</h3>
|
||||
<form>
|
||||
<label for="display">Display name (what is shown to user in from field)</label><br>
|
||||
<input type="url" name="display" id="display"><br>
|
||||
<label for="dpEmail">Email address to show</label><br>
|
||||
<input type="text" name="dpEmail" id="dpEmail"><br>
|
||||
</form>
|
||||
<button @click="submit()" class="button">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -8,20 +8,35 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/logo.png" alt="libreevent logo" style="height: 30vh;">
|
||||
<h1>Setup complete!</h1>
|
||||
<p>Congratulations on finishing the setup of libreǝvent!</p>
|
||||
<p>Please restart the node.js application to have it load the actual user interface for libreevent and finish setup. You may then log in at <a :href="windowURL" target="_blank">{{ windowURL }}</a></p>
|
||||
<p>In the admin panel, there are a few things you still need to change. You may find a list of all things <a href="https://libreevent.janishutz.com/docs/setup/afterSetup" target="_blank">here</a></p>
|
||||
<ul>
|
||||
<li>Choose a payment gateway and set it up</li>
|
||||
<li>Create a event location and an event</li>
|
||||
<li>Create other admin accounts with less privileges</li>
|
||||
</ul>
|
||||
<div class="wrapper">
|
||||
<div class="content">
|
||||
<img src="@/assets/logo.png" alt="libreevent logo" style="height: 30vh;">
|
||||
<h1>Setup complete!</h1>
|
||||
<p>Congratulations on finishing the setup of libreǝvent!</p>
|
||||
<p>Please restart the node.js application to have it load the actual user interface for libreevent and finish setup. You may then log in at <a :href="windowURL" target="_blank">{{ windowURL }}</a>. You may open that link now and then come back to that page once libreevent is restarted.</p>
|
||||
<p>In the admin panel, there are a few things you still need to change. You may find a list of all things <a href="https://libreevent.janishutz.com/docs/setup/afterSetup" target="_blank">here</a></p>
|
||||
<div class="list-wrapper">
|
||||
<ul>
|
||||
<li>Choose a payment gateway and set it up</li>
|
||||
<li>Create a event location and an event</li>
|
||||
<li>Create other admin accounts with less privileges</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
ul {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
|
||||
@@ -8,17 +8,19 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>Landing page</h1>
|
||||
<p>The landing page is the page your customers see when they visit your webpage. You may select a page template <a href="https://libreevent.janishutz.com/docs/homepage/templates" target="_blank">here</a>.</p>
|
||||
<p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#page-setup" target="_blank">here</a></p>
|
||||
<div class="wrapper">
|
||||
<div class="content">
|
||||
<h1>Landing page</h1>
|
||||
<p>The landing page is the page your customers see when they visit your webpage. You may select a page template <a href="https://libreevent.janishutz.com/docs/homepage/templates" target="_blank">here</a>.</p>
|
||||
<p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#page-setup" target="_blank">here</a></p>
|
||||
|
||||
<label for="template">Choose a template</label><br>
|
||||
<select name="template" id="template" v-for="option in options">
|
||||
<option :value="option.id">{{ option.name }}</option>
|
||||
</select><br>
|
||||
<label for="template">Choose a template</label><br>
|
||||
<select name="template" id="template" v-for="option in options">
|
||||
<option :value="option.id">{{ option.name }}</option>
|
||||
</select><br>
|
||||
|
||||
<button @click="submit()">Continue</button>
|
||||
<button @click="submit()" class="button">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -8,26 +8,28 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>Root account</h1>
|
||||
<p>The root account is the most powerful account. Therefore, it should only be used if really necessary and should have a strong password. It also always requires Two Factor Authentication for added security. You may log into the root account by typing 'root' into the Email/Username field on the admin login screen.</p>
|
||||
<p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#root-account" target="_blank">here</a></p>
|
||||
<p>Password requirements:</p>
|
||||
<ul style="list-style: none;">
|
||||
<li>At least 15 characters long</li>
|
||||
<li>At least 2 special characters</li>
|
||||
<li>At least 2 numbers</li>
|
||||
<li>At least 2 lower and 2 upper case letters</li>
|
||||
</ul>
|
||||
<form>
|
||||
<label for="mail">Email address for 2FA</label><br>
|
||||
<input type="email" name="mail" id="mail"><br>
|
||||
<label for="password">Password</label><br>
|
||||
<input type="password" name="password" id="password"><br>
|
||||
<label for="password2">Confirm password</label><br>
|
||||
<input type="password" name="password2" id="password2">
|
||||
</form>
|
||||
<button @click="submit()">Continue</button>
|
||||
<div class="wrapper">
|
||||
<div class="content">
|
||||
<h1>Root account</h1>
|
||||
<p>The root account is the most powerful account. Therefore, it should only be used if really necessary and should have a strong password. It also always requires Two Factor Authentication for added security. You may log into the root account by typing 'root' into the Email/Username field on the admin login screen.</p>
|
||||
<p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#root-account" target="_blank">here</a></p>
|
||||
<p>Password requirements:</p>
|
||||
<ul style="list-style: none;">
|
||||
<li>At least 15 characters long</li>
|
||||
<li>At least 2 special characters</li>
|
||||
<li>At least 2 numbers</li>
|
||||
<li>At least 2 lower and 2 upper case letters</li>
|
||||
</ul>
|
||||
<form>
|
||||
<label for="mail">Email address for 2FA</label><br>
|
||||
<input type="email" name="mail" id="mail"><br>
|
||||
<label for="password">Password</label><br>
|
||||
<input type="password" name="password" id="password"><br>
|
||||
<label for="password2">Confirm password</label><br>
|
||||
<input type="password" name="password2" id="password2">
|
||||
</form>
|
||||
<button @click="submit()" class="button">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -8,13 +8,15 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/logo.png" alt="libreevent logo" style="height: 30vh;">
|
||||
<h1>Welcome to libreǝvent!</h1>
|
||||
<i style="font-size: small;">All links during setup open in separate tabs</i>
|
||||
<p>Thank you for downloading libreǝvent, the free & open source event management solution. libreǝvent aims to help you save both time and money when hosting events, so you can focus on what really matters.</p>
|
||||
<p>Let's start by setting it up. We strongly encourage you to also have a look at the extensive documentation of the setup process <a href="https://libreevent.janishutz.com/docs/setup/setup" target="_blank">here</a></p>
|
||||
<button @click="setup();">Start setup</button>
|
||||
<div class="wrapper">
|
||||
<div class="content">
|
||||
<img src="@/assets/logo.png" alt="libreevent logo" style="height: 40vh;">
|
||||
<h1 class="title">Welcome to libreǝvent!</h1>
|
||||
<i style="font-size: small;">All links during setup open in separate tabs</i>
|
||||
<p>Thank you for downloading libreǝvent, the free & open source event management solution. libreǝvent aims to help you save both time and money when hosting events, so you can focus on what really matters.</p>
|
||||
<p>Let's start by setting it up. We strongly encourage you to do the setup (and all administrative tasks for that matter) on a PC and to also have a look at the extensive documentation of the setup process <a href="https://libreevent.janishutz.com/docs/setup/setup" target="_blank">here</a></p>
|
||||
<button @click="setup();" class="button">Start setup</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user