|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="en"> |
3 | | - <head> |
4 | | - <meta charset="UTF-8" /> |
5 | | - <title>Music Blocks</title> |
6 | 3 |
|
7 | | - <meta |
8 | | - name="description" |
9 | | - content="Learn to code through music with Music Blocks. Arrange colorful blocks to create everything from simple melodies to interactive games." |
10 | | - /> |
11 | | - <meta name="mobile-web-app-capable" content="yes" /> |
12 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
13 | | - <meta id="theme-color" name="theme-color" content="#2196F3" /> |
14 | | - |
15 | | - <!-- Icons & PWA --> |
16 | | - <link rel="icon" sizes="192x192" href="favicon.ico" /> |
17 | | - <link rel="apple-touch-icon" href="/activity/activity-icon-color-512.png" /> |
18 | | - <link rel="manifest" href="android_chrome_manifest.json" /> |
19 | | - |
20 | | - <!-- Stylesheets --> |
21 | | - <link |
22 | | - rel="preload" |
23 | | - href="https://fonts.googleapis.com/icon?family=Material+Icons" |
24 | | - as="style" |
25 | | - onload="this.onload=null;this.rel='stylesheet'" |
26 | | - /> |
27 | | - <link |
28 | | - rel="preload" |
29 | | - href="fonts/material-icons.css" |
30 | | - as="style" |
31 | | - onload="this.onload=null;this.rel='stylesheet'" |
32 | | - /> |
33 | | - <link |
34 | | - rel="preload" |
35 | | - href="css/activities.css?v=fixed" |
36 | | - as="style" |
37 | | - onload="this.onload=null;this.rel='stylesheet'" |
38 | | - /> |
39 | | - <link |
40 | | - rel="preload" |
41 | | - href="dist/css/style.css" |
42 | | - as="style" |
43 | | - onload="this.onload=null;this.rel='stylesheet'" |
44 | | - /> |
45 | | - <link |
46 | | - rel="preload" |
47 | | - href="dist/css/keyboard.css" |
48 | | - as="style" |
49 | | - onload="this.onload=null;this.rel='stylesheet'" |
50 | | - /> |
51 | | - <link |
52 | | - rel="preload" |
53 | | - href="dist/css/windows.css" |
54 | | - as="style" |
55 | | - onload="this.onload=null;this.rel='stylesheet'" |
56 | | - /> |
57 | | - <link |
58 | | - rel="preload" |
59 | | - href="lib/materialize-iso.css" |
60 | | - as="style" |
61 | | - onload="this.onload=null;this.rel='stylesheet'" |
62 | | - /> |
63 | | - <link |
64 | | - rel="preload" |
65 | | - href="css/darkmode.css" |
66 | | - as="style" |
67 | | - onload="this.onload=null;this.rel='stylesheet'" |
68 | | - /> |
69 | | - <link rel="prefetch" as="video" href="loading-animation.webm" type="video/webm" /> |
70 | | - <link rel="prefetch" as="video" href="loading-animation.mp4" type="video/mp4" /> |
71 | | - <link rel="prefetch" as="image" href="loading-animation-ja.svg" /> |
72 | | - |
73 | | - <!-- <script src="js/utils/detectIE.js"></script> --> |
74 | | - |
75 | | - <!-- <script src="sounds/samples/manifest.js"></script> --> |
76 | | - |
77 | | - <!-- <script src="lib/mespeak.js"></script> --> |
78 | | - |
79 | | - <script src="lib/reqwest.js" defer></script> |
80 | | - |
81 | | - <script src="lib/jquery-3.7.1.min.js"></script> |
82 | | - <script src="lib/jquery-ui.js"></script> |
83 | | - <script src="lib/materialize.min.js"></script> |
84 | | - <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" /> |
85 | | - <script> |
86 | | - jQuery(document).ready(function () { |
87 | | - if (jQuery.ui && jQuery.ui.autocomplete) { |
88 | | - jQuery.fn.materializeAutocomplete = jQuery.fn.autocomplete; |
89 | | - jQuery.widget.bridge("autocomplete", jQuery.ui.autocomplete); |
| 4 | +<head> |
| 5 | + <meta charset="UTF-8"> |
| 6 | + <title>Music Blocks</title> |
| 7 | + |
| 8 | + <meta name="description" |
| 9 | + content="Learn to code through music with Music Blocks. Arrange colorful blocks to create everything from simple melodies to interactive games."> |
| 10 | + <meta name="mobile-web-app-capable" content="yes"> |
| 11 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 12 | + <meta id="theme-color" name="theme-color" content="#2196F3"> |
| 13 | + |
| 14 | + <!-- Icons & PWA --> |
| 15 | + <link rel="icon" sizes="192x192" href="favicon.ico"> |
| 16 | + <link rel="apple-touch-icon" href="/activity/activity-icon-color-512.png"> |
| 17 | + <link rel="manifest" href="android_chrome_manifest.json"> |
| 18 | + |
| 19 | + <!-- Stylesheets --> |
| 20 | + <link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style" |
| 21 | + onload="this.onload=null;this.rel='stylesheet'"> |
| 22 | + <link rel="preload" href="fonts/material-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> |
| 23 | + <link rel="preload" href="css/activities.css?v=fixed" as="style" onload="this.onload=null;this.rel='stylesheet'"> |
| 24 | + <link rel="preload" href="dist/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> |
| 25 | + <link rel="preload" href="dist/css/keyboard.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> |
| 26 | + <link rel="preload" href="dist/css/windows.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> |
| 27 | + <link rel="preload" href="lib/materialize-iso.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> |
| 28 | + <link rel="preload" href="css/darkmode.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> |
| 29 | + <link rel="prefetch" as="video" href="loading-animation.webm" type="video/webm"> |
| 30 | + <link rel="prefetch" as="video" href="loading-animation.mp4" type="video/mp4"> |
| 31 | + |
| 32 | + <!-- <script src="js/utils/detectIE.js"></script> --> |
| 33 | + |
| 34 | + <!-- <script src="sounds/samples/manifest.js"></script> --> |
| 35 | + |
| 36 | + <!-- <script src="lib/mespeak.js"></script> --> |
| 37 | + |
| 38 | + <script src="lib/reqwest.js" defer></script> |
| 39 | + |
| 40 | + <script src="lib/jquery-3.7.1.min.js"></script> |
| 41 | + <script src="lib/jquery-ui.js"></script> |
| 42 | + <script src="lib/materialize.min.js"></script> |
| 43 | + <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> |
| 44 | + <script> |
| 45 | + jQuery(document).ready(function () { |
| 46 | + if (jQuery.ui && jQuery.ui.autocomplete) { |
| 47 | + jQuery.fn.materializeAutocomplete = jQuery.fn.autocomplete; |
| 48 | + jQuery.widget.bridge("autocomplete", jQuery.ui.autocomplete); |
| 49 | + } |
| 50 | + }); |
| 51 | + </script> |
| 52 | + <script> |
| 53 | + jQuery(document).ready(function () { |
| 54 | + const fixAutocompletePosition = function () { |
| 55 | + const $search = jQuery('#search'); |
| 56 | + if ($search.length && $search.data('ui-autocomplete')) { |
| 57 | + const instance = $search.autocomplete('instance'); |
| 58 | + if (instance) { |
| 59 | + const originalRenderMenu = instance._renderMenu; |
| 60 | + instance._renderMenu = function (ul, items) { |
| 61 | + originalRenderMenu.call(this, ul, items); |
| 62 | + setTimeout(() => { |
| 63 | + const searchInput = document.querySelector('#search'); |
| 64 | + const dropdown = ul[0]; |
| 65 | + if (searchInput && dropdown) { |
| 66 | + const rect = searchInput.getBoundingClientRect(); |
| 67 | + dropdown.style.position = 'fixed'; |
| 68 | + dropdown.style.left = rect.left + 'px'; |
| 69 | + dropdown.style.top = (rect.bottom + 2) + 'px'; |
| 70 | + dropdown.style.width = rect.width + 'px'; |
| 71 | + } |
| 72 | + }, 0); |
| 73 | + }; |
| 74 | + } |
| 75 | + } else { |
| 76 | + setTimeout(fixAutocompletePosition, 500); |
90 | 77 | } |
91 | 78 | }); |
92 | 79 | </script> |
|
962 | 949 | }); |
963 | 950 | </script> |
964 | 951 |
|
965 | | - <script> |
966 | | - $(document).ready(function () { |
967 | | - // doSearch is a method on the Activity instance, not a global. |
968 | | - // Wait for globalActivity to be available before calling it. |
969 | | - function tryDoSearch() { |
970 | | - const activity = globalActivity || window.activity; |
971 | | - if (activity && typeof activity.doSearch === "function") { |
972 | | - activity.doSearch(); |
973 | | - } else if (typeof doSearch === "function") { |
974 | | - doSearch(); |
975 | | - } else { |
976 | | - // Activity not loaded yet, retry later |
977 | | - setTimeout(tryDoSearch, 500); |
978 | | - } |
979 | | - } |
980 | | - tryDoSearch(); |
981 | | - }); |
982 | | - </script> |
983 | | - |
984 | | - <!-- Loading Dialog Script --> |
985 | | - <script> |
986 | | - document.addEventListener("DOMContentLoaded", function () { |
987 | | - let loadL10nSplashScreen = function () { |
988 | | - console.debug("The browser is set to " + navigator.language); |
989 | | - let lang = navigator.language; |
990 | | - if (localStorage.languagePreference) { |
991 | | - console.debug("Music Blocks is set to " + localStorage.languagePreference); |
992 | | - lang = localStorage.languagePreference; |
| 952 | + const container = document.getElementById("loading-media"); |
| 953 | + const content = lang.startsWith("ja") |
| 954 | + ? `<img src="loading-animation-ja.png" loading="eager" fetchpriority="high" style="width: 70%; height: 90%; object-fit: contain;" alt="Loading animation">` |
| 955 | + : `<video loop autoplay muted playsinline fetchpriority="high" style="width: 90%; height: 100%; object-fit: contain;"> |
| 956 | + <source src="loading-animation.webm" type="video/webm"> |
| 957 | + <source src="loading-animation.mp4" type="video/mp4"> |
| 958 | + </video>`; |
| 959 | + container.innerHTML = `<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; max-height: 500px; display: flex; justify-content: center; align-items: center;">${content}</div>`; |
| 960 | + }; |
| 961 | + |
| 962 | + loadL10nSplashScreen(); |
| 963 | + |
| 964 | + setTimeout(function () { |
| 965 | + const loadingText = document.getElementById("loadingText"); |
| 966 | + const texts = [_("Do, Re, Mi, Fa, Sol, La, Ti, Do"), _("Loading Music Blocks..."), _("Reading Music...")]; |
| 967 | + let index = 0; |
| 968 | + |
| 969 | + window.intervalId = setInterval(function () { |
| 970 | + loadingText.textContent = texts[index]; |
| 971 | + index = (index + 1) % texts.length; |
| 972 | + }, 1500); |
| 973 | + }, 3000); |
| 974 | + }); |
| 975 | + |
| 976 | + </script> |
| 977 | + |
| 978 | + <script> |
| 979 | + (function ($) { |
| 980 | + $.fn.fixMe = function () { |
| 981 | + return this.each(function () { |
| 982 | + let $this = $(this), |
| 983 | + $t_fixed; |
| 984 | + |
| 985 | + function init() { |
| 986 | + $this.wrap('<div class="container" />'); |
| 987 | + $t_fixed = $this.clone(); |
| 988 | + $t_fixed |
| 989 | + .find("tbody") |
| 990 | + .remove() |
| 991 | + .end() |
| 992 | + .addClass("fixed") |
| 993 | + .insertBefore($this); |
| 994 | + resizeFixed(); |
993 | 995 | } |
994 | 996 |
|
995 | 997 | console.debug("Using " + lang); |
|
0 commit comments