Robin-van-der-Linde/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Studio: support 'hidden-in-studio'-segments in HTML, clarify 'layers'-documentation. See #1929

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-04-27 23:46:55 +02:00
parent 4a8ecddd2f
commit 70bb4bb006
8 changed files with 150 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Docs/Schemas/LayoutConfigJson.schema.json
View file

@ -104,7 +104,7 @@
"type": "boolean"
},
"layers": {
"description": "question: What layers should this map show?\ntype: layer[]\ntypes: hidden | layer | hidden\ngroup: layers\nsuggestions: return Array.from(layers.keys()).map(key => ({if: \"value=\"+key, then: \"<b>\"+key+\"</b> (builtin) - \"+layers.get(key).description}))\nEvery layer contains a description of which feature to display - the overpassTags which are queried.\nInstead of running one query for every layer, the query is fused.\n\nAfterwards, every layer is given the list of features.\nEvery layer takes away the features that match with them*, and give the leftovers to the next layers.\n\nThis implies that the _order_ of the layers is important in the case of features with the same tags;\nas the later layers might never receive their feature.\n\n*layers can also remove 'leftover'-features if the leftovers overlap with a feature in the layer itself\n\nNote that builtin layers can be reused. Either put in the name of the layer to reuse, or use {builtin: \"layername\", override: ...}\n\nThe 'override'-object will be copied over the original values of the layer, which allows to change certain aspects of the layer\n\nFor example: If you would like to use layer nature reserves, but only from a specific operator (eg. Natuurpunt) you would use the following in your theme:\n\n```\n\"layer\": {\n \"builtin\": \"nature_reserve\",\n \"override\": {\"source\":\n {\"osmTags\": {\n \"+and\":[\"operator=Natuurpunt\"]\n }\n }\n }\n}\n```\n\nIt's also possible to load multiple layers at once, for example, if you would like for both drinking water and benches to start at the zoomlevel at 12, you would use the following:\n\n```\n\"layer\": {\n \"builtin\": [\"benches\", \"drinking_water\"],\n \"override\": {\"minzoom\": 12}\n}\n```",
"description": "question: What layers should this map show?\ntype: layer[]\ntypes: hidden | layer | hidden\ngroup: layers\nsuggestions: return Array.from(layers.keys()).map(key => ({if: \"value=\"+key, then: \"<b>\"+key+\"</b> (builtin) - \"+layers.get(key).description}))\n\nA theme must contain at least one layer.\n\nA layer contains all features of a single type, for example \"shops\", \"bicycle pumps\", \"benches\".\nNote that every layer contains a specification of attributes that it should match. MapComplete will fetch the relevant data from either overpass, the OSM-API or the cache server.\nIf a feature can match multiple layers, the first matching layer in the list will be used.\nThis implies that the _order_ of the layers is important.\n\n\n<div class='hidden-in-studio'>\nNote that builtin layers can be reused. Either put in the name of the layer to reuse, or use {builtin: \"layername\", override: ...}\n\nThe 'override'-object will be copied over the original values of the layer, which allows to change certain aspects of the layer\n\nFor example: If you would like to use layer nature reserves, but only from a specific operator (eg. Natuurpunt) you would use the following in your theme:\n\n```\n\"layer\": {\n \"builtin\": \"nature_reserve\",\n \"override\": {\"source\":\n {\"osmTags\": {\n \"+and\":[\"operator=Natuurpunt\"]\n }\n }\n }\n}\n```\n\nIt's also possible to load multiple layers at once, for example, if you would like for both drinking water and benches to start at the zoomlevel at 12, you would use the following:\n\n```\n\"layer\": {\n \"builtin\": [\"benches\", \"drinking_water\"],\n \"override\": {\"minzoom\": 12}\n}\n```\n</div>",
"type": "array",
"items": {
"anyOf": [
@ -260,7 +260,7 @@
"type": "boolean"
},
"enableDownload": {
"description": "question: Should the 'download as CSV'- and 'download as Geojson'-buttons be enabled?\niftrue: Enable the option to download the map as CSV and GeoJson\niffalse: Enable the option to download the map as CSV and GeoJson\nifunset: MapComplete default: Enable the option to download the map as CSV and GeoJson\ngroup: feature_switches",
"description": "question: Should the 'download as CSV'- and 'download as Geojson'-buttons be enabled?\niftrue: Enable the option to download the map as CSV and GeoJson\niffalse: Disable the option to download the map as CSV and GeoJson\nifunset: MapComplete default: Enable the option to download the map as CSV and GeoJson\ngroup: feature_switches",
"type": "boolean"
},
"enablePdfDownload": {

4
Docs/Schemas/LayoutConfigJsonJSC.ts
View file

@ -104,7 +104,7 @@ export default {
"type": "boolean"
},
"layers": {
"description": "question: What layers should this map show?\ntype: layer[]\ntypes: hidden | layer | hidden\ngroup: layers\nsuggestions: return Array.from(layers.keys()).map(key => ({if: \"value=\"+key, then: \"<b>\"+key+\"</b> (builtin) - \"+layers.get(key).description}))\nEvery layer contains a description of which feature to display - the overpassTags which are queried.\nInstead of running one query for every layer, the query is fused.\n\nAfterwards, every layer is given the list of features.\nEvery layer takes away the features that match with them*, and give the leftovers to the next layers.\n\nThis implies that the _order_ of the layers is important in the case of features with the same tags;\nas the later layers might never receive their feature.\n\n*layers can also remove 'leftover'-features if the leftovers overlap with a feature in the layer itself\n\nNote that builtin layers can be reused. Either put in the name of the layer to reuse, or use {builtin: \"layername\", override: ...}\n\nThe 'override'-object will be copied over the original values of the layer, which allows to change certain aspects of the layer\n\nFor example: If you would like to use layer nature reserves, but only from a specific operator (eg. Natuurpunt) you would use the following in your theme:\n\n```\n\"layer\": {\n \"builtin\": \"nature_reserve\",\n \"override\": {\"source\":\n {\"osmTags\": {\n \"+and\":[\"operator=Natuurpunt\"]\n }\n }\n }\n}\n```\n\nIt's also possible to load multiple layers at once, for example, if you would like for both drinking water and benches to start at the zoomlevel at 12, you would use the following:\n\n```\n\"layer\": {\n \"builtin\": [\"benches\", \"drinking_water\"],\n \"override\": {\"minzoom\": 12}\n}\n```",
"description": "question: What layers should this map show?\ntype: layer[]\ntypes: hidden | layer | hidden\ngroup: layers\nsuggestions: return Array.from(layers.keys()).map(key => ({if: \"value=\"+key, then: \"<b>\"+key+\"</b> (builtin) - \"+layers.get(key).description}))\n\nA theme must contain at least one layer.\n\nA layer contains all features of a single type, for example \"shops\", \"bicycle pumps\", \"benches\".\nNote that every layer contains a specification of attributes that it should match. MapComplete will fetch the relevant data from either overpass, the OSM-API or the cache server.\nIf a feature can match multiple layers, the first matching layer in the list will be used.\nThis implies that the _order_ of the layers is important.\n\n\n<div class='hidden-in-studio'>\nNote that builtin layers can be reused. Either put in the name of the layer to reuse, or use {builtin: \"layername\", override: ...}\n\nThe 'override'-object will be copied over the original values of the layer, which allows to change certain aspects of the layer\n\nFor example: If you would like to use layer nature reserves, but only from a specific operator (eg. Natuurpunt) you would use the following in your theme:\n\n```\n\"layer\": {\n \"builtin\": \"nature_reserve\",\n \"override\": {\"source\":\n {\"osmTags\": {\n \"+and\":[\"operator=Natuurpunt\"]\n }\n }\n }\n}\n```\n\nIt's also possible to load multiple layers at once, for example, if you would like for both drinking water and benches to start at the zoomlevel at 12, you would use the following:\n\n```\n\"layer\": {\n \"builtin\": [\"benches\", \"drinking_water\"],\n \"override\": {\"minzoom\": 12}\n}\n```\n</div>",
"type": "array",
"items": {
"anyOf": [
@ -260,7 +260,7 @@ export default {
"type": "boolean"
},
"enableDownload": {
"description": "question: Should the 'download as CSV'- and 'download as Geojson'-buttons be enabled?\niftrue: Enable the option to download the map as CSV and GeoJson\niffalse: Enable the option to download the map as CSV and GeoJson\nifunset: MapComplete default: Enable the option to download the map as CSV and GeoJson\ngroup: feature_switches",
"description": "question: Should the 'download as CSV'- and 'download as Geojson'-buttons be enabled?\niftrue: Enable the option to download the map as CSV and GeoJson\niffalse: Disable the option to download the map as CSV and GeoJson\nifunset: MapComplete default: Enable the option to download the map as CSV and GeoJson\ngroup: feature_switches",
"type": "boolean"
},
"enablePdfDownload": {

12
public/css/index-tailwind-output.css
View file

@ -1163,6 +1163,10 @@ video {
height: 20rem;
}
.h-1\/6 {
height: 16.666667%;
}
.h-56 {
height: 14rem;
}
@ -1266,14 +1270,6 @@ video {
width: 4rem;
}
.w-5\/6 {
width: 83.333333%;
}
.w-1\/6 {
width: 16.666667%;
}
.w-min {
width: -webkit-min-content;
width: min-content;

14
src/Models/ThemeConfig/Json/LayoutConfigJson.ts
View file

@ -157,17 +157,16 @@ export interface LayoutConfigJson {
* types: hidden | layer | hidden
* group: layers
* suggestions: return Array.from(layers.keys()).map(key => ({if: "value="+key, then: "<b>"+key+"</b> (builtin) - "+layers.get(key).description}))
* Every layer contains a description of which feature to display - the overpassTags which are queried.
* Instead of running one query for every layer, the query is fused.
*
* Afterwards, every layer is given the list of features.
* Every layer takes away the features that match with them*, and give the leftovers to the next layers.
* A theme must contain at least one layer.
*
* This implies that the _order_ of the layers is important in the case of features with the same tags;
* as the later layers might never receive their feature.
* A layer contains all features of a single type, for example "shops", "bicycle pumps", "benches".
* Note that every layer contains a specification of attributes that it should match. MapComplete will fetch the relevant data from either overpass, the OSM-API or the cache server.
* If a feature can match multiple layers, the first matching layer in the list will be used.
* This implies that the _order_ of the layers is important.
*
* *layers can also remove 'leftover'-features if the leftovers overlap with a feature in the layer itself
*
* <div class='hidden-in-studio'>
* Note that builtin layers can be reused. Either put in the name of the layer to reuse, or use {builtin: "layername", override: ...}
*
* The 'override'-object will be copied over the original values of the layer, which allows to change certain aspects of the layer
@ -194,6 +193,7 @@ export interface LayoutConfigJson {
* "override": {"minzoom": 12}
* }
*```
* </div>
*/
layers: (
| LayerConfigJson

44
src/assets/schemas/layerconfigmeta.json
View file

@ -10275,6 +10275,10 @@
"if": "value=food",
"then": "food - A layer showing restaurants and fast-food amenities (with a special rendering for friteries)"
},
{
"if": "value=food_courts",
"then": "food_courts - Food courts with a variety of food options."
},
{
"if": "value=ghost_bike",
"then": "ghost_bike - A layer showing memorials for cyclists, killed in road accidents"
@ -10407,6 +10411,10 @@
"if": "value=osm_community_index",
"then": "osm_community_index - A layer showing the OpenStreetMap Communities"
},
{
"if": "value=outdoor_seating",
"then": "outdoor_seating - Outdoor seating areas, usually located near cafes and restaurants."
},
{
"if": "value=parcel_lockers",
"then": "parcel_lockers - Layer showing parcel lockers for collecting and sending parcels."
@ -11646,7 +11654,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -12918,7 +12930,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -14223,7 +14239,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -15544,7 +15564,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -16864,7 +16888,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -18185,7 +18213,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},

100
src/assets/schemas/layoutconfigmeta.json
View file

@ -556,6 +556,10 @@
"if": "value=food",
"then": "<b>food</b> (builtin) - A layer showing restaurants and fast-food amenities (with a special rendering for friteries)"
},
{
"if": "value=food_courts",
"then": "<b>food_courts</b> (builtin) - Food courts with a variety of food options."
},
{
"if": "value=ghost_bike",
"then": "<b>ghost_bike</b> (builtin) - A layer showing memorials for cyclists, killed in road accidents"
@ -688,6 +692,10 @@
"if": "value=osm_community_index",
"then": "<b>osm_community_index</b> (builtin) - A layer showing the OpenStreetMap Communities"
},
{
"if": "value=outdoor_seating",
"then": "<b>outdoor_seating</b> (builtin) - Outdoor seating areas, usually located near cafes and restaurants."
},
{
"if": "value=parcel_lockers",
"then": "<b>parcel_lockers</b> (builtin) - Layer showing parcel lockers for collecting and sending parcels."
@ -1908,7 +1916,7 @@
"type": "string"
}
],
"description": "Every layer contains a description of which feature to display - the overpassTags which are queried.\nInstead of running one query for every layer, the query is fused.\nAfterwards, every layer is given the list of features.\nEvery layer takes away the features that match with them*, and give the leftovers to the next layers.\nThis implies that the _order_ of the layers is important in the case of features with the same tags;\nas the later layers might never receive their feature.\n*layers can also remove 'leftover'-features if the leftovers overlap with a feature in the layer itself\nNote that builtin layers can be reused. Either put in the name of the layer to reuse, or use {builtin: \"layername\", override: ...}\nThe 'override'-object will be copied over the original values of the layer, which allows to change certain aspects of the layer\nFor example: If you would like to use layer nature reserves, but only from a specific operator (eg. Natuurpunt) you would use the following in your theme:\n```\n\"layer\": {\n \"builtin\": \"nature_reserve\",\n \"override\": {\"source\":\n {\"osmTags\": {\n \"+and\":[\"operator=Natuurpunt\"]\n }\n }\n }\n}\n```\nIt's also possible to load multiple layers at once, for example, if you would like for both drinking water and benches to start at the zoomlevel at 12, you would use the following:\n```\n\"layer\": {\n \"builtin\": [\"benches\", \"drinking_water\"],\n \"override\": {\"minzoom\": 12}\n}\n```"
"description": "A theme must contain at least one layer.\nA layer contains all features of a single type, for example \"shops\", \"bicycle pumps\", \"benches\".\nNote that every layer contains a specification of attributes that it should match. MapComplete will fetch the relevant data from either overpass, the OSM-API or the cache server.\nIf a feature can match multiple layers, the first matching layer in the list will be used.\nThis implies that the _order_ of the layers is important.\n<div class='hidden-in-studio'>\nNote that builtin layers can be reused. Either put in the name of the layer to reuse, or use {builtin: \"layername\", override: ...}\nThe 'override'-object will be copied over the original values of the layer, which allows to change certain aspects of the layer\nFor example: If you would like to use layer nature reserves, but only from a specific operator (eg. Natuurpunt) you would use the following in your theme:\n```\n\"layer\": {\n \"builtin\": \"nature_reserve\",\n \"override\": {\"source\":\n {\"osmTags\": {\n \"+and\":[\"operator=Natuurpunt\"]\n }\n }\n }\n}\n```\nIt's also possible to load multiple layers at once, for example, if you would like for both drinking water and benches to start at the zoomlevel at 12, you would use the following:\n```\n\"layer\": {\n \"builtin\": [\"benches\", \"drinking_water\"],\n \"override\": {\"minzoom\": 12}\n}\n```\n</div>"
},
{
"path": [
@ -12510,6 +12518,10 @@
"if": "value=food",
"then": "food - A layer showing restaurants and fast-food amenities (with a special rendering for friteries)"
},
{
"if": "value=food_courts",
"then": "food_courts - Food courts with a variety of food options."
},
{
"if": "value=ghost_bike",
"then": "ghost_bike - A layer showing memorials for cyclists, killed in road accidents"
@ -12642,6 +12654,10 @@
"if": "value=osm_community_index",
"then": "osm_community_index - A layer showing the OpenStreetMap Communities"
},
{
"if": "value=outdoor_seating",
"then": "outdoor_seating - Outdoor seating areas, usually located near cafes and restaurants."
},
{
"if": "value=parcel_lockers",
"then": "parcel_lockers - Layer showing parcel lockers for collecting and sending parcels."
@ -13908,7 +13924,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -15229,7 +15249,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -16584,7 +16608,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -17954,7 +17982,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -19323,7 +19355,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -20693,7 +20729,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -33133,6 +33173,10 @@
"if": "value=food",
"then": "food - A layer showing restaurants and fast-food amenities (with a special rendering for friteries)"
},
{
"if": "value=food_courts",
"then": "food_courts - Food courts with a variety of food options."
},
{
"if": "value=ghost_bike",
"then": "ghost_bike - A layer showing memorials for cyclists, killed in road accidents"
@ -33265,6 +33309,10 @@
"if": "value=osm_community_index",
"then": "osm_community_index - A layer showing the OpenStreetMap Communities"
},
{
"if": "value=outdoor_seating",
"then": "outdoor_seating - Outdoor seating areas, usually located near cafes and restaurants."
},
{
"if": "value=parcel_lockers",
"then": "parcel_lockers - Layer showing parcel lockers for collecting and sending parcels."
@ -34558,7 +34606,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -35928,7 +35980,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -37333,7 +37389,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -38752,7 +38812,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -40170,7 +40234,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -41589,7 +41657,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},
@ -43424,7 +43496,7 @@
"group": "feature_switches",
"question": "Should the 'download as CSV'- and 'download as Geojson'-buttons be enabled?",
"iftrue": "Enable the option to download the map as CSV and GeoJson",
"iffalse": "Enable the option to download the map as CSV and GeoJson",
"iffalse": "Disable the option to download the map as CSV and GeoJson",
"ifunset": "MapComplete default: Enable the option to download the map as CSV and GeoJson"
},
"type": "boolean",

6
src/assets/schemas/questionabletagrenderingconfigmeta.json
View file

@ -663,7 +663,11 @@
},
{
"if": "value=velopark",
"then": "<b>velopark</b> A custom element to allow copy-pasting velopark-pages"
"then": "<b>velopark</b> A special URL-validator that checks the domain name and rewrites to the correct velopark format."
},
{
"if": "value=currency",
"then": "<b>currency</b> Validates monetary amounts"
}
]
},

6
studio.html
View file

@ -10,6 +10,12 @@
<link href="css/ReviewElement.css" rel="stylesheet"/>
<link href="./css/index-tailwind-output.css" rel="stylesheet"/>
<link href="./css/wikipedia.css" rel="stylesheet"/>
<style>
.hidden-in-studio {
display: none;
}
</style>
</head>
<body>
<div id="main" class="h-full">Loading studio...</div>