index.html

<!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>Chaizo</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" crossorigin="include"></script>
</head>

<body>

    <div class="top" id="top">
        <!-- <h1 id="header">Meet Chaizo</h1> -->
        <img class="top-heading-img" src="./images/meetChizu.svg" alt="meet Chizu">
        <span class="top-span-text"><br />for sprinters, marathon runners and <br />
            teams that want to get things done <strong>seamlessly</strong>.</span>
        <p class="text">
            Introducing a focused development platform <br />that suits
            <span class="highlight-squad">your squad's</span> process & needs.
        </p>

        <div class="animation">
            <img class="animation-man" src="./images/leftMan.svg" alt="left man">
            <!-- <img src="./images/machinen.svg" alt="machine" class="moving"> -->
            <div class="animation-wrapper animation-machine">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="eQACnN89ULS1" viewBox="0 0 371 382" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
                <g id="eQACnN89ULS2" clip-path="url(#eQACnN89ULS22)">
                    <g id="eQACnN89ULS3">
                        <path id="eQACnN89ULS4"
                            d="M268.826,160.641L101.332,160.641C59.7859,160.641,26.1064,194.377,26.1064,235.992L26.1064,306.649C26.1064,348.264,59.7859,382,101.332,382L268.826,382C310.372,382,344.052,348.264,344.052,306.649L344.052,235.992C344.052,194.377,310.372,160.641,268.826,160.641Z"
                            transform="matrix(1 0 0 1 -0.166 0)" fill="rgb(14,15,17)" stroke="none" stroke-width="1" />
                        <path id="eQACnN89ULS5"
                            d="M100.746,144.467L33.5756,144.467L0.054688,202.727L33.6305,260.969L100.746,260.969L134.34,202.727L100.746,144.467ZM94.759,250.571L39.5804,250.571L11.9911,202.727L39.5804,154.865L94.7407,154.865L122.312,202.727L94.759,250.571Z"
                            fill="rgb(135,210,215)" stroke="none" stroke-width="1"
                            transform="matrix(-0.840094 0.542442 -0.542442 -0.840094 233.612057 336.569446)" />
                        <path id="eQACnN89ULS6"
                            d="M83.9394,173.625L50.3819,173.625L33.6123,202.727L50.3819,231.811L83.9394,231.811L100.746,202.727L83.9394,173.625Z"
                            fill="rgb(71,160,159)" stroke="none" stroke-width="1"
                            transform="matrix(-0.840094 0.542442 -0.542442 -0.840094 233.578585 336.579327)" />
                        <path id="eQACnN89ULS7"
                            d="M67.1517,212.446C72.5105,212.446,76.8546,208.095,76.8546,202.727C76.8546,197.359,72.5105,193.008,67.1517,193.008C61.7929,193.008,57.4487,197.359,57.4487,202.727C57.4487,208.095,61.7929,212.446,67.1517,212.446Z"
                            fill="rgb(65,81,78)" stroke="none" stroke-width="1" />
                        <path id="eQACnN89ULS8"
                            d="M343.886,15.3856L276.222,15.3856L276.222,218.113L343.886,218.113L343.886,15.3856Z"
                            fill="rgb(255,255,255)" stroke="none" stroke-width="1" />
                        <path id="eQACnN89ULS9" d="M358.99,0L291.326,0L291.326,202.727L358.99,202.727L358.99,0Z"
                            fill="rgb(135,210,215)" stroke="none" stroke-width="1" transform="matrix(1 0 0 0.818418 0 18.405762)" />
                        <path id="eQACnN89ULS10" d="M371.018,0L276.222,0L276.222,60.9373L371.018,60.9373L371.018,0Z"
                            fill="rgb(135,210,215)" stroke="none" stroke-width="1" transform="matrix(0.82469 0 0 1 56.73397 0)" />
                        <path id="eQACnN89ULS11"
                            d="M127.914,335.66C148.773,335.66,165.682,318.722,165.682,297.828C165.682,276.935,148.773,259.997,127.914,259.997C107.055,259.997,90.146,276.935,90.146,297.828C90.146,318.722,107.055,335.66,127.914,335.66Z"
                            transform="matrix(1 0 0 1 0.000006 0)" fill="rgb(135,210,215)" stroke="none" stroke-width="1" />
                        <path id="eQACnN89ULS12"
                            d="M265.513,289.851C296.179,289.851,321.039,264.95,321.039,234.232C321.039,203.514,296.179,178.613,265.513,178.613C234.846,178.613,209.986,203.514,209.986,234.232C209.986,264.95,234.846,289.851,265.513,289.851Z"
                            fill="rgb(65,81,78)" stroke="none" stroke-width="1" />
                        <path id="eQACnN89ULS13"
                            d="M246.967,264.691C263.761,264.691,277.376,251.054,277.376,234.232C277.376,217.41,263.761,203.772,246.967,203.772C230.173,203.772,216.559,217.41,216.559,234.232C216.559,251.054,230.173,264.691,246.967,264.691Z"
                            transform="matrix(1 0 0 1 12.337645 -20.742395)" fill="rgb(135,210,215)" stroke="none"
                            stroke-width="1" />
                        <path id="eQACnN89ULS14"
                            d="M150.066,316.827C156.547,316.827,161.801,311.564,161.801,305.072C161.801,298.58,156.547,293.317,150.066,293.317C143.585,293.317,138.331,298.58,138.331,305.072C138.331,311.564,143.585,316.827,150.066,316.827Z"
                            transform="matrix(1 0 0 1 -9.609048 -26.028679)" fill="rgb(71,160,159)" stroke="none"
                            stroke-width="1" />
                        <path id="eQACnN89ULS15"
                            d="M304.763,382C318.211,382,329.112,371.08,329.112,357.61C329.112,344.14,318.211,333.221,304.763,333.221C291.316,333.221,280.415,344.14,280.415,357.61C280.415,371.08,291.316,382,304.763,382Z"
                            fill="rgb(65,81,78)" stroke="none" stroke-width="1" />
                        <path id="eQACnN89ULS16"
                            d="M276.222,77.1482L212.915,77.1482L212.915,154.883L276.222,154.883L276.222,77.1482Z"
                            transform="matrix(0.414068 0 0 2.495156 145.735924 -212.113951)" fill="rgb(14,15,17)" stroke="none"
                            stroke-width="1" />
                        <path id="eQACnN89ULS17"
                            d="M208.046,40.5821L144.739,40.5821L144.739,154.883L208.046,154.883L208.046,40.5821Z"
                            fill="rgb(14,15,17)" stroke="none" stroke-width="1"
                            transform="matrix(0.383921 0 0 1.465743 108.671761 -45.518221)" />
                        <path id="eQACnN89ULS18"
                            d="M309.945,376.168C317.255,376.168,323.181,370.232,323.181,362.91C323.181,355.588,317.255,349.652,309.945,349.652C302.635,349.652,296.708,355.588,296.708,362.91C296.708,370.232,302.635,376.168,309.945,376.168Z"
                            transform="matrix(1 0 0 1 -10.40106 -8.526549)" fill="rgb(14,15,17)" stroke="none" stroke-width="1" />
                        <path id="eQACnN89ULS19" d="M244.569,297.828L204.64,297.828L204.64,373.216L244.569,373.216L244.569,297.828Z"
                            fill="rgb(65,81,78)" stroke="none" stroke-width="1" />
                        <path id="eQACnN89ULS20"
                            d="M270.895,173.625C260.292,173.608,249.887,176.507,240.816,182.005L240.669,182.097L107.355,263.976C99.2105,268.526,92.9306,275.808,89.6212,284.541C86.3117,293.274,86.1851,302.896,89.2636,311.713C92.342,320.53,98.4281,327.976,106.45,332.739C114.471,337.502,123.913,339.277,133.113,337.75C137.016,337.098,140.799,335.861,144.336,334.083L285.394,288.384C299.138,284.866,311.126,276.444,319.108,264.698C327.089,252.952,330.515,238.691,328.742,224.594C326.968,210.496,320.117,197.533,309.476,188.138C298.834,178.742,285.135,173.562,270.95,173.57L270.895,173.625ZM279.737,287.009L148.144,329.003C144.837,330.628,141.308,331.753,137.672,332.341C135.686,332.664,133.678,332.829,131.667,332.836C126.848,332.879,122.068,331.969,117.6,330.158C113.133,328.347,109.067,325.671,105.634,322.282C102.202,318.893,99.4712,314.859,97.5987,310.411C95.7262,305.963,94.7488,301.189,94.7225,296.361C94.7238,287.45,98.017,278.853,103.968,272.228C106.738,269.136,110.013,266.538,113.652,264.545L238.015,189.359L238.161,189.267C246.652,184.211,256.349,181.55,266.226,181.565C279.379,181.335,292.155,185.974,302.104,194.594C312.054,203.214,318.479,215.208,320.148,228.278C321.817,241.349,318.613,254.576,311.15,265.427C303.686,276.278,292.488,283.989,279.701,287.082L279.737,287.009Z"
                            transform="matrix(1 0 0 1 -4.040669 1.787573)" fill="rgb(71,160,159)" stroke="none" stroke-width="1" />
                        <path id="eQACnN89ULS21"
                            d="M247.004,369.714C254.041,369.714,259.746,363.999,259.746,356.95C259.746,349.901,254.041,344.187,247.004,344.187C239.966,344.187,234.262,349.901,234.262,356.95C234.262,363.999,239.966,369.714,247.004,369.714Z"
                            transform="matrix(1 0 0 1 -0.000002 -48.512786)" fill="rgb(14,15,17)" stroke="none" stroke-width="1" />
                    </g>
                    <clipPath id="eQACnN89ULS22">
                        <rect id="eQACnN89ULS23" width="371" height="382" rx="0" ry="0" transform="matrix(1 0 0 1 0.018 0.584594)"
                            fill="rgb(255,255,255)" stroke="none" stroke-width="1" />
                    </clipPath>
                </g>
                <script>
                    <![CDATA[!function (t, n) { "object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define && define.amd ? define(n) : (t = "undefined" != typeof globalThis ? globalThis : t || self).__SVGATOR_PLAYER__ = n() }(this, (function () { "use strict"; function t(n) { return (t = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) { return typeof t } : function (t) { return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t })(n) } function n(t, n) { if (!(t instanceof n)) throw new TypeError("Cannot call a class as a function") } function r(t, n) { for (var r = 0; r < n.length; r++) { var e = n[r]; e.enumerable = e.enumerable || !1, e.configurable = !0, "value" in e && (e.writable = !0), Object.defineProperty(t, e.key, e) } } function e(t, n, e) { return n && r(t.prototype, n), e && r(t, e), t } function i(t) { return (i = Object.setPrototypeOf ? Object.getPrototypeOf : function (t) { return t.__proto__ || Object.getPrototypeOf(t) })(t) } function o(t, n) { return (o = Object.setPrototypeOf || function (t, n) { return t.__proto__ = n, t })(t, n) } function u(t, n) { return !n || "object" != typeof n && "function" != typeof n ? function (t) { if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return t }(t) : n } function a(t) { var n = function () { if ("undefined" == typeof Reflect || !Reflect.construct) return !1; if (Reflect.construct.sham) return !1; if ("function" == typeof Proxy) return !0; try { return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function () { }))), !0 } catch (t) { return !1 } }(); return function () { var r, e = i(t); if (n) { var o = i(this).constructor; r = Reflect.construct(e, arguments, o) } else r = e.apply(this, arguments); return u(this, r) } } function l(t, n, r) { return (l = "undefined" != typeof Reflect && Reflect.get ? Reflect.get : function (t, n, r) { var e = function (t, n) { for (; !Object.prototype.hasOwnProperty.call(t, n) && null !== (t = i(t));); return t }(t, n); if (e) { var o = Object.getOwnPropertyDescriptor(e, n); return o.get ? o.get.call(r) : o.value } })(t, n, r || t) } var f = s(Math.pow(10, -6)); function s(t) { var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 6; if (Number.isInteger(t)) return t; var r = Math.pow(10, n); return Math.round((+t + Number.EPSILON) * r) / r } function c(t, n) { var r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : f; return Math.abs(t - n) < r } var h = Math.PI / 180; function v(t) { return t } function y(t, n, r) { var e = 1 - r; return 3 * r * e * (t * e + n * r) + r * r * r } function d() { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0, n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 1, e = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 1; return t < 0 || t > 1 || r < 0 || r > 1 ? null : c(t, n) && c(r, e) ? v : function (i) { if (i <= 0) return t > 0 ? i * n / t : 0 === n && r > 0 ? i * e / r : 0; if (i >= 1) return r < 1 ? 1 + (i - 1) * (e - 1) / (r - 1) : 1 === r && t < 1 ? 1 + (i - 1) * (n - 1) / (t - 1) : 1; for (var o, u = 0, a = 1; u < a;) { var l = y(t, r, o = (u + a) / 2); if (c(i, l)) break; l < i ? u = o : a = o } return y(n, e, o) } } function g() { return 1 } function p(t) { return 1 === t ? 1 : 0 } function m() { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 1, n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0; if (1 === t) { if (0 === n) return p; if (1 === n) return g } var r = 1 / t; return function (t) { return t >= 1 ? 1 : (t += n * r) - t % r } } function b(t, n, r) { return t >= .5 ? r : n } function w(t, n, r) { return 0 === t || n === r ? n : t * (r - n) + n } function x(t, n, r) { var e = w(t, n, r); return e <= 0 ? 0 : e } function k(t, n, r) { return 0 === t ? n : 1 === t ? r : { x: w(t, n.x, r.x), y: w(t, n.y, r.y) } } function A(t, n, r) { var e = function (t, n, r) { return Math.round(w(t, n, r)) }(t, n, r); return e <= 0 ? 0 : e >= 255 ? 255 : e } function S(t, n, r) { return 0 === t ? n : 1 === t ? r : { r: A(t, n.r, r.r), g: A(t, n.g, r.g), b: A(t, n.b, r.b), a: w(t, null == n.a ? 1 : n.a, null == r.a ? 1 : r.a) } } function _(t, n, r) { if (0 === t) return n; if (1 === t) return r; var e = n.length; if (e !== r.length) return b(t, n, r); for (var i = [], o = 0; o < e; o++)i.push(S(t, n[o], r[o])); return i } function O(t, n) { for (var r = [], e = 0; e < t; e++)r.push(n); return r } function M(t, n) { if (--n <= 0) return t; var r = (t = Object.assign([], t)).length; do { for (var e = 0; e < r; e++)t.push(t[e]) } while (--n > 0); return t } var j, P = function () { function t(r) { n(this, t), this.list = r, this.length = r.length } return e(t, [{ key: "setAttribute", value: function (t, n) { for (var r = this.list, e = 0; e < this.length; e++)r[e].setAttribute(t, n) } }, { key: "removeAttribute", value: function (t) { for (var n = this.list, r = 0; r < this.length; r++)n[r].removeAttribute(t) } }, { key: "style", value: function (t, n) { for (var r = this.list, e = 0; e < this.length; e++)r[e].style[t] = n } }]), t }(), I = /-./g, E = function (t, n) { return n.toUpperCase() }; function F(t) { return "function" == typeof t ? t : b } function N(t) { return t ? "function" == typeof t ? t : Array.isArray(t) ? function (t) { var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : v; if (!Array.isArray(t)) return n; switch (t.length) { case 1: return m(t[0]) || n; case 2: return m(t[0], t[1]) || n; case 4: return d(t[0], t[1], t[2], t[3]) || n }return n }(t, null) : function (t, n) { var r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : v; switch (t) { case "linear": return v; case "steps": return m(n.steps || 1, n.jump || 0) || r; case "bezier": case "cubic-bezier": return d(n.x1 || 0, n.y1 || 0, n.x2 || 0, n.y2 || 0) || r }return r }(t.type, t.value, null) : null } function B(t, n, r) { var e = arguments.length > 3 && void 0 !== arguments[3] && arguments[3], i = n.length - 1; if (t <= n[0].t) return e ? [0, 0, n[0].v] : n[0].v; if (t >= n[i].t) return e ? [i, 1, n[i].v] : n[i].v; var o, u = n[0], a = null; for (o = 1; o <= i; o++) { if (!(t > n[o].t)) { a = n[o]; break } u = n[o] } return null == a ? e ? [i, 1, n[i].v] : n[i].v : u.t === a.t ? e ? [o, 1, a.v] : a.v : (t = (t - u.t) / (a.t - u.t), u.e && (t = u.e(t)), e ? [o, t, r(t, u.v, a.v)] : r(t, u.v, a.v)) } function R(t, n) { var r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null; return t && t.length ? "function" != typeof n ? null : ("function" != typeof r && (r = null), function (e) { var i = B(e, t, n); return null != i && r && (i = r(i)), i }) : null } function q(t, n) { return t.t - n.t } function T(n, r, e, i, o) { var u, a = "@" === e[0], l = "#" === e[0], f = j[e], s = b; switch (a ? (u = e.substr(1), e = u.replace(I, E)) : l && (e = e.substr(1)), t(f)) { case "function": if (s = f(i, o, B, N, e, a, r, n), l) return s; break; case "string": s = R(i, F(f)); break; case "object": if ((s = R(i, F(f.i), f.f)) && "function" == typeof f.u) return f.u(r, s, e, a, n) }return s ? function (t, n, r) { var e = arguments.length > 3 && void 0 !== arguments[3] && arguments[3]; if (e) return t instanceof P ? function (e) { return t.style(n, r(e)) } : function (e) { return t.style[n] = r(e) }; if (Array.isArray(n)) { var i = n.length; return function (e) { var o = r(e); if (null == o) for (var u = 0; u < i; u++)t[u].removeAttribute(n); else for (var a = 0; a < i; a++)t[a].setAttribute(n, o) } } return function (e) { var i = r(e); null == i ? t.removeAttribute(n) : t.setAttribute(n, i) } }(r, e, s, a) : null } function L(n, r, e, i) { if (!i || "object" !== t(i)) return null; var o = null, u = null; return Array.isArray(i) ? u = function (t) { if (!t || !t.length) return null; for (var n = 0; n < t.length; n++)t[n].e && (t[n].e = N(t[n].e)); return t.sort(q) }(i) : (u = i.keys, o = i.data || null), u ? T(n, r, e, u, o) : null } function C(t, n, r) { if (!r) return null; var e = []; for (var i in r) if (r.hasOwnProperty(i)) { var o = L(t, n, i, r[i]); o && e.push(o) } return e.length ? e : null } function z(t, n) { if (!n.duration || n.duration < 0) return null; var r = function (t, n) { if (!n) return null; var r = []; if (Array.isArray(n)) for (var e = n.length, i = 0; i < e; i++) { var o = n[i]; if (2 === o.length) { var u = null; if ("string" == typeof o[0]) u = t.getElementById(o[0]); else if (Array.isArray(o[0])) { u = []; for (var a = 0; a < o[0].length; a++)if ("string" == typeof o[0][a]) { var l = t.getElementById(o[0][a]); l && u.push(l) } u = u.length ? 1 === u.length ? u[0] : new P(u) : null } if (u) { var f = C(t, u, o[1]); f && (r = r.concat(f)) } } } else for (var s in n) if (n.hasOwnProperty(s)) { var c = t.getElementById(s); if (c) { var h = C(t, c, n[s]); h && (r = r.concat(h)) } } return r.length ? r : null }(t, n.elements); return r ? function (t, n) { var r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 1 / 0, e = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 1, i = arguments.length > 4 && void 0 !== arguments[4] && arguments[4], o = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : 1, u = t.length, a = e > 0 ? n : 0; i && r % 2 == 0 && (a = n - a); var l = null; return function (f, s) { var c = f % n, h = 1 + (f - c) / n; s *= e, i && h % 2 == 0 && (s = -s); var v = !1; if (h > r) c = a, v = !0, -1 === o && (c = e > 0 ? 0 : n); else if (s < 0 && (c = n - c), c === l) return !1; l = c; for (var y = 0; y < u; y++)t[y](c); return v } }(r, n.duration, n.iterations || 1 / 0, n.direction || 1, !!n.alternate, n.fill || 1) : null } Number.isInteger || (Number.isInteger = function (t) { return "number" == typeof t && isFinite(t) && Math.floor(t) === t }), Number.EPSILON || (Number.EPSILON = 2220446049250313e-31); var D = function () { function t(r, e) { var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {}; n(this, t), this._id = 0, this._running = !1, this._rollingBack = !1, this._animations = r, this.duration = e.duration, this.alternate = e.alternate, this.fill = e.fill, this.iterations = e.iterations, this.direction = i.direction || 1, this.speed = i.speed || 1, this.fps = i.fps || 100, this.offset = i.offset || 0, this.rollbackStartOffset = 0 } return e(t, [{ key: "_rollback", value: function () { var t = this, n = 1 / 0, r = null; this.rollbackStartOffset = this.offset, this._rollingBack || (this._rollingBack = !0, this._running = !0); this._id = window.requestAnimationFrame((function e(i) { if (t._rollingBack) { null == r && (r = i); var o = i - r, u = t.rollbackStartOffset - o, a = Math.round(u * t.speed); if (a > t.duration && n != 1 / 0) { var l = !!t.alternate && a / t.duration % 2 > 1, f = a % t.duration; a = (f += l ? t.duration : 0) || t.duration } var s = t.fps ? 1e3 / t.fps : 0, c = Math.max(0, a); if (c < n - s) { t.offset = c, n = c; for (var h = t._animations, v = h.length, y = 0; y < v; y++)h[y](c, t.direction) } var d = !1; if (t.iterations > 0 && -1 === t.fill) { var g = t.iterations * t.duration, p = g == a; a = p ? 0 : a, t.offset = p ? 0 : t.offset, d = a > g } a > 0 && t.offset >= a && !d ? t._id = window.requestAnimationFrame(e) : t.stop() } })) } }, { key: "_start", value: function () { var t = this, n = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0, r = -1 / 0, e = null, i = {}, o = function o(u) { t._running = !0, null == e && (e = u); var a = Math.round((u - e + n) * t.speed), l = t.fps ? 1e3 / t.fps : 0; if (a > r + l && !t._rollingBack) { t.offset = a, r = a; for (var f = t._animations, s = f.length, c = 0, h = 0; h < s; h++)i[h] ? c++ : (i[h] = f[h](a, t.direction), i[h] && c++); if (c === s) return void t._stop() } t._id = window.requestAnimationFrame(o) }; this._id = window.requestAnimationFrame(o) } }, { key: "_stop", value: function () { this._id && window.cancelAnimationFrame(this._id), this._running = !1, this._rollingBack = !1 } }, { key: "play", value: function () { !this._rollingBack && this._running || (this._rollingBack = !1, this.rollbackStartOffset > this.duration && (this.offset = this.rollbackStartOffset - (this.rollbackStartOffset - this.offset) % this.duration, this.rollbackStartOffset = 0), this._start(this.offset)) } }, { key: "stop", value: function () { this._stop(), this.offset = 0, this.rollbackStartOffset = 0; var t = this.direction, n = this._animations; window.requestAnimationFrame((function () { for (var r = 0; r < n.length; r++)n[r](0, t) })) } }, { key: "reachedToEnd", value: function () { return this.iterations > 0 && this.offset >= this.iterations * this.duration } }, { key: "restart", value: function () { this._stop(), this.offset = 0, this._start() } }, { key: "pause", value: function () { this._stop() } }, { key: "reverse", value: function () { this.direction = -this.direction } }], [{ key: "build", value: function (n, r) { return (n = function (t, n) { if (j = n, !t || !t.root || !Array.isArray(t.animations)) return null; for (var r = document.getElementsByTagName("svg"), e = !1, i = 0; i < r.length; i++)if (r[i].id === t.root && !r[i].svgatorAnimation) { (e = r[i]).svgatorAnimation = !0; break } if (!e) return null; var o = t.animations.map((function (t) { return z(e, t) })).filter((function (t) { return !!t })); return o.length ? { element: e, animations: o, animationSettings: t.animationSettings, options: t.options || void 0 } : null }(n, r)) ? { el: n.element, options: n.options || {}, player: new t(n.animations, n.animationSettings, n.options) } : null } }]), t }(); function Q(t) { return s(t) + "" } function U(t) { var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : " "; return t && t.length ? t.map(Q).join(n) : "" } function V(t) { return t ? null == t.a || t.a >= 1 ? "rgb(" + t.r + "," + t.g + "," + t.b + ")" : "rgba(" + t.r + "," + t.g + "," + t.b + "," + t.a + ")" : "transparent" } !function () { for (var t = 0, n = ["ms", "moz", "webkit", "o"], r = 0; r < n.length && !window.requestAnimationFrame; ++r)window.requestAnimationFrame = window[n[r] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[n[r] + "CancelAnimationFrame"] || window[n[r] + "CancelRequestAnimationFrame"]; window.requestAnimationFrame || (window.requestAnimationFrame = function (n) { var r = Date.now(), e = Math.max(0, 16 - (r - t)), i = window.setTimeout((function () { n(r + e) }), e); return t = r + e, i }, window.cancelAnimationFrame = window.clearTimeout) }(); var G = { f: null, i: function (t, n, r) { return 0 === t ? n : 1 === t ? r : { x: x(t, n.x, r.x), y: x(t, n.y, r.y) } }, u: function (t, n) { return function (r) { var e = n(r); t.setAttribute("rx", Q(e.x)), t.setAttribute("ry", Q(e.y)) } } }, H = { f: null, i: function (t, n, r) { return 0 === t ? n : 1 === t ? r : { width: x(t, n.width, r.width), height: x(t, n.height, r.height) } }, u: function (t, n) { return function (r) { var e = n(r); t.setAttribute("width", Q(e.width)), t.setAttribute("height", Q(e.height)) } } }, Y = Math.sin, Z = Math.cos, J = Math.acos, K = Math.asin, W = Math.tan, X = Math.atan2, $ = Math.PI / 180, tt = 180 / Math.PI, nt = Math.sqrt, rt = function () { function t() { var r = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 1, e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0, o = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 1, u = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 0, a = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : 0; n(this, t), this.m = [r, e, i, o, u, a], this.i = null, this.w = null, this.s = null } return e(t, [{ key: "determinant", get: function () { var t = this.m; return t[0] * t[3] - t[1] * t[2] } }, { key: "isIdentity", get: function () { if (null === this.i) { var t = this.m; this.i = 1 === t[0] && 0 === t[1] && 0 === t[2] && 1 === t[3] && 0 === t[4] && 0 === t[5] } return this.i } }, { key: "point", value: function (t, n) { var r = this.m; return { x: r[0] * t + r[2] * n + r[4], y: r[1] * t + r[3] * n + r[5] } } }, { key: "translateSelf", value: function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0, n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0; if (!t && !n) return this; var r = this.m; return r[4] += r[0] * t + r[2] * n, r[5] += r[1] * t + r[3] * n, this.w = this.s = this.i = null, this } }, { key: "rotateSelf", value: function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0; if (t %= 360) { var n = Y(t *= $), r = Z(t), e = this.m, i = e[0], o = e[1]; e[0] = i * r + e[2] * n, e[1] = o * r + e[3] * n, e[2] = e[2] * r - i * n, e[3] = e[3] * r - o * n, this.w = this.s = this.i = null } return this } }, { key: "scaleSelf", value: function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 1, n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 1; if (1 !== t || 1 !== n) { var r = this.m; r[0] *= t, r[1] *= t, r[2] *= n, r[3] *= n, this.w = this.s = this.i = null } return this } }, { key: "skewSelf", value: function (t, n) { if (n %= 360, (t %= 360) || n) { var r = this.m, e = r[0], i = r[1], o = r[2], u = r[3]; t && (t = W(t * $), r[2] += e * t, r[3] += i * t), n && (n = W(n * $), r[0] += o * n, r[1] += u * n), this.w = this.s = this.i = null } return this } }, { key: "resetSelf", value: function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 1, n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0, e = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 1, i = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 0, o = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : 0, u = this.m; return u[0] = t, u[1] = n, u[2] = r, u[3] = e, u[4] = i, u[5] = o, this.w = this.s = this.i = null, this } }, { key: "recomposeSelf", value: function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null, n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null, r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null, e = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : null, i = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : null; return this.isIdentity || this.resetSelf(), t && (t.x || t.y) && this.translateSelf(t.x, t.y), n && this.rotateSelf(n), r && (r.x && this.skewSelf(r.x, 0), r.y && this.skewSelf(0, r.y)), !e || 1 === e.x && 1 === e.y || this.scaleSelf(e.x, e.y), i && (i.x || i.y) && this.translateSelf(i.x, i.y), this } }, { key: "decompose", value: function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0, n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, r = this.m, e = r[0] * r[0] + r[1] * r[1], i = [[r[0], r[1]], [r[2], r[3]]], o = nt(e); if (0 === o) return { origin: { x: s(r[4]), y: s(r[5]) }, translate: { x: s(t), y: s(n) }, scale: { x: 0, y: 0 }, skew: { x: 0, y: 0 }, rotate: 0 }; i[0][0] /= o, i[0][1] /= o; var u = r[0] * r[3] - r[1] * r[2] < 0; u && (o = -o); var a = i[0][0] * i[1][0] + i[0][1] * i[1][1]; i[1][0] -= i[0][0] * a, i[1][1] -= i[0][1] * a; var l = nt(i[1][0] * i[1][0] + i[1][1] * i[1][1]); if (0 === l) return { origin: { x: s(r[4]), y: s(r[5]) }, translate: { x: s(t), y: s(n) }, scale: { x: s(o), y: 0 }, skew: { x: 0, y: 0 }, rotate: 0 }; i[1][0] /= l, i[1][1] /= l, a /= l; var f = 0; return i[1][1] < 0 ? (f = J(i[1][1]) * tt, i[0][1] < 0 && (f = 360 - f)) : f = K(i[0][1]) * tt, u && (f = -f), a = X(a, nt(i[0][0] * i[0][0] + i[0][1] * i[0][1])) * tt, u && (a = -a), { origin: { x: s(r[4]), y: s(r[5]) }, translate: { x: s(t), y: s(n) }, scale: { x: s(o), y: s(l) }, skew: { x: s(a), y: 0 }, rotate: s(f) } } }, { key: "toString", value: function () { return null === this.s && (this.s = "matrix(" + this.m.map((function (t) { return s(t) })).join(" ") + ")"), this.s } }]), t }(); Object.freeze({ M: 2, L: 2, Z: 0, H: 1, V: 1, C: 6, Q: 4, T: 2, S: 4, A: 7 }); var et = {}, it = null; function ot(n) { var r = function () { if (it) return it; if ("object" !== ("undefined" == typeof document ? "undefined" : t(document)) || !document.createElementNS) return {}; var n = document.createElementNS("http://www.w3.org/2000/svg", "svg"); return n && n.style ? (n.style.position = "absolute", n.style.opacity = "0.01", n.style.zIndex = "-9999", n.style.left = "-9999px", n.style.width = "1px", n.style.height = "1px", it = { svg: n }) : {} }().svg; if (!r) return function (t) { return null }; var e = document.createElementNS(r.namespaceURI, "path"); e.setAttributeNS(null, "d", n), e.setAttributeNS(null, "fill", "none"), e.setAttributeNS(null, "stroke", "none"), r.appendChild(e); var i = e.getTotalLength(); return function (t) { var n = e.getPointAtLength(i * t); return { x: n.x, y: n.y } } } function ut(t) { return et[t] ? et[t] : et[t] = ot(t) } function at(t, n, r, e) { if (!t || !e) return !1; var i = ["M", t.x, t.y]; if (n && r && (i.push("C"), i.push(n.x), i.push(n.y), i.push(r.x), i.push(r.y)), n ? !r : r) { var o = n || r; i.push("Q"), i.push(o.x), i.push(o.y) } return n || r || i.push("L"), i.push(e.x), i.push(e.y), i.join(" ") } function lt(t, n, r, e) { var i = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 1, o = at(t, n, r, e), u = ut(o); try { return u(i) } catch (t) { return null } } function ft(t, n, r, e) { var i = 1 - e; return i * i * t + 2 * i * e * n + e * e * r } function st(t, n, r, e) { return 2 * (1 - e) * (n - t) + 2 * e * (r - n) } function ct(t, n, r, e) { var i = arguments.length > 4 && void 0 !== arguments[4] && arguments[4], o = lt(t, n, null, r, e); return o || (o = { x: ft(t.x, n.x, r.x, e), y: ft(t.y, n.y, r.y, e) }), i && (o.a = ht(t, n, r, e)), o } function ht(t, n, r, e) { return Math.atan2(st(t.y, n.y, r.y, e), st(t.x, n.x, r.x, e)) } function vt(t, n, r, e, i) { var o = i * i; return i * o * (e - t + 3 * (n - r)) + 3 * o * (t + r - 2 * n) + 3 * i * (n - t) + t } function yt(t, n, r, e, i) { var o = 1 - i; return 3 * (o * o * (n - t) + 2 * o * i * (r - n) + i * i * (e - r)) } function dt(t, n, r, e, i) { var o = arguments.length > 5 && void 0 !== arguments[5] && arguments[5], u = lt(t, n, r, e, i); return u || (u = { x: vt(t.x, n.x, r.x, e.x, i), y: vt(t.y, n.y, r.y, e.y, i) }), o && (u.a = gt(t, n, r, e, i)), u } function gt(t, n, r, e, i) { return Math.atan2(yt(t.y, n.y, r.y, e.y, i), yt(t.x, n.x, r.x, e.x, i)) } function pt(t, n, r) { return t + (n - t) * r } function mt(t, n, r) { var e = arguments.length > 3 && void 0 !== arguments[3] && arguments[3], i = { x: pt(t.x, n.x, r), y: pt(t.y, n.y, r) }; return e && (i.a = bt(t, n)), i } function bt(t, n) { return Math.atan2(n.y - t.y, n.x - t.x) } function wt(t, n, r) { var e = arguments.length > 3 && void 0 !== arguments[3] && arguments[3]; if (kt(n)) { if (At(r)) return ct(n, r.start, r, t, e) } else if (kt(r)) { if (n.end) return ct(n, n.end, r, t, e) } else { if (n.end) return r.start ? dt(n, n.end, r.start, r, t, e) : ct(n, n.end, r, t, e); if (r.start) return ct(n, r.start, r, t, e) } return mt(n, r, t, e) } function xt(t, n, r) { var e = wt(t, n, r, !0); return e.a = function (t) { var n = arguments.length > 1 && void 0 !== arguments[1] && arguments[1]; return n ? t + Math.PI : t }(e.a) / h, e } function kt(t) { return !t.type || "corner" === t.type } function At(t) { return null != t.start && !kt(t) } var St = new rt; var _t = { f: Q, i: w }, Ot = { f: Q, i: function (t, n, r) { var e = w(t, n, r); return e <= 0 ? 0 : e >= 1 ? 1 : e } }; function Mt(t, n, r, e, i, o, u, a) { return n = function (t, n, r) { for (var e, i, o, u = t.length - 1, a = {}, l = 0; l <= u; l++)(e = t[l]).e && (e.e = n(e.e)), e.v && "g" === (i = e.v).t && i.r && (o = r.getElementById(i.r)) && (a[i.r] = o.querySelectorAll("stop")); return a }(t, e, a), function (e) { var i, o = r(e, t, jt); return o ? "c" === o.t ? V(o.v) : "g" === o.t ? (n[o.r] && function (t, n) { for (var r = 0, e = t.length; r < e; r++)t[r].setAttribute("stop-color", V(n[r])) }(n[o.r], o.v), (i = o.r) ? "url(#" + i + ")" : "none") : "none" : "none" } } function jt(t, n, r) { if (0 === t) return n; if (1 === t) return r; if (n && r) { var e = n.t; if (e === r.t) switch (n.t) { case "c": return { t: e, v: S(t, n.v, r.v) }; case "g": if (n.r === r.r) return { t: e, v: _(t, n.v, r.v), r: n.r } } } return b(t, n, r) } var Pt = { fill: Mt, "fill-opacity": Ot, stroke: Mt, "stroke-opacity": Ot, "stroke-width": _t, "stroke-dashoffset": { f: Q, i: w }, "stroke-dasharray": { f: function (t) { var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : " "; return t && t.length > 0 && (t = t.map((function (t) { return s(t, 4) }))), U(t, n) }, i: function (t, n, r) { var e, i, o, u = n.length, a = r.length; if (u !== a) if (0 === u) n = O(u = a, 0); else if (0 === a) a = u, r = O(u, 0); else { var l = (o = (e = u) * (i = a) / function (t, n) { for (var r; n;)r = n, n = t % n, t = r; return t || 1 }(e, i)) < 0 ? -o : o; n = M(n, Math.floor(l / u)), r = M(r, Math.floor(l / a)), u = a = l } for (var f = [], c = 0; c < u; c++)f.push(s(x(t, n[c], r[c]))); return f } }, opacity: Ot, transform: function (n, r, e, i) { if (!(n = function (n, r) { if (!n || "object" !== t(n)) return null; var e = !1; for (var i in n) n.hasOwnProperty(i) && (n[i] && n[i].length ? (n[i].forEach((function (t) { t.e && (t.e = r(t.e)) })), e = !0) : delete n[i]); return e ? n : null }(n, i))) return null; var o = function (t, i, o) { var u = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : null; return n[t] ? e(i, n[t], o) : r && r[t] ? r[t] : u }; return r && r.a && n.o ? function (t) { var r = e(t, n.o, xt); return St.recomposeSelf(r, o("r", t, w, 0) + r.a, o("k", t, k), o("s", t, k), o("t", t, k)).toString() } : function (t) { return St.recomposeSelf(o("o", t, wt, null), o("r", t, w, 0), o("k", t, k), o("s", t, k), o("t", t, k)).toString() } }, r: _t, "#size": H, "#radius": G, _: function (t, n) { if (Array.isArray(t)) for (var r = 0; r < t.length; r++)this[t[r]] = n; else this[t] = n } }; return function (t) { !function (t, n) { if ("function" != typeof n && null !== n) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(n && n.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), n && o(t, n) }(u, t); var r = a(u); function u() { return n(this, u), r.apply(this, arguments) } return e(u, null, [{ key: "build", value: function (t) { var n = l(i(u), "build", this).call(this, t, Pt); if (!n) return null; n.el, n.options; var r = n.player; return function (t, n, r) { t.play() }(r), r } }]), u }(D) }));
                    __SVGATOR_PLAYER__.build({ "root": "eQACnN89ULS1", "animations": [{ "duration": 1600, "direction": 1, "iterations": 0, "fill": 1, "alternate": true, "speed": 1, "elements": { "eQACnN89ULS5": { "transform": { "data": { "o": { "x": 67.197342, "y": 202.717995, "type": "corner" }, "t": { "x": -67.197342, "y": -202.717995 } }, "keys": { "r": [{ "t": 0, "v": 360 }, { "t": 800, "v": 540 }, { "t": 1600, "v": 0 }] } } }, "eQACnN89ULS6": { "transform": { "data": { "o": { "x": 67.17915, "y": 202.718002, "type": "corner" }, "t": { "x": -67.17915, "y": -202.718002 } }, "keys": { "r": [{ "t": 0, "v": 0 }, { "t": 1600, "v": 360 }] } } }, "eQACnN89ULS9": { "transform": { "data": { "o": { "x": 325.15799, "y": 101.363503, "type": "corner" }, "t": { "x": -325.15799, "y": -101.363503 } }, "keys": { "s": [{ "t": 200, "v": { "x": 1, "y": 1 } }, { "t": 400, "v": { "x": 1, "y": 0.442763 } }, { "t": 600, "v": { "x": 1, "y": 1 } }, { "t": 800, "v": { "x": 1, "y": 0.327475 } }, { "t": 1000, "v": { "x": 1, "y": 1 } }, { "t": 1200, "v": { "x": 1, "y": 0.32456 } }, { "t": 1400, "v": { "x": 1, "y": 1 } }, { "t": 1600, "v": { "x": 1, "y": 0.38693 } }] } } }, "eQACnN89ULS10": { "transform": { "data": { "o": { "x": 323.619995, "y": 30.468651, "type": "corner" }, "t": { "x": -323.619995, "y": -30.468651 } }, "keys": { "s": [{ "t": 200, "v": { "x": 1, "y": 1 } }, { "t": 400, "v": { "x": 0.332698, "y": 1 } }, { "t": 600, "v": { "x": 1, "y": 1 } }, { "t": 800, "v": { "x": 0.350702, "y": 1 } }, { "t": 1000, "v": { "x": 1, "y": 1 } }, { "t": 1200, "v": { "x": 0.281367, "y": 1 } }, { "t": 1400, "v": { "x": 1, "y": 1 } }, { "t": 1600, "v": { "x": 0.3507, "y": 1 } }] } } }, "eQACnN89ULS13": { "transform": { "data": { "t": { "x": -246.967506, "y": -234.231506 } }, "keys": { "o": [{ "t": 0, "v": { "x": 240.394506, "y": 234.232013, "type": "corner" } }, { "t": 200, "v": { "x": 266.299499, "y": 259.391519, "type": "corner" } }, { "t": 400, "v": { "x": 294.749499, "y": 234.232013, "type": "corner" } }, { "t": 600, "v": { "x": 266.299499, "y": 205.817079, "type": "corner" } }, { "t": 800, "v": { "x": 240.394506, "y": 234.232013, "type": "corner" } }, { "t": 1000, "v": { "x": 266.299499, "y": 259.391519, "type": "corner" } }, { "t": 1200, "v": { "x": 294.749499, "y": 234.232013, "type": "corner" } }, { "t": 1400, "v": { "x": 266.299499, "y": 205.817079, "type": "corner" } }, { "t": 1600, "v": { "x": 240.394506, "y": 234.232013, "type": "corner" } }] } } }, "eQACnN89ULS14": { "transform": { "data": { "t": { "x": -131.049555, "y": -287.419384 } }, "keys": { "o": [{ "t": 0, "v": { "x": 134.930572, "y": 280.175884, "type": "corner" } }, { "t": 100, "v": { "x": 130.070352, "y": 296.476574, "type": "corner" } }, { "t": 200, "v": { "x": 108.897565, "y": 306.252384, "type": "corner" } }, { "t": 280, "v": { "x": 82.875797, "y": 298.919911, "type": "corner" } }, { "t": 400, "v": { "x": 75.721488, "y": 283.953397, "type": "corner" } }, { "t": 500, "v": { "x": 83.922922, "y": 261.977088, "type": "corner" } }, { "t": 600, "v": { "x": 108.897565, "y": 254.099384, "type": "corner" } }, { "t": 700, "v": { "x": 132.125235, "y": 267.601831, "type": "corner" } }, { "t": 800, "v": { "x": 134.930572, "y": 280.175884, "type": "corner" } }, { "t": 900, "v": { "x": 130.070352, "y": 296.476574, "type": "corner" } }, { "t": 1000, "v": { "x": 108.897565, "y": 306.252384, "type": "corner" } }, { "t": 1080, "v": { "x": 82.875797, "y": 298.919911, "type": "corner" } }, { "t": 1200, "v": { "x": 75.721488, "y": 283.953397, "type": "corner" } }, { "t": 1300, "v": { "x": 83.922922, "y": 261.977088, "type": "corner" } }, { "t": 1400, "v": { "x": 108.897565, "y": 254.099384, "type": "corner" } }, { "t": 1500, "v": { "x": 132.125235, "y": 267.601831, "type": "corner" } }, { "t": 1600, "v": { "x": 134.930568, "y": 280.175884, "type": "corner" } }] } } }, "eQACnN89ULS16": { "transform": { "data": { "o": { "x": 247.003997, "y": 77.363104, "type": "corner" }, "t": { "x": -244.568489, "y": -116.015598 } }, "keys": { "s": [{ "t": 100, "v": { "x": 1, "y": 1 } }, { "t": 300, "v": { "x": 0.698525, "y": 1.25482 } }, { "t": 500, "v": { "x": 0.504722, "y": 2.095725 } }, { "t": 700, "v": { "x": 0.38699, "y": 2.614467 } }, { "t": 900, "v": { "x": 0.133785, "y": 1.913921 } }, { "t": 1100, "v": { "x": 0.255648, "y": 1.898063 } }, { "t": 1500, "v": { "x": 1, "y": 1.669378 } }, { "t": 1600, "v": { "x": 1, "y": 1 } }] } } }, "eQACnN89ULS17": { "transform": { "data": { "o": { "x": 176.392502, "y": 97.732548, "type": "corner" }, "t": { "x": -176.392502, "y": -97.732548 } }, "keys": { "s": [{ "t": 0, "v": { "x": 1, "y": 1 } }, { "t": 200, "v": { "x": 0.577516, "y": 1.146243 } }, { "t": 400, "v": { "x": 0.423022, "y": 1.337335 } }, { "t": 600, "v": { "x": 0.240188, "y": 1.580004 } }, { "t": 1000, "v": { "x": 1.304875, "y": 0.733624 } }, { "t": 1200, "v": { "x": 1.304875, "y": 1.07584 } }, { "t": 1400, "v": { "x": 0.828775, "y": 1.07584 } }, { "t": 1600, "v": { "x": 0.799049, "y": 1.022056 } }] } } }, "eQACnN89ULS18": { "transform": { "data": { "t": { "x": -309.944504, "y": -362.910004 } }, "keys": { "o": [{ "t": 0, "v": { "x": 311.921504, "y": 368.742004, "type": "corner" } }, { "t": 100, "v": { "x": 293.651504, "y": 363.662594, "type": "corner" } }, { "t": 200, "v": { "x": 304.562504, "y": 346.479004, "type": "corner" } }, { "t": 300, "v": { "x": 315.875504, "y": 357.610504, "type": "corner" } }, { "t": 400, "v": { "x": 296.817504, "y": 348.780004, "type": "corner" } }, { "t": 500, "v": { "x": 311.921504, "y": 368.742004, "type": "corner" } }, { "t": 600, "v": { "x": 293.651504, "y": 363.662594, "type": "corner" } }, { "t": 700, "v": { "x": 304.562504, "y": 346.479004, "type": "corner" } }, { "t": 800, "v": { "x": 315.875504, "y": 357.610504, "type": "corner" } }, { "t": 900, "v": { "x": 296.817504, "y": 348.780004, "type": "corner" } }, { "t": 1000, "v": { "x": 311.921504, "y": 368.742004, "type": "corner" } }, { "t": 1100, "v": { "x": 293.651504, "y": 363.662594, "type": "corner" } }, { "t": 1200, "v": { "x": 304.562504, "y": 346.479004, "type": "corner" } }, { "t": 1300, "v": { "x": 315.875504, "y": 357.610504, "type": "corner" } }, { "t": 1400, "v": { "x": 296.817504, "y": 348.780004, "type": "corner" } }, { "t": 1500, "v": { "x": 310.054004, "y": 368.742004, "type": "corner" } }, { "t": 1600, "v": { "x": 304.763504, "y": 358.105004, "type": "corner" }, "e": [0.47, 0, 0.745, 0.715] }] } } }, "eQACnN89ULS21": { "transform": { "data": { "t": { "x": -247.004, "y": -356.9505 } }, "keys": { "o": [{ "t": 0, "v": { "x": 247.003998, "y": 356.9505, "type": "corner" } }, { "t": 200, "v": { "x": 246.694835, "y": 343.858679, "type": "corner" } }, { "t": 400, "v": { "x": 247.226293, "y": 320.4575, "type": "corner" } }, { "t": 600, "v": { "x": 247.003998, "y": 310.5915, "type": "corner" } }, { "t": 800, "v": { "x": 247.003998, "y": 302.614513, "type": "corner" } }, { "t": 1000, "v": { "x": 247.003998, "y": 322.7585, "type": "corner" } }, { "t": 1200, "v": { "x": 247.003998, "y": 335.522, "type": "corner" } }, { "t": 1400, "v": { "x": 247.003998, "y": 320.4575, "type": "corner" } }, { "t": 1600, "v": { "x": 247.003998, "y": 357.6105, "type": "corner" } }] } } } } }], "options": { "start": "load", "hover": null, "click": null, "scroll": null, "font": "embed", "exportedIds": "unique", "svgFormat": "animated", "title": "Frame" }, "animationSettings": { "duration": 1600, "direction": 1, "iterations": 0, "fill": 1, "alternate": true, "speed": 1 } })]]>
                </script>
            </svg>
            </div>
            <img class="animation-man" src="./images/rightMan.svg" alt="right man">
        </div>
    </div>

    <div class="section-2">
        <img class="blue-wave-1" src="./images/firstBlueBack.svg" alt="blue wave">
        <!-- <img class="white-wave" src="./images/whiteWave.svg" alt="white wave"> -->
        <img class="blue-wave-2" src="./images/secondBlueBack.svg" alt="blue wave">
        <div class="btn-container">
            <button class="btn" id="btn-1">Tell me more</button>
        </div>
        <div class="communication text-align">
            <h1 class="Headlines">Communication</h1>
            <ul>
                <li class="text-purple-section icon-1">
                    Instant status reports for team lead & stakeholders.
                </li>
                <li class="text-purple-section icon-2">
                    Communicate with your team the way <b>you</b> want.
                </li>
            </ul>
        </div>
        <div class="Planning-Ahead text-align">
            <h1 class="Headlines">Planning Ahead</h1>
            <ul>
                <li class="text-purple-section icon-3">
                    Plan your time costs for tasks and the project as a whole.
                </li>
                <li class="text-purple-section icon-1">
                    Plan out expenses for developing your product.
                </li>
                <li class="text-purple-section icon-2">
                    Estimate effort needed to complete the project<br />
                    <span class="space-line">under any given conditions and constraints.</span>
                </li>
            </ul>
        </div>
        <div class="Automation text-align">
            <h1 class="Headlines">Automation</h1>
            <ul>
                <li class="text-purple-section icon-3">
                    Automate the repeating and mundane tasks.
                </li>
            </ul>
        </div>
        <div class="illustration">
            <p>illustration</p>
        </div>
        <div class="importing text-align">
            <h1 class="Headlines">Importing & Easy Setup</h1>
            <ul>
                <li class="text-purple-section icon-1">
                    Setup for your team, for your department or <br />
                    <span class="space-line"> company - depending on your needs!</span>
                </li>
                <li class="text-purple-section icon-2">
                    Fast templates in order to get you started from the ground up.
                </li>
            </ul>
        </div>
    </div>
    <h1 class="Headlines join-us-h1">So Come And Join Us!</h1>
    <form action="" class="input-form" id="form">
        <input type="text" class="text-form-input" placeholder="Name" id="name" />
        <input type="email" placeholder="Email" class="text-form-input" id="email" />
        <div class="checkbox-container">
            <input type="checkbox" class="check-box-input" id="contributor" />
            <p class="check-box-text">I Want To Be A Contributor</p>
        </div>
        <div>
            <p class="check-box-text" id="disclaimer">We will not spam you as a contributor, but will ask for you <br/>to answer some questionairs once in a while in order to<br/> make the product better. </p>
        </div>
        <div class="btn-container btn-container-2">
            <button class="btn" id="btn-1">Submit</button>
        </div>
    </form>

    <script>
        const form = document.getElementById('form');
        const name = document.getElementById('name');
        const email = document.getElementById('email');
        const contributor = document.getElementById('contributor');

        // handle Data from Form
        function storeForm(e) {
            e.preventDefault();
            const nameValue = name.value;
            const emailValue = email.value;
            const contributorChecked = contributor.checked

            let obj = {
                name: nameValue,
                email: emailValue,
                contributor: contributorChecked
            };

            //Convert JS object to JSON string
            console.log(JSON.stringify(obj));
        }

        //Event Listener
        form.addEventListener('submit', storeForm)
    </script>
</body>

</html>