devicefuture.github.io/index.html at main · devicefuture/devicefuture.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
    <head>
        <title>DeviceFuture</title>
        <meta charset="utf-8">
        <meta name="description" content="We build projects for learning to code, like the atto fantasy computer">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, minimal-ui">
        <link rel="shortcut icon" href="/media/icon.png">
        <link rel="stylesheet" href="/fonts/fonts.css">
        <link rel="stylesheet" href="/style.css">
        <script type="module" src="/script.js"></script>
    </head>
    <body>
        <nav>
            <a href="/">
                <img src="/media/wordmark.svg" alt="DeviceFuture">
            </a>
        </nav>
        <main>
            <section class="cover">
                <h1><span class="secondary">Hi there!</span> We build projects for learning to code, like the <span class="secondary">atto</span> fantasy computer</h1>
            </section>
            <section>
                <div class="split">
                    <div>
                        <h2>atto</h2>
                        <p>We wanted to put the instant excitement of seeing your own code run for the first time back into programming. Using a professional development environment can be unappealing to younger learners, and too complex for first-time coders. That's why we built atto, our <em>fantasy computer</em> and programming language that you can get to grips with in seconds.</p>
                        <button onclick="window.open('https:\/\/atto.devicefuture.org');">Open atto</button>
                    </div>
                    <iframe src="https://atto.devicefuture.org/?code=5%20rem%20Prints%20the%20Fibonacci%20Sequence%0A10%20dim%20sequence%0A20%20input%20%22Number%20of%20steps%3F%20%22%2C%20count%25%0A30%20a%3D0%3Ab%3D1%0A40%20for%20i%3D1%20to%20count%25%0A50%20c%3Da%0A60%20a%3Db%0A70%20b%3Dc%2Bb%0A80%20push%20b%2C%20sequence%0A90%20next%0A100%20print%20sequence&runmode=list&embed=true&theme=light" class="attoDemo"></iframe>
                </div>
            </section>
        </main>
        <footer>
            <img src="/media/supported-by-liveg.svg" alt="Supported by LiveG" height="64">
            <p>Copyright © DeviceFuture Authors and Contributors. All Rights Reserved.</p>
        </footer>
    </body>
</html>