diff --git a/assets/css/bs-theme-overrides.css b/assets/css/bs-theme-overrides.css
index 4fa9dd5..c12b770 100644
--- a/assets/css/bs-theme-overrides.css
+++ b/assets/css/bs-theme-overrides.css
@@ -188,6 +188,10 @@
--bs-btn-disabled-border-color: #E63E30;
}
+.navbar-toggler-icon{
+ background-color: #00416c;
+}
+
.btn-outline-primary {
--bs-btn-color: #00416C;
--bs-btn-border-color: #00416C;
diff --git a/assets/css/home.css b/assets/css/home.css
index a9cd235..e5266df 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -1,247 +1,247 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500&display=swap");
-body {
- margin: 0;
- background-color: #1a1a1a;
- color: #ffffffdd;
- position: relative;
- overflow: hidden;
- font-family: "Inter", sans-serif;
-}
-.card {
- position: absolute;
- left: 0;
- top: 0;
- background-position: center;
- background-size: cover;
- box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, 0.6);
-}
-#btn {
- position: absolute;
- top: 690px;
- left: 16px;
- z-index: 99;
-}
-.card-content {
- position: absolute;
- left: 0;
- top: 0;
- color: #ffffffdd;
- padding-left: 16px;
-}
-.content-place {
- margin-top: 6px;
- font-size: 13px;
- font-weight: 500;
-}
-.content-place {
- font-weight: 500;
-}
-.content-title-1,
-.content-title-2 {
- font-weight: 600;
- font-size: 20px;
- font-family: "Oswald", sans-serif;
-}
-.content-start {
- width: 30px;
- height: 5px;
- border-radius: 99px;
- background-color: #ffffffdd;
-}
-.details {
- z-index: 22;
- position: absolute;
- top: 240px;
- left: 60px;
-}
-.details .place-box {
- height: 46px;
- overflow: hidden;
-}
-.details .place-box .text {
- padding-top: 16px;
- font-size: 20px;
-}
-.details .place-box .text:before {
- top: 0;
- left: 0;
- position: absolute;
- content: "";
- width: 30px;
- height: 4px;
- border-radius: 99px;
- background-color: white;
-}
-.details .title-1,
-.details .title-2 {
- font-weight: 600;
- font-size: 72px;
- font-family: "Oswald", sans-serif;
-}
-.details .title-box-1,
-.details .title-box-2 {
- margin-top: 2px;
- height: 100px;
- overflow: hidden;
-}
-.details > .desc {
- margin-top: 16px;
- width: 500px;
-}
-.details > .cta {
- width: 500px;
- margin-top: 24px;
- display: flex;
- align-items: center;
-}
-.details > .cta > .bookmark {
- border: none;
- background-color: #ecad29;
- width: 36px;
- height: 36px;
- border-radius: 99px;
- color: white;
- display: grid;
- place-items: center;
-}
-.details > .cta > .bookmark svg {
- width: 20px;
- height: 20px;
-}
-.details > .cta > .discover {
- border: 1px solid #ffffff;
- background-color: transparent;
- height: 36px;
- border-radius: 99px;
- color: #ffffff;
- padding: 4px 24px;
- font-size: 12px;
- margin-left: 16px;
- text-transform: uppercase;
-}
-nav {
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- z-index: 50;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 20px 36px;
- font-weight: 500;
-}
-nav svg {
- width: 20px;
- height: 20px;
-}
-nav .svg-container {
- width: 20px;
- height: 20px;
-}
-nav > div {
- display: inline-flex;
- align-items: center;
- text-transform: uppercase;
- font-size: 14px;
-}
-nav > div:first-child {
- gap: 10px;
-}
-nav > div:last-child {
- gap: 24px;
-}
-nav > div:last-child > .active {
- position: relative;
-}
-nav > div:last-child > .active:after {
- bottom: -8px;
- left: 0;
- right: 0;
- position: absolute;
- content: "";
- height: 3px;
- border-radius: 99px;
- background-color: #ecad29;
-}
-.indicator {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- height: 5px;
- z-index: 60;
- background-color: #ecad29;
-}
-.pagination {
- position: absolute;
- left: 0px;
- top: 0px;
- display: inline-flex;
-}
-.pagination > .arrow {
- z-index: 60;
- width: 50px;
- height: 50px;
- border-radius: 999px;
- border: 2px solid #ffffff55;
- display: grid;
- place-items: center;
-}
-.pagination > .arrow:nth-child(2) {
- margin-left: 20px;
-}
-.pagination > .arrow svg {
- width: 24px;
- height: 24px;
- stroke-width: 2;
- color: #ffffff99;
-}
-.pagination .progress-sub-container {
- margin-left: 24px;
- z-index: 60;
- width: 500px;
- height: 50px;
- display: flex;
- align-items: center;
-}
-.pagination .progress-sub-container .progress-sub-background {
- width: 500px;
- height: 3px;
- background-color: #ffffff33;
-}
-.pagination
-.progress-sub-container
-.progress-sub-background
-.progress-sub-foreground {
- height: 3px;
- background-color: #ecad29;
-}
-.pagination .slide-numbers {
- width: 50px;
- height: 50px;
- overflow: hidden;
- z-index: 60;
- position: relative;
-}
-.pagination .slide-numbers .item {
- width: 50px;
- height: 50px;
- position: absolute;
- color: white;
- top: 0;
- left: 0;
- display: grid;
- place-items: center;
- font-size: 32px;
- font-weight: bold;
-}
-.cover {
- position: absolute;
- left: 0;
- top: 0;
- width: 100vw;
- height: 100vh;
- background-color: #fff;
- z-index: 100;
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500&display=swap");
+body {
+ margin: 0;
+ background-color: #1a1a1a;
+ color: #ffffffdd;
+ position: relative;
+ overflow: hidden;
+ font-family: "Inter", sans-serif;
+}
+.card {
+ position: absolute;
+ left: 0;
+ top: 0;
+ background-position: center;
+ background-size: cover;
+ box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, 0.6);
+}
+#btn {
+ position: absolute;
+ top: 690px;
+ left: 16px;
+ z-index: 99;
+}
+.card-content {
+ position: absolute;
+ left: 0;
+ top: 0;
+ color: #ffffffdd;
+ padding-left: 16px;
+}
+.content-place {
+ margin-top: 6px;
+ font-size: 13px;
+ font-weight: 500;
+}
+.content-place {
+ font-weight: 500;
+}
+.content-title-1,
+.content-title-2 {
+ font-weight: 600;
+ font-size: 20px;
+ font-family: "Oswald", sans-serif;
+}
+.content-start {
+ width: 30px;
+ height: 5px;
+ border-radius: 99px;
+ background-color: #ffffffdd;
+}
+.details {
+ z-index: 22;
+ position: absolute;
+ top: 240px;
+ left: 60px;
+}
+.details .place-box {
+ height: 46px;
+ overflow: hidden;
+}
+.details .place-box .text {
+ padding-top: 16px;
+ font-size: 20px;
+}
+.details .place-box .text:before {
+ top: 0;
+ left: 0;
+ position: absolute;
+ content: "";
+ width: 30px;
+ height: 4px;
+ border-radius: 99px;
+ background-color: white;
+}
+.details .title-1,
+.details .title-2 {
+ font-weight: 600;
+ font-size: 72px;
+ font-family: "Oswald", sans-serif;
+}
+.details .title-box-1,
+.details .title-box-2 {
+ margin-top: 2px;
+ height: 100px;
+ overflow: hidden;
+}
+.details > .desc {
+ margin-top: 16px;
+ width: 500px;
+}
+.details > .cta {
+ width: 500px;
+ margin-top: 24px;
+ display: flex;
+ align-items: center;
+}
+.details > .cta > .bookmark {
+ border: none;
+ background-color: #ecad29;
+ width: 36px;
+ height: 36px;
+ border-radius: 99px;
+ color: white;
+ display: grid;
+ place-items: center;
+}
+.details > .cta > .bookmark svg {
+ width: 20px;
+ height: 20px;
+}
+.details > .cta > .discover {
+ border: 1px solid #ffffff;
+ background-color: transparent;
+ height: 36px;
+ border-radius: 99px;
+ color: #ffffff;
+ padding: 4px 24px;
+ font-size: 12px;
+ margin-left: 16px;
+ text-transform: uppercase;
+}
+nav {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ z-index: 50;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 36px;
+ font-weight: 500;
+}
+nav svg {
+ width: 20px;
+ height: 20px;
+}
+nav .svg-container {
+ width: 20px;
+ height: 20px;
+}
+nav > div {
+ display: inline-flex;
+ align-items: center;
+ text-transform: uppercase;
+ font-size: 14px;
+}
+nav > div:first-child {
+ gap: 10px;
+}
+nav > div:last-child {
+ gap: 24px;
+}
+nav > div:last-child > .active {
+ position: relative;
+}
+nav > div:last-child > .active:after {
+ bottom: -8px;
+ left: 0;
+ right: 0;
+ position: absolute;
+ content: "";
+ height: 3px;
+ border-radius: 99px;
+ background-color: #ecad29;
+}
+.indicator {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ height: 5px;
+ z-index: 60;
+ background-color: #ecad29;
+}
+.pagination {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ display: inline-flex;
+}
+.pagination > .arrow {
+ z-index: 60;
+ width: 50px;
+ height: 50px;
+ border-radius: 999px;
+ border: 2px solid #ffffff55;
+ display: grid;
+ place-items: center;
+}
+.pagination > .arrow:nth-child(2) {
+ margin-left: 20px;
+}
+.pagination > .arrow svg {
+ width: 24px;
+ height: 24px;
+ stroke-width: 2;
+ color: #ffffff99;
+}
+.pagination .progress-sub-container {
+ margin-left: 24px;
+ z-index: 60;
+ width: 500px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+}
+.pagination .progress-sub-container .progress-sub-background {
+ width: 500px;
+ height: 3px;
+ background-color: #ffffff33;
+}
+.pagination
+.progress-sub-container
+.progress-sub-background
+.progress-sub-foreground {
+ height: 3px;
+ background-color: #ecad29;
+}
+.pagination .slide-numbers {
+ width: 50px;
+ height: 50px;
+ overflow: hidden;
+ z-index: 60;
+ position: relative;
+}
+.pagination .slide-numbers .item {
+ width: 50px;
+ height: 50px;
+ position: absolute;
+ color: white;
+ top: 0;
+ left: 0;
+ display: grid;
+ place-items: center;
+ font-size: 32px;
+ font-weight: bold;
+}
+.cover {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: #fff;
+ z-index: 100;
}
\ No newline at end of file
diff --git a/assets/css/index.css b/assets/css/index.css
index 8fd840c..c936442 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -1,168 +1,177 @@
-html {
- font-size: 16px;
- font-family: "Prosa GT Demo", sans-serif;
-}
-
-body {
- overflow-x: hidden;
-}
-
-* {
- box-sizing: border-box;
-}
-
-:root {
- --primary-blue: #FED103;
- --primary-blue-dark: #4361ee;
- --text-white: #F7FAFF;
- --text-gray: #B5B8BC;
- --text-color: #303651;
- --text-color-neutral: #697089;
- --card-bg: #00416C;
- --bg: #141419;
-}
-
-*::selection {
- background: var(--primary-blue);
- color: var(--text-white);
-}
-
-.show-more{
- color: #FFFFFF;
-}
-
-.show-more:hover{
- color: #FED103!important;
-}
-
-
-.pricing-container {
- margin: 0 auto;
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- gap: 4rem 2rem;
-}
-
-.pricing-card {
- display: flex;
- flex-direction: column;
- position: relative;
- align-items: center;
- width: 100%;
- max-width: 25rem;
- border-radius: 0.5rem;
- padding: 2rem;
- background: var(--card-bg);
- color: var(--text-gray);
- transition: all 0.5s ease-in-out;
-}
-
-.pricing-card:hover {
- transform: translateY(-2rem);
-}
-
-.pricing-card--primary {
- border-radius: 0 0 0.5rem 0.5rem;
-}
-
-.pricing-card__price {
- color: var(--text-white);
- font-weight: 700;
- flex-wrap: wrap;
- font-size: 2rem;
-}
-
-.pricing-card__banner {
- height: 1rem;
- width: 100%;
- position: absolute;
- color: white;
- top: -2.5rem;
-}
-
-.pricing-card__banner+.pricing-card {
- border-radius: 0 0 0.5rem 0.5rem;
-}
-
-.pricing-card__price--original {
- color: var(--text-gray);
- font-weight: 500;
- margin-top: 2rem;
- font-size: 1.5rem;
-}
-
-.pricing-card>h3 {
- margin: 0;
- font-weight: 700;
- text-align: center;
- font-size: 2rem;
- color: var(--text-white);
-}
-
-
-.pricing-card>.enroll {
- display: block;
- width: 100%;
- font-weight: 700;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 3rem;
- border-radius: 0.5rem;
- color: white;
- margin-top: auto;
- text-decoration: none;
- letter-spacing: 0.75px;
- border: 1px solid #E63E30;
- background: #E63E30;
- transition: all 0.3s ease-in-out;
-}
-
-.pricing-card>.enroll:hover {
- background: #FED103;
- color: #00416C!important;
-}
-
-.pricing-card__banner {
- width: 100%;
- min-height: 2.5rem;
- border-radius: 0.5rem 0.5rem 0 0;
- background: var(--primary-blue);
- color: #00416C;
- display: flex;
- justify-content: center;
- align-items: center;
- text-transform: uppercase;
- font-weight: 700;
-}
-
-
-.pricing-card>ul {
- width: 100%;
- display: flex;
- margin-top: 2.5rem;
- flex-direction: column;
- gap: 1rem;
- margin-bottom: 2.5rem;
-}
-
-.pricing-card>ul>li {
- position: relative;
- font-weight: 500;
- list-style-type: none;
- font-size: 0.875rem;
-}
-
-.pricing-card>ul>li:before {
- content: "";
- position: absolute;
- top: -0.125rem;
- left: -2.25rem;
- width: 2rem;
- height: 2rem;
- background-image: url('./../img/illustrations/404.svg');
- background-repeat: no-repeat;
- font-size: clamp(1.5rem, 2.5vw, 2rem);
-}
+html {
+ font-size: 16px;
+ font-family: "Prosa GT Demo", sans-serif;
+}
+
+body {
+ overflow-x: hidden;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+:root {
+ --primary-blue: #FED103;
+ --primary-blue-dark: #4361ee;
+ --text-white: #F7FAFF;
+ --text-gray: #B5B8BC;
+ --text-color: #303651;
+ --text-color-neutral: #697089;
+ --card-bg: #00416C;
+ --bg: #141419;
+}
+
+
+*::selection {
+ background: var(--primary-blue);
+ color: var(--text-white);
+}
+
+.show-more{
+ color: #FFFFFF;
+}
+
+.show-more:hover{
+ color: #FED103!important;
+}
+
+.show-more-light{
+ color: #00578f !important;
+}
+
+.show-more-light:hover{
+ color: #FED103!important;
+}
+
+
+.pricing-container {
+ margin: 0 auto;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 4rem 2rem;
+}
+
+.pricing-card {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ align-items: center;
+ width: 100%;
+ max-width: 25rem;
+ border-radius: 0.5rem;
+ padding: 2rem;
+ background: var(--card-bg);
+ color: var(--text-gray);
+ transition: all 0.5s ease-in-out;
+}
+
+.pricing-card:hover {
+ transform: translateY(-2rem);
+}
+
+.pricing-card--primary {
+ border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.pricing-card__price {
+ color: var(--text-white);
+ font-weight: 700;
+ flex-wrap: wrap;
+ font-size: 2rem;
+}
+
+.pricing-card__banner {
+ height: 1rem;
+ width: 100%;
+ position: absolute;
+ color: white;
+ top: -2.5rem;
+}
+
+.pricing-card__banner+.pricing-card {
+ border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.pricing-card__price--original {
+ color: var(--text-gray);
+ font-weight: 500;
+ margin-top: 2rem;
+ font-size: 1.5rem;
+}
+
+.pricing-card>h3 {
+ margin: 0;
+ font-weight: 700;
+ text-align: center;
+ font-size: 2rem;
+ color: var(--text-white);
+}
+
+
+.pricing-card>.enroll {
+ display: block;
+ width: 100%;
+ font-weight: 700;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 3rem;
+ border-radius: 0.5rem;
+ color: white;
+ margin-top: auto;
+ text-decoration: none;
+ letter-spacing: 0.75px;
+ border: 1px solid #E63E30;
+ background: #E63E30;
+ transition: all 0.3s ease-in-out;
+}
+
+.pricing-card>.enroll:hover {
+ background: #FED103;
+ color: #00416C!important;
+}
+
+.pricing-card__banner {
+ width: 100%;
+ min-height: 2.5rem;
+ border-radius: 0.5rem 0.5rem 0 0;
+ background: var(--primary-blue);
+ color: #00416C;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-transform: uppercase;
+ font-weight: 700;
+}
+
+
+.pricing-card>ul {
+ width: 100%;
+ display: flex;
+ margin-top: 2.5rem;
+ flex-direction: column;
+ gap: 1rem;
+ margin-bottom: 2.5rem;
+}
+
+.pricing-card>ul>li {
+ position: relative;
+ font-weight: 500;
+ list-style-type: none;
+ font-size: 0.875rem;
+}
+
+.pricing-card>ul>li:before {
+ content: "";
+ position: absolute;
+ top: -0.125rem;
+ left: -2.25rem;
+ width: 2rem;
+ height: 2rem;
+ background-image: url('./../img/illustrations/404.svg');
+ background-repeat: no-repeat;
+ font-size: clamp(1.5rem, 2.5vw, 2rem);
+}
diff --git a/assets/css/testmusic.css b/assets/css/testmusic.css
index 3ba6c6e..9219826 100644
--- a/assets/css/testmusic.css
+++ b/assets/css/testmusic.css
@@ -1,135 +1,135 @@
-:root {
- --primary: #FED103;
- --primary-hover: #ffee96;
- --bg: #939393;
- --secondary: #ff0400;
- --secondary-hover: #ff7871;
- --dropzone-bg: #00416C;
- --gray: #D3D3D3;
- --border: #333333;
- --dropzone-border: #FFF;
- --headline: white;
- --text: white;
- --primary-text: #00416C;
- --dropzone-over: #00558a;
-}
-
-#random-chord {
- font-size: 2rem;
- font-weight: bold;
-}
-
-.dropzone-box {
- border-radius: 1rem;
- padding: 5rem;
- justify-content: center;
- flex-direction: column;
- max-width: 36rem;
- min-width: 500px; /* Add this line */
- border: 1px solid var(--border);
- background: var(--dropzone-bg);
- margin: auto;
- display: flex;
- width: 50%;
-}
-
-.dropzone-box h2 {
- font-size: 1.4rem;
- margin-bottom: 0.6rem;
- color: var(--headline);
-}
-
-.dropzone-box p {
- font-size: 1.15rem;
- color: var(--gray);
-}
-
-.dropzone-area {
- padding: 1rem;
- position: relative;
- margin-top: 1.5rem;
- min-height: 16rem;
- display: flex;
- text-align: center;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- border: 2px dashed var(--dropzone-border);
- border-radius: 1rem;
- cursor: pointer;
- transition: all 0.3s ease;
-}
-
-.dropzone-area .file-info {
- font-size: 1.1rem;
-}
-
-.dropzone-area [type="file"] {
- cursor: pointer;
- position: absolute;
- opacity: 0;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-}
-
-.dropzone-area .file-upload-icon svg {
- height: 6rem;
- max-width: 6rem;
- width: 100%;
- margin-bottom: 0.5rem;
- stroke: var(--headline);
-}
-
-.dropzone-area:hover {
- background: var(--dropzone-over);
-}
-
-.dropzone--over {
- border: 2px solid var(--primary);
- background: var(--dropzone-over);
-}
-
-.dropzone-actions {
- display: flex;
- justify-content: space-between;
- margin-top: 2rem;
- gap: 1rem;
- flex-wrap: wrap;
-}
-
-.dropzone-actions button {
- flex-grow: 1;
- min-height: 3rem;
- font-size: 1.2rem;
- border: none;
- transition: background 0.3s ease;
-}
-
-
-.dropzone-actions button[type='reset'] {
- border-radius: 0.5rem;
- padding: 0.5rem 1rem;
- color: var(--text);
- background: var(--secondary);
- cursor: pointer;
- border: 1px solid var(--border);
-}
-
-.dropzone-actions button[type='reset']:hover {
- background: var(--secondary-hover);
-}
-
-.dropzone-actions button[type='submit'] {
- border-radius: 0.5rem;
- padding: 0.5rem 1rem;
- color: var(--primary-text);
- border: none;
- cursor: pointer;
- background-color: #FED103;
-}
-
-.dropzone-actions button[type='submit']:hover {
- background: var(--primary-hover);
+:root {
+ --primary: #FED103;
+ --primary-hover: #ffee96;
+ --bg: #939393;
+ --secondary: #ff0400;
+ --secondary-hover: #ff7871;
+ --dropzone-bg: #00416C;
+ --gray: #D3D3D3;
+ --border: #333333;
+ --dropzone-border: #FFF;
+ --headline: white;
+ --text: white;
+ --primary-text: #00416C;
+ --dropzone-over: #00558a;
+}
+
+#random-chord {
+ font-size: 2rem;
+ font-weight: bold;
+}
+
+.dropzone-box {
+ border-radius: 1rem;
+ padding: 5rem;
+ justify-content: center;
+ flex-direction: column;
+ max-width: 36rem;
+ min-width: 500px; /* Add this line */
+ border: 1px solid var(--border);
+ background: var(--dropzone-bg);
+ margin: auto;
+ display: flex;
+ width: 50%;
+}
+
+.dropzone-box h2 {
+ font-size: 1.4rem;
+ margin-bottom: 0.6rem;
+ color: var(--headline);
+}
+
+.dropzone-box p {
+ font-size: 1.15rem;
+ color: var(--gray);
+}
+
+.dropzone-area {
+ padding: 1rem;
+ position: relative;
+ margin-top: 1.5rem;
+ min-height: 16rem;
+ display: flex;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ border: 2px dashed var(--dropzone-border);
+ border-radius: 1rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.dropzone-area .file-info {
+ font-size: 1.1rem;
+}
+
+.dropzone-area [type="file"] {
+ cursor: pointer;
+ position: absolute;
+ opacity: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.dropzone-area .file-upload-icon svg {
+ height: 6rem;
+ max-width: 6rem;
+ width: 100%;
+ margin-bottom: 0.5rem;
+ stroke: var(--headline);
+}
+
+.dropzone-area:hover {
+ background: var(--dropzone-over);
+}
+
+.dropzone--over {
+ border: 2px solid var(--primary);
+ background: var(--dropzone-over);
+}
+
+.dropzone-actions {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 2rem;
+ gap: 1rem;
+ flex-wrap: wrap;
+}
+
+.dropzone-actions button {
+ flex-grow: 1;
+ min-height: 3rem;
+ font-size: 1.2rem;
+ border: none;
+ transition: background 0.3s ease;
+}
+
+
+.dropzone-actions button[type='reset'] {
+ border-radius: 0.5rem;
+ padding: 0.5rem 1rem;
+ color: var(--text);
+ background: var(--secondary);
+ cursor: pointer;
+ border: 1px solid var(--border);
+}
+
+.dropzone-actions button[type='reset']:hover {
+ background: var(--secondary-hover);
+}
+
+.dropzone-actions button[type='submit'] {
+ border-radius: 0.5rem;
+ padding: 0.5rem 1rem;
+ color: var(--primary-text);
+ border: none;
+ cursor: pointer;
+ background-color: #FED103;
+}
+
+.dropzone-actions button[type='submit']:hover {
+ background: var(--primary-hover);
}
\ No newline at end of file
diff --git a/assets/img/VID HALLWAY.MOV b/assets/img/VID HALLWAY.MOV
new file mode 100644
index 0000000..c30ca87
Binary files /dev/null and b/assets/img/VID HALLWAY.MOV differ
diff --git a/assets/js/home.js b/assets/js/home.js
index 4a69c24..4777e65 100644
--- a/assets/js/home.js
+++ b/assets/js/home.js
@@ -1,509 +1,509 @@
-const data = [
- {
- place: "Level One",
- title: "PENCILS",
- title2: "AND SKETCHING",
- description:
- "The Level 1 Pencils/Sketching Kit is a comprehensive set tailored for unleashing creativity on paper, suitable for beginners and seasoned sketch artists alike.",
- image: "https://i.ibb.co/7Q4tkRy/Screenshot-2024-03-23-090711.png",
- },
- {
- place: "Level One",
- title: "ARDUINO",
- title2: "UNO",
- description:
- "The Arduino Uno Kit is designed to introduce DIY electronics and programming to aspiring engineers and tech enthusiasts, offering an exciting gateway into the field.",
- image: "https://i.ibb.co/BnGsQDp/Screenshot-2024-03-22-140658.png",
- },
- {
- place: "Level One, Two, and Three",
- title: "UNSOLVED",
- title2: "CASE",
- description:
- "Unravel mysteries with Unsolved Case Kits, featuring three intriguing levels designed for both amateur sleuths and seasoned investigators to level up their detective skills.",
- image: "https://i.ibb.co/XxQJ0R9/Screenshot-2024-03-23-102313.png",
- },
- {
- place: "Level Three",
- title: "KITCHEN",
- title2: "",
- description:
- "The Level 3 Interior Design Kit - Kitchen Edition equips interior designers with essential tools to create stunning and functional kitchen spaces, suitable for both gourmet chefs and family settings.",
- image: "https://i.ibb.co/pWBPq6d/Screenshot-2024-03-23-101947.png",
- },
- {
- place: "Level One",
- title: "HYDROPONICS",
- title2: "",
- description:
- "Dive into the world of hydroponics with the comprehensive Hydroponics Kit, offering everything needed to start an indoor garden adventure and cultivate sustainable harvests.",
- image: "https://i.ibb.co/RcXqdsN/Screenshot-2024-03-23-101602.png",
- },
- {
- place: "Level Two",
- title: "ALL ABOUT",
- title2: "BLOUSES",
- description:
- "Elevate fashion design skills with the Level 2 Pattern Making Kit - Blouses Edition, perfect for creating stylish blouses with high-quality thread and buttons.",
- image: "https://i.ibb.co/VBZKLsP/Screenshot-2024-03-23-095031.png",
- },
- {
- place: "Level One",
- title: "PUZZLES",
- title2: "",
- description:
- "The Level 1 Puzzles Kit introduces the captivating Magnetic Wooden Tangram, providing endless hours of entertainment and cognitive stimulation for all ages.",
- image: "https://i.ibb.co/M53k08k/Screenshot-2024-03-23-094012.png",
- },
- {
- place: "Level One",
- title: "SKINCARE",
- title2: "",
- description:
- "Explore the benefits of nourishing oils in skincare with the Hypoallergenic Skincare Kit, designed to unlock the secrets to healthy, radiant skin.",
- image: "https://i.ibb.co/xjHmp7V/Screenshot-2024-03-23-093843.png",
- },
- {
- place: "Level Three",
- title: "HORIZONTAL",
- title2: "MATTRESS SUTURE",
- description:
- "Master horizontal mattress suturing techniques with the Level 3 Horizontal Mattress Suture Kit, featuring precision instruments and high-quality sutures for optimal wound closure.",
- image: "https://i.ibb.co/BVpd2Mf/Screenshot-2024-03-23-093453.png",
- },
- {
- place: "Level Three",
- title: "OIL",
- title2: "PASTELS",
- description:
- "Delve into the rich, creamy world of oil pastels with the Level 3 Oil Pastels Kit, inviting artists to unlock their imagination and embark on a journey of self-expression.",
- image: "https://i.ibb.co/Nr6q5Nk/Screenshot-2024-03-23-090944.png",
- },
- {
- place: "Level Two",
- title: "ACRYLICS",
- title2: "",
- description:
- "Step up artistic endeavors with the Level 2 Acrylics Kit, empowering artists to push boundaries and explore new dimensions of creativity.",
- image: "https://i.ibb.co/FxVSJFn/Screenshot-2024-03-23-084224.png",
- },
- {
- place: "Level Two",
- title: "BEDROOM",
- title2: "",
- description:
- "The Level 2 Interior Design Kit - Bedroom Edition equips designers with essential tools to create cozy and inviting bedroom spaces for personal or client projects.",
- image: "https://i.ibb.co/pWBPq6d/Screenshot-2024-03-23-101947.png",
- },
- {
- place: "Level Three",
- title: "ALL ABOUT",
- title2: "JACKETS AND SWEATERS",
- description:
- "Create stylish jackets and sweaters with the Level 3 Pattern Making Kit, tailored for fashion enthusiasts ready to tackle more advanced projects.",
- image: "https://i.ibb.co/mNDT4WL/Screenshot-2024-03-23-095157.png",
- },
- {
- place: "Level Three",
- title: "PUZZLES",
- title2: "",
- description:
- "Challenge spatial awareness with the Level 3 Puzzles Kit, featuring a captivating 3D Wooden Cube Puzzle designed to test problem-solving skills.",
- image: "https://i.ibb.co/mHzTRhP/Screenshot-2024-03-23-094345.png",
- },
- {
- place: "Level Two",
- title: "SUBTICULAR",
- title2: "SUTURE",
- description:
- "Advance suturing expertise with the Level 2 Subcuticular Suture Kit, providing all necessary instruments and materials for mastering subtler techniques.",
- image: "https://i.ibb.co/BVpd2Mf/Screenshot-2024-03-23-093453.png",
- },
- {
- place: "Level Two",
- title: "MARKERS",
- title2: "",
- description:
- "Elevate artistic journeys with the Level 2 Markers Kit, offering endless possibilities for seasoned artists and beginners alike to explore new mediums.",
- image: "https://i.ibb.co/M2yQgG1/Screenshot-2024-03-23-090825.png",
- },
- {
- place: "Level One",
- title: "WATERCOLOR",
- title2: "",
- description:
- "The Level 1 Watercolor Kit is tailored for budding artists, providing everything needed to explore the vibrant world of watercolor painting and ignite a passion for art.",
- image: "https://i.ibb.co/KG1P03t/Screenshot-2024-03-23-084418.png",
- },
- {
- place: "Level One",
- title: "DINING",
- title2: "ROOM",
- description:
- "Design stylish dining spaces with the Level 1 Interior Design Kit - Dining Edition, offering essential tools for creating inviting and functional dining areas.",
- image: "https://i.ibb.co/pWBPq6d/Screenshot-2024-03-23-101947.png",
- },
- {
- place: "Level One",
- title: "ALL ABOUT",
- title2: "PANTS",
- description:
- "Dive into the world of fashion design with the Level 1 Pattern Making Kit - All About Pants, perfect for aspiring designers starting their journey in pattern making.",
- image: "https://i.ibb.co/H7xghjm/Screenshot-2024-03-23-094922.png",
- },
- {
- place: "Level Two",
- title: "PUZZLES",
- title2: "",
- description:
- "Take cognitive skills to new heights with the Level 2 Puzzles Kit, featuring brain-teasing puzzles and games designed to sharpen intelligence.",
- image: "https://i.ibb.co/wQDNCC6/Screenshot-2024-03-23-094029.png",
- },
- {
- place: "Level One",
- title: "OVER AND UNDER",
- title2: "SUTURE",
- description:
- "Master interrupted and continuous suturing techniques with the Level 1 Over and Under Suture Kit, essential for medical students and practitioners to gain confidence in surgical suturing.",
- image: "https://i.ibb.co/BVpd2Mf/Screenshot-2024-03-23-093453.png",
- },
- {
- place: "Level Three",
- title: "OIL",
- title2: "PAINT",
- description:
- "Experience the transformative power of oil painting with the Level 3 Oil Paint Kit, inviting seasoned artists to explore depth and richness in their work.",
- image: "https://i.ibb.co/7bNH2SG/Screenshot-2024-03-23-084932.png",
- },
-
-
-
-];
-
-const _ = (id) => document.getElementById(id);
-const cards = data
- .map(
- (i, index) =>
- ``
- )
- .join("");
-
-const cardContents = data
- .map(
- (i, index) => `
-
-
${i.place}
-
${i.title}
-
${i.title2}
-
-
${index + 1}
`
- )
- .join("");
-_("demo").innerHTML = cards + cardContents;
-_("slide-numbers").innerHTML = sildeNumbers;
-
-const range = (n) =>
- Array(n)
- .fill(0)
- .map((i, j) => i + j);
-const set = gsap.set;
-
-function getCard(index) {
- return `#card${index}`;
-}
-function getCardContent(index) {
- return `#card-content-${index}`;
-}
-function getSliderItem(index) {
- return `#slide-item-${index}`;
-}
-
-function animate(target, duration, properties) {
- return new Promise((resolve) => {
- gsap.to(target, {
- ...properties,
- duration: duration,
- onComplete: resolve,
- });
- });
-}
-
-let order = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
-let detailsEven = true;
-
-let offsetTop = 200;
-let offsetLeft = 700;
-let cardWidth = 200;
-let cardHeight = 300;
-let gap = 40;
-let numberSize = 50;
-const ease = "sine.inOut";
-
-function init() {
- const [active, ...rest] = order;
- const detailsActive = detailsEven ? "#details-even" : "#details-odd";
- const detailsInactive = detailsEven ? "#details-odd" : "#details-even";
- const { innerHeight: height, innerWidth: width } = window;
- offsetTop = height - 430;
- offsetLeft = width - 830;
-
- gsap.set("#pagination", {
- top: offsetTop + 330,
- left: offsetLeft,
- y: 200,
- opacity: 0,
- zIndex: 60,
- });
- gsap.set("nav", { y: -200, opacity: 0 });
-
- gsap.set(getCard(active), {
- x: 0,
- y: 0,
- width: window.innerWidth,
- height: window.innerHeight,
- });
- gsap.set(getCardContent(active), { x: 0, y: 0, opacity: 0 });
- gsap.set(detailsActive, { opacity: 0, zIndex: 22, x: -200 });
- gsap.set(detailsInactive, { opacity: 0, zIndex: 12 });
- gsap.set(`${detailsInactive} .text`, { y: 100 });
- gsap.set(`${detailsInactive} .title-1`, { y: 100 });
- gsap.set(`${detailsInactive} .title-2`, { y: 100 });
- gsap.set(`${detailsInactive} .desc`, { y: 50 });
- gsap.set(`${detailsInactive} .cta`, { y: 60 });
-
- gsap.set(".progress-sub-foreground", {
- width: 500 * (1 / order.length) * (active + 1),
- });
-
- rest.forEach((i, index) => {
- gsap.set(getCard(i), {
- x: offsetLeft + 400 + index * (cardWidth + gap),
- y: offsetTop,
- width: cardWidth,
- height: cardHeight,
- zIndex: 30,
- borderRadius: 10,
- });
- gsap.set(getCardContent(i), {
- x: offsetLeft + 400 + index * (cardWidth + gap),
- zIndex: 40,
- y: offsetTop + cardHeight - 100,
- });
- gsap.set(getSliderItem(i), { x: (index + 1) * numberSize });
- });
-
- gsap.set(".indicator", { x: -window.innerWidth });
-
- const startDelay = 0.6;
-
- gsap.to(".cover", {
- x: width + 400,
- delay: 0.5,
- ease,
- onComplete: () => {
- setTimeout(() => {
- loop();
- }, 500);
- },
- });
- rest.forEach((i, index) => {
- gsap.to(getCard(i), {
- x: offsetLeft + index * (cardWidth + gap),
- zIndex: 30,
- delay: 0.05 * index,
- ease,
- delay: startDelay,
- });
- gsap.to(getCardContent(i), {
- x: offsetLeft + index * (cardWidth + gap),
- zIndex: 40,
- delay: 0.05 * index,
- ease,
- delay: startDelay,
- });
- });
- gsap.to("#pagination", { y: 0, opacity: 1, ease, delay: startDelay });
- gsap.to("nav", { y: 0, opacity: 1, ease, delay: startDelay });
- gsap.to(detailsActive, { opacity: 1, x: 0, ease, delay: startDelay });
-}
-
-let clicks = 0;
-
-function step() {
- return new Promise((resolve) => {
- order.push(order.shift());
- detailsEven = !detailsEven;
-
- const detailsActive = detailsEven ? "#details-even" : "#details-odd";
- const detailsInactive = detailsEven ? "#details-odd" : "#details-even";
-
- document.querySelector(`${detailsActive} .place-box .text`).textContent =
- data[order[0]].place;
- document.querySelector(`${detailsActive} .title-1`).textContent =
- data[order[0]].title;
- document.querySelector(`${detailsActive} .title-2`).textContent =
- data[order[0]].title2;
- document.querySelector(`${detailsActive} .desc`).textContent =
- data[order[0]].description;
-
- gsap.set(detailsActive, { zIndex: 22 });
- gsap.to(detailsActive, { opacity: 1, delay: 0.4, ease });
- gsap.to(`${detailsActive} .text`, {
- y: 0,
- delay: 0.1,
- duration: 0.7,
- ease,
- });
- gsap.to(`${detailsActive} .title-1`, {
- y: 0,
- delay: 0.15,
- duration: 0.7,
- ease,
- });
- gsap.to(`${detailsActive} .title-2`, {
- y: 0,
- delay: 0.15,
- duration: 0.7,
- ease,
- });
- gsap.to(`${detailsActive} .desc`, {
- y: 0,
- delay: 0.3,
- duration: 0.4,
- ease,
- });
- gsap.to(`${detailsActive} .cta`, {
- y: 0,
- delay: 0.35,
- duration: 0.4,
- onComplete: resolve,
- ease,
- });
- gsap.set(detailsInactive, { zIndex: 12 });
-
- const [active, ...rest] = order;
- const prv = rest[rest.length - 1];
-
- gsap.set(getCard(prv), { zIndex: 10 });
- gsap.set(getCard(active), { zIndex: 20 });
- gsap.to(getCard(prv), { scale: 1.5, ease });
-
- gsap.to(getCardContent(active), {
- y: offsetTop + cardHeight - 10,
- opacity: 0,
- duration: 0.3,
- ease,
- });
- gsap.to(getSliderItem(active), { x: 0, ease });
- gsap.to(getSliderItem(prv), { x: -numberSize, ease });
- gsap.to(".progress-sub-foreground", {
- width: 500 * (1 / order.length) * (active + 1),
- ease,
- });
-
- gsap.to(getCard(active), {
- x: 0,
- y: 0,
- ease,
- width: window.innerWidth,
- height: window.innerHeight,
- borderRadius: 0,
- onComplete: () => {
- const xNew = offsetLeft + (rest.length - 1) * (cardWidth + gap);
- gsap.set(getCard(prv), {
- x: xNew,
- y: offsetTop,
- width: cardWidth,
- height: cardHeight,
- zIndex: 30,
- borderRadius: 10,
- scale: 1,
- });
-
- gsap.set(getCardContent(prv), {
- x: xNew,
- y: offsetTop + cardHeight - 100,
- opacity: 1,
- zIndex: 40,
- });
- gsap.set(getSliderItem(prv), { x: rest.length * numberSize });
-
- gsap.set(detailsInactive, { opacity: 0 });
- gsap.set(`${detailsInactive} .text`, { y: 100 });
- gsap.set(`${detailsInactive} .title-1`, { y: 100 });
- gsap.set(`${detailsInactive} .title-2`, { y: 100 });
- gsap.set(`${detailsInactive} .desc`, { y: 50 });
- gsap.set(`${detailsInactive} .cta`, { y: 60 });
- clicks -= 1;
- if (clicks > 0) {
- step();
- }
- },
- });
-
- rest.forEach((i, index) => {
- if (i !== prv) {
- const xNew = offsetLeft + index * (cardWidth + gap);
- gsap.set(getCard(i), { zIndex: 30 });
- gsap.to(getCard(i), {
- x: xNew,
- y: offsetTop,
- width: cardWidth,
- height: cardHeight,
- ease,
- delay: 0.1 * (index + 1),
- });
-
- gsap.to(getCardContent(i), {
- x: xNew,
- y: offsetTop + cardHeight - 100,
- opacity: 1,
- zIndex: 40,
- ease,
- delay: 0.1 * (index + 1),
- });
- gsap.to(getSliderItem(i), { x: (index + 1) * numberSize, ease });
- }
- });
- });
-}
-
-async function loop() {
- await animate(".indicator", 2, { x: 0 });
- await animate(".indicator", 0.8, { x: window.innerWidth, delay: 0.3 });
- set(".indicator", { x: -window.innerWidth });
- await step();
- loop();
-}
-
-async function loadImage(src) {
- return new Promise((resolve, reject) => {
- let img = new Image();
- img.onload = () => resolve(img);
- img.onerror = reject;
- img.src = src;
- });
-}
-
-async function loadImages() {
- const promises = data.map(({ image }) => loadImage(image));
- return Promise.all(promises);
-}
-
-async function start() {
- try {
- await loadImages();
- init();
- } catch (error) {
- console.error("One or more images failed to load", error);
- }
-}
-
+const data = [
+ {
+ place: "Level One",
+ title: "PENCILS",
+ title2: "AND SKETCHING",
+ description:
+ "The Level 1 Pencils/Sketching Kit is a comprehensive set tailored for unleashing creativity on paper, suitable for beginners and seasoned sketch artists alike.",
+ image: "https://i.ibb.co/7Q4tkRy/Screenshot-2024-03-23-090711.png",
+ },
+ {
+ place: "Level One",
+ title: "ARDUINO",
+ title2: "UNO",
+ description:
+ "The Arduino Uno Kit is designed to introduce DIY electronics and programming to aspiring engineers and tech enthusiasts, offering an exciting gateway into the field.",
+ image: "https://i.ibb.co/BnGsQDp/Screenshot-2024-03-22-140658.png",
+ },
+ {
+ place: "Level One, Two, and Three",
+ title: "UNSOLVED",
+ title2: "CASE",
+ description:
+ "Unravel mysteries with Unsolved Case Kits, featuring three intriguing levels designed for both amateur sleuths and seasoned investigators to level up their detective skills.",
+ image: "https://i.ibb.co/XxQJ0R9/Screenshot-2024-03-23-102313.png",
+ },
+ {
+ place: "Level Three",
+ title: "KITCHEN",
+ title2: "",
+ description:
+ "The Level 3 Interior Design Kit - Kitchen Edition equips interior designers with essential tools to create stunning and functional kitchen spaces, suitable for both gourmet chefs and family settings.",
+ image: "https://i.ibb.co/pWBPq6d/Screenshot-2024-03-23-101947.png",
+ },
+ {
+ place: "Level One",
+ title: "HYDROPONICS",
+ title2: "",
+ description:
+ "Dive into the world of hydroponics with the comprehensive Hydroponics Kit, offering everything needed to start an indoor garden adventure and cultivate sustainable harvests.",
+ image: "https://i.ibb.co/RcXqdsN/Screenshot-2024-03-23-101602.png",
+ },
+ {
+ place: "Level Two",
+ title: "ALL ABOUT",
+ title2: "BLOUSES",
+ description:
+ "Elevate fashion design skills with the Level 2 Pattern Making Kit - Blouses Edition, perfect for creating stylish blouses with high-quality thread and buttons.",
+ image: "https://i.ibb.co/VBZKLsP/Screenshot-2024-03-23-095031.png",
+ },
+ {
+ place: "Level One",
+ title: "PUZZLES",
+ title2: "",
+ description:
+ "The Level 1 Puzzles Kit introduces the captivating Magnetic Wooden Tangram, providing endless hours of entertainment and cognitive stimulation for all ages.",
+ image: "https://i.ibb.co/M53k08k/Screenshot-2024-03-23-094012.png",
+ },
+ {
+ place: "Level One",
+ title: "SKINCARE",
+ title2: "",
+ description:
+ "Explore the benefits of nourishing oils in skincare with the Hypoallergenic Skincare Kit, designed to unlock the secrets to healthy, radiant skin.",
+ image: "https://i.ibb.co/xjHmp7V/Screenshot-2024-03-23-093843.png",
+ },
+ {
+ place: "Level Three",
+ title: "HORIZONTAL",
+ title2: "MATTRESS SUTURE",
+ description:
+ "Master horizontal mattress suturing techniques with the Level 3 Horizontal Mattress Suture Kit, featuring precision instruments and high-quality sutures for optimal wound closure.",
+ image: "https://i.ibb.co/BVpd2Mf/Screenshot-2024-03-23-093453.png",
+ },
+ {
+ place: "Level Three",
+ title: "OIL",
+ title2: "PASTELS",
+ description:
+ "Delve into the rich, creamy world of oil pastels with the Level 3 Oil Pastels Kit, inviting artists to unlock their imagination and embark on a journey of self-expression.",
+ image: "https://i.ibb.co/Nr6q5Nk/Screenshot-2024-03-23-090944.png",
+ },
+ {
+ place: "Level Two",
+ title: "ACRYLICS",
+ title2: "",
+ description:
+ "Step up artistic endeavors with the Level 2 Acrylics Kit, empowering artists to push boundaries and explore new dimensions of creativity.",
+ image: "https://i.ibb.co/FxVSJFn/Screenshot-2024-03-23-084224.png",
+ },
+ {
+ place: "Level Two",
+ title: "BEDROOM",
+ title2: "",
+ description:
+ "The Level 2 Interior Design Kit - Bedroom Edition equips designers with essential tools to create cozy and inviting bedroom spaces for personal or client projects.",
+ image: "https://i.ibb.co/pWBPq6d/Screenshot-2024-03-23-101947.png",
+ },
+ {
+ place: "Level Three",
+ title: "ALL ABOUT",
+ title2: "JACKETS AND SWEATERS",
+ description:
+ "Create stylish jackets and sweaters with the Level 3 Pattern Making Kit, tailored for fashion enthusiasts ready to tackle more advanced projects.",
+ image: "https://i.ibb.co/mNDT4WL/Screenshot-2024-03-23-095157.png",
+ },
+ {
+ place: "Level Three",
+ title: "PUZZLES",
+ title2: "",
+ description:
+ "Challenge spatial awareness with the Level 3 Puzzles Kit, featuring a captivating 3D Wooden Cube Puzzle designed to test problem-solving skills.",
+ image: "https://i.ibb.co/mHzTRhP/Screenshot-2024-03-23-094345.png",
+ },
+ {
+ place: "Level Two",
+ title: "SUBTICULAR",
+ title2: "SUTURE",
+ description:
+ "Advance suturing expertise with the Level 2 Subcuticular Suture Kit, providing all necessary instruments and materials for mastering subtler techniques.",
+ image: "https://i.ibb.co/BVpd2Mf/Screenshot-2024-03-23-093453.png",
+ },
+ {
+ place: "Level Two",
+ title: "MARKERS",
+ title2: "",
+ description:
+ "Elevate artistic journeys with the Level 2 Markers Kit, offering endless possibilities for seasoned artists and beginners alike to explore new mediums.",
+ image: "https://i.ibb.co/M2yQgG1/Screenshot-2024-03-23-090825.png",
+ },
+ {
+ place: "Level One",
+ title: "WATERCOLOR",
+ title2: "",
+ description:
+ "The Level 1 Watercolor Kit is tailored for budding artists, providing everything needed to explore the vibrant world of watercolor painting and ignite a passion for art.",
+ image: "https://i.ibb.co/KG1P03t/Screenshot-2024-03-23-084418.png",
+ },
+ {
+ place: "Level One",
+ title: "DINING",
+ title2: "ROOM",
+ description:
+ "Design stylish dining spaces with the Level 1 Interior Design Kit - Dining Edition, offering essential tools for creating inviting and functional dining areas.",
+ image: "https://i.ibb.co/pWBPq6d/Screenshot-2024-03-23-101947.png",
+ },
+ {
+ place: "Level One",
+ title: "ALL ABOUT",
+ title2: "PANTS",
+ description:
+ "Dive into the world of fashion design with the Level 1 Pattern Making Kit - All About Pants, perfect for aspiring designers starting their journey in pattern making.",
+ image: "https://i.ibb.co/H7xghjm/Screenshot-2024-03-23-094922.png",
+ },
+ {
+ place: "Level Two",
+ title: "PUZZLES",
+ title2: "",
+ description:
+ "Take cognitive skills to new heights with the Level 2 Puzzles Kit, featuring brain-teasing puzzles and games designed to sharpen intelligence.",
+ image: "https://i.ibb.co/wQDNCC6/Screenshot-2024-03-23-094029.png",
+ },
+ {
+ place: "Level One",
+ title: "OVER AND UNDER",
+ title2: "SUTURE",
+ description:
+ "Master interrupted and continuous suturing techniques with the Level 1 Over and Under Suture Kit, essential for medical students and practitioners to gain confidence in surgical suturing.",
+ image: "https://i.ibb.co/BVpd2Mf/Screenshot-2024-03-23-093453.png",
+ },
+ {
+ place: "Level Three",
+ title: "OIL",
+ title2: "PAINT",
+ description:
+ "Experience the transformative power of oil painting with the Level 3 Oil Paint Kit, inviting seasoned artists to explore depth and richness in their work.",
+ image: "https://i.ibb.co/7bNH2SG/Screenshot-2024-03-23-084932.png",
+ },
+
+
+
+];
+
+const _ = (id) => document.getElementById(id);
+const cards = data
+ .map(
+ (i, index) =>
+ ``
+ )
+ .join("");
+
+const cardContents = data
+ .map(
+ (i, index) => `
+
+
${i.place}
+
${i.title}
+
${i.title2}
+
+
${index + 1}
`
+ )
+ .join("");
+_("demo").innerHTML = cards + cardContents;
+_("slide-numbers").innerHTML = sildeNumbers;
+
+const range = (n) =>
+ Array(n)
+ .fill(0)
+ .map((i, j) => i + j);
+const set = gsap.set;
+
+function getCard(index) {
+ return `#card${index}`;
+}
+function getCardContent(index) {
+ return `#card-content-${index}`;
+}
+function getSliderItem(index) {
+ return `#slide-item-${index}`;
+}
+
+function animate(target, duration, properties) {
+ return new Promise((resolve) => {
+ gsap.to(target, {
+ ...properties,
+ duration: duration,
+ onComplete: resolve,
+ });
+ });
+}
+
+let order = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
+let detailsEven = true;
+
+let offsetTop = 200;
+let offsetLeft = 700;
+let cardWidth = 200;
+let cardHeight = 300;
+let gap = 40;
+let numberSize = 50;
+const ease = "sine.inOut";
+
+function init() {
+ const [active, ...rest] = order;
+ const detailsActive = detailsEven ? "#details-even" : "#details-odd";
+ const detailsInactive = detailsEven ? "#details-odd" : "#details-even";
+ const { innerHeight: height, innerWidth: width } = window;
+ offsetTop = height - 430;
+ offsetLeft = width - 830;
+
+ gsap.set("#pagination", {
+ top: offsetTop + 330,
+ left: offsetLeft,
+ y: 200,
+ opacity: 0,
+ zIndex: 60,
+ });
+ gsap.set("nav", { y: -200, opacity: 0 });
+
+ gsap.set(getCard(active), {
+ x: 0,
+ y: 0,
+ width: window.innerWidth,
+ height: window.innerHeight,
+ });
+ gsap.set(getCardContent(active), { x: 0, y: 0, opacity: 0 });
+ gsap.set(detailsActive, { opacity: 0, zIndex: 22, x: -200 });
+ gsap.set(detailsInactive, { opacity: 0, zIndex: 12 });
+ gsap.set(`${detailsInactive} .text`, { y: 100 });
+ gsap.set(`${detailsInactive} .title-1`, { y: 100 });
+ gsap.set(`${detailsInactive} .title-2`, { y: 100 });
+ gsap.set(`${detailsInactive} .desc`, { y: 50 });
+ gsap.set(`${detailsInactive} .cta`, { y: 60 });
+
+ gsap.set(".progress-sub-foreground", {
+ width: 500 * (1 / order.length) * (active + 1),
+ });
+
+ rest.forEach((i, index) => {
+ gsap.set(getCard(i), {
+ x: offsetLeft + 400 + index * (cardWidth + gap),
+ y: offsetTop,
+ width: cardWidth,
+ height: cardHeight,
+ zIndex: 30,
+ borderRadius: 10,
+ });
+ gsap.set(getCardContent(i), {
+ x: offsetLeft + 400 + index * (cardWidth + gap),
+ zIndex: 40,
+ y: offsetTop + cardHeight - 100,
+ });
+ gsap.set(getSliderItem(i), { x: (index + 1) * numberSize });
+ });
+
+ gsap.set(".indicator", { x: -window.innerWidth });
+
+ const startDelay = 0.6;
+
+ gsap.to(".cover", {
+ x: width + 400,
+ delay: 0.5,
+ ease,
+ onComplete: () => {
+ setTimeout(() => {
+ loop();
+ }, 500);
+ },
+ });
+ rest.forEach((i, index) => {
+ gsap.to(getCard(i), {
+ x: offsetLeft + index * (cardWidth + gap),
+ zIndex: 30,
+ delay: 0.05 * index,
+ ease,
+ delay: startDelay,
+ });
+ gsap.to(getCardContent(i), {
+ x: offsetLeft + index * (cardWidth + gap),
+ zIndex: 40,
+ delay: 0.05 * index,
+ ease,
+ delay: startDelay,
+ });
+ });
+ gsap.to("#pagination", { y: 0, opacity: 1, ease, delay: startDelay });
+ gsap.to("nav", { y: 0, opacity: 1, ease, delay: startDelay });
+ gsap.to(detailsActive, { opacity: 1, x: 0, ease, delay: startDelay });
+}
+
+let clicks = 0;
+
+function step() {
+ return new Promise((resolve) => {
+ order.push(order.shift());
+ detailsEven = !detailsEven;
+
+ const detailsActive = detailsEven ? "#details-even" : "#details-odd";
+ const detailsInactive = detailsEven ? "#details-odd" : "#details-even";
+
+ document.querySelector(`${detailsActive} .place-box .text`).textContent =
+ data[order[0]].place;
+ document.querySelector(`${detailsActive} .title-1`).textContent =
+ data[order[0]].title;
+ document.querySelector(`${detailsActive} .title-2`).textContent =
+ data[order[0]].title2;
+ document.querySelector(`${detailsActive} .desc`).textContent =
+ data[order[0]].description;
+
+ gsap.set(detailsActive, { zIndex: 22 });
+ gsap.to(detailsActive, { opacity: 1, delay: 0.4, ease });
+ gsap.to(`${detailsActive} .text`, {
+ y: 0,
+ delay: 0.1,
+ duration: 0.7,
+ ease,
+ });
+ gsap.to(`${detailsActive} .title-1`, {
+ y: 0,
+ delay: 0.15,
+ duration: 0.7,
+ ease,
+ });
+ gsap.to(`${detailsActive} .title-2`, {
+ y: 0,
+ delay: 0.15,
+ duration: 0.7,
+ ease,
+ });
+ gsap.to(`${detailsActive} .desc`, {
+ y: 0,
+ delay: 0.3,
+ duration: 0.4,
+ ease,
+ });
+ gsap.to(`${detailsActive} .cta`, {
+ y: 0,
+ delay: 0.35,
+ duration: 0.4,
+ onComplete: resolve,
+ ease,
+ });
+ gsap.set(detailsInactive, { zIndex: 12 });
+
+ const [active, ...rest] = order;
+ const prv = rest[rest.length - 1];
+
+ gsap.set(getCard(prv), { zIndex: 10 });
+ gsap.set(getCard(active), { zIndex: 20 });
+ gsap.to(getCard(prv), { scale: 1.5, ease });
+
+ gsap.to(getCardContent(active), {
+ y: offsetTop + cardHeight - 10,
+ opacity: 0,
+ duration: 0.3,
+ ease,
+ });
+ gsap.to(getSliderItem(active), { x: 0, ease });
+ gsap.to(getSliderItem(prv), { x: -numberSize, ease });
+ gsap.to(".progress-sub-foreground", {
+ width: 500 * (1 / order.length) * (active + 1),
+ ease,
+ });
+
+ gsap.to(getCard(active), {
+ x: 0,
+ y: 0,
+ ease,
+ width: window.innerWidth,
+ height: window.innerHeight,
+ borderRadius: 0,
+ onComplete: () => {
+ const xNew = offsetLeft + (rest.length - 1) * (cardWidth + gap);
+ gsap.set(getCard(prv), {
+ x: xNew,
+ y: offsetTop,
+ width: cardWidth,
+ height: cardHeight,
+ zIndex: 30,
+ borderRadius: 10,
+ scale: 1,
+ });
+
+ gsap.set(getCardContent(prv), {
+ x: xNew,
+ y: offsetTop + cardHeight - 100,
+ opacity: 1,
+ zIndex: 40,
+ });
+ gsap.set(getSliderItem(prv), { x: rest.length * numberSize });
+
+ gsap.set(detailsInactive, { opacity: 0 });
+ gsap.set(`${detailsInactive} .text`, { y: 100 });
+ gsap.set(`${detailsInactive} .title-1`, { y: 100 });
+ gsap.set(`${detailsInactive} .title-2`, { y: 100 });
+ gsap.set(`${detailsInactive} .desc`, { y: 50 });
+ gsap.set(`${detailsInactive} .cta`, { y: 60 });
+ clicks -= 1;
+ if (clicks > 0) {
+ step();
+ }
+ },
+ });
+
+ rest.forEach((i, index) => {
+ if (i !== prv) {
+ const xNew = offsetLeft + index * (cardWidth + gap);
+ gsap.set(getCard(i), { zIndex: 30 });
+ gsap.to(getCard(i), {
+ x: xNew,
+ y: offsetTop,
+ width: cardWidth,
+ height: cardHeight,
+ ease,
+ delay: 0.1 * (index + 1),
+ });
+
+ gsap.to(getCardContent(i), {
+ x: xNew,
+ y: offsetTop + cardHeight - 100,
+ opacity: 1,
+ zIndex: 40,
+ ease,
+ delay: 0.1 * (index + 1),
+ });
+ gsap.to(getSliderItem(i), { x: (index + 1) * numberSize, ease });
+ }
+ });
+ });
+}
+
+async function loop() {
+ await animate(".indicator", 2, { x: 0 });
+ await animate(".indicator", 0.8, { x: window.innerWidth, delay: 0.3 });
+ set(".indicator", { x: -window.innerWidth });
+ await step();
+ loop();
+}
+
+async function loadImage(src) {
+ return new Promise((resolve, reject) => {
+ let img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = reject;
+ img.src = src;
+ });
+}
+
+async function loadImages() {
+ const promises = data.map(({ image }) => loadImage(image));
+ return Promise.all(promises);
+}
+
+async function start() {
+ try {
+ await loadImages();
+ init();
+ } catch (error) {
+ console.error("One or more images failed to load", error);
+ }
+}
+
start();
\ No newline at end of file
diff --git a/assets/js/index.js b/assets/js/index.js
index 7d7eb6c..e69de29 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,31 +0,0 @@
-const indexes = document.querySelectorAll(".indexes li");
-const tabs = document.querySelectorAll(".tab");
-const contents = document.querySelectorAll(".tab-content");
-
-function reset() {
- for (let i = 0; i < tabs.length; i++) {
- indexes[i].style.borderColor = "transparent";
- tabs[i].style.zIndex = 0;
- tabs[i].classList.remove("active");
- contents[i].classList.remove("active");
- }
-}
-
-function showTab(i) {
- indexes[i].style.borderColor = "rgba(211,38,38,0.6)";
- tabs[i].style.opacity = 1;
- tabs[i].style.zIndex = 5;
- tabs[i].classList.add("active");
- contents[i].classList.add("active");
-}
-
-function activate(e) {
- if (!e.target.matches(".indexes li")) return;
- reset();
- showTab(e.target.dataset.index);
-}
-
-const init = () => showTab(0);
-
-window.addEventListener("load", init, false);
-window.addEventListener("click", activate, false);
diff --git a/assets/js/logincheck.js b/assets/js/logincheck.js
index b25a29d..704c9a0 100644
--- a/assets/js/logincheck.js
+++ b/assets/js/logincheck.js
@@ -1,34 +1,34 @@
-window.addEventListener("DOMContentLoaded", () => {
- try {
- var buttons = document.getElementsByClassName('restrict-button');
-
- for (var i = 0; i < buttons.length; i++) {
- buttons[i].addEventListener("click", function (event) {
- try {
- console.log('button clicked');
- console.log(localStorage);
- var reflowAuth = localStorage.getItem('reflowAuth');
- console.log(reflowAuth);
-
- if (!reflowAuth) {
- event.preventDefault(); // Prevent default navigation
- console.log('reflowAuth: Not logged in');
-
- // Get the toast element
- var toastEl = document.getElementById('liveToast');
-
- // Create a new toast instance
- var toast = new bootstrap.Toast(toastEl);
-
- // Show the toast
- toast.show();
- }
- } catch (error) {
- console.error('An error occurred in the click event handler:', error);
- }
- });
- }
- } catch (error) {
- console.error('An error occurred:', error);
- }
+window.addEventListener("DOMContentLoaded", () => {
+ try {
+ var buttons = document.getElementsByClassName('restrict-button');
+
+ for (var i = 0; i < buttons.length; i++) {
+ buttons[i].addEventListener("click", function (event) {
+ try {
+ console.log('button clicked');
+ console.log(localStorage);
+ var reflowAuth = localStorage.getItem('reflowAuth');
+ console.log(reflowAuth);
+
+ if (!reflowAuth) {
+ event.preventDefault(); // Prevent default navigation
+ console.log('reflowAuth: Not logged in');
+
+ // Get the toast element
+ var toastEl = document.getElementById('liveToast');
+
+ // Create a new toast instance
+ var toast = new bootstrap.Toast(toastEl);
+
+ // Show the toast
+ toast.show();
+ }
+ } catch (error) {
+ console.error('An error occurred in the click event handler:', error);
+ }
+ });
+ }
+ } catch (error) {
+ console.error('An error occurred:', error);
+ }
});
\ No newline at end of file
diff --git a/assets/js/resources.js b/assets/js/resources.js
index cc8591c..b95809a 100644
--- a/assets/js/resources.js
+++ b/assets/js/resources.js
@@ -1,59 +1,59 @@
-// Check if codes exists in localStorage
-var codes = localStorage.getItem('codes');
-if (!codes) {
- // If not, initialize it
- codes = [
- { codes: ["A3H7P6", "D5R9Q2"], divId: "hiddenDiv1" },
- { codes: ["G8F4T9", "K2L6J7", "M1N5R3", "S9T2E4"], divId: "hiddenDiv2" }
- ];
- localStorage.setItem('codes', JSON.stringify(codes));
-} else {
- // If it does, parse it
- codes = JSON.parse(codes);
-}
-
-document.querySelector('form').addEventListener('submit', function(e) {
- e.preventDefault(); // Prevent the form from submitting normally
-
- var enteredCode = document.getElementById('inputPassword2').value;
-
- var codeObject = codes.find(obj => obj.codes.includes(enteredCode));
- if (codeObject) {
- var reflowAuth = localStorage.getItem('reflowAuth');
- var parsedReflowAuth = JSON.parse(reflowAuth);
- var email = parsedReflowAuth.profile.email;
- var resourceAccess = JSON.parse(localStorage.getItem('resourceAccess')) || [];
- resourceAccess.push({ email: email, divId: codeObject.divId });
- localStorage.setItem('resourceAccess', JSON.stringify(resourceAccess));
- codeObject.codes = codeObject.codes.filter(code => code !== enteredCode); // Remove the used code from the array
- // Update codes in localStorage
- localStorage.setItem('codes', JSON.stringify(codes));
- alert('Access granted!');
- location.reload(); // Refresh the page
- } else {
- alert('Invalid code. Try again.');
- }
-});
-
-window.onload = function() {
- console.log('Page has loaded');
- var resourceAccess = JSON.parse(localStorage.getItem('resourceAccess')) || [];
- var reflowAuth = localStorage.getItem('reflowAuth');
- var parsedReflowAuth = JSON.parse(reflowAuth);
-
- if (parsedReflowAuth) {
- var email = parsedReflowAuth.profile.email;
- // Rest of your code...
- resourceAccess.forEach(function(access) {
- if (access.email === email) {
- console.log('Access granted');
- // Assuming the div has an id of 'hiddenDiv'
- var hiddenDiv = document.getElementById(access.divId);
- console.log(hiddenDiv);
- hiddenDiv.hidden = false; // Unhide the div
- }
- });
- } else {
- console.log('parsedReflowAuth is null');
- }
+// Check if codes exists in localStorage
+var codes = localStorage.getItem('codes');
+if (!codes) {
+ // If not, initialize it
+ codes = [
+ { codes: ["A3H7P6", "D5R9Q2"], divId: "hiddenDiv1" },
+ { codes: ["G8F4T9", "K2L6J7", "M1N5R3", "S9T2E4"], divId: "hiddenDiv2" }
+ ];
+ localStorage.setItem('codes', JSON.stringify(codes));
+} else {
+ // If it does, parse it
+ codes = JSON.parse(codes);
+}
+
+document.querySelector('form').addEventListener('submit', function(e) {
+ e.preventDefault(); // Prevent the form from submitting normally
+
+ var enteredCode = document.getElementById('inputPassword2').value;
+
+ var codeObject = codes.find(obj => obj.codes.includes(enteredCode));
+ if (codeObject) {
+ var reflowAuth = localStorage.getItem('reflowAuth');
+ var parsedReflowAuth = JSON.parse(reflowAuth);
+ var email = parsedReflowAuth.profile.email;
+ var resourceAccess = JSON.parse(localStorage.getItem('resourceAccess')) || [];
+ resourceAccess.push({ email: email, divId: codeObject.divId });
+ localStorage.setItem('resourceAccess', JSON.stringify(resourceAccess));
+ codeObject.codes = codeObject.codes.filter(code => code !== enteredCode); // Remove the used code from the array
+ // Update codes in localStorage
+ localStorage.setItem('codes', JSON.stringify(codes));
+ alert('Access granted!');
+ location.reload(); // Refresh the page
+ } else {
+ alert('Invalid code. Try again.');
+ }
+});
+
+window.onload = function() {
+ console.log('Page has loaded');
+ var resourceAccess = JSON.parse(localStorage.getItem('resourceAccess')) || [];
+ var reflowAuth = localStorage.getItem('reflowAuth');
+ var parsedReflowAuth = JSON.parse(reflowAuth);
+
+ if (parsedReflowAuth) {
+ var email = parsedReflowAuth.profile.email;
+ // Rest of your code...
+ resourceAccess.forEach(function(access) {
+ if (access.email === email) {
+ console.log('Access granted');
+ // Assuming the div has an id of 'hiddenDiv'
+ var hiddenDiv = document.getElementById(access.divId);
+ console.log(hiddenDiv);
+ hiddenDiv.hidden = false; // Unhide the div
+ }
+ });
+ } else {
+ console.log('parsedReflowAuth is null');
+ }
};
\ No newline at end of file
diff --git a/assets/js/test.js b/assets/js/test.js
index c3c0076..bcb4e62 100644
--- a/assets/js/test.js
+++ b/assets/js/test.js
@@ -1,178 +1,178 @@
-const dropzoneBox = document.getElementsByClassName("dropzone-box")[0];
-const inputFiles = document.querySelectorAll(
- ".dropzone-area input[type='file']"
-);
-
-const correctChords = ["C", "D", "G"];
-const inputElement = inputFiles[0];
-
-const dropZoneElement = inputElement.closest(".dropzone-area");
-
-// List of chords
-const chords = ["C A D", "D E G", "E F A", "F C D", "G D C", "C F G", "A C E"];
-
-// Function to get a random chord from the list
-function getRandomChord() {
- const randomIndex = Math.floor(Math.random() * chords.length);
- return chords[randomIndex];
-}
-
-// Update the content of the div with a random chord
-document.addEventListener("DOMContentLoaded", function() {
- // Your JavaScript code goes here
- document.getElementById('random-chord').textContent = "Play these notes: " + getRandomChord();
-});
-
-inputElement.addEventListener("change", (e) => {
- if (inputElement.files.length) {
- updateDropzoneFileList(dropZoneElement, inputElement.files[0]);
- }
-});
-
-dropZoneElement.addEventListener("dragover", (e) => {
- e.preventDefault();
- dropZoneElement.classList.add("dropzone--over");
-});
-
-["dragleave", "dragend"].forEach((type) => {
- dropZoneElement.addEventListener(type, (e) => {
- dropZoneElement.classList.remove("dropzone--over");
- });
-});
-
-dropZoneElement.addEventListener("drop", (e) => {
- e.preventDefault();
-
- if (e.dataTransfer.files.length) {
- inputElement.files = e.dataTransfer.files;
-
- updateDropzoneFileList(dropZoneElement, e.dataTransfer.files[0]);
- }
-
- dropZoneElement.classList.remove("dropzone--over");
-});
-
-const updateDropzoneFileList = (dropzoneElement, file) => {
- let dropzoneFileMessage = dropzoneElement.querySelector(".file-info");
-
- if (!file.type.startsWith("audio/")) {
- dropzoneFileMessage.innerHTML = `Invalid file type. Please upload an audio file.`;
- return;
- }
-
- dropzoneFileMessage.innerHTML = `
- ${file.name}, ${file.size} bytes
- `;
-};
-
-dropzoneBox.addEventListener("reset", (e) => {
- let dropzoneFileMessage = dropZoneElement.querySelector(".file-info");
-
- dropzoneFileMessage.innerHTML = `No Files Selected`;
-});
-
-dropzoneBox.addEventListener("submit", async (e) => {
- e.preventDefault();
- document.getElementById('loading-screen').style.display = 'block';
-
- const myFile = document.getElementById("upload-file");
- var file = myFile.files[0];
- console.log(file);
-
- //get time now
- var date = new Date();
- var time = date.getTime();
-
- // Replace with your actual API key
- const apiKey = "e1582db2-6ef0-4bb7-a1cd-f08c76125a12";
-
- // Make a GET request to get the uploadUrl
- fetch("https://api.music.ai/api/upload", {
- method: "GET",
- headers: {
- Authorization: apiKey,
- },
- })
- .then((response) => response.json())
- .then((data) => {
- const uploadUrl = data.uploadUrl;
- const audioUrl = data.downloadUrl;
-
- // Convert the file to a blob
- const blob = new Blob([file], { type: file.type });
-
- // Make a PUT request to upload the audio file
- fetch(uploadUrl, {
- method: "PUT",
- headers: {
- "Content-Type": "audio/mpeg",
- },
- body: blob,
- }).then((response) => {
- if (response.ok) {
- console.log("Upload successful");
- console.log(response);
-
- // Make a POST request to create a job
- fetch("https://api.music.ai/api/job", {
- method: "POST",
- headers: {
- Authorization: apiKey,
- "Content-Type": "application/json",
- },
- body: JSON.stringify({
- name: "Chords Website " + time,
- workflow: "chords-detection",
- params: {
- inputUrl: audioUrl,
- },
- }),
- })
- .then((response) => response.json())
- .then((data) => {
- console.log("Job created successfully", data);
-
- var jobId = data.id;
- // Add a delay of 5 seconds before making the GET request
- setTimeout(() => {
- // Make a GET request to get the job details
- fetch(`https://api.music.ai/api/job/${jobId}`, {
- method: "GET",
- headers: {
- Authorization: apiKey,
- },
- })
- .then((response) => response.json())
- .then(async (data) => {
- console.log("Job details:", data);
- var chordsJSON = data.result.chordsJSON;
-
- const response = await fetch(chordsJSON);
- console.log(response);
- // Now you can access the data in the JSON
- console.log(data);
- document.getElementById('results').textContent = `You got ${correctLetters} notes right.`;
- document.getElementById('loading-screen').style.display = 'none';
- document.querySelector('.dropzone-box').style.display = 'none';
- })
- .catch((error) => {
- document.getElementById('loading-screen').style.display = 'none';
- document.getElementById('error-message').textContent = `Error: ${error.message}`;
- console.error("Error:", error)
- });
- }, 10000); // Delay of 5 seconds
- })
- .catch((error) => {
- console.error("Error:", error);
- document.getElementById('error-message').textContent = `Error: ${error.message}`;
- document.getElementById('loading-screen').style.display = 'none';
- });
- } else {
- console.error("Upload failed");
- document.getElementById('error-message').textContent = `Error: Upload failed. ${error.message}`;
- document.getElementById('loading-screen').style.display = 'none';
- }
- });
- })
- .catch((error) => console.error("Error:", error));
-});
+const dropzoneBox = document.getElementsByClassName("dropzone-box")[0];
+const inputFiles = document.querySelectorAll(
+ ".dropzone-area input[type='file']"
+);
+
+const correctChords = ["C", "D", "G"];
+const inputElement = inputFiles[0];
+
+const dropZoneElement = inputElement.closest(".dropzone-area");
+
+// List of chords
+const chords = ["C A D", "D E G", "E F A", "F C D", "G D C", "C F G", "A C E"];
+
+// Function to get a random chord from the list
+function getRandomChord() {
+ const randomIndex = Math.floor(Math.random() * chords.length);
+ return chords[randomIndex];
+}
+
+// Update the content of the div with a random chord
+document.addEventListener("DOMContentLoaded", function() {
+ // Your JavaScript code goes here
+ document.getElementById('random-chord').textContent = "Play these notes: " + getRandomChord();
+});
+
+inputElement.addEventListener("change", (e) => {
+ if (inputElement.files.length) {
+ updateDropzoneFileList(dropZoneElement, inputElement.files[0]);
+ }
+});
+
+dropZoneElement.addEventListener("dragover", (e) => {
+ e.preventDefault();
+ dropZoneElement.classList.add("dropzone--over");
+});
+
+["dragleave", "dragend"].forEach((type) => {
+ dropZoneElement.addEventListener(type, (e) => {
+ dropZoneElement.classList.remove("dropzone--over");
+ });
+});
+
+dropZoneElement.addEventListener("drop", (e) => {
+ e.preventDefault();
+
+ if (e.dataTransfer.files.length) {
+ inputElement.files = e.dataTransfer.files;
+
+ updateDropzoneFileList(dropZoneElement, e.dataTransfer.files[0]);
+ }
+
+ dropZoneElement.classList.remove("dropzone--over");
+});
+
+const updateDropzoneFileList = (dropzoneElement, file) => {
+ let dropzoneFileMessage = dropzoneElement.querySelector(".file-info");
+
+ if (!file.type.startsWith("audio/")) {
+ dropzoneFileMessage.innerHTML = `Invalid file type. Please upload an audio file.`;
+ return;
+ }
+
+ dropzoneFileMessage.innerHTML = `
+ ${file.name}, ${file.size} bytes
+ `;
+};
+
+dropzoneBox.addEventListener("reset", (e) => {
+ let dropzoneFileMessage = dropZoneElement.querySelector(".file-info");
+
+ dropzoneFileMessage.innerHTML = `No Files Selected`;
+});
+
+dropzoneBox.addEventListener("submit", async (e) => {
+ e.preventDefault();
+ document.getElementById('loading-screen').style.display = 'block';
+
+ const myFile = document.getElementById("upload-file");
+ var file = myFile.files[0];
+ console.log(file);
+
+ //get time now
+ var date = new Date();
+ var time = date.getTime();
+
+ // Replace with your actual API key
+ const apiKey = "e1582db2-6ef0-4bb7-a1cd-f08c76125a12";
+
+ // Make a GET request to get the uploadUrl
+ fetch("https://api.music.ai/api/upload", {
+ method: "GET",
+ headers: {
+ Authorization: apiKey,
+ },
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ const uploadUrl = data.uploadUrl;
+ const audioUrl = data.downloadUrl;
+
+ // Convert the file to a blob
+ const blob = new Blob([file], { type: file.type });
+
+ // Make a PUT request to upload the audio file
+ fetch(uploadUrl, {
+ method: "PUT",
+ headers: {
+ "Content-Type": "audio/mpeg",
+ },
+ body: blob,
+ }).then((response) => {
+ if (response.ok) {
+ console.log("Upload successful");
+ console.log(response);
+
+ // Make a POST request to create a job
+ fetch("https://api.music.ai/api/job", {
+ method: "POST",
+ headers: {
+ Authorization: apiKey,
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ name: "Chords Website " + time,
+ workflow: "chords-detection",
+ params: {
+ inputUrl: audioUrl,
+ },
+ }),
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log("Job created successfully", data);
+
+ var jobId = data.id;
+ // Add a delay of 5 seconds before making the GET request
+ setTimeout(() => {
+ // Make a GET request to get the job details
+ fetch(`https://api.music.ai/api/job/${jobId}`, {
+ method: "GET",
+ headers: {
+ Authorization: apiKey,
+ },
+ })
+ .then((response) => response.json())
+ .then(async (data) => {
+ console.log("Job details:", data);
+ var chordsJSON = data.result.chordsJSON;
+
+ const response = await fetch(chordsJSON);
+ console.log(response);
+ // Now you can access the data in the JSON
+ console.log(data);
+ document.getElementById('results').textContent = `You got ${correctLetters} notes right.`;
+ document.getElementById('loading-screen').style.display = 'none';
+ document.querySelector('.dropzone-box').style.display = 'none';
+ })
+ .catch((error) => {
+ document.getElementById('loading-screen').style.display = 'none';
+ document.getElementById('error-message').textContent = `Error: ${error.message}`;
+ console.error("Error:", error)
+ });
+ }, 10000); // Delay of 5 seconds
+ })
+ .catch((error) => {
+ console.error("Error:", error);
+ document.getElementById('error-message').textContent = `Error: ${error.message}`;
+ document.getElementById('loading-screen').style.display = 'none';
+ });
+ } else {
+ console.error("Upload failed");
+ document.getElementById('error-message').textContent = `Error: Upload failed. ${error.message}`;
+ document.getElementById('loading-screen').style.display = 'none';
+ }
+ });
+ })
+ .catch((error) => console.error("Error:", error));
+});