zoomyboy
/
wn-discoteam-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update loading state
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2024-10-03 16:17:51 +02:00
parent ebe0abae8d
commit f7583d5eb8
13 changed files with 768 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

713
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -18,11 +18,13 @@
"devDependencies": {
"@spiriit/vite-plugin-svg-spritemap": "^2.2.4",
"autoprefixer": "^10.4.0",
"axios": "^1.7.7",
"postcss": "^8.4.4",
"tailwind-clip-path": "^1.0.0",
"tailwindcss": "latest",
"vite": "^4.0",
"vite-plugin-live-reload": "^2.1.0"
"toastify-js": "^1.12.0",
"vite": "^5.0",
"vite-plugin-live-reload": "^3.0"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.7",

4
pages/homepage.htm
View File

@ -66,9 +66,7 @@ is_hidden = 0
</div>
</section>
<section class="shadow-xl mt-10 self-center md:self-none md:mt-0 bg-zinc-900 border border-zinc-700 rounded-xl p-3 max-w-lg w-full md:w-2/5 flex-none">
{% component 'anfrage' %}
</section>
{% component 'anfrage' class='mt-10 self-center md:self-start md:mt-0 max-w-lg w-full md:w-2/5 flex-none' %}
</div>
</div>
</div>

57
partials/anfrage/default.htm
View File

@ -1,67 +1,67 @@
{% set maingrid = "grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3" %}
<div id="anfrageform" x-data="form">
<section class="relative rounded-xl p-5 duration-500 shadow-xl {{__SELF__.outerClass}}" x-data="form" :class="{'bg-zinc-900 border border-zinc-700': sent === false, 'bg-green-900 border border-green-700': sent === true}">
<form data-request="anfrage::onSubmit" data-request-flash class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3">
<form @submit.prevent="submit" class="sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3" :class="{'grid': sent === false, 'hidden': sent === true}">
<div>
<label for="reason" class="block text-sm font-medium text-zinc-100">Grund für die Feier</label>
<input id="reason" name="reason" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="z.B. 18. Geburtstag">
<input x-model="value.reason" id="reason" name="reason" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="z.B. 18. Geburtstag">
</div>
<div>
<label for="date" class="block text-sm font-medium text-zinc-100">Gewünschtes Datum</label>
<input x-model="date" id="date" name="date" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.date" id="date" name="date" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="guests" class="block text-sm font-medium text-zinc-100">Anzahl Gäste (ca)</label>
<input id="guests" name="guests" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.guests" id="guests" name="guests" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="birthday" class="block text-sm font-medium text-zinc-100">Geburtsdatum</label>
<input x-model="birthday" id="birthday" name="birthday" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.birthday" id="birthday" name="birthday" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="firstname" class="block text-sm font-medium text-zinc-100">Vorname</label>
<input id="firstname" name="firstname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.firstname" id="firstname" name="firstname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="lastname" class="block text-sm font-medium text-zinc-100">Nachname</label>
<input id="lastname" name="lastname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.lastname" id="lastname" name="lastname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="address" class="block text-sm font-medium text-zinc-100">Adresse</label>
<input id="address" name="address" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.address" id="address" name="address" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-zinc-100">PLZ</label>
<input id="zip" name="zip" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.zip" id="zip" name="zip" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="location" class="block text-sm font-medium text-zinc-100">Ort</label>
<input id="location" name="location" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.location" id="location" name="location" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-100">Telefonnummer</label>
<input id="phone" name="phone" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.phone" id="phone" name="phone" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div class="col-span-full">
<label for="email" class="block text-sm font-medium text-zinc-100">E-Mail-Adresse</label>
<input id="email" name="email" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.email" id="email" name="email" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div class="col-span-full">
<label for="misc" class="block text-sm font-medium text-zinc-100">Was du sonst noch loswerden willst …</label>
<textarea id="misc" name="misc" rows="5" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5"></textarea>
<textarea x-model="value.misc" id="misc" name="misc" rows="5" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5"></textarea>
</div>
<div x-show="isUnder18" class="col-span-full text-sm items-center p-4 border-2 rounded-lg form-group shadow-sm group bg-red-950 border-red-900">
@ -71,15 +71,15 @@
<div class="{{maingrid}}">
<div>
<label for="parent_name" class="block text-sm font-bold mt-2 text-red-50">Name eines Erz. Ber.</label>
<input id="parent_name" name="parent_name" class="shadow-sm bg-red-900 text-red-50 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.parent_name" id="parent_name" name="parent_name" class="shadow-sm bg-red-900 text-red-50 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="parent_email" class="block text-sm font-bold mt-2 text-red-50">Email eines Erz. Ber.</label>
<input id="parent_email" name="parent_email" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.parent_email" id="parent_email" name="parent_email" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
<div>
<label for="parent_phone" class="block text-sm font-bold mt-2 text-red-50">TelNr. eines Erz. Ber.</label>
<input id="parent_phone" name="parent_phone" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
<input x-model="value.parent_phone" id="parent_phone" name="parent_phone" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
</div>
</div>
</div>
@ -87,7 +87,7 @@
<div class="relative col-span-full">
<div class="grid grid-cols-1 gap-2">
<label for="datenschutz" class="p-0 block leading-none relative flex items-start">
<input id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
<input x-model="value.datenschutz" id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-indigo-500 absolute left-0 w-6 h-6 rounded block top-0"></span>
<span class="peer-checked:bg-indigo-500 left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
<span class="pl-8 pt-1 @sm:pt-0 text-zinc-100 text-sm @sm:text-base">
@ -98,7 +98,26 @@
</div>
</div>
<div class="flex justify-center col-span-full mt-5">
<button class="py-2 px-6 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">Absenden</button>
<button class="relative py-2 px-10 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">
<template x-if="sending">
<div class="flex absolute left-2 top-0 h-full flex items-center">
<span class="loader w-6 h-6"></span>
</div>
</template>
Absenden
</button>
</div>
</form>
<div class="text-green-100" :class="{'hidden': sent === false, 'grid': sent === true}">
<p class="text-xl">Vielen Dank für deine Anfrage.</p>
<p class="mt-2 text-lg">Wir haben dir eine Kopie deiner Anfrage per E-Mail geschickt. Wir werden uns in den nächsten 2-3 Werktagen melden. </p>
<div class="absolute flex items-center justify-center top-0 left-0 mt-[-13px] ml-[-13px] w-8 h-8">
<svg class="absolute top-0 left-0 flex-none rotate-[104deg] stroke-green-700 fill-green-900" viewBox="-21 -21 41 41">
<circle cx="0" cy="0" r="20" stroke-dasharray="83.77564 41.88782" stroke-width="1" stroke-location="inside"></circle>
</svg>
<svg class="relative size-4 text-green-500 fill-current"> <use xlink:href="{{ 'check' | sprite }}"></use> </svg>
</div>
</div>
</section>

3
partials/anfrage/success.htm
View File

@ -1,3 +0,0 @@
<div>
Vielen Dank für deine Anfrage. Wir haben dir eine Kopie deiner Anfrage per E-Mail geschickt. Wir werden uns in den nächsten 2-3 Werktagen melden.
</div>

4
partials/headassets/default.htm
View File

@ -1,6 +1,6 @@
{% if devServerIsRunning %}
<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/resources/js/app.js"></script>
<script type="module" src="http://localhost:3000/themes/vite-tailwind/@vite/client"></script>
<script type="module" src="http://localhost:3000/themes/vite-tailwind/resources/js/app.js"></script>
{% else %}
{% for css in cssPaths %}
<link rel="stylesheet" href="{{ ('assets/public/' ~ css)|theme }}">

26
resources/css/app.css
View File

@ -1,13 +1,13 @@
@import "_tailwind-base.css";
@import '_tailwind-base.css';
/*@import "_custom-base-styles.css";*/
@import "_tailwind-components.css";
@import '_tailwind-components.css';
/*@import '_custom-components.css';*/
@import "_tailwind-utilities.css";
@import '_tailwind-utilities.css';
/*@import "_custom-utilities.css";*/
@import "./fonts.css";
@import './fonts.css';
.outer-container {
@apply py-10;
@ -15,3 +15,21 @@
.container {
@apply max-w-6xl mx-auto px-5 md:px-10;
}
.loader {
border-radius: 50%;
display: inline-block;
border-top: 3px solid #fff;
border-right: 3px solid transparent;
box-sizing: border-box;
animation: rotation 0.8s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

82
resources/css/toastify.css Normal file
View File

@ -0,0 +1,82 @@
/*!
* Toastify js 1.12.0
* https://github.com/apvarun/toastify-js
* @license MIT licensed
*
* Copyright (C) 2018 Varun A P
*/
.toastify {
padding: 12px 20px;
color: #ffffff;
display: inline-block;
position: fixed;
opacity: 0;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
border-radius: 2px;
cursor: pointer;
text-decoration: none;
z-index: 2147483647;
}
.toastify.on {
opacity: 1;
}
.toast-close {
background: transparent;
border: 0;
color: white;
cursor: pointer;
font-family: inherit;
font-size: 1em;
opacity: 0.4;
padding: 0 5px;
}
.toastify-right {
right: 15px;
}
.toastify-left {
left: 15px;
}
.toastify-top {
top: -150px;
}
.toastify-bottom {
bottom: -150px;
}
.toastify-rounded {
border-radius: 25px;
}
.toastify-avatar {
width: 1.5em;
height: 1.5em;
margin: -7px 5px;
border-radius: 2px;
}
.toastify-center {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
max-width: fit-content;
max-width: -moz-fit-content;
}
@media only screen and (max-width: 360px) {
.toastify-right,
.toastify-left {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
max-width: fit-content;
}
}

1
resources/icons/check.svg Executable file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 106 B

59
resources/js/app.js
View File

@ -1,4 +1,3 @@
import '../css/app.css';
import Alpine from 'alpinejs';
import Datepicker from 'flowbite-datepicker/Datepicker';
import de from '../../node_modules/flowbite-datepicker/js/i18n/locales/de.js';
@ -6,6 +5,11 @@ Datepicker.locales.de = de.de;
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
import axios from 'axios';
import {error} from './toast.js';
import '../css/toastify.css';
import '../css/app.css';
function initDatepicker(el) {
new Datepicker(el, {
@ -23,14 +27,61 @@ document.querySelectorAll('[datepicker]').forEach((el) => initDatepicker(el));
window.Alpine = Alpine;
Alpine.data('form', () => ({
birthday: null,
sent: false,
sending: false,
value: {
reason: '',
date: null,
guests: '',
birthday: null,
firstname: '',
lastname: '',
address: '',
zip: '',
location: '',
phone: '',
email: '',
misc: '',
parent_email: '',
parent_phone: '',
parent_name: '',
datenschutz: false,
},
isUnder18: function () {
if (!this.birthday || !this.date) {
if (!this.value.birthday || !this.value.date) {
return false;
}
return dayjs(this.birthday, 'DD.MM.YYYY').add(18, 'year').isAfter(dayjs(this.date, 'DD.MM.YYYY'));
return dayjs(this.value.birthday, 'DD.MM.YYYY').add(18, 'year').isAfter(dayjs(this.value.date, 'DD.MM.YYYY'));
},
submit: async function () {
if (this.sending === true) {
return;
}
this.sending = true;
try {
await axios.post(window.location.pathname, this.value, {
headers: {
'X-Winter-Request-Handler': 'anfrage::onSubmit',
'X-Requested-With': 'XMLHttpRequest',
},
});
this.sent = true;
window.scrollTo({
top: this.$el.getBoundingClientRect().top + window.scrollY - 50,
behaviour: 'smooth',
});
this.sending = false;
} catch (e) {
this.sending = false;
if (!e instanceof axios.AxiosError || !e.response || !e.response.data || !e.response.data['X_WINTER_ERROR_FIELDS']) {
throw e;
}
const errors = e.response.data['X_WINTER_ERROR_FIELDS'];
Object.keys(errors).forEach((k) => {
errors[k].forEach((msg) => error(msg));
});
}
},
}));

10
resources/js/toast.js Normal file
View File

@ -0,0 +1,10 @@
import Toastify from 'toastify-js';
export function error(message) {
Toastify({
text: message,
gravity: 'bottom', // `top` or `bottom`
className: 'bg-red-800 glow-red-100 text-red-100 text-lg font-semibold max-w-[95vw] md:max-w-[40vw] ring-2 ring-red-500',
onClick: function () {}, // Callback after click
}).showToast();
}

13
tailwind.config.js
View File

@ -1,17 +1,12 @@
module.exports = {
content: ["./**/*.htm", "./node_modules/flowbite/**/*.js"],
darkMode: "class",
content: ['./**/*.htm', './node_modules/flowbite/**/*.js', './resources/js/toast.js'],
darkMode: 'class',
theme: {
extend: {
fontFamily: {
nunito: ["Nunito", "sans-serif"],
nunito: ['Nunito', 'sans-serif'],
},
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("flowbite/plugin"),
require("tailwind-clip-path"),
],
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('flowbite/plugin'), require('tailwind-clip-path')],
};

26
vite.config.js
View File

@ -1,19 +1,16 @@
import liveReload from "vite-plugin-live-reload";
import VitePluginSvgSpritemap from "@spiriit/vite-plugin-svg-spritemap";
import liveReload from 'vite-plugin-live-reload';
import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap';
export default ({command}) => {
return {
base:
command === "serve"
? "/themes/vite-tailwind/"
: "/themes/vite-tailwind/assets/public/",
publicDir: "resources/public",
base: command === 'serve' ? '/themes/vite-tailwind/' : '/themes/vite-tailwind/assets/public/',
publicDir: 'resources/public',
build: {
manifest: "manifest.json",
outDir: "assets/public",
assetsDir: "",
manifest: 'manifest.json',
outDir: 'assets/public',
assetsDir: '',
rollupOptions: {
input: "resources/js/app.js",
input: 'resources/js/app.js',
},
},
server: {
@ -21,11 +18,8 @@ export default ({ command }) => {
port: 3000,
},
resolve: {
extensions: [".js", ".mjs"],
extensions: ['.js', '.mjs'],
},
plugins: [
liveReload("./**/*.htm"),
VitePluginSvgSpritemap("./resources/icons/*.svg"),
],
plugins: [liveReload('./**/*.htm'), VitePluginSvgSpritemap('./resources/icons/*.svg')],
};
};