diff --git a/music-master/dist/economica-bold.a4fc1a89.ttf b/music-master/dist/economica-bold.a4fc1a89.ttf
new file mode 100644
index 0000000..6ad832e
Binary files /dev/null and b/music-master/dist/economica-bold.a4fc1a89.ttf differ
diff --git a/music-master/dist/index.61d3354a.css b/music-master/dist/index.61d3354a.css
new file mode 100644
index 0000000..cf850a1
--- /dev/null
+++ b/music-master/dist/index.61d3354a.css
@@ -0,0 +1,61 @@
+@font-face {
+ font-family: RobotoCondensed;
+ src: url("roboto-condensed.light.a5f9c5f3.ttf");
+ font-weight: 800;
+}
+
+@font-face {
+ font-family: EconomicaBold;
+ src: url("economica-bold.a4fc1a89.ttf");
+}
+
+body {
+ text-align: center;
+ padding: 2.5%;
+ font-family: RobotoCondensed;
+ font-size: 20px;
+}
+
+h1, h2, h3, h4, h5 {
+ font-family: EconomicaBold;
+}
+
+.profile {
+ width: 200px;
+ height: 200px;
+ border-radius: 100px;
+}
+
+.title-fade-out {
+ opacity: 0;
+ animation-name: fade-out;
+ animation-duration: 2s;
+}
+
+.title-fade-in {
+ opacity: 100;
+ animation-name: fade-in;
+ animation-duration: 2s;
+}
+
+@keyframes fade-out {
+ from {
+ opacity: 100;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 100;
+ }
+}
+
+/*# sourceMappingURL=index.61d3354a.css.map */
diff --git a/music-master/dist/index.61d3354a.css.map b/music-master/dist/index.61d3354a.css.map
new file mode 100644
index 0000000..d1782d7
--- /dev/null
+++ b/music-master/dist/index.61d3354a.css.map
@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;;;AAMA;;;;;AAKA;;;;;;;AAOA;;;;AAIA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;;;;;AAKA","sources":["src/index.css"],"sourcesContent":["@font-face {\n font-family: RobotoCondensed;\n src: url(assets/roboto-condensed.light.ttf);\n font-weight: 800;\n}\n\n@font-face {\n font-family: EconomicaBold;\n src: url(assets/economica-bold.ttf);\n}\n\nbody {\n text-align: center;\n font-size: 20px;\n padding: 2.5%;\n font-family: 'RobotoCondensed';\n}\n\nh1, h2, h3, h4, h5 {\n font-family: 'EconomicaBold';\n}\n\n.profile {\n width: 200px;\n height: 200px;\n border-radius: 100px;\n}\n\n.title-fade-out {\n opacity: 0;\n animation-name: fade-out;\n animation-duration: 2s;\n}\n\n.title-fade-in {\n opacity: 100;\n animation-name: fade-in;\n animation-duration: 2s;\n}\n\n@keyframes fade-out {\n from {opacity: 100}\n to {opacity: 0}\n}\n\n@keyframes fade-in {\n from {opacity: 0}\n to {opacity: 100}\n}\n"],"names":[],"version":3,"file":"index.61d3354a.css.map","sourceRoot":"/__parcel_source_root/"}
\ No newline at end of file
diff --git a/music-master/dist/index.975ef6c8.js b/music-master/dist/index.975ef6c8.js
new file mode 100644
index 0000000..4c7d432
--- /dev/null
+++ b/music-master/dist/index.975ef6c8.js
@@ -0,0 +1,27298 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+ /* eslint-disable no-undef */
+ var globalObject =
+ typeof globalThis !== 'undefined'
+ ? globalThis
+ : typeof self !== 'undefined'
+ ? self
+ : typeof window !== 'undefined'
+ ? window
+ : typeof global !== 'undefined'
+ ? global
+ : {};
+ /* eslint-enable no-undef */
+
+ // Save the require from previous bundle to this closure if any
+ var previousRequire =
+ typeof globalObject[parcelRequireName] === 'function' &&
+ globalObject[parcelRequireName];
+
+ var cache = previousRequire.cache || {};
+ // Do not use `require` to prevent Webpack from trying to bundle this call
+ var nodeRequire =
+ typeof module !== 'undefined' &&
+ typeof module.require === 'function' &&
+ module.require.bind(module);
+
+ function newRequire(name, jumped) {
+ if (!cache[name]) {
+ if (!modules[name]) {
+ // if we cannot find the module within our internal map or
+ // cache jump to the current global require ie. the last bundle
+ // that was added to the page.
+ var currentRequire =
+ typeof globalObject[parcelRequireName] === 'function' &&
+ globalObject[parcelRequireName];
+ if (!jumped && currentRequire) {
+ return currentRequire(name, true);
+ }
+
+ // If there are other bundles on this page the require from the
+ // previous one is saved to 'previousRequire'. Repeat this as
+ // many times as there are bundles until the module is found or
+ // we exhaust the require chain.
+ if (previousRequire) {
+ return previousRequire(name, true);
+ }
+
+ // Try the node require function if it exists.
+ if (nodeRequire && typeof name === 'string') {
+ return nodeRequire(name);
+ }
+
+ var err = new Error("Cannot find module '" + name + "'");
+ err.code = 'MODULE_NOT_FOUND';
+ throw err;
+ }
+
+ localRequire.resolve = resolve;
+ localRequire.cache = {};
+
+ var module = (cache[name] = new newRequire.Module(name));
+
+ modules[name][0].call(
+ module.exports,
+ localRequire,
+ module,
+ module.exports,
+ this
+ );
+ }
+
+ return cache[name].exports;
+
+ function localRequire(x) {
+ var res = localRequire.resolve(x);
+ return res === false ? {} : newRequire(res);
+ }
+
+ function resolve(x) {
+ var id = modules[name][1][x];
+ return id != null ? id : x;
+ }
+ }
+
+ function Module(moduleName) {
+ this.id = moduleName;
+ this.bundle = newRequire;
+ this.exports = {};
+ }
+
+ newRequire.isParcelRequire = true;
+ newRequire.Module = Module;
+ newRequire.modules = modules;
+ newRequire.cache = cache;
+ newRequire.parent = previousRequire;
+ newRequire.register = function (id, exports) {
+ modules[id] = [
+ function (require, module) {
+ module.exports = exports;
+ },
+ {},
+ ];
+ };
+
+ Object.defineProperty(newRequire, 'root', {
+ get: function () {
+ return globalObject[parcelRequireName];
+ },
+ });
+
+ globalObject[parcelRequireName] = newRequire;
+
+ for (var i = 0; i < entry.length; i++) {
+ newRequire(entry[i]);
+ }
+
+ if (mainEntry) {
+ // Expose entry point to Node, AMD or browser globals
+ // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+ var mainExports = newRequire(mainEntry);
+
+ // CommonJS
+ if (typeof exports === 'object' && typeof module !== 'undefined') {
+ module.exports = mainExports;
+
+ // RequireJS
+ } else if (typeof define === 'function' && define.amd) {
+ define(function () {
+ return mainExports;
+ });
+
+ // "; // eslint-disable-line
+ // This is guaranteed to yield a script element.
+ var firstChild = div.firstChild;
+ domElement = div.removeChild(firstChild);
+ } else if (typeof props.is === "string") // $FlowIssue `createElement` should be updated for Web Components
+ domElement = ownerDocument.createElement(type, {
+ is: props.is
+ });
+ else {
+ // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
+ // See discussion in https://github.com/facebook/react/pull/6896
+ // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
+ domElement = ownerDocument.createElement(type); // Normally attributes are assigned in `setInitialDOMProperties`, however the `multiple` and `size`
+ // attributes on `select`s needs to be added before `option`s are inserted.
+ // This prevents:
+ // - a bug where the `select` does not scroll to the correct option because singular
+ // `select` elements automatically pick the first item #13222
+ // - a bug where the `select` set the first item as selected despite the `size` attribute #14239
+ // See https://github.com/facebook/react/issues/13222
+ // and https://github.com/facebook/react/issues/14239
+ if (type === "select") {
+ var node = domElement;
+ if (props.multiple) node.multiple = true;
+ else if (props.size) // Setting a size greater than 1 causes a select to behave like `multiple=true`, where
+ // it is possible that no option is selected.
+ //
+ // This is only necessary when a select in "single selection mode".
+ node.size = props.size;
+ }
+ }
+ } else domElement = ownerDocument.createElementNS(namespaceURI, type);
+ if (namespaceURI === HTML_NAMESPACE) {
+ if (!isCustomComponentTag && Object.prototype.toString.call(domElement) === "[object HTMLUnknownElement]" && !hasOwnProperty.call(warnedUnknownTags, type)) {
+ warnedUnknownTags[type] = true;
+ error("The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.", type);
+ }
+ }
+ return domElement;
+ }
+ function createTextNode(text, rootContainerElement) {
+ return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(text);
+ }
+ function setInitialProperties(domElement, tag, rawProps, rootContainerElement) {
+ var isCustomComponentTag = isCustomComponent(tag, rawProps);
+ validatePropertiesInDevelopment(tag, rawProps);
+ var props;
+ switch(tag){
+ case "dialog":
+ listenToNonDelegatedEvent("cancel", domElement);
+ listenToNonDelegatedEvent("close", domElement);
+ props = rawProps;
+ break;
+ case "iframe":
+ case "object":
+ case "embed":
+ // We listen to this event in case to ensure emulated bubble
+ // listeners still fire for the load event.
+ listenToNonDelegatedEvent("load", domElement);
+ props = rawProps;
+ break;
+ case "video":
+ case "audio":
+ // We listen to these events in case to ensure emulated bubble
+ // listeners still fire for all the media events.
+ for(var i = 0; i < mediaEventTypes.length; i++)listenToNonDelegatedEvent(mediaEventTypes[i], domElement);
+ props = rawProps;
+ break;
+ case "source":
+ // We listen to this event in case to ensure emulated bubble
+ // listeners still fire for the error event.
+ listenToNonDelegatedEvent("error", domElement);
+ props = rawProps;
+ break;
+ case "img":
+ case "image":
+ case "link":
+ // We listen to these events in case to ensure emulated bubble
+ // listeners still fire for error and load events.
+ listenToNonDelegatedEvent("error", domElement);
+ listenToNonDelegatedEvent("load", domElement);
+ props = rawProps;
+ break;
+ case "details":
+ // We listen to this event in case to ensure emulated bubble
+ // listeners still fire for the toggle event.
+ listenToNonDelegatedEvent("toggle", domElement);
+ props = rawProps;
+ break;
+ case "input":
+ initWrapperState(domElement, rawProps);
+ props = getHostProps(domElement, rawProps); // We listen to this event in case to ensure emulated bubble
+ // listeners still fire for the invalid event.
+ listenToNonDelegatedEvent("invalid", domElement);
+ break;
+ case "option":
+ validateProps(domElement, rawProps);
+ props = rawProps;
+ break;
+ case "select":
+ initWrapperState$1(domElement, rawProps);
+ props = getHostProps$1(domElement, rawProps); // We listen to this event in case to ensure emulated bubble
+ // listeners still fire for the invalid event.
+ listenToNonDelegatedEvent("invalid", domElement);
+ break;
+ case "textarea":
+ initWrapperState$2(domElement, rawProps);
+ props = getHostProps$2(domElement, rawProps); // We listen to this event in case to ensure emulated bubble
+ // listeners still fire for the invalid event.
+ listenToNonDelegatedEvent("invalid", domElement);
+ break;
+ default:
+ props = rawProps;
+ }
+ assertValidProps(tag, props);
+ setInitialDOMProperties(tag, domElement, rootContainerElement, props, isCustomComponentTag);
+ switch(tag){
+ case "input":
+ // TODO: Make sure we check if this is still unmounted or do any clean
+ // up necessary since we never stop tracking anymore.
+ track(domElement);
+ postMountWrapper(domElement, rawProps, false);
+ break;
+ case "textarea":
+ // TODO: Make sure we check if this is still unmounted or do any clean
+ // up necessary since we never stop tracking anymore.
+ track(domElement);
+ postMountWrapper$3(domElement);
+ break;
+ case "option":
+ postMountWrapper$1(domElement, rawProps);
+ break;
+ case "select":
+ postMountWrapper$2(domElement, rawProps);
+ break;
+ default:
+ if (typeof props.onClick === "function") // TODO: This cast may not be sound for SVG, MathML or custom elements.
+ trapClickOnNonInteractiveElement(domElement);
+ break;
+ }
+ } // Calculate the diff between the two objects.
+ function diffProperties(domElement, tag, lastRawProps, nextRawProps, rootContainerElement) {
+ validatePropertiesInDevelopment(tag, nextRawProps);
+ var updatePayload = null;
+ var lastProps;
+ var nextProps;
+ switch(tag){
+ case "input":
+ lastProps = getHostProps(domElement, lastRawProps);
+ nextProps = getHostProps(domElement, nextRawProps);
+ updatePayload = [];
+ break;
+ case "select":
+ lastProps = getHostProps$1(domElement, lastRawProps);
+ nextProps = getHostProps$1(domElement, nextRawProps);
+ updatePayload = [];
+ break;
+ case "textarea":
+ lastProps = getHostProps$2(domElement, lastRawProps);
+ nextProps = getHostProps$2(domElement, nextRawProps);
+ updatePayload = [];
+ break;
+ default:
+ lastProps = lastRawProps;
+ nextProps = nextRawProps;
+ if (typeof lastProps.onClick !== "function" && typeof nextProps.onClick === "function") // TODO: This cast may not be sound for SVG, MathML or custom elements.
+ trapClickOnNonInteractiveElement(domElement);
+ break;
+ }
+ assertValidProps(tag, nextProps);
+ var propKey;
+ var styleName;
+ var styleUpdates = null;
+ for(propKey in lastProps){
+ if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null) continue;
+ if (propKey === STYLE) {
+ var lastStyle = lastProps[propKey];
+ for(styleName in lastStyle)if (lastStyle.hasOwnProperty(styleName)) {
+ if (!styleUpdates) styleUpdates = {};
+ styleUpdates[styleName] = "";
+ }
+ } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) ;
+ else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ;
+ else if (propKey === AUTOFOCUS) ;
+ else if (registrationNameDependencies.hasOwnProperty(propKey)) // This is a special case. If any listener updates we need to ensure
+ // that the "current" fiber pointer gets updated so we need a commit
+ // to update this element.
+ {
+ if (!updatePayload) updatePayload = [];
+ } else // For all other deleted properties we add it to the queue. We use
+ // the allowed property list in the commit phase instead.
+ (updatePayload = updatePayload || []).push(propKey, null);
+ }
+ for(propKey in nextProps){
+ var nextProp = nextProps[propKey];
+ var lastProp = lastProps != null ? lastProps[propKey] : undefined;
+ if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp || nextProp == null && lastProp == null) continue;
+ if (propKey === STYLE) {
+ if (nextProp) // Freeze the next style object so that we can assume it won't be
+ // mutated. We have already warned for this in the past.
+ Object.freeze(nextProp);
+ if (lastProp) {
+ // Unset styles on `lastProp` but not on `nextProp`.
+ for(styleName in lastProp)if (lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName))) {
+ if (!styleUpdates) styleUpdates = {};
+ styleUpdates[styleName] = "";
+ }
+ // Update styles that changed since `lastProp`.
+ for(styleName in nextProp)if (nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName]) {
+ if (!styleUpdates) styleUpdates = {};
+ styleUpdates[styleName] = nextProp[styleName];
+ }
+ } else {
+ // Relies on `updateStylesByID` not mutating `styleUpdates`.
+ if (!styleUpdates) {
+ if (!updatePayload) updatePayload = [];
+ updatePayload.push(propKey, styleUpdates);
+ }
+ styleUpdates = nextProp;
+ }
+ } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+ var nextHtml = nextProp ? nextProp[HTML$1] : undefined;
+ var lastHtml = lastProp ? lastProp[HTML$1] : undefined;
+ if (nextHtml != null) {
+ if (lastHtml !== nextHtml) (updatePayload = updatePayload || []).push(propKey, nextHtml);
+ }
+ } else if (propKey === CHILDREN) {
+ if (typeof nextProp === "string" || typeof nextProp === "number") (updatePayload = updatePayload || []).push(propKey, "" + nextProp);
+ } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ;
+ else if (registrationNameDependencies.hasOwnProperty(propKey)) {
+ if (nextProp != null) {
+ // We eagerly listen to this even though we haven't committed yet.
+ if (typeof nextProp !== "function") warnForInvalidEventListener(propKey, nextProp);
+ if (propKey === "onScroll") listenToNonDelegatedEvent("scroll", domElement);
+ }
+ if (!updatePayload && lastProp !== nextProp) // This is a special case. If any listener updates we need to ensure
+ // that the "current" props pointer gets updated so we need a commit
+ // to update this element.
+ updatePayload = [];
+ } else // For any other property we always add it to the queue and then we
+ // filter it out using the allowed property list during the commit.
+ (updatePayload = updatePayload || []).push(propKey, nextProp);
+ }
+ if (styleUpdates) {
+ validateShorthandPropertyCollisionInDev(styleUpdates, nextProps[STYLE]);
+ (updatePayload = updatePayload || []).push(STYLE, styleUpdates);
+ }
+ return updatePayload;
+ } // Apply the diff.
+ function updateProperties(domElement, updatePayload, tag, lastRawProps, nextRawProps) {
+ // Update checked *before* name.
+ // In the middle of an update, it is possible to have multiple checked.
+ // When a checked radio tries to change name, browser makes another radio's checked false.
+ if (tag === "input" && nextRawProps.type === "radio" && nextRawProps.name != null) updateChecked(domElement, nextRawProps);
+ var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
+ var isCustomComponentTag = isCustomComponent(tag, nextRawProps); // Apply the diff.
+ updateDOMProperties(domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag); // TODO: Ensure that an update gets scheduled if any of the special props
+ // changed.
+ switch(tag){
+ case "input":
+ // Update the wrapper around inputs *after* updating props. This has to
+ // happen after `updateDOMProperties`. Otherwise HTML5 input validations
+ // raise warnings and prevent the new value from being assigned.
+ updateWrapper(domElement, nextRawProps);
+ break;
+ case "textarea":
+ updateWrapper$1(domElement, nextRawProps);
+ break;
+ case "select":
+ //