a4-creative-coding/home.html at main · bplima/a4-creative-coding · 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
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="/home.js"></script>
    <title>DoodleBoard</title>

    <meta charset="utf-8" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      type="text/css"
      href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300&display=swap"
      rel="stylesheet"
    />
    <style>
      h1 {
        font-family: "Azeret Mono", monospace;
        background-image: linear-gradient(
          to left,
          violet,
          indigo,
          blue,
          green,
          yellow,
          orange,
          red
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        font-weight: bold;
        border: 5px solid #000;
        border-radius: 25px;
      }

      .demo-wrap {
        background: white;
      }

      h2 {
        font-family: "Azeret Mono", monospace;
        text-align: center;
      }

      body {
        font-family: "Azeret Mono", monospace;
        background-image: url("https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F86215940-4642-4ac3-952e-0c81a0f637a0.jpg?fit=scale-down&source=next&width=700");
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        opacity: 0.95;
      }

      p {
        font-family: "Azeret Mono", monospace;
        font-size: 24px;
      }

      #popup {
        font-family: "Azeret Mono", monospace;
        display: block;
        width: 555px;
        height: 375px;
        background: #FFFFFF;
        border: 5px solid #000;
        border-radius: 25px;
        position: relative;
        top: 150px;
        left: 375px;
        text-align: center;
      }

      #welcomeScreen {
        font-family: "Azeret Mono", monospace;
        display: block;
      }

      #doodleBtn {
        background-image: linear-gradient(
          to left,
          violet,
          indigo,
          blue,
          green,
          yellow,
          orange,
          red
        );
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        font-weight: bold;
        border: 5px solid #000;
        border-radius: 25px;
        cursor: pointer;
      }

    </style>
  </head>
  <body id="homebody">
    <div class="demo-wrap">
      <div class="demo-content">
        <h1 class="rainbow-text">DoodleBoard</h1>
      </div>
    </div>

    <div id="popup">
      <div id="welcomeScreen">
        <h2>Instructions</h2>
        <p>
          Once you hit the Doodle button, feel free to draw whatever you desire!
        </p>
        <button id="doodleBtn" onclick="window.location.href='canvas.html'">
          Doodle!
        </button>
        <p>
          Just left click, drag your mouse, and put together a masterpiece!
        </p>
      </div>
    </div>
  </body>
</html>