icslabspace.github.io/hireus.html at master · icslabspace/icslabspace.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
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
      <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=1">

    <!-- Site Properties -->
  <title>Independent Computer Science Laboratory - Hire Us!</title>
  <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.css">

  <link rel="stylesheet" type="text/css" href="semantic/dist/components/container.css">
  <link rel="stylesheet" type="text/css" href="semantic/dist/components/grid.css">
  <link rel="stylesheet" type="text/css" href="semantic/dist/components/header.css">
  <link rel="stylesheet" type="text/css" href="semantic/dist/components/image.css">

  <link rel="stylesheet" type="text/css" href="semantic/dist/components/divider.css">
  <link rel="stylesheet" type="text/css" href="semantic/dist/components/segment.css">
  <link rel="stylesheet" type="text/css" href="semantic/dist/components/button.css">
  <link rel="stylesheet" type="text/css" href="semantic/dist/components/list.css">
  <link rel="stylesheet" type="text/css" href="semantic/dist/components/icon.css">
  <link rel="stylesheet" type="text/css" href="assets/library/das-site.css">

  <script src="assets/library/jquery.min.js"></script>
  <script src="semantic/dist/semantic.js"></script>

	<style type="text/css">
		html, body, .segment {
			height: 100%;
		}
		@media only screen and (max-width: 700px) {
			html,body {
				height: inherit;
			}

			.segment {
				height: inherit
				device-height: 100%;
			}
		}
	</style>
</head>

<body>
    <div class="ui secondary inverted vertical masthead left aligned fixed segment">
        <div class="ui text container center aligned">
            <h2 class="ui inverted header">Hire us</h2>
            <p></p>
        </div>

		<div class="ui container" style="width:50%;">
            <form class="ui fluid form"
                  onsubmit="return validateAndSubmit()"
                  action="http://formspree.io/icslabcrew@gmail.com"
                  method="POST">

                <input type="hidden" name="_subject" value="New request to hire icslab team!" />
                <input type="hidden" name="_next" value="http://www.icslab.eu" />

<!--                NAME-->
                <div class="required inline field">
                    <input type="text" name="name" placeholder="Name" id="name">
                    <div class="ui left pointing red basic label" id="name_error" style="visibility:hidden;">
                    </div>
                </div>

<!--                EMAIL -->
                <div class="required inline field">
                    <input type="text" name="email" placeholder="Email" id="email">
                    <div class="ui left pointing red basic label" id="email_error" style="visibility:hidden;">
                    </div>
                </div>

<!--                PHONE-->
                <div class="inline field">
                    <input type="text" name="phone" placeholder="Phone number">
                </div>

<!--                PROJECT-->
                <div class="required inline field">
                    <textarea id="project" name="project" placeholder="Tell us about your project"></textarea>
                    <div class="ui pointing red basic label" id="project_error" style="visibility:hidden;">
                    </div>
                </div>

<!--                BUDGET-->
                <div class="required inline field">
                    <input type="text" name="budget" placeholder="Budget" id="budget">
                    <div class="ui left pointing red basic label" id="budget_error" style="visibility:hidden;">
                    </div>
                </div>

                <input class="ui submit inverted teal button" type="submit" value="Send">
<!--                <button class="ui submit inverted teal button" type="submit" value="Send">Submit</button> -->

        </form>
		</div>
	</div>

<!-- CONFIRMATION POPUP -->
<div id="modaldiv" class="ui small modal" style="visibility:hidden;width=50%;height=50%;">
    <i class="close icon"></i>
    <div class="header">
        Your message has been sent!
    </div>
    <div class="image content">
        <div class="small image">
            <i class="send icon"></i>
        </div>
        <div class="description">
            <p>Thank you for submitting your message. You will receive an answer from us soon!</p>
        </div>
    </div>
    <div class="actions">
        <div class="ui inverted teal button">
            <a href="main.html"/>
            <i class="checkmark icon"></i>
            OK
        </div>
    </div>
</div>
<script>

    var validForm = true;
    var error = "_error";

    function validateEmailString(email) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }

    function validateEmail(field_name, error_text) {
        var value = document.getElementById(field_name).value;
        if (!validateEmailString(value)) {
            validForm = false;
            showError(field_name, error_text);
        } else {
            hideError(field_name);
        }
    }

    function isEmpty(str) {
        return (!str || /^\s*$/.test(str));
    }

    function showError(field_name, error_text) {
        document.getElementById(field_name + error).innerHTML = error_text;
        document.getElementById(field_name + error).style.visibility = "visible";
    }

    function hideError(field_name) {
        document.getElementById(field_name + error).style.visibility = "hidden";
    }

    function getValueOrDisplayError(field_name, error_text) {
        var value = document.getElementById(field_name).value;
        if (isEmpty(value)) {
            validForm = false;
            showError(field_name, error_text);
        } else {
            hideError(field_name);
        }

        return value;
    }

    function validateAndSubmit() {
        validForm = true;

        // check against null
        var name = getValueOrDisplayError("name", "Your name is missing.");
        var email = getValueOrDisplayError("email", "We need an email to reach you.");
        if (email) {
            validateEmail("email", "We need a valid email to reach you.")
        }
        var project = getValueOrDisplayError("project", "What are you working on?");
        var budget = getValueOrDisplayError("budget", "We need to know your budget.");

        if (validForm) {
            $('#modaldiv')
                .modal({
                      onApprove: function() {
                      window.location.href = "main.html";
                    }})
                .modal('show');
        }

        return validForm;
    }

</script>

</body>
</html>