-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (60 loc) · 4.23 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Programming Languages Survey</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="c-screen-notice u-hidden@tablet u-hidden@landscape u-text-center u-padding-a-1">
<p class="u-background-yellow u-font-size-24 u-padding-a-1">It looks like you are using a small screen! <strong>Please rotate your device to landscape to see the full board.</strong></p>
<div class="c-screen-notice__icon">
<svg viewBox="0 0 488.631 488.631" xmlns="http://www.w3.org/2000/svg" fill="#777"><path d="m443.762 251.057h-161.456v34.625l161.592.072-.079 168.314s-.016 0-.057 0l-161.464-.064c-.006 12.669-3.686 24.393-9.667 34.626h171.131c19.138 0 34.699-15.561 34.699-34.697v-168.179c0-19.12-15.561-34.697-34.699-34.697z"/><path d="m213.053 100.678h-168.186c-19.128 0-34.697 15.569-34.697 34.697v318.558c0 19.136 15.569 34.697 34.697 34.697h80.338 87.848c19.122 0 34.691-15.561 34.691-34.697v-318.558c0-19.128-15.569-34.697-34.691-34.697zm-168.186 34.554 168.314.143-.072 283.972h-168.361zm65.766 317.785c0-10.113 8.202-18.316 18.308-18.316 10.146 0 18.349 8.202 18.349 18.316 0 10.122-8.202 18.341-18.349 18.341-10.106-.001-18.308-8.219-18.308-18.341z"/><path d="m361.752 128.511h-23.054c-1.673 0-3.171 1.003-3.815 2.558-.629 1.528-.279 3.312.899 4.483l40.448 40.455c1.616 1.602 4.221 1.602 5.837 0l40.448-40.455c1.171-1.171 1.53-2.955.9-4.483-.638-1.555-2.143-2.558-3.815-2.558h-23.293c-1.306-71.068-59.434-128.511-130.804-128.511-9.541 0-17.273 7.732-17.273 17.273 0 9.55 7.732 17.29 17.273 17.29 52.322 0 94.951 41.929 96.249 93.948z"/></svg>
</div>
</div>
<header class="a-wrapper">
<h1 class="u-padding-tb-2 u-margin-tb-0 u-font-size-36 u-text-center">How do you see these programming languages?</h1>
<div class="c-intro-content u-padding-b-1">
<div>
<img class="u-width-100p" src="./headshot-rotated.jpg" alt="picture of Lara and Felienne"/>
</div>
<div>
<p><em>Note: We are no longer accepting responses, but feel free to place the languages as an excerise, if you would like!</em></p>
<p class="a-paragraph-text">Hi! We are <a href="https://notlaura.com">Lara Schenck</a> and <a href="http://www.felienne.com/">Felienne Hermans</a>, and we are curious how you see programming languages.</p>
<p class="a-paragraph-text">Click any language (or add your own) and then drag them to where you think they fall on the spectrum. Place whichever languages you like, you don't need to do all of them.</p>
</div>
</div>
</header>
<section class="a-center">
<h2 class="a-screen-reader-only">Languages Slider</h2>
<p class="c-spectrum-label">Least Programming</p>
<div id="slider" class="c-slider js-slider u-width-100p a-center">
<div class="c-track js-track"></div>
</div>
<p class="c-spectrum-label">Most Programming</p>
</section>
<section class="u-padding-tb-2 u-font-size-16">
<h2 class="a-screen-reader-only">Languages Inventory</h2>
<div class="u-text-center">
<form id="addLanguage" class="u-width-100p a-center">
<label for="newLanguage" class="u-margin-r-1">Add Your Own: </label>
<input id="newLanguage" aria-label="Add a new language, enter to place it on the board" type="text" placeholder="Language to add" class="u-margin-r-1">
<button type="submit" aria-label="Add language">Add</button>
</form>
</div>
<div class="u-margin-t-250 a-center u-flex-wrap-wrap js-inventory u-font-size-16" id="inventory">
<p id="finalMessage" hidden="hidden">No more items to place! But you can add a new one using the form above.</p>
</div>
<div class="a-wrapper u-margin-t-250">
<p><label for="openText">What did you have in mind as you placed the languages?</label></p>
<textarea class="u-width-100p" id="openText" name="textfield" rows="5"></textarea>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js"></script>
<script src="./build/script.js"></script>
</body>
</html>