sonifications

1 files changed, 246 insertions, 0 deletions

diff --git a/index.css b/index.css
new file mode 100644
index 0000000..b6f6161
--- /dev/null
+++ b/index.css
@@ -0,0 +1,246 @@
+* { box-sizing: border-box; }
+html,body {
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+}
+body {
+  font-family: serif;
+  font-size: 1.2em;
+  transition: background-color 100ms;
+  background-color: #fff;
+  background-image: linear-gradient(30deg, #ffffff, #f4fbfd);
+  background-attachment: fixed;
+}
+.app {
+  font-family: sans-serif;
+  font-size: 0.8em;
+}
+.app div {
+  display: inline-block;
+}
+p {
+  line-height: 1.5;
+  color: #111;
+}
+h1 {
+  color: #001808;
+  margin: 10px 0;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+h2 {
+  color: #222;
+  margin: 20px 0;
+  font-weight: normal;
+  font-size: 1.4em;
+  text-transform: uppercase;
+}
+h3 {
+  font-size: 1.8em;
+  color: #000;
+  margin: 0px 5px 10px 0;
+  font-weight: normal;
+  font-style: italic;
+  display: inline-block;
+}
+h3 + small {
+  display: inline-block;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ul {
+  list-style-type: none;
+}
+li {
+  line-height: 1.5;
+  font-size: 0.8em;
+}
+li::before {
+  content: "\2022";
+  color: #888;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
+
+.links .row {
+  margin-bottom: 0.1em;
+  max-width: 640px;
+}
+.links .icon {
+  display: inline-block;
+  background: white;
+  margin-right: 0.4em;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 1.2em;
+  height: 1.2em;
+}
+
+.icon.notes { background-image: url(img/notes.svg);}
+.icon.note { background-image: url(img/note.svg);}
+.icon.grid { background-image: url(img/grid.svg);}
+.icon.graph { background-image: url(img/graph.svg);}
+.playing .icon.audio,
+.icon.pause { background-image: url(img/pause.svg);}
+.icon.audio,
+.icon.play { background-image: url(img/play.svg); background-size: 80% 80%;}
+
+.player {
+  position: fixed;
+  bottom: 0; left: 0;
+  width: 100%;
+  max-width: 720px;
+  padding-right: 40px;
+  box-shadow: 0 0 2px rgba(0,0,0,0.3);
+  background: white;
+  transition: 0.2s cubic-bezier(0,0,1,1);
+  transform: translate3d(0,110%,0);
+  display: flex;
+  flex-direction: column;
+}
+.player.active {
+  transform: translate3d(0,0%,0);
+}
+.player .icon {
+  cursor: pointer;
+  height: 80px;
+  width: 60px;
+  margin-left: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.player .pos {
+  flex: 1;
+  position: relative;
+  cursor: pointer;
+  height: 80px;
+}
+.player .title,
+.player .time {
+  font-size: 0.8em;
+  color: #333;
+  padding-left: 20px;
+  text-transform: capitalize;
+}
+.player .title {
+  padding: 20px 0px 0 50px;
+}
+.player .icon img {
+  display: none;
+  width: 1.2em;
+}
+.player .icon.active .play_icon {
+  display: none;
+}
+.player .icon.active .pause_icon {
+  display: block;
+}
+.player .icon .pause_icon {
+  display: none;
+}
+.player .icon .play_icon {
+  display: block;
+}
+.player .track {
+  pointer-events: none;
+  position: absolute;
+  top: 50%; left: 0;
+  margin-top: -1px;
+  height: 2px;
+  background: #333;
+  width: 100%;
+}
+.player .dot {
+  pointer-events: none;
+  position: absolute;
+  top: 50%; left: 0;
+  margin-top: -6px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: black;
+}
+
+#dataset_name {
+  text-transform: capitalize;
+}
+.desktop body {
+  user-select: none;
+}
+.top {
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.tools {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 50px;
+}
+.desktop p {
+  width: 640px;
+}
+.corner {
+  position: absolute;
+  bottom: 0;
+  margin: 10px;
+  padding: 10px;
+  background: white;
+  display: flex;
+}
+.corner.left {
+  left: 0;
+}
+.corner.right {
+  right: 0;
+}
+body {
+  transition: 0.1s;
+}
+.loading {
+  opacity: 0;
+}
+.column {
+  display: flex;
+  flex-direction: column;
+}
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+}
+.block > span {
+  display: block;
+  margin-top: 10px;
+}
+.radio {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.radio > span {
+  margin-left: 10px;
+}
+.buttons {
+  margin: 0 0 10px 0;
+}
+label { display: flex; flex-direction: row; margin-bottom: 10px; } 
+label > span { display: block; min-width: 80px; }
+#recording_msg { display: none; }
+.recording #recording_msg { display: inline; }
+#cases {
+  margin-top: 10px;
+  height: 60px;
+}
\ No newline at end of file