examples/apps/detect-platform.html

<!doctype html>

<html lang="en">

<head>
    <title>Detect Platform</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="../../src/tamarack.css" rel="stylesheet" type="text/css" />
    <script src="../../src/core.js"></script>
    <script src="../../src/view.js"></script>
    <script src="../../src/app.js"></script>
</head>

<body>
    <style>
        .platformText, .deviceText {
            padding: 0.5rem;
            margin: 0.5rem;
            border-radius: var(--tk-border-radius);
        }

        [web] .platformText {
            background: rgba(255, 65, 65, 0.5);
        }

        [electron] .platformText {
            background: rgba(65, 201, 255, 0.5);
        }

        [cordova] .platformText {
            background: rgba(65, 255, 75, 0.5);
        }

        [desktop] .deviceText {
            background: rgba(204, 204, 204, 0.5);
        }

        [android] .deviceText {
            background: rgba(252, 255, 65, 0.5);
        }

        [iphone] .deviceText {
            background: rgba(255, 195, 65, 0.5);
        }

        [ipad] .deviceText {
            background: rgba(170, 65, 255, 0.5);
        }
    </style>

    <script>
        // Add needed attributes at startup
        TkApp.init();

        // Print the current app platform
        let platformText = new TkText("h1", {
            parent: TkAppContentView,
            text: `App platform: ${TkApp.platform}`,
            classes: ["platformText"]
        });

        // Print the current app device
        let deviceText = new TkText("h1", {
            parent: TkAppContentView,
            text: `App device: ${TkApp.device}`,
            classes: ["deviceText"]
        });    
    </script>
</body>

</html>