fractals/public/index.html at 148e6a6e2a17f14c204b59c3ea368c07932223c5

Fork: 0

peter / fractals

Find file

Newer

Older

fractals / public / index.html

peter on 12 Oct 2019 2 KB Added sliders to play around with the parameters for the Koch curve.

Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="rgb(0,0,16)">
    <!-- Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Fractals</title>
    <!-- svg works only for Firefox (17.8.2019) -->
    <link rel="icon" href="style/favicon.svg" type="image/svg+xml" sizes="any">
    <link rel="icon" type="image/png" href="style/favicon32.png" sizes="32x32">
    <link rel="manifest" href="manifest.json">

    <link rel="stylesheet" href="style/core.css">
    <style>
        /* html, body {
        } */
        .tile {
            margin: 3px;
            padding: 8px;
            background-color: rgb(0,0,16);
            display: inline-block;
        }

        .slider-group > * {
            margin-top: 1em;
        }

        .labelled-slider {
            width: 100%;
            display: flex;
        }
        .labelled-slider input[type=range] {
            width: 100%;
            flex-grow: 1;
            align-self: center;
        }
        .labelled-slider span {
            width: 5ex;
        }

        @media screen and (max-width:430px) {
            html, body,            
            .tile {
                margin-left: 0;
                margin-right: 0;
            }
            h1 {
                margin-left: 8px;
            }
        }
    </style>
</head>
<body>
    <h1>Inward spiral</h1>
    <div class="tile">
        <h2>Square</h2>
        <div id="square"></div>
    </div>
    <div class="tile">
        <h2>Triangle</h2>
        <div id="triangle"></div>
    </div>
    <div class="tile">
        <h2>Hexagonal</h2>
        <div id="hexagonal"></div>
    </div>
    <div id="elmApp"></div>

    <script src="js/index.js"></script>
    <script src="js/elm.js"></script>
    <script>
        const elmApp = Elm.Main.init({
            node: document.getElementById("elmApp")
        });
    </script>
</body>
</html>