napplet.soy
Create in browser Use soyLI locally
Back to Murder Mice
SOURCE / PINNED RELEASE

Made of little things.

Murder Mice

Release
d2fa0e0e36c1…
Author-recorded commit
13dc3200cde5…
License
LICENSE
Author’s source reference
nostr://npub1ny7l44q0au5xkv3mjgt6zks5f0e2ydefslq4nhh2ve2xypgc2mqqat8qx2/wss%3A%2F%2Fgit.napplet.soy%2F/n-26115e0d25b

Archive hash verified: 82738dcf059ef73f…. The source-to-build association is the author’s claim; it has not been independently rebuilt.

src/styles.css
* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; overflow: hidden; background: #2b1d14; }
.app { position: relative; width: 100%; height: 100%; }
canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.controls {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: space-between; padding: 0 12px;
  pointer-events: none;
}
.controls .group { display: flex; gap: 12px; }
.controls button[hidden] { display: none; }
.controls button {
  pointer-events: auto; width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid #f4e3c1; background: rgba(43, 29, 20, 0.6); color: #f4e3c1;
  font-size: 30px; cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.controls button:active { background: rgba(244, 227, 193, 0.3); }

.pause {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 10px;
  border: 2px solid #f4e3c1; background: rgba(43, 29, 20, 0.6); color: #f4e3c1;
  font-size: 16px; cursor: pointer; letter-spacing: -2px;
}
.menu {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 12, 6, 0.55); padding: 12px;
}
.menu[hidden] { display: none; }
.menu-panel {
  background: #3a2717; color: #f4e3c1; border: 3px solid #f4e3c1; border-radius: 16px;
  padding: 18px 24px; max-width: 420px; width: 100%; max-height: 100%; overflow: auto;
  font-family: sans-serif; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.menu-title { margin: 0 0 10px; font-size: 34px; font-weight: bold; color: #ff6b5a; text-shadow: 2px 2px 0 #000; }
.how { list-style: none; padding: 0; margin: 0 0 16px; line-height: 1.6; font-size: 15px; }
.how b { color: #ffd34d; }
.menu-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.menu-buttons button {
  font-size: 20px; font-weight: bold; padding: 10px 28px; border-radius: 12px; cursor: pointer;
  border: 2px solid #f4e3c1; background: #c0392b; color: #fff;
}
.menu-buttons button:hover, .menu-buttons button:focus-visible { background: #e04a3a; outline: none; }
.menu-buttons button[hidden] { display: none; }