+...
+
+```
diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md.meta
new file mode 100644
index 00000000..5244b23c
--- /dev/null
+++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 1f46e3295aa44c54e98e8d38f29a9a28
+DefaultImporter:
+ externalObjects: {}
+ userData:
+ assetBundleName:
+ assetBundleVariant:
diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js
new file mode 100644
index 00000000..e8f12e01
--- /dev/null
+++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js
@@ -0,0 +1,37 @@
+// This is where the custom component is defined
+fetch('FloatingDropdown/template.html')
+ .then(stream => stream.text())
+ .then(text => define(text))
+
+/**
+ * Sets up the custom component as defined in the FloatingDropdown template
+ *
+ * @param {string} html the outerHTML attribute of the floating dropdown element defined in `index.html`
+ */
+function define(html) {
+ class FloatingDropdown extends HTMLElement {
+ constructor() {
+ self = super();
+ }
+
+ connectedCallback() {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, "text/html");
+
+ const template = doc.getElementById("floating-dropdown");
+ //Custom element
+ const dropdown = template.content.cloneNode(true);
+
+ const shadowRoot = this.attachShadow({mode: "open"})
+ shadowRoot.appendChild(dropdown);
+
+ // Apply external styles to the shadow dom
+ const styles = document.createElement("link");
+ styles.setAttribute("rel", "stylesheet");
+ styles.setAttribute("href", "FloatingDropdown/styles.css");
+
+ shadowRoot.appendChild(styles);
+ }
+ }
+ customElements.define("floating-dropdown", FloatingDropdown);
+}
\ No newline at end of file
diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js.meta
new file mode 100644
index 00000000..5b7d5e8c
--- /dev/null
+++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 6a7ff093b5a69ff4a837c15977f77cd2
+DefaultImporter:
+ externalObjects: {}
+ userData:
+ assetBundleName:
+ assetBundleVariant:
diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css
new file mode 100644
index 00000000..3bd0bc7a
--- /dev/null
+++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css
@@ -0,0 +1,109 @@
+#header {
+ content: "";
+ position: absolute;
+ transform: translate(-50%, 0%);
+
+ pointer-events: none;
+
+ top: 16px;
+ left: 50%;
+ z-index: 100;
+}
+
+#dropdown {
+ content: "";
+ background-color: #001e2a;
+
+ display: grid;
+ box-sizing: border-box;
+
+ border-bottom-left-radius: 7px;
+ border-bottom-right-radius: 7px;
+
+ margin: 0px auto;
+ padding-top: 256px;
+ padding-left: 16px;
+ padding-right: 16px;
+ width: 275px;
+ height: 300px;
+
+ position: absolute;
+ transform: translate(-50%, -75%);
+ /* transform: translate(-50%, 0%); */
+ top: 0px;
+ left: 50%;
+ z-index: 10;
+
+ align-content: end;
+ justify-items: center;
+
+ &:hover,
+ &:focus {
+ transition: 0.3s;
+ transform: translate(-50%, 0%);
+ }
+
+ & > * {
+ opacity: 0;
+ }
+
+ &:hover > * {
+ opacity: 100;
+ transition: 0.5s ease-in;
+ }
+}
+
+#vault-button {
+ border: none;
+ padding: 5px;
+ margin: 0px auto 15px auto;
+ justify-content: center;
+ align-items: center;
+
+ border-bottom-right-radius: 32px;
+ border-bottom-left-radius: 32px;
+ border-top-right-radius: 32px;
+ background-color: #00ecd0;
+
+ width: 200px;
+ height: 40px;
+
+ font-size: 18px;
+ font-weight: bolder;
+ text-decoration: none;
+ line-height: 2px;
+ letter-spacing: 3px;
+
+ & > span {
+ color: #001e2a;
+ font-size: 18px;
+ font-weight: bolder;
+
+ line-height: 2px;
+ letter-spacing: 3px;
+ }
+
+ cursor: pointer;
+
+ &:hover {
+ scale: 1.1;
+ }
+}
+
+a {
+ text-decoration: none;
+}
+
+.content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+p.content {
+ color: white;
+ text-decoration: none;
+
+ font-family: "brandon-grotesque", sans-serif;
+ font-size: 24px;
+}
diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css.meta
new file mode 100644
index 00000000..cceabd6d
--- /dev/null
+++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 55a92fdd79d18954482106e70adda4f7
+DefaultImporter:
+ externalObjects: {}
+ userData:
+ assetBundleName:
+ assetBundleVariant:
diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html
new file mode 100644
index 00000000..a9cd1aa2
--- /dev/null
+++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html
@@ -0,0 +1,13 @@
+
+
+
+
diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html.meta
new file mode 100644
index 00000000..a7c9db08
--- /dev/null
+++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: ec81e85465aaafc4fa5f830aef2c042c
+DefaultImporter:
+ externalObjects: {}
+ userData:
+ assetBundleName:
+ assetBundleVariant:
diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2501a524e0460f7ce0c48b26aab7f7993ae4035
GIT binary patch
literal 5489
zcmaKwWmFW-*T
dg5d?;ErTIPkGZ|+gw
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
literal 0
HcmV?d00001
diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png.meta
new file mode 100644
index 00000000..13cf786c
--- /dev/null
+++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: cbe41da7b6076a5448b1b5c87184c405
+DefaultImporter:
+ externalObjects: {}
+ userData:
+ assetBundleName:
+ assetBundleVariant:
diff --git a/Assets/WebGLTemplates/FieldDay/index.html b/Assets/WebGLTemplates/FieldDay/index.html
index ad43ec63..9ca153a6 100644
--- a/Assets/WebGLTemplates/FieldDay/index.html
+++ b/Assets/WebGLTemplates/FieldDay/index.html
@@ -1,114 +1,134 @@
-
-
+
+
{{{ PRODUCT_NAME }}}
-
-
-
-#if BRAINPOP
+
+
+
+ #if BRAINPOP
-#endif
+ #endif
-
+
+
+
+
+
+
+ Field Day presents the largest collection of
+ FREE
+ learning games on the web.
+
+ OPEN VAULT
+