update various things
This commit is contained in:
@@ -1,155 +0,0 @@
|
||||
/*
|
||||
*
|
||||
* janishutz.com - menustyle.css
|
||||
*
|
||||
*
|
||||
* Created 2023 by Janis Hutz
|
||||
*/
|
||||
|
||||
::selection {
|
||||
background-color: darkblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.Menu {
|
||||
font-size: 0.8rem;
|
||||
margin-top: -1%;
|
||||
padding: 2%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgba(56, 68, 77, 1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 10vh;
|
||||
display: inline-block;
|
||||
margin-left: 2%;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
display: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: rgba(184, 214, 240, 1);
|
||||
}
|
||||
|
||||
.listtoggle {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-size: 2.5rem;
|
||||
margin-right: 7%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-wrapper {
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.menu-container, .dropdown-menu {
|
||||
list-style: none;
|
||||
margin: 0 5%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menubutton {
|
||||
text-decoration: none;
|
||||
width: 96%;
|
||||
display: block;
|
||||
padding: 2%;
|
||||
color: white;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
.menubutton:hover {
|
||||
background-color: darkblue;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.sub {
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 999px) {
|
||||
.listtoggle, .toggle-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
display: inline-flex;
|
||||
list-style-type: none;
|
||||
width: 80%;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menubutton {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
width: inherit;
|
||||
color: white;
|
||||
border-radius: 0%;
|
||||
background-color: rgba(0,0,0,0);
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
.sub {
|
||||
width: 92%;
|
||||
padding: 20px 4%;
|
||||
}
|
||||
|
||||
.menubutton:hover {
|
||||
border-radius: 0%;
|
||||
background-color: darkblue;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
background-color: lightseagreen;
|
||||
display: none;
|
||||
list-style-type: none;
|
||||
position: absolute;
|
||||
min-width: 200px;
|
||||
transform-origin: top center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@keyframes growDown {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: flex;
|
||||
animation: growDown 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mainitems {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -59,7 +59,7 @@
|
||||
/* TODO: Make multiple steps for this
|
||||
*/
|
||||
|
||||
.menu-cateogry-active {
|
||||
.menu-category-active {
|
||||
padding-right: 20vw !important;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
194
src/js/support.js
Normal file
194
src/js/support.js
Normal file
@@ -0,0 +1,194 @@
|
||||
const { createApp } = Vue;
|
||||
|
||||
createApp( {
|
||||
data() {
|
||||
return {
|
||||
products: {
|
||||
'sm': {
|
||||
'id': 'sm',
|
||||
'name': 'StorageManager',
|
||||
'supportOptions': {
|
||||
'no-scan': {
|
||||
'id': 'no-scan',
|
||||
'name': 'Scanning not working',
|
||||
'display': 'Please ensure that the barcode is not too far away (up to roughly four meters should work fine), that it is a barcode and that the surface the code is on is entirely visible and not wrinkled in any shape or form. If it still does not work, contact me below.',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': '/support/contact',
|
||||
'display': 'Contact me'
|
||||
}
|
||||
},
|
||||
'contact': {
|
||||
'id': 'contact',
|
||||
'name': 'Problem not in this list',
|
||||
'display': 'Please use the contact form and include as much information as possible',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': '/support/contact',
|
||||
'display': 'Contact me'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'qr': {
|
||||
'id': 'qr',
|
||||
'name': 'QR & Barcode Insight',
|
||||
'supportOptions': {
|
||||
'history': {
|
||||
'id': 'history',
|
||||
'name': 'History missing',
|
||||
'display': 'In the settings tab, under History Settings, ensure that history is enabled! If your issue is regarding only a few entries being kept, please, in the same page, check if there is history size limit set and if so, consider increasing or removing it. If it still does not work, contact me below',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': '/support/contact',
|
||||
'display': 'Contact me'
|
||||
}
|
||||
},
|
||||
'no-scan': {
|
||||
'id': 'no-scan',
|
||||
'name': 'Scanning not working',
|
||||
'display': 'Please ensure that the code is not too far away (up to roughly four meters should work fine) and that the surface the code is on is entirely visible and not wrinkled in any shape or form. If it still does not work, contact me below.',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': '/support/contact',
|
||||
'display': 'Contact me'
|
||||
}
|
||||
},
|
||||
'contact': {
|
||||
'id': 'contact',
|
||||
'name': 'Problem not in this list',
|
||||
'display': 'Please use the contact form and include as much information as possible',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': '/support/contact',
|
||||
'display': 'Contact me'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'smuL': {
|
||||
'id': 'smuL',
|
||||
'name': 'SimpleMediaUpscalerLite',
|
||||
'supportOptions': {
|
||||
'gh': {
|
||||
'id': 'gh',
|
||||
'name': 'Any problem',
|
||||
'display': 'Please head to GitHub and open an issue',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': 'https://github.com/simplePCBuilding/SimpleMediaUpscalerLite/issues/new',
|
||||
'display': 'Open an Issue'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'le': {
|
||||
'id': 'le',
|
||||
'name': 'libreevent',
|
||||
'supportOptions': {
|
||||
'gh': {
|
||||
'id': 'gh',
|
||||
'name': 'Any problem',
|
||||
'display': 'Please head to GitHub and open an issue',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': 'https://github.com/simplePCBuilding/libreevent/issues/new',
|
||||
'display': 'Open an Issue'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'mp': {
|
||||
'id': 'mp',
|
||||
'name': 'MusicPlayer',
|
||||
'supportOptions': {
|
||||
'not-ready': {
|
||||
'id': 'not-ready',
|
||||
'name': 'Not working',
|
||||
'display': 'MusicPlayer Version 2.0 is not yet completed. Version 1 will not receive any more updates and is deprecated',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': 'https://github.com/simplePCBuilding/MusicPlayerV2',
|
||||
'display': 'GitHub'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'bga': {
|
||||
'id': 'bga',
|
||||
'name': 'BiogasControllerApp',
|
||||
'supportOptions': {
|
||||
'warning': {
|
||||
'id': 'warning',
|
||||
'name': 'Windows app warning',
|
||||
'display': 'As this app is not digitally signed, Windows will warn you about running the app. The app is totally safe, so you can allow it to run. If it does not work, consider downloading the app, installing python with all necessary dependencies (see link below) and running it that way.',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': 'https://github.com/simplePCBuilding/BiogasControllerApp/wiki/Install-and-run-the-program#download-dev-versions-if-you-run-into-a-bug-then-this-may-help',
|
||||
'display': 'Contact'
|
||||
}
|
||||
},
|
||||
'errconn': {
|
||||
'id': 'errconn',
|
||||
'name': 'Connection error',
|
||||
'display': 'Please first follow the steps the app gives you when you press the details button on the error message. If these steps do not work, please head to our wiki where things are explained in a more detailed manner. If these steps also do not help, please contact me using the <a href="/support/contact">contact form</a>!',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': 'https://github.com/simplePCBuilding/BiogasControllerApp/wiki/Connect-a-Microcontroller',
|
||||
'display': 'Wiki'
|
||||
}
|
||||
},
|
||||
'contact': {
|
||||
'id': 'contact',
|
||||
'name': 'Problem not in this list',
|
||||
'display': 'Please use the contact form and include as much information as possible',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': '/support/contact',
|
||||
'display': 'Contact me'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'other': {
|
||||
'id': 'other',
|
||||
'name': 'Other',
|
||||
'supportOptions': {
|
||||
'contact': {
|
||||
'id': 'contact',
|
||||
'name': 'Contact me',
|
||||
'display': 'Please contact me using the contact form, include the name of the software you have problems with and as much information as possible on the isse.',
|
||||
'action': {
|
||||
'type': 'link',
|
||||
'href': '/support/contact',
|
||||
'display': 'Contact'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
selectedProduct: 'sm',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closePopup() {
|
||||
$( '#popup' ).fadeOut( 500 );
|
||||
$( 'body' ).removeClass( 'menuOpen' );
|
||||
},
|
||||
openPopup ( product ) {
|
||||
$( '#popup' ).fadeIn( 500 );
|
||||
$( 'body' ).addClass( 'menuOpen' );
|
||||
this.selectedProduct = product;
|
||||
},
|
||||
toggleSupportOption ( option ) {
|
||||
for ( let action in this.products[ this.selectedProduct ][ 'supportOptions' ] ) {
|
||||
if ( action !== option ) {
|
||||
$( '#' + action + '-container' ).removeClass( 'open' );
|
||||
$( '#' + action ).fadeOut( 100 );
|
||||
}
|
||||
}
|
||||
$( '#' + option + '-container' ).toggleClass( 'open' );
|
||||
$( '#' + option ).fadeToggle( 100 );
|
||||
}
|
||||
},
|
||||
} ).mount( '#support-app' );
|
||||
@@ -76,9 +76,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let activated = false;
|
||||
function dropdown ( id ) {
|
||||
$( '#' + id + '-parent' ).toggleClass( 'menu-cateogry-active' );
|
||||
$( '#' + id ).toggleClass( 'category-list-active' );
|
||||
$( '.category-list' ).removeClass( 'category-list-active' );
|
||||
$( '.menu-category' ).removeClass( 'menu-category-active' );
|
||||
if ( activated ) {
|
||||
activated = false;
|
||||
} else {
|
||||
$( '#' + id + '-parent' ).addClass( 'menu-category-active' );
|
||||
$( '#' + id ).addClass( 'category-list-active' );
|
||||
activated = true;
|
||||
}
|
||||
}
|
||||
|
||||
function menu () {
|
||||
@@ -88,7 +96,6 @@
|
||||
$( '.menu-container' ).fadeToggle( 100 );
|
||||
setTimeout( () => {
|
||||
$( '.menu-container' ).toggleClass( 'shown' );
|
||||
// $( '.main-menu' ).fadeToggle( 500 );
|
||||
$( '.bottom-note-wrapper' ).fadeToggle( 500 );
|
||||
}, 400 );
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<img src="/assets/Logo.png" alt="page Logo" class="project-logo">
|
||||
<h1 class="content-title">Projects</h1>
|
||||
<p style="text-align: center; margin-bottom: 5%;">This is a selection of my most important projects. This list is not exhaustive and I've got some private projects ongoing at all times, like updating and optimising all my different websites.</p>
|
||||
<h3 id="ios" class="content-title-small">Swift & SwiftUI (iOS Apps)</h3>
|
||||
<h3 id="ios" class="content-title-small">iOS Apps</h3>
|
||||
<div class="sidebyside">
|
||||
<div class="element">
|
||||
<h3>StorageManager</h3>
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
</div>
|
||||
<script>
|
||||
const texts = {
|
||||
'notification': '<h3>Notifications.</h3><p>This app can send you notifications. For this you will need to enable notifications for the app in the iOS settings or accept notifications when the app asks you, if it can send notifications during setup.</p>',
|
||||
'notifications': '<h3>Notifications.</h3><p>This app can send you notifications. For this you will need to enable notifications for the app in the iOS settings or accept notifications when the app asks you, if it can send notifications during setup.</p>',
|
||||
'adding': '<h3>Adding products.</h3><p>You can add new products with two options. Either, if the product has a Barcode, you can use the built-in barcode scanner to scan it or by manually entering the product details. If a product has been added before, StorageManager will autofill the information necessary when scanning the barcode or when selecting a suggestion it gives you when typing the product name.</p>',
|
||||
'editing': '<h3>Editing products.</h3><p>You can edit every aspect of every product you have ever added. StorageManager will also allow you to use changed data as new defaults for this kind of product.</p>',
|
||||
'removing': `<h3>Removing products.</h3><p>You have three different options for removing products. First off, you can remove it by scanning the product's barcode and then selecting the product you want to delete. The other two options are to swipe to delete the product on the app's home page and to tap the delete button in the product's details page.</p>`,
|
||||
|
||||
@@ -9,8 +9,82 @@
|
||||
<meta name="keywords" content="software support, problem solving">
|
||||
<meta name="description" content="Ran into a problem with one of my softwares? Get support here and have it resolved quickly and professionally.">
|
||||
<link rel="stylesheet" href="/css/mainstyle.css">
|
||||
<link rel="stylesheet" href="/css/pages/home.css">
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script defer src="/js/loader.js"></script>
|
||||
<style>
|
||||
#support-app {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.big-button-outlined {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgb(0, 0, 56);
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
margin: 0.5%;
|
||||
cursor: pointer;
|
||||
width: 30vw;
|
||||
height: 20vh;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.popup-main {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.big-button-outlined:hover {
|
||||
background-color: rgb(0, 0, 105);
|
||||
}
|
||||
|
||||
.support-option-details {
|
||||
display: none;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
.support-option {
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
margin-bottom: 0.5%;
|
||||
height: 10vh;
|
||||
border: white solid 3px;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.support-option.open {
|
||||
width: 99%;
|
||||
height: 40vh;
|
||||
overflow-y: scroll;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.support-option-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.support-option.open .support-option-title {
|
||||
margin-top: 2vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="nav"></div>
|
||||
@@ -25,9 +99,29 @@
|
||||
<hr class="pullquote-lines">
|
||||
<p>First off all, I want to apologise for any inconvenience that arose due to a problem with any of my software.</p>
|
||||
<p>Please choose the app you have problems with below:</p>
|
||||
<p>Work in progress. Please use <a href="/support/contact">Contact</a> if you have any questions regarding my software or any kind of problems</p>
|
||||
<div id="support-app">
|
||||
<div class="big-button-outlined" v-for="product in products" @click="openPopup( product.id )">{{ product.name }}</div>
|
||||
|
||||
<div id="popup">
|
||||
<div class="popup-positioning">
|
||||
<div class="popup-main">
|
||||
<div v-for="supportOption in products[ selectedProduct ].supportOptions" @click="toggleSupportOption( supportOption.id )" class="support-option" :id="supportOption.id + '-container'">
|
||||
<p class="support-option-title">{{ supportOption.name }}</p>
|
||||
<div :id="supportOption.id" class="support-option-details">
|
||||
<p v-html="supportOption.display"></p>
|
||||
<a :href="supportOption.action.href" class="submit" style="text-decoration: none;">{{ supportOption.action.display }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="closePopup()" class="submit">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script src="/js/support.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user