avatar-creator/index.html at master · PfGirlsWhoCode/avatar-creator · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>PfGWC Avatar Maker</title>
</head>

<body style="text-align: center;">
  <div class="container-fluid">

    <h1>PfGWC Avatar Maker</h1>
    <h5>(Note: This was made in only 32 days by beginners, please remember this Thank you!)</h5>
    <h6>This project was made by Pflugerville's Girls Who Code Club :)</h6>

    <div class="row">
      <div class="col-sm">
        <!-- Nothing here -->
      </div>
      <div class="col-sm">
        <!-- Where the avatar is drawn -->
        <canvas id="avatarCanvas" width="300" height="500"></canvas>
      </div>
      <div class="col-sm" style="background-color: rgb(244, 201, 250);">
        <!-- All of the Avatar options -->
        <h1>To make an avatar...</h1>
        <form name="formGender">
          <h3>Choose a gender</h3>
          Female <input type="radio" name="myradio" value="Female" />
          Male <input type="radio" name="myradio" value="Male" />
        </form>

        <form name="formShape">
          <h3>Choose a body shape</h3>
          Triangle <input type="radio" name="myradio" value="Triangle" />
          Pear <input type="radio" name="myradio" value="Pear" />
          Apple <input type="radio" name="myradio" value="Apple" />
          Rectangle <input type="radio" name="myradio" value="Rectangle" />
          Hourglass <input type="radio" name="myradio" value="Hourglass" />
        </form>

        <form name="formeyes">
          <h3>Choose an eye color</h3>
          Blue <input type="radio" name="myradio" value="Blue" />
          Green <input type="radio" name="myradio" value="Green" />
          Brown <input type="radio" name="myradio" value="Brown" />
          Ogre <input type="radio" name="myradio" value="Ogre" />
        </form>

        <form name="formnoses">
          <h3>Choose a nose shape</h3>
          Triangle<input type="radio" name="myradio" value="Triangle" />
          Flat<input type="radio" name="myradio" value="Flat" />
        </form>

        <form name="formHair">
          <h3>Choose a hair length</h3>
          No hair <input type="radio" name="myradio" value="Nohair" />
          Short <input type="radio" name="myradio" value="Shorthair" />
          Medium <input type="radio" name="myradio" value="Mediumhair" />
          Long <input type="radio" name="myradio" value="Longhair" />
        </form>

        <form name="formHaircolor">
          <h3>Choose a hair color</h3>
          Blonde <input type="radio" name="myradio" value="blonde" />
          Brown <input type="radio" name="myradio" value="brown" />
          Red <input type="radio" name="myradio" value="red" />
          Black <input type="radio" name="myradio" value="black" />
          Blue <input type="radio" name="myradio" value="blue" />
          Pink <input type="radio" name="myradio" value="pink" />
          Green <input type="radio" name="myradio" value="green" />
        </form>

        <form name="formclothing">
          <h3>Choose some Clothing </h3>
          Dress <input type="radio" name="myradio" value="clothingdress" />
          Suit <input type="radio" name="myradio" value="clothingsuit" />
          T-Shirt & Jeans <input type="radio" name="myradio" value="clothingtshirtjeans" />
          Athletic Wear <input type="radio" name="myradio" value="clothingathletic" />
          Swim Wear <input type="radio" name="myradio" vaule="SwimWear"/>
        </form>

        <form name="formFootwear">
          <h3>Choose footwear</h3>
          Barefoot <input type="radio" name="myradio" value="noshoe" />
          Invisible Shoes <input type="radio" name="myradio" value="invshoe" />
          Invisible Boots <input type="radio" name="myradio" value="invboot" />
        </form>

      </div>
    </div>

    <p>
      <a href="about/">About us</a>
    </p>

    <!-- Javascript files -->
    <script src="js/canvas.js"></script>
    <script src="js/images.js"></script>
    <script src="js/avatar.js"></script>
    <script src="js/bodyshape.js"></script>
    <script src="js/gender.js"></script>
    <script src="js/eye.js"></script>
    <script src="js/clothes.js"></script>
    <script src="js/hair.js"></script>
    <script src="js/nose.js"></script>
    <script src="js/footwear.js"></script>
</body>

</html>