progress on website with new menu

This commit is contained in:
2023-03-25 13:11:41 +01:00
parent 2814b0ca18
commit 5483f9f46c
7 changed files with 124 additions and 19 deletions

View File

@@ -6,20 +6,43 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/home.css">
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="/js/index.js"></script>
<title>About :: myevent</title>
<meta name="description" content="Looking for a free and open source event management solution you can host yourself? myevent is a project that does exactly that.">
</head>
<body>
<div id="nav"></div>
<div id="backToTop" onclick="backToTop();"></div>
<div class="title-wrapper">
<h1>About myevent</h1>
<footer>Learn more about the project!</footer>
</div>
<div class="content">
<h3 class="dev">Website & project not completed yet!</h3>
<h3>myevent is a free and open source event management solution that you can host on your own hardware, if you want to. It is mainly written in node.js, but, as a webapp, uses also lots of HTML and CSS. For storing the customer / userdata, you may choose between using MySQL and a JSON based custom database, such that this project may be used in more cases. Whilst it is recommended to use MySQL with this project, using the JSON based database can be an easy to set up alternative if you are not serving that many customers.</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
let btn = document.getElementById( 'backToTop' );
$( document ).ready( function () {
$( '#nav' ).load( '/nav.html' );
} );
function backToTop () {
if ( document.body.scrollTop > 500 || document.documentElement.scrollTop > 500 ) {
window.scrollTo( { top: 0, behavior: 'smooth' } );
}
}
window.onscroll = function () {
if ( document.body.scrollTop > 500 || document.documentElement.scrollTop > 500 ) {
btn.style.opacity = '1';
btn.style.cursor = 'pointer';
} else {
btn.style.opacity = '0';
btn.style.cursor = 'default';
}
};
</script>
</body>
</html>

View File

@@ -37,8 +37,6 @@
overflow: hidden;
}
/* Logo image and logo link (aka logo-container)*/
.logo-container-small {
margin-left: 5%;
@@ -68,6 +66,13 @@
margin-right: 5%;
position: relative;
z-index: 3;
transition: 0.8s;
}
.listtoggle:hover {
color: rgb(29, 69, 105);
transition: 0.4s;
font-size: 6vh;
}

View File

@@ -20,6 +20,10 @@ body {
background-color: rgb(168, 212, 253);
}
.dev {
background-color: red;
text-align: center;
}
/*
This is the title div with a screenshot of the admin portal
@@ -35,7 +39,7 @@ body {
align-items: center;
justify-content: center;
width: 90%;
padding: 4%;
padding: 2%;
margin: 3%;
margin-bottom: 0%;
border-radius: 50px;
@@ -95,12 +99,19 @@ body {
color: white;
position: fixed;
top: 90%;
left: 93%;
right: 7%;
opacity: 0;
cursor: default;
transition: 0.5s
}
#backToTop:hover {
background-color: rgb(24, 43, 61);
width: calc(35px + 0.5vw);
height: calc(35px + 0.5vw);
transition: 0.2s;
}
@media only screen and (min-width: 999px) {
.content, .title-wrapper {

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>myevent - Free & Open Source event management solution</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/home.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="description" content="Looking for a free and open source event management solution you can host yourself? myevent is a project that does exactly that.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<div id="nav"></div>
<div id="backToTop" onclick="backToTop();"></div>
<div class="title-wrapper">
<h1>Docs - myevent</h1>
<footer>Learn how to setup and use myevent!</footer>
</div>
<div class="content">
<h3 class="dev">Website & project not completed yet!</h3>
</div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
let btn = document.getElementById( 'backToTop' );
$( document ).ready( function () {
$( '#nav' ).load( '/nav.html' );
} );
function backToTop () {
if ( document.body.scrollTop > 500 || document.documentElement.scrollTop > 500 ) {
window.scrollTo( { top: 0, behavior: 'smooth' } );
}
}
window.onscroll = function () {
if ( document.body.scrollTop > 500 || document.documentElement.scrollTop > 500 ) {
btn.style.opacity = '1';
btn.style.cursor = 'pointer';
} else {
btn.style.opacity = '0';
btn.style.cursor = 'default';
}
};
</script>
</body>
</html>

View File

@@ -5,23 +5,46 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Download myevent, the free and open source event management solution">
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="/js/index.js"></script>
<title>Download - myevent</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="nav"></div>
<div id="backToTop" onclick="backToTop();"></div>
<div class="title-wrapper">
<h1>Download myevent</h1>
<footer>Ready to downlaod?</footer>
</div>
<div class="content">
<h3 class="dev">Website & project not completed yet!</h3>
<p>There are a couple of options to download myevent. You may use npm or you may download it from the GitHub releases page. You may also clone the repository locally if you want to use upstream instead of a release</p>
<a href="https://github.com/simplePCBuilding/myevent" class="button">GitHub</a>
<p>You may download the iOS & Android apps from the AppStore / Google Play Store respectively.</p>
</div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
let btn = document.getElementById( 'backToTop' );
$( document ).ready( function () {
$( '#nav' ).load( '/nav.html' );
} );
function backToTop () {
if ( document.body.scrollTop > 500 || document.documentElement.scrollTop > 500 ) {
window.scrollTo( { top: 0, behavior: 'smooth' } );
}
}
window.onscroll = function () {
if ( document.body.scrollTop > 500 || document.documentElement.scrollTop > 500 ) {
btn.style.opacity = '1';
btn.style.cursor = 'pointer';
} else {
btn.style.opacity = '0';
btn.style.cursor = 'default';
}
};
</script>
</body>
</html>

View File

@@ -20,6 +20,7 @@
<footer>Free & Open Source self-hosted event management solution</footer>
</div>
<div class="content">
<h3 class="dev">Website & project not completed yet!</h3>
<h2>What is myevent?</h2>
<p>myevent is a free and fully open source self-hosted event management solution that you can use to sell tickets for your next event. It is written in Node.js, JavaScript, TypeScript, HTML and CSS. It uses Vue.js for the ticket purchasing system and features both an iOS and Android App you can download and use entirely for free. If you like this project, please consider giving it a star on <a href="https://github.com/simplePCBuilding/myevent">GitHub</a> and donating to help fund development of this project!</p>
<div class="image-group">

View File

@@ -1,9 +0,0 @@
/* eslint-disable no-undef */
/*
* myevent - index.js
*
* Created by Janis Hutz 03/06/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/