Responsive APL Splash Screen with logo and hint

responsive-splash-screen.json

{
    "document": {
        "type": "APL",
        "version": "1.0",
        "theme": "dark",
        "import": [],
        "resources": [],
        "styles": {},
        "layouts": {
            "ResponsiveSplashLayout": {
                "parameters": [
                    "backgroundImage",
                    "logoImage",
                    "titleText",
                    "hintText"
                ],
                "items": [
                    {
                        "type": "Container",
                        "height": "100vh",
                        "width": "100vw",
                        "alignItems": "center",
                        "justifyContent": "center",
                        "items": [
                            {
                                "description": "Background image with 20% opacity",
                                "type": "Image",
                                "source": "${backgroundImage}",
                                "overlayColor": "rgba(0, 0, 0, 0.2)",
                                "height": "100vh",
                                "width": "100vw",
                                "position": "absolute",
                                "scale": "best-fill"
                            },
                            {
                                "description": "White frame with 95% opacity. Width is 70% except for round screens (left and right borders are outside of the viewport)",
                                "type": "Frame",
                                "backgroundColor": "rgba(255,255,255, 0.95)",
                                "width": "${viewport.shape != 'round' ? '70vw' : '150vw'}",
                                "height": "65vh",
                                "borderRadius": "2vh",
                                "paddingTop": "2vh",
                                "paddingBottom": "2vh",
                                "paddingLeft": "2vh",
                                "paddingRight": "2vh",
                                "items": [
                                    {
                                        "description": "Colored border frame",
                                        "type": "Frame",
                                        "height": "100%",
                                        "width": "100%",
                                        "borderRadius": "2vh",
                                        "borderColor": "black",
                                        "borderWidth": "2px",
                                        "items": [
                                            {
                                                "type": "Container",
                                                "width": "100%",
                                                "alignItems": "center",
                                                "paddingTop": "5vh",
                                                "items": [
                                                    {
                                                        "description": "Title, hidden on round screens",
                                                        "when": "${viewport.shape != 'round'}",
                                                        "type": "Text",
                                                        "text": "${titleText}",
                                                        "textAlign": "center",
                                                        "fontFamily": "Arial",
                                                        "color": "black",
                                                        "fontSize": "9vh",
                                                        "paddingBottom": "2vh"
                                                    },
                                                    {
                                                        "description": "Logo",
                                                        "type": "Image",
                                                        "source": "${logoImage}",
                                                        "width": "25vw",
                                                        "height": "25vh"
                                                    },
                                                    {
                                                        "description": "Hint, width set to frame width for large screens, 80% for round screens",
                                                        "type": "Text",
                                                        "text": "<i>${hintText}</i>",
                                                        "textAlign": "center",
                                                        "fontFamily": "Bookerly",
                                                        "color": "black",
                                                        "fontSize": "7vh",
                                                        "width": "${viewport.shape != 'round' ? '65vw' : '80vw'}",
                                                        "paddingTop": "4vh"
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        },
        "mainTemplate": {
            "parameters": [
                "dataSources"
            ],
            "items": [
                {
                    "type": "ResponsiveSplashLayout",
                    "backgroundImage": "${dataSources.splash.properties.backgroundImage}",
                    "logoImage": "${dataSources.splash.properties.logoImage}",
                    "titleText": "${dataSources.splash.properties.titleText}",
                    "hintText": "${dataSources.splash.properties.hintText}"
                }
            ]
        }
    },
    "dataSources": {
        "splash": {
            "type": "Object",
            "properties": {
                "backgroundImage": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Sunrise_at_Columbia_River_in_Washington_1.jpg/800px-Sunrise_at_Columbia_River_in_Washington_1.jpg",
                "logoImage": "https://via.placeholder.com/300?text=Skill%20Logo",
                "titleText": "Welcome to this Skill",
                "hintText": "Try \"give me the last update\""
            }
        }
    }
}