<!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;
}
.rowContainer > * {
margin-top: 1em;
width: 100%;
}
.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>
