TreeGenerator/index.html at master · ShinyStar/TreeGenerator · 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>

<head>
    <title>
        Tree Generator
    </title>

    <script src="treeGenerator.js"></script>
</head>

<body style="background:skyblue;text-align:center;color:saddlebrown;font-family:'Tahoma';font-size:1em">
    <!--Github Ribbon (https://github.com/blog/273-github-ribbons)-->
    <a href="https://github.com/ShinyStar/TreeGenerator"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>

    <h1 style="display:inline; color:white">
        <del>I don't want to draw ahem</del> Tree Generator</h1> by <a href="https://twitter.com/SilviShinyStar">SilviShinyStar</a><br>
    <hr>
    <div style="text-align:center; margin:15px;padding:15px;border:2px solid saddlebrown;position:absolute;box-shadow:0 0 3px saddlebrown; background-color: #fcdd95">
        <b>Options</b>
        <hr>
        <div style="display: block; height:110px">
            <div style="float:left; height:110px">
                <h3 style="color: black; padding-top: 40%">SHAPES</h3>
            </div>
            <div style="float:right; height:110px">
                <img src="leafTypes/leaf1.png"><input type="checkbox" id=t0></input>
                <img src="leafTypes/leaf2.png"><input type="checkbox" id=t1></input>
                <img src="leafTypes/leaf3.png"><input type="checkbox" id=t2></input>
                <img src="leafTypes/leaf4.png"><input type="checkbox" id=t3></input><br>
                <img src="leafTypes/leaf5.png"><input type="checkbox" id=t4></input>
                <img src="leafTypes/leaf6.png"><input type="checkbox" id=t5></input>
                <img src="leafTypes/leaf7.png"><input type="checkbox" id=t6></input>
            </div>
        </div>
        <hr>
        <br>
        <div style="display: block; height:110px">
            <div style="float:left; height:110px">
                <h3 style="color: black; padding-top: 50%;">COLORS</h3>
            </div>
            <div style="float:right; height:110px">
                <img src="leafTypes/color1.png"><input type="checkbox" id=c0></input>
                <img src="leafTypes/color2.png"><input type="checkbox" id=c1></input>
                <img src="leafTypes/color3.png"><input type="checkbox" id=c2></input>
                <img src="leafTypes/color4.png"><input type="checkbox" id=c3></input><br>
                <img src="leafTypes/color5.png"><input type="checkbox" id=c4></input>
                <img src="leafTypes/color6.png"><input type="checkbox" id=c5></input>
                <img src="leafTypes/color7.png"><input type="checkbox" id=c6></input>
            </div>
        </div>
        <hr>
        <div style="display: block; margin:5%">
            <button id="generate" onClick="createTree(100, 600)" style="width:200px;height:50px;font-size:1.5em;">Generate!</button>
        </div>
    </div>
    <canvas id="canvas" width=1500 height=1000></canvas>
</body>