adrema-form/index.html

158 lines
4.5 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<meta name="adrema_base_url" content="/" />
</head>
<body style="padding: 50px">
<event-form
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
value='{"sections":[
{
"name": "tet",
"intro": "",
"fields": [
{
"name": "checkbox",
"type": "CheckboxField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": false,
"required": true,
"nami_type": null,
"for_members": true,
"special_type": null,
"description": "Sed laoreet mattis sem, vel sodales leo ullamcorper ut. Aliquam hendrerit vestibulum ex, sit amet consequat dolor donec.",
"hint": "Quisque justo leo, ultricies vestibulum.",
"key": "checkbox"
},
{
"name": "checkboxes Praesent tortor ligula, accumsan quis neque eget, laoreet convallis nunc. Morbi a urna sem. Mauris venenatis a felis ex.",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "CheckboxesField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": [],
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"options": [
"Integer molestie enim vitae enim tellus.",
"Cras ut magna ac metus rutrum efficitur."
],
"key": "checkboxes"
},
{
"name": "date",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "DateField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": null,
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"max_today": false,
"key": "date"
},
{
"name": "dropdown",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "DropdownField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": null,
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"options": [
"a",
"v"
],
"key": "dropdown"
},
{
"name": "radio",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "RadioField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": null,
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"options": [
"a",
"v"
],
"key": "radio"
},
{
"name": "text",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "TextField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": "",
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"key": "text"
},
{
"name": "textarea",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "TextareaField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": "",
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"rows": 5,
"key": "textarea"
}
]
}
]}'
url="http://localhost:8000"
editable
></event-form>
<event-overview
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
url-pattern="/anmeldung/{slug}"
url="http://localhost:8000/api/form"
></event-overview>
<script type="module" src="src/main.js"></script>
</body>
</html>