-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (186 loc) · 36.8 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EDX-CP VISUALIZATIONS</title>
<meta name="description" content=""/>
<meta name="keywords" content="edx, visualizations, cp, minicp, jobshop"/>
<!-- advanced seo -->
<meta property="og:type" content="website">
<meta property="og:title" content="EDX-CP web based visualizations">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:locale" content="en_EN">
<meta name="robots" content="index, follow">
<style>
:root{--primary:#6c63ff;--primary-dark:#544af4;--line-light:#efefef;--container:80%;--container-max:1356px;--text:#161617;--text-light:#656565}body,html{padding:0;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;color:var(--text)}a{color:inherit;text-decoration:none}*{box-sizing:border-box}.center{text-align:center}.invisible{position:absolute;height:0;width:0;visibility:hidden}.plain__link{color:var(--primary);text-decoration:underline;transition:color .3s;cursor:pointer}.plain__link:hover{color:var(--primary-dark)}.red{color:red}.marquee{background-color:#000;color:#fff;padding:4px 0;font-size:14px;font-weight:400}.marquee svg{max-width:32px}.marquee div,.marquee svg{margin-right:33vw}.hero{width:var(--container);max-width:var(--container-max);margin:120px auto 50px}@media(min-width:600px){.hero{margin:160px auto 100px}}.hero__bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background:radial-gradient(circle at 12% 55%,rgba(33,150,243,.15),hsla(0,0%,100%,0) 25%),radial-gradient(circle at 85% 33%,rgba(108,99,255,.175),hsla(0,0%,100%,0) 25%)}.hero__title{font-size:56px;line-height:64px;font-weight:700;max-width:580px;letter-spacing:-.022em;margin:0 0 40px}.hero__text{font-size:18px;line-height:1.7;color:#656565;letter-spacing:-.014em;max-width:680px;margin:0 0 40px}.hero__cta{background-color:#000;color:#fff;display:inline-flex;align-items:center;padding:10px 24px;border-radius:24px;font-size:14px;cursor:pointer;transition:background-color .3s;margin-bottom:40px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.hero__cta svg{margin-top:1px;margin-left:8px}.hero__cta:hover{background-color:#333}.hero__details{font-size:13px;color:#656565;letter-spacing:-.014em}.hero__details strike{color:var(--text)}.hero__details strong{color:var(--text);font-weight:600}@media(min-width:600px){.hero__details{font-size:14px}}.hero__details span{text-decoration:underline;color:var(--text)}.hero__tools{padding-bottom:80px;margin:0 auto}.hero__tools,.page{width:var(--container);max-width:var(--container-max)}.page{margin:48px auto}@media(min-width:992px){.page{margin:64px auto}}.page__header{display:flex;justify-content:space-between;align-items:center}.page__options{text-align:center}.page__title{font-size:20px;font-weight:700;margin:0 0 12px;letter-spacing:-.017em}.page__textContainer{max-width:560px;margin:0 auto;text-align:left}.page__textContainer p{font-size:14px;line-height:24px;letter-spacing:-.006em}.page__content__title{font-size:18px;display:flex;align-items:center;justify-content:center;letter-spacing:-.014em;line-height:1.2;margin:0 0 40px}.page__content__title svg{height:24px;width:24px;margin-right:8px;color:var(--primary)}.page__content__cta{margin-top:44px;text-align:center}.page__content__cta .photoresult__btn{margin:0 auto;display:inline-flex}.page__details{margin:0;font-size:14px;line-height:24px;letter-spacing:-.006em;max-width:560px;color:#656565}.page__content{margin-top:40px}@media(min-width:992px){.page__content{margin-top:64px}}.page__error{font-size:14px;padding-top:24px}.nav,.nav--fixed{border-bottom:1px solid var(--line-light)}.nav--fixed{position:fixed;top:0;left:0;width:100%;background-color:#fff}.nav__inner{height:56px;width:var(--container);max-width:var(--container-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between}.nav__menu__link{font-size:14px;letter-spacing:-.006em;color:var(--text);margin-left:16px;display:none;color:var(--text-light);transition:color .3s}.nav__menu__link:hover{color:var(--text)}@media(min-width:600px){.nav__menu__link{display:inline-block}}.nav__menu__btn{margin-left:16px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--family);font-size:14px;padding:6px 16px;border-radius:24px;cursor:pointer;background:transparent;color:var(--text);border:1px solid #aaa;transition:border-color .3s}@media(min-width:600px){.nav__menu__btn{padding:5px 20px}}.nav__menu__btn:hover{border-color:#777}.nav__menu__action{margin-left:12px;border:none;display:inline-flex;align-items:center;justify-content:center;height:32px;width:32px;cursor:pointer;border-radius:8px;transition:background-color .3s;background-color:#fff}.nav__menu__action:hover{background-color:#efefef}.logo{display:flex;align-items:center;color:var(--text);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.logo__text{font-size:16px;font-weight:800;letter-spacing:-.011em}.logo__icon{height:32px;width:32px;margin-right:10px}.logo__accent{color:var(--primary);margin-left:0px}.uploadImageBtn{display:inline-flex;align-items:center;justify-content:center;border:1px dashed #aaa;border-radius:24px;padding:6px 24px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:border-color .3s}.uploadImageBtn:hover{border-color:#777}.uploadImageBtn__icon{width:20px;height:20px}.uploadImageBtn__text{font-size:12px;margin-left:8px;padding-top:2px}@media(min-width:992px){.photoresult{display:flex;align-items:center}}.photoresult__feedback{width:20%;flex-shrink:0}.photoresult__main{max-width:640px;max-height:480px;flex-grow:1;margin:0 16px}.photoresult__options{flex-shrink:0;display:flex;flex-direction:column;align-items:center;margin-top:40px}@media(min-width:992px){.photoresult__options{width:20%;margin-top:0}}.photoresult__image{display:block;margin:0 auto;max-width:100%;max-height:480px;box-shadow:1px 2px 2px rgba(0,0,0,.1),2px 4px 4px rgba(0,0,0,.1),4px 8px 8px rgba(0,0,0,.1),8px 16px 16px rgba(0,0,0,.1),16px 32px 32px rgba(0,0,0,.1)}.photoresult__btn{display:flex;align-items:center;justify-content:center;font-family:var(--family);font-size:12px;padding:8px 24px;border-radius:24px;cursor:pointer;background:transparent;color:var(--text);border:1px solid #ccc;margin-bottom:16px;transition:border-color .3s}@media(min-width:992px){.photoresult__btn{margin-bottom:24px}}.photoresult__btn:hover{border-color:#888}.photoresult__btn svg{height:14px;width:14px;margin-right:8px}.photoresult__btn--main{border:none;background-color:#000;color:#fff;transition:background-color .3s}.photoresult__btn--main:hover{background-color:#333}.coverform{display:flex;flex-wrap:wrap;max-width:800px;margin:0 auto;text-align:left}@media(min-width:600px){.coverform{justify-content:center}}.coverform__field{margin-right:16px;margin-bottom:16px;flex-grow:1}@media(min-width:992px){.coverform__field{flex-grow:0;margin-bottom:0}}.coverform__label{font-size:11px;display:block;margin-bottom:8px}@media(min-width:600px){.covers{grid-template-columns:repeat(2,1fr)}}@media(min-width:992px){.covers{grid-template-columns:repeat(3,1fr)}}.covers__title{margin-top:32px;margin-bottom:16px;font-size:12px;text-align:left}@media(min-width:992px){.covers__title{margin-top:48px}}.cover{width:320px;height:160px;border-radius:8px;box-shadow:.5px 1px 1px rgba(0,0,0,.075),1px 2px 2px rgba(0,0,0,.075),2px 4px 4px rgba(0,0,0,.075),4px 8px 8px rgba(0,0,0,.075),8px 16px 16px rgba(0,0,0,.075);cursor:pointer;transition:box-shadow .3s}.cover:hover{box-shadow:.5px 1px 1px rgba(0,0,0,.125),1px 2px 2px rgba(0,0,0,.125),2px 4px 4px rgba(0,0,0,.125),4px 8px 8px rgba(0,0,0,.125),8px 16px 16px rgba(0,0,0,.125)}.colorpicker__preview{display:inline-block;height:32px;width:80px;border-radius:24px;cursor:pointer;border:1px solid var(--line-light)}.colorpicker__overlay{background-color:rgba(43,46,56,.9);position:fixed;top:0;left:0;right:0;bottom:0;z-index:100}.colorpicker__page{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:12px;padding:16px 24px;outline:none;margin-top:-16px;width:var(--container);max-width:800px;z-index:101;max-height:70vh;overflow-y:scroll}@media(min-width:600px){.colorpicker__page{overflow-y:auto;margin-top:-40px;padding:24px 32px}}.colorpicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.colorpicker__title{margin:0;font-size:18px;font-weight:700;letter-spacing:-.014em}.colorpicker__close{display:flex;align-items:center;justify-content:center;font-family:var(--family);font-size:12px;padding:4px 16px;border-radius:24px;cursor:pointer;background:#fff;color:var(--text);border:1px solid #ccc;transition:border-color .3s}.colorpicker__close:hover{border-color:#888}.colorpicker__close svg{height:14px;width:14px;margin-right:6px}.colorpicker__category{margin-bottom:24px}.colorpicker__label{font-size:12px;display:block;margin:0 0 16px;font-weight:500!important;text-align:left}.colorpicker__colors{display:flex;flex-wrap:wrap}.colorpicker__color{display:inline-block;height:28px;width:64px;border-radius:24px;cursor:pointer;margin-right:24px;margin-bottom:20px}@media(min-width:600px){.colorpicker__color{width:80px}}.colorpicker__form{display:flex;flex-wrap:wrap}.colorpicker__form button{background-color:#000;border:none;height:28px;width:28px;color:#fff;border-radius:24px;cursor:pointer;transition:background-color .3s;display:flex;align-items:center;justify-content:center;flex-grow:1}@media(min-width:600px){.colorpicker__form button{flex-grow:0}}.colorpicker__form button:hover{background-color:#333}.colorpicker__form button svg{height:14px;width:14px}.colorpicker__form__inp{height:28px;font-size:12px;margin-bottom:16px}@media(min-width:600px){.colorpicker__form__inp{margin-right:12px;width:80px!important;margin-bottom:0}}.colorpicker__form__inp::-moz-placeholder{font-size:12px}.colorpicker__form__inp:-ms-input-placeholder{font-size:12px}.colorpicker__form__inp::placeholder{font-size:12px}.debug{background-color:red;position:fixed;z-index:1000;width:100%;height:1px}.hometools{display:flex;justify-content:space-between;flex-wrap:wrap}.hometool{display:flex;align-items:center;width:100%;border:1px solid #ddd;padding:20px 24px;border-radius:12px;cursor:pointer;transition:box-shadow .3s;margin-bottom:40px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media(min-width:600px){.hometool{width:48%}}@media(min-width:992px){.hometool{width:31%}}.hometool:hover{box-shadow:1px 1px 1px rgba(0,0,0,.025),2px 2px 2px rgba(0,0,0,.025),4px 4px 4px rgba(0,0,0,.025),8px 8px 8px rgba(0,0,0,.025)}.hometool--nohover{cursor:default}.hometool--soon{opacity:.5;pointer-events:none}.hometool--soon:hover{box-shadow:none}.hometool--soon .hometool__text{font-size:12px;font-weight:500}.hometool svg{flex-shrink:0;margin-left:16px;height:64px;width:64px}@media(min-width:992px){.hometool svg{margin-left:24px;height:64px;width:64px}}.hometool--ghost{height:0;padding:0;visibility:hidden;cursor:default;pointer-events:none}.hometool__content{flex-grow:1}.hometool__title{font-size:16px;margin:0 0 8px;color:var(--text);letter-spacing:-.011em}.hometool__text{margin:0;line-height:21px}.footer,.hometool__text{font-size:14px;letter-spacing:-.006em;color:#656565}.footer{width:var(--container);max-width:var(--container-max);margin:0 auto;padding-bottom:64px;text-align:center}@media(min-width:600px){.footer{text-align:left;display:flex;justify-content:space-between}}.footer__text{margin:0 0 16px}.footer__right{text-align:center;padding-top:32px}@media(min-width:600px){.footer__right{padding-top:0;text-align:right}}.footer__menu{margin-bottom:16px}.footer__link{margin-left:6px;cursor:pointer;transition:color .3s}.footer__link:hover{color:var(--text)}.footer__link:before{content:"·";margin-right:6px}.footer__link:first-child:before{content:"";margin-right:0}.footer__stress{color:var(--text);border-bottom:1px solid #aaa;cursor:pointer;transition:border-color .3s}.footer__stress:hover{border-color:var(--text)}.login{width:var(--container);max-width:var(--container-max);margin:80px auto;text-align:center}.login h1{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.021em;margin:0 0 16px}.login p{font-size:16px;line-height:1.7;color:#656565;letter-spacing:-.011em;margin:0 0 32px}.login input{font-family:var(--family);display:block;width:100%;max-width:400px;height:33px;padding:0 12px;border-radius:24px;border:1px solid #ccc;transition:border-color .3s;margin:0 auto 32px}.login input:focus{border:1px solid #555;outline:none}.login button{margin-left:16px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--family);font-size:14px;padding:6px 16px;border-radius:24px;cursor:pointer;background:#000;color:#fff;border:none;transition:background-color .3s;margin-bottom:36px}@media(min-width:600px){.login button{padding:6px 20px}}.login button:hover{background-color:#333}.login__illo{max-width:240px;margin-top:40px}.login__error{font-size:14px;background-color:#fafafa;border-left:5px solid red;padding:12px;border-top-right-radius:12px;border-bottom-right-radius:12px;max-width:400px;margin:0 auto}.login__error--distantTop{margin-top:48px;max-width:480px}.checkout__page{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:12px;padding:16px 24px;outline:none;margin-top:-16px;width:var(--container);max-width:480px;z-index:101;max-height:70vh;text-align:center}@media(min-width:600px){.checkout__page{margin-top:-40px;padding:24px 32px}}.checkout__title{font-size:18px;font-weight:700;letter-spacing:-.014em;margin:16px 0}.checkout__text{font-size:14px;line-height:21px;letter-spacing:-.006em;color:#656565;text-align:left;margin:0 0 20px}.checkout__btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--family);font-size:12px;padding:8px 24px;border-radius:24px;cursor:pointer;background-color:#000;color:#fff;border:none;transition:background-color .3s;margin-bottom:12px}.checkout__btn:hover{background-color:#333}.checkout__btn svg{height:14px;width:14px;margin-left:8px}.terms{width:var(--container);max-width:800px;margin:0 auto 120px}.terms h2{font-size:24px;font-weight:700;letter-spacing:-.018em;margin:40px 0 24px}.terms h3{font-weight:600;font-size:18px;font-weight:700;letter-spacing:-.014em;margin:32px 0 12px}.terms p{margin:0 0 24px;font-size:16px;letter-spacing:-.011em;line-height:1.8;color:var(--text-light)}.terms strong{font-weight:600;color:var(--text)}.terms a{color:var(--primary);text-decoration:underline;transition:color .3s}.terms a:hover{color:var(--primary-dark)}.feed{width:var(--container);max-width:480px;margin:24px auto 0;text-align:left}.feed__event{border-bottom:1px solid var(--line-light);padding-bottom:40px;margin-bottom:40px}.feed__event__title{font-size:15px;line-height:23px;letter-spacing:-.011em;margin-bottom:8px}.feed__event__title strong{font-weight:600}.feed__event__meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:-.006em;color:var(--text-light)}.feed__event__img{margin-top:16px;max-width:100%;border-radius:8px}.feed__event__options{display:flex;align-items:center}.feed__event__options__btn{margin-left:12px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--family);font-size:14px;border-radius:8px;cursor:pointer;background:transparent;color:var(--text);border:1px solid #ccc;transition:border-color .3s;height:32px;width:32px}.feed__event__options__btn svg{height:12px;width:12px}.feed__event__options__btn:hover{border-color:#777}.feed__event__options__btn--secondary{margin-left:12px;border:none;display:inline-flex;align-items:center;justify-content:center;height:32px;width:32px;cursor:pointer;border-radius:8px;transition:background-color .3s}.feed__event__options__btn--secondary:hover{background-color:#eee}.feed_more_btn{display:flex;align-items:center;justify-content:center;font-family:var(--family);font-size:12px;padding:8px 24px;border-radius:24px;cursor:pointer;background:transparent;color:var(--text);border:1px solid #ccc;margin:0 auto 24px;transition:border-color .3s}.feed_more_btn:hover{border-color:var(--text)}.landtools{width:var(--container);max-width:var(--container-max);padding-bottom:80px;margin:0 auto}.landtool{width:40%;border:1px solid #ddd;border-radius:24px;min-height:100px;padding:16px 32px}.landtool__media{display:block;max-width:100%;margin:0 auto 16px;max-width:320px;max-height:240px}.landtool__text{margin:0;font-size:15px;line-height:21px;letter-spacing:-.006em;font-weight:400}.hometool__soon{background-color:#fafafa;border:1px solid #ddd;font-size:11px;font-weight:400;padding:2px 12px;border-radius:24px;margin-left:4px;line-height:1}.hometool__soon--new{background-color:#263238;border:none;color:#ddd}.detailsCard{background:#fafafa;border:1px solid #eee;max-width:560px;padding:12px 16px 8px;border-radius:24px;width:80%;box-shadow:1px 1px 1px rgba(0,0,0,.025),2px 2px 2px rgba(0,0,0,.025),4px 4px 4px rgba(0,0,0,.025),12px 12px 12px rgba(0,0,0,.025)}.detailsCard__arrow{fill:#ddd}.detailsCard__img{max-width:100%;display:block;border-radius:12px}@media(min-width:992px){.email__container{display:flex;align-items:center;justify-content:space-between}}.email__container .photoresult__btn{margin-bottom:0}.email__container__left{text-align:center;margin-bottom:24px}@media(min-width:992px){.email__container__left{width:20%;flex-shrink:0;text-align:left;margin-bottom:0}}.email__container__right{flex-shrink:0;margin-top:40px;text-align:center}@media(min-width:992px){.email__container__right{width:20%;margin-top:0;display:flex;align-items:center;justify-content:flex-end}}.email__container__main{max-width:600px;flex-grow:1;margin:0 16px}.emailEditor{border:1px solid #ddd;border-radius:12px;padding:40px 64px}.ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{color:#adb5bd;content:attr(data-placeholder);font-size:14px;float:left;height:0;pointer-events:none}.emailEditor__samplelink{font-size:14px;color:var(--primary);text-decoration:underline;transition:color .3s;display:block;margin-bottom:16px}.emailEditor__samplelink:hover{color:var(--primary-dark)}.emailEditor__header{text-align:center;margin-bottom:40px;height:48px}.emailEditor__header,.emailEditor__uploadLogo{display:flex;align-items:center;justify-content:center}.emailEditor__uploadLogo{font-size:12px;cursor:pointer;color:var(--text-light);transition:color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.emailEditor__uploadLogo:hover{color:var(--text)}.emailEditor__uploadLogo span{margin-left:8px}.emailEditor__logo{max-height:48px;max-width:320px;display:block;cursor:pointer}.emailEditor__logo:hover{opacity:.5}.emailEditor__title{display:block;width:100%;max-width:400px;font-size:24px;text-align:center;font-weight:700;border:none;resize:none;font-family:var(--family);line-height:32px;margin:0 auto 40px;letter-spacing:-.019em}.emailEditor__title:focus{outline:none}.emailEditor__title::-moz-placeholder{font-weight:400;font-size:16px}.emailEditor__title:-ms-input-placeholder{font-weight:400;font-size:16px}.emailEditor__title::placeholder{font-weight:400;font-size:16px}.emailEditor__textEditor{font-size:16px;line-height:27px}.emailEditor__textEditor h2{font-size:18px;font-weight:700;margin-top:32px;margin-bottom:12px}.emailEditor__textEditor p{margin:0 0 24px;color:#333;letter-spacing:-.011em}.emailEditor__textEditor a{color:var(--primary);text-decoration:underline}.emailEditor__textEditor img{display:block;max-width:100%;margin-bottom:24px}.emailEditor__textEditor img.ProseMirror-selectednode{outline:1px solid var(--primary)}.emailEditor__bubbleMenu{background:#000;border-radius:12px;overflow:hidden;box-shadow:.5px 5px 5px rgba(0,0,0,.1),1px 1px 1px rgba(0,0,0,.1),2px 2px 2px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center}.emailEditor__bubbleMenu button{height:36px;width:36px;background-color:#000;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,background-color .15s}.emailEditor__bubbleMenu button:hover{background-color:#333}.emailEditor__bubbleMenu button.is-active{background-color:var(--primary);color:#fff}.emailEditor__bubbleMenu__divider{width:1px;height:36px;background-color:#333}.emailEditor__floatingMenu button{height:32px;width:32px;border:1px solid #ccc;background-color:#fff;color:var(--text-light);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,border-color .15s;border-radius:8px;margin-left:-60px}.emailEditor__floatingMenu button:hover{border-color:#aaa;color:var(--text)}.emailEditor__divider{height:1px;width:100%;background-color:var(--line-light);margin:40px 0}.emailEditor__footer{text-align:center;font-size:12px;color:var(--text-light)}.emailEditor__footer__edit{font-size:12px;cursor:pointer;color:var(--text-light);transition:color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.emailEditor__footer__edit:hover{color:var(--text)}.iconsGrid{display:grid;padding-bottom:64px;grid-row-gap:40px;max-width:280px;margin:0 auto}@media(min-width:600px){.iconsGrid{grid-template-columns:repeat(3,1fr);grid-column-gap:48px;grid-row-gap:40px;max-width:var(--container-max)}}@media(min-width:992px){.iconsGrid{grid-template-columns:repeat(5,1fr);grid-column-gap:40px;grid-row-gap:56px;margin-bottom:64px}}.iconsGrid__item{border:1px solid var(--line-light);background-color:#fafafa;border-radius:8px;cursor:pointer;text-align:center;padding:24px 16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:border-color .3s}.iconsGrid__item:hover{border-color:#aaa}.iconsGrid__item__text{margin:16px 0 0;font-size:14px;color:var(--text-light);letter-spacing:-.006em}button{cursor: pointer;}
</style>
</head>
<body>
<nav class="nav">
<div class="nav__inner">
<a href="/">
<div class="logo">
<span class="logo__text logo__accent flex">
EDX Visualizations
</span>
</div>
</a>
<div class="nav__menu">
<a href="https://github.com/minicp/visualizations" class="nav__menu__btn">
Github
</a>
</div>
</div>
</nav>
<div class="hero__bg">
<br><br><br><br>
<!-- CONTENTS -->
<div class="hero__tools" style="min-height: 100vh;">
<h1>EDX Visualizations </h1>
<div class="hometools">
<!-- tool 1 -->
<div class="hometool">
<a href="/visualizations/jobshop" target="_blank">
<div class=" hometool--nohover" data-state="closed">
<div class="hometool__content">
<h2 class="hometool__title">
Jobshop
<span class="hometool__soon hometool__soon--new">New</span>
</h2>
<p class="hometool__text">Jobshop Visualization</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="gradient_text_covers_icon_svg__a" x1="0.079" y1="0.074" x2="0.929" y2="0.919" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#EC008C"></stop><stop offset="1" stop-color="#FC6767"></stop>
</linearGradient>
</defs>
<path d="M64 480C28.65 480 0 451.3 0 416V352C0 316.7 28.65 288 64 288H448C483.3 288 512 316.7 512 352V416C512 451.3 483.3 480 448 480H64zM448 416V352H64V416H448zM288 160C288 195.3 259.3 224 224 224H64C28.65 224 0 195.3 0 160V96C0 60.65 28.65 32 64 32H368C412.2 32 448 67.82 448 112V128H486.1C507.4 128 518.1 153.9 503 168.1L432.1 239C423.6 248.4 408.4 248.4 399 239L328.1 168.1C313.9 153.9 324.6 128 345.9 128H384V112C384 103.2 376.8 96 368 96H288V160z" fill="url(#gradient_text_covers_icon_svg__a)"/>
</svg>
</div>
</a>
</div>
<!-- tool 2 -->
<div class="hometool">
<a href="/visualizations/discrete-optimization/coloring" target="_blank">
<div class="hometool--nohover" data-state="closed">
<div class="hometool__content">
<h2 class="hometool__title">Graph Coloring</h2>
<p class="hometool__text">Graph Coloring Visualization</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><defs><linearGradient id="illu_icons_svg__a" x1="0.5" y1="0.5" x2="0.061" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#ff4b1f"></stop><stop offset="1" stop-color="#ff9068"></stop></linearGradient></defs><path d="M0 80C0 53.49 21.49 32 48 32H144C170.5 32 192 53.49 192 80V96H384V80C384 53.49 405.5 32 432 32H528C554.5 32 576 53.49 576 80V176C576 202.5 554.5 224 528 224H432C405.5 224 384 202.5 384 176V160H192V176C192 177.7 191.9 179.4 191.7 180.1L272 288H368C394.5 288 416 309.5 416 336V432C416 458.5 394.5 480 368 480H272C245.5 480 224 458.5 224 432V336C224 334.3 224.1 332.6 224.3 331L144 224H48C21.49 224 0 202.5 0 176V80z" fill="url(#illu_icons_svg__a)"></path></svg>
</div>
</a>
</div>
<!-- tool 3 -->
<div class="hometool">
<a href="/visualizations/discrete-optimization/tsp" target="_blank">
<div class="hometool--nohover" data-state="closed">
<div class="hometool__content">
<h2 class="hometool__title">Traveling Salesman</h2>
<p class="hometool__text">Traveling Salesman Visualization </p>
</div>
<svg viewBox="0 0 80 80"><defs><linearGradient id="animated_alerts_svg__a" x1="0.5" y1="0.5" x2="0.061" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#50C9C3"></stop><stop offset="1" stop-color="#96DEDA"></stop></linearGradient></defs><path d="M0 26.56C0 4.688 4.688 0 26.56 0h26.88C75.312 0 80 4.688 80 26.56v26.88C80 75.312 75.312 80 53.44 80H26.56C4.688 80 0 75.312 0 53.44z" fill="url(#animated_alerts_svg__a)"></path><path d="M43.5 15.858a7.222 7.222 0 013.104 2.92l16.76 29.204a7.192 7.192 0 01-.018 7.265 7.2 7.2 0 01-6.301 3.617l-33.671-.087a7.265 7.265 0 01-6.266-10.91L34.019 18.75a7.3 7.3 0 019.48-2.887zm-22.547 40.64a5.553 5.553 0 002.425.557c9.856-3.425 19.849-6.503 33.671.087a5.476 5.476 0 004.807-2.76 5.486 5.486 0 00.015-5.542L45.11 19.636a5.49 5.49 0 00-4.796-2.78 5.476 5.476 0 00-4.807 2.758L18.597 48.731a5.56 5.56 0 002.353 7.77z" fill="#fff"></path><path d="M45.104 33.646a.5.5 0 10-.707.707l1.146 1.147h-.793a4.407 4.407 0 00-3.128 1.389 17.951 17.951 0 00-1.877 2.279c-.132.178-.263.356-.395.532-1.491 1.988-3.11 3.8-6.1 3.8a.5.5 0 000 1c3.51 0 5.391-2.188 6.9-4.2q.216-.287.42-.565a16.757 16.757 0 011.745-2.124A3.416 3.416 0 0144.75 36.5h.793l-1.147 1.146a.5.5 0 00.707.707l2-2a.5.5 0 000-.707zM33.25 35.5a7.534 7.534 0 016.005 3.067l-.129.175c-.128.173-.253.343-.376.507l-.108.143A6.664 6.664 0 0033.25 36.5a.5.5 0 010-1zm8.372 7.611a13.9 13.9 0 01-1.414-1.656c.189-.238.369-.474.542-.7l.09-.12a14.112 14.112 0 001.475 1.754A3.416 3.416 0 0044.75 43.5h.793l-1.147-1.146a.5.5 0 01.707-.707l2 2a.5.5 0 010 .707l-2 2a.5.5 0 01-.707-.707l1.147-1.147h-.793a4.407 4.407 0 01-3.128-1.389z" fill="#fff" fill-rule="evenodd"></path></svg>
</div>
</a>
</div>
<!-- tool 4 -->
<div class="hometool">
<a href="/visualizations/discrete-optimization/facility" target="_blank">
<div class="hometool--nohover" data-state="closed">
<div class="hometool__content">
<h2 class="hometool__title">Facility Location</h2>
<p class="hometool__text">Facility Location Visualization</p>
</div>
<svg viewBox="0 0 80 80"><defs><linearGradient id="gradients_svg__a" x1="0.079" y1="0.074" x2="0.929" y2="0.919" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#7928ca"></stop><stop offset="1" stop-color="#ff0080"></stop></linearGradient></defs><path d="M0 26.56C0 4.688 4.688 0 26.56 0h26.88C75.312 0 80 4.688 80 26.56v26.88C80 75.312 75.312 80 53.44 80H26.56C4.688 80 0 75.312 0 53.44z" fill="url(#gradients_svg__a)"></path><g fill="#fff"><path d="M55.108 43.286a3.522 3.522 0 01-2.076-.677l-7.488-5.434a3.553 3.553 0 01-.788-4.956l5.434-7.488a3.548 3.548 0 014.956-.788l7.488 5.434a3.553 3.553 0 01.788 4.956l-5.434 7.488a3.525 3.525 0 01-2.315 1.42 3.6 3.6 0 01-.565.045z" opacity="0.749"></path><path d="M35.8 37.348h-9.252A3.552 3.552 0 0123 33.8v-9.252A3.552 3.552 0 0126.548 21H35.8a3.552 3.552 0 013.548 3.548V33.8a3.552 3.552 0 01-3.548 3.548z"></path><path d="M35.8 58.059h-9.252A3.552 3.552 0 0123 54.508v-9.252a3.552 3.552 0 013.548-3.548H35.8a3.552 3.552 0 013.548 3.548v9.252a3.552 3.552 0 01-3.548 3.551z" opacity="0.269"></path></g></svg>
</div>
</a>
</div>
<!-- tool 5 -->
<div class="hometool">
<a href="/visualizations/discrete-optimization/vrp" target="_blank">
<div class="hometool--nohover" data-state="closed">
<div class="hometool__content">
<h2 class="hometool__title">Vehicle Routing</h2>
<p class="hometool__text">Vehicle Routing Visualization</p>
</div>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="86.02px" height="86.02px" viewBox="0 0 86.02 86.02" style="enable-background:new 0 0 86.02 86.02;" xml:space="preserve">
<g>
<path d="M0.354,48.874l0.118,25.351c0.001,0.326,0.181,0.624,0.467,0.779l20.249,10.602c0.132,0.071,0.276,0.106,0.421,0.106
c0.001,0,0.001,0,0.002,0c0.061,0.068,0.129,0.133,0.211,0.182c0.14,0.084,0.297,0.126,0.455,0.126
c0.146,0,0.291-0.035,0.423-0.106l19.992-10.842c0.183-0.099,0.315-0.261,0.392-0.445c0.081,0.155,0.203,0.292,0.364,0.379
l20.248,10.602c0.132,0.071,0.277,0.106,0.422,0.106c0.001,0,0.001,0,0.002,0c0.062,0.068,0.129,0.133,0.21,0.182
c0.142,0.084,0.299,0.126,0.456,0.126c0.146,0,0.29-0.035,0.422-0.106L85.2,75.071c0.287-0.154,0.467-0.456,0.467-0.783V47.911
c0-0.008-0.004-0.016-0.004-0.022c0-0.006,0.002-0.013,0.002-0.021c-0.001-0.023-0.01-0.049-0.014-0.072
c-0.007-0.05-0.014-0.098-0.027-0.146c-0.011-0.031-0.023-0.062-0.038-0.093c-0.019-0.042-0.037-0.082-0.062-0.12
c-0.019-0.03-0.04-0.058-0.062-0.084c-0.028-0.034-0.059-0.066-0.092-0.097c-0.025-0.023-0.054-0.045-0.083-0.066
c-0.02-0.012-0.034-0.03-0.056-0.043c-0.02-0.011-0.041-0.017-0.062-0.025c-0.019-0.01-0.03-0.022-0.049-0.029l-20.603-9.978
c-0.082-0.034-0.17-0.038-0.257-0.047V10.865c0-0.007-0.002-0.015-0.002-0.022c-0.001-0.007,0.001-0.013,0.001-0.02
c-0.001-0.025-0.012-0.049-0.015-0.073c-0.007-0.049-0.014-0.098-0.027-0.145c-0.01-0.032-0.024-0.063-0.038-0.093
c-0.02-0.042-0.036-0.083-0.062-0.12c-0.02-0.03-0.041-0.057-0.062-0.084c-0.028-0.034-0.058-0.067-0.091-0.097
c-0.025-0.023-0.055-0.045-0.083-0.065c-0.021-0.014-0.035-0.032-0.056-0.045c-0.021-0.011-0.042-0.016-0.062-0.026
c-0.019-0.009-0.031-0.021-0.048-0.027L43.118,0.07c-0.24-0.102-0.512-0.093-0.746,0.025L22.009,10.71
c-0.299,0.151-0.487,0.456-0.489,0.79c0,0.006,0.002,0.011,0.002,0.016c-0.037,0.099-0.063,0.202-0.063,0.312l0.118,25.233
c-0.106,0.011-0.213,0.03-0.311,0.079L0.903,47.755c-0.298,0.15-0.487,0.456-0.489,0.791c0,0.005,0.003,0.009,0.003,0.015
C0.379,48.659,0.353,48.764,0.354,48.874z M61.321,10.964L43.372,21l-19.005-9.485l18.438-9.646L61.321,10.964z M62.486,37.008
l-18.214,9.586V22.535l18.214-10.18V37.008z M65.674,59.58l18.214-10.179v24.355l-18.214,9.883V59.58z M45.77,48.559l18.438-9.646
l18.515,9.099L64.775,58.045L45.77,48.559z M23.165,59.58L41.38,49.402v24.355l-18.215,9.882V59.58z M3.262,48.559L21.7,38.913
l18.515,9.099L22.266,58.045L3.262,48.559z"/>
</g>
</svg>
</div>
</a>
</div>
<!-- tool 6 - soon -->
<!-- <div class="hometool">
<a href="">
<div class="hometool--nohover" data-state="closed">
<div class="hometool__content">
<h2 class="hometool__title">XXXXXX
<span class="hometool__soon">Soon</span>
</h2>
<p class="hometool__text">lorem lorem lorem & lorem lorem</p>
</div>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="86.02px" height="86.02px" viewBox="0 0 86.02 86.02" style="enable-background:new 0 0 86.02 86.02;" xml:space="preserve">
<g>
<path d="M0.354,48.874l0.118,25.351c0.001,0.326,0.181,0.624,0.467,0.779l20.249,10.602c0.132,0.071,0.276,0.106,0.421,0.106
c0.001,0,0.001,0,0.002,0c0.061,0.068,0.129,0.133,0.211,0.182c0.14,0.084,0.297,0.126,0.455,0.126
c0.146,0,0.291-0.035,0.423-0.106l19.992-10.842c0.183-0.099,0.315-0.261,0.392-0.445c0.081,0.155,0.203,0.292,0.364,0.379
l20.248,10.602c0.132,0.071,0.277,0.106,0.422,0.106c0.001,0,0.001,0,0.002,0c0.062,0.068,0.129,0.133,0.21,0.182
c0.142,0.084,0.299,0.126,0.456,0.126c0.146,0,0.29-0.035,0.422-0.106L85.2,75.071c0.287-0.154,0.467-0.456,0.467-0.783V47.911
c0-0.008-0.004-0.016-0.004-0.022c0-0.006,0.002-0.013,0.002-0.021c-0.001-0.023-0.01-0.049-0.014-0.072
c-0.007-0.05-0.014-0.098-0.027-0.146c-0.011-0.031-0.023-0.062-0.038-0.093c-0.019-0.042-0.037-0.082-0.062-0.12
c-0.019-0.03-0.04-0.058-0.062-0.084c-0.028-0.034-0.059-0.066-0.092-0.097c-0.025-0.023-0.054-0.045-0.083-0.066
c-0.02-0.012-0.034-0.03-0.056-0.043c-0.02-0.011-0.041-0.017-0.062-0.025c-0.019-0.01-0.03-0.022-0.049-0.029l-20.603-9.978
c-0.082-0.034-0.17-0.038-0.257-0.047V10.865c0-0.007-0.002-0.015-0.002-0.022c-0.001-0.007,0.001-0.013,0.001-0.02
c-0.001-0.025-0.012-0.049-0.015-0.073c-0.007-0.049-0.014-0.098-0.027-0.145c-0.01-0.032-0.024-0.063-0.038-0.093
c-0.02-0.042-0.036-0.083-0.062-0.12c-0.02-0.03-0.041-0.057-0.062-0.084c-0.028-0.034-0.058-0.067-0.091-0.097
c-0.025-0.023-0.055-0.045-0.083-0.065c-0.021-0.014-0.035-0.032-0.056-0.045c-0.021-0.011-0.042-0.016-0.062-0.026
c-0.019-0.009-0.031-0.021-0.048-0.027L43.118,0.07c-0.24-0.102-0.512-0.093-0.746,0.025L22.009,10.71
c-0.299,0.151-0.487,0.456-0.489,0.79c0,0.006,0.002,0.011,0.002,0.016c-0.037,0.099-0.063,0.202-0.063,0.312l0.118,25.233
c-0.106,0.011-0.213,0.03-0.311,0.079L0.903,47.755c-0.298,0.15-0.487,0.456-0.489,0.791c0,0.005,0.003,0.009,0.003,0.015
C0.379,48.659,0.353,48.764,0.354,48.874z M61.321,10.964L43.372,21l-19.005-9.485l18.438-9.646L61.321,10.964z M62.486,37.008
l-18.214,9.586V22.535l18.214-10.18V37.008z M65.674,59.58l18.214-10.179v24.355l-18.214,9.883V59.58z M45.77,48.559l18.438-9.646
l18.515,9.099L64.775,58.045L45.77,48.559z M23.165,59.58L41.38,49.402v24.355l-18.215,9.882V59.58z M3.262,48.559L21.7,38.913
l18.515,9.099L22.266,58.045L3.262,48.559z"/>
</g>
</svg>
</div>
</a>
</div> -->
<div class="hometool hometool--ghost"></div>
<div class="hometool hometool--ghost"></div>
</div>
</div>
<!-- FOOTER -->
<footer class="footer">
<p class="" style="text-align: center; width: 100%;">
© 2022 EDX-CP | All rights reserved
</p>
</footer>
</div>
</body>
</html>