Conference-Ticket-Validation/index.html at main · Testitech/Conference-Ticket-Validation · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags for character set and viewport settings -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Title of the webpage -->
    <title>user-auth.html</title>
    <!-- Favicon for the website -->
    <link rel="icon" href="images/favicon-32x32.png" />
    <!-- Link to the main stylesheet (CSS) -->
    <link rel="stylesheet" href="my.css" />
    <!-- Links to custom fonts -->
    <link
      rel="stylesheet"
      href="fonts/Inconsolata-VariableFont_wdth,wght.ttf"
    />
    <link rel="stylesheet" href="fonts/static/Inconsolata-Bold.ttf" />
    <link rel="stylesheet" href="fonts/static/Inconsolata-ExtraBold.ttf" />
    <link rel="stylesheet" href="fonts/static/Inconsolata-Regular.ttf" />
    <link rel="stylesheet" href="fonts/static/Inconsolata-Medium.ttf" />
    <!-- Link to the JavaScript file for validation -->
    <script src="code.js"></script>
  </head>
  <body>
    <!-- Section for the title and main content -->
    <section id="title">
      <main>
        <!-- Background and logo images for the page -->
        <div class="background-cover">
          <!-- Background image of the page -->
          <img
            class="background-image"
            src="./images/background-desktop.png"
            alt="Background Image"
          />
          <!-- Logo image centered on the page -->
          <img
            class="logo-full"
            src="./images/logo-full.svg"
            alt="Conference Logo"
          />
          <!-- Decorative pattern images -->
          <img
            class="pattern-lines"
            src="./images/pattern-lines.svg"
            alt="Pattern Lines"
          />
          <img
            class="pattern-squiggly-line-top"
            src="./images/pattern-squiggly-line-top.svg"
            alt="Squiggly Line Top"
          />
          <img
            class="pattern-circle"
            src="./images/pattern-circle.svg"
            alt="Pattern Circle"
          />
          <img
            class="pattern-squiggly-line-bottom"
            src="./images/pattern-squiggly-line-bottom.svg"
            alt="Squiggly Line Bottom"
          />
          <!-- Heading with text -->
          <h1 class="centered-text">
            Your journey to Coding Conf 2025 starts here!
          </h1>
          <!-- Paragraph with additional instructions -->
          <p class="para-text">
            Secure your spot at next year's biggest Coding Conference.
          </p>
        </div>

        <!-- Form section for user input (avatar upload and personal details) -->
        <div class="centered-div">
          <!-- Subtitle for uploading an avatar -->
          <h4>Upload Avatar</h4>
          <!-- Form for submitting user data -->
          <form onsubmit="return validate()" action="validated.html">
            <!-- File upload box for user avatar -->
            <div class="upload-box">
              <input type="file" id="image-upload" accept="image/*" />
              <!-- Upload icon for the avatar -->
              <img
                class="upl"
                src="./images/icon-upload.svg"
                alt="Upload Icon"
                draggable="true"
              />
              <!-- Label for the file input -->
              <label for="image-upload"
                ><span>Drag and Drop or Click to upload</span></label
              >
            </div>
            <!-- Information section about the file upload -->
            <div class="info">
              <img
                class="icon-info"
                src="./images/icon-info.svg"
                alt="Info Icon"
              />
              <!-- Small text providing instructions for the file -->
              <small>Upload your photo (JPG or PNG, max size: 500KB)</small>
              <small class="upl-err" id="img-err"></small>
            </div>
            <!-- Input for full name -->
            <div class="grey-container">
              <label class="label-3" for="full-name">Full Name</label>
              <input
                class="bg-colored"
                type="text"
                id="full-name"
                name="full-name"
              />
              <small class="err-1" id="name-error"></small>
            </div>
            <!-- Input for email address -->
            <div class="grey-container">
              <label class="label-3" for="email">Email Address</label>
              <input
                class="bg-colored"
                type="email"
                id="email"
                name="email"
                placeholder="example@email.com"
              />
              <small class="err-1" id="email-error"></small>
            </div>
            <!-- Input for GitHub username -->
            <div class="grey-container">
              <label class="label-3" for="github-username"
                >Github Username</label
              >
              <input
                class="bg-colored"
                type="text"
                id="github-username"
                name="github-username"
                placeholder="@yourusername"
              />
              <small class="err-1" id="username-error"></small>
            </div>
            <!-- Submit button for the form -->
            <button class="sub-btn" type="submit">Generate my Ticket</button>
          </form>
        </div>
      </main>
    </section>
  </body>
</html>