<!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="resources/circle.svg">
        <h1>Web GPU<br>demos</h1>
    </header>
    <section class="demos">
        <p class="intro">
            Here are a collection of simple <a
            href="https://en.wikipedia.org/wiki/WebGPU">Web GPU</a>
            examples. They should work in the latest <a
            href="https://webkit.org/build-archives/">WebKit</a> builds, and 
            soon in a <a
            href="https://developer.apple.com/safari/technology-preview/">Safari
             Technology Preview</a> release. The full specification is a work-in-progress on <a
            href="https://github.com/gpuweb/gpuweb
            ">GitHub</a>, and the implementation may differ from the current API.
        </p>
        <p class="howto">
            Make sure you are on a system with Web GPU enabled. In Safari, first
            make sure the Developer Menu is visible (Preferences → Advanced),
            then ensure Develop → Experimental Features → Web GPU is checked.
        </p>
        <p class="warning">
            Web GPU is an experimental technology, and you should not browse the entire
            Web with it enabled for now. It doesn't do much validation of content, and
            thus may cause some issues with your computer.
        </p>
        <div class="example">
            <a href="hello-triangle.html">
            <img src="resources/hello-triangle.png"><br>
            Hello World Triangle
            </a>
        </div>
        <div class="example">
            <a href="hello-cube.html">
            <img src="resources/hello-cube.png"><br>
            Textured Spinning Cube
            </a>
        </div>
    </section>
</div>
</body>
</html>