Updates

Game Menu UI.json

@@ -0,0 +1 @@
+{"frontHtml":"<section class=\"white arimo pa3 flex flex-column lh-title relative\">\n\n<div class=\"content-wrapper pa3 relative z-0\">\n  <div class=\"ba b--white bw1 br4 pa3 border-glow bg-linear-blue bg-blue relative z-0\">\n  <div class=\"glowing-text\">\n     <p tabindex=\"0\" class=\"ma0 dib f3 z-1 pointer focused-text ml1 mb1\">{{audio}}</p>\n     <p tabindex=\"0\" class=\"ma0 f3 ph2 focused-text\">What is the meaning of what is being said?</p>\n  </div>\n  </div>\n</div>\n</section>","backHtml":"<section class=\"white arimo pa3 flex flex-column lh-title relative\">\n\n<div class=\"content-wrapper pa3 relative z-0\">\n  <div class=\"ba b--white bw1 br4 pa3 border-glow bg-linear-blue bg-blue relative z-0\">\n  <div class=\"glowing-text\">\n    <p tabindex=\"0\" class=\"ma0 dib f3 z-1 pointer focused-text ml1 mb1\">{{audio}}</p>\n    <div class=\"back-content ph2\">\n      <h1 tabindex=\"0\" class=\"ma0 f3 lh-copy noto-sans-jp z-1 focused-text\">{{term}}</h1>\n      <p tabindex=\"0\" class=\"ma0 f3 lh-copy noto-sans-jp z-1 focused-text\">{{reading}}</p>\n      <p tabindex=\"0\" class=\"ma0 f3 z-1 focused-text\">{{translation}}</p>\n      <p tabindex=\"0\" class=\"ma0 f3 z-1 focused-text\">{{transliteration}}</p>\n      <p tabindex=\"0\" class=\"ma0 f3 z-1 focused-text pb2\">{{Tags}}</p>\n\n      <div tabindex=\"0\" class=\"image-overlay focused-text relative matrix measure-narrow z-1 lh-0\">\n        <div class=\"img-container lh-0\">{{picture}}</div>\n        <div class=\"img-container o-50 bloom absolute left-0 top-0 lh-0\">{{picture}}</div>\n      </div>\n\n    </div>\n  </div>\n</div>\n</div>\n</section>\n","cardCss":"@import url('https://fonts.googleapis.com/css2?family=Arimo:[email protected]&display=swap');\n\n@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');\n\n:root {\n    --neon-blue: cyan;\n}\n\n.arimo {\n  font-family: \"Arimo\", sans-serif;\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n   background-color: black;\n   -ms-overflow-style: none;  /* IE and Edge */\n   scrollbar-width: none;  /* Firefox */\n   overflow: hidden;\n   overflow-y: scroll;\n}\n\n.noto-sans-jp {\n  font-family: \"Noto Sans JP\", sans-serif;\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n.matrix {\n    position: relative;\n    display: inline-block;\n}\n\n.matrix::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 255, 255, 0.1); /* Orange color with some opacity */\n    mix-blend-mode: overlay;\n}\n\n.matrix:hover::after {\n    background: none;  /* Remove the background on hover */\n    mix-blend-mode: normal; /* Reset mix-blend-mode */\n}\n\n.image-overlay img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;      /* Ensures overlay size matches the base image */\n    height: auto;\n    display: block;   /* Removes any extra space below the image */\n    filter: saturate(0.5) contrast(1.25);\n}\n\n.image-overlay:hover img {\n    filter: saturate(1) contrast(1);\n}\n\n.image-overlay img {\n    position: relative;  /* Keeps the base image in the normal flow */\n}\n\n.glowing-text {\n  color: white; /* White text */\n  text-shadow: \n    2px 2px 2px rgba(0, 0, 0, 1);\n}\n\n.content-wrapper {\n  \n}\n\n.border-glow {\n  box-shadow: \n        0 0 2px rgba(255, 255, 255, 1),\n        0 0 4px rgba(200, 200, 200, 1),\n        0 0 6px rgba(100, 100, 100, 1),\n        0 0 8px rgba(0, 0, 0, 1),\n        0 0 2px rgba(255, 255, 255, 1),\n        0 0 4px rgba(200, 200, 200, 1),\n        0 0 6px rgba(100, 100, 100, 1),\n        0 0 8px rgba(0, 0, 0, 1),\n        0 0 2px rgba(255, 255, 255, 1),\n        0 0 4px rgba(200, 200, 200, 1),\n        0 0 6px rgba(100, 100, 100, 1),\n        0 0 8px rgba(0, 0, 0, 1),\n        0 0 2px rgba(255, 255, 255, 1),\n        0 0 4px rgba(200, 200, 200, 1),\n        0 0 6px rgba(100, 100, 100, 1),\n        0 0 8px rgba(0, 0, 0, 1),\n        inset 0 0 2px rgba(255, 255, 255, 1),\n        inset 0 0 4px rgba(200, 200, 255, 1),\n        inset 0 0 6px rgba(100, 100, 100, 1),\n        inset 0 0 8px rgba(0, 0, 0, 1),\n        inset 0 0 2px rgba(255, 255, 255, 1),\n        inset 0 0 4px rgba(200, 200, 255, 1),\n        inset 0 0 6px rgba(100, 100, 100, 1),\n        inset 0 0 8px rgba(0, 0, 0, 1),\n        inset 0 0 2px rgba(255, 255, 255, 1),\n        inset 0 0 4px rgba(200, 200, 255, 1),\n        inset 0 0 6px rgba(100, 100, 100, 1),\n        inset 0 0 8px rgba(0, 0, 0, 1),\n        inset 0 0 2px rgba(255, 255, 255, 1),\n        inset 0 0 4px rgba(200, 200, 255, 1),\n        inset 0 0 6px rgba(100, 100, 100, 1),\n        inset 0 0 8px rgba(0, 0, 0, 1);\n}\n\n.lh-0, .lh-0 img {\n   line-height: 0;\n   vertical-align: middle;\n}\n\n.focused-text:focus::before, .play-button:focus::before {\n    content: '';\n    background-image: url('pointer.svg');\n    display: inline-block;\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 40px;\n    height: 20px;\n    left: -0.25rem;\n    vertical-align: middle;\n    transform: translate(-100%, -50%);\n    position: absolute;\n    top: 50%; /* Center vertically relative to the focused element */\n    z-index: 9999;\n}\n\n.focused-text {\n   position: relative;\n}\n\n.overflow-x-visible {\n   overflow-x: unset;\n}","designName":"Game Menu UI"}

index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
     <title>Anki Card Designer</title>
-    <script type="module" crossorigin src="/anki-card-test-1/assets/index-de4585b3.js"></script>
+    <script type="module" crossorigin src="/anki-card-test-1/assets/index-47431d3d.js"></script>
     <link rel="stylesheet" href="/anki-card-test-1/assets/index-4d7ef7fd.css">
   </head>
   <body>