<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>WebMetal demos</title>
<link rel="stylesheet" href="https://webkit.org/wp-content/themes/webkit/style.css">
<link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Myriad+Set+Pro&amp;v=1">
<style>
* {
    --back: rgb(130, 130, 126);
    --dark: rgb(65, 65, 63);
    --sub-highlight: rgb(148, 176, 83);
    --highlight: rgb(189, 235, 7);
    --body: rgb(224, 224, 224);
    --body-darker: rgb(204, 204, 204);
}

body {
    background-color: var(--body);
    color: var(--dark);
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

header {
    position: relative;
    height: 20vw;
    background-color: var(--back);
    overflow: hidden;
    border-bottom: none;
}

header * {
    position: absolute;
    top: 0;
    left: 30vw;
}

header img {
    width: 40vw;
    height: 40vw;
    animation: spin 60s infinite linear;
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

h1 {
    top: 10vw;
    width: 40vw;
    margin: 0 auto;
    font-size: 5vw;
    text-align: center;
    font-weight: bold;
    color: var(--dark);
    line-height: 1.0;
    text-shadow: 0px 2px 0px var(--back);
}

section.demos {
    display: grid;
    margin: 5vw 20vw;
    grid-template-columns: 16vw 16vw 16vw;
    grid-gap: 6vw;
}

section p {
    padding: 12px 20px;
    color: var(--dark);
}

section p a {
    text-decoration: none;
    color: var(--sub-highlight);
    font-weight: bold;
}

.intro {
    grid-column: 1 / 4;
    grid-row: 1;
}

.howto {
    grid-column: 1 / 4;
    grid-row: 2;
}

.warning {
    grid-column: 1 / 4;
    grid-row: 3;
    border: 2px solid var(--sub-highlight);
    background-color: var(--highlight);
    color: black;
}

.example {
    border: 2px solid var(--sub-highlight);
    text-align: center;
    padding: 10px 10px;
    background-color: var(--body-darker);
}

.example img {
    background-color: black;
    border: 1px solid black;
    box-sizing: border-box;
    width: 12vw;
    height: 12vw;
}

.example a {
    text-decoration: none;
    color: var(--dark);
}

@media only screen and (max-width: 600px) {
    header {
        height: 40vw;
    }

    header * {
        left: 10vw;
    }

    header img {
        width: 80vw;
        height: 80vw;
    }

    h1 {
        top: 20vw;
        width: 80vw;
        font-size: 10vw;
    }

    section.demos {
        margin: 5vw 5vw;
        grid-template-columns: 90vw;
        grid-gap: 6vw;
    }

    .intro, .howto, .warning {
        grid-column: 1;
    }

    .example img {
        width: 70vw;
        height: 70vw;
    }
}

</style>
</head>
<body>
    <header>
        <img src="circle.svg">
        <h1>WebMetal<br>demos</h1>
    </header>
    <section class="demos">
        <p class="intro">
            Here are a collection of simple <a
            href="https://webkit.org/blog/7380/next-generation-3d-graphics-on-the-web/">WebMetal</a>
            examples. They should work in the latest <a
            href="https://developer.apple.com/safari/technology-preview/">Safari
             Technology Preview</a> releases, as well as <a
            href="https://webkit.org/nightly/">nightly WebKit</a> builds. At
            the moment there are a few small differences between the
            implementation and the <a
            href="https://webkit.org/wp-content/uploads/webgpu-api-proposal.html
            ">documented proposal</a>, most of which are documented in the code.
        </p>
        <p class="howto">
            Make sure you are on a system with WebMetal enabled. In Safari, first
            make sure the Developer Menu is visible (Preferences → Advanced),
            then Develop → Experimental Features → Enable WebMetal.
        </p>
        <p class="warning">
            WebMetal is an experimental technology, and you should not browse the entire
            Web with it enabled for now. It doesn't do any validation of content, and
            thus may cause some issues with your computer.
        </p>
        <div class="example">
            <a href="hello.html">
            <img src="hello.jpg"><br>
            Hello World Triangle
            </a>
        </div>
        <div class="example">
            <a href="2d.html">
            <img src="2d.jpg"><br>
            2d-drawing like Shadertoy
            </a>
        </div>
        <div class="example">
            <a href="simple.html">
            <img src="simple.jpg"><br>
            Simple Spinning Cube
            </a>
        </div>
        <div class="example">
            <a href="cubes.html">
            <img src="cubes.jpg"><br>
            Animating Cubes
            </a>
        </div>
    </section>
</div>
</body>
</html>