htmlmustache blog post

src/components/MatchingAnimation.module.scss

@@ -0,0 +1,297 @@
+@import "~bootstrap/scss/_functions.scss";
+@import "~bootstrap/scss/_variables.scss";
+
+.container {
+  border: 1px solid $gray-300;
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 2rem 0;
+}
+
+.panel {
+  min-width: 0;
+  border-right: 1px solid $gray-300;
+  display: flex;
+  flex-direction: column;
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.panelHeader {
+  background-color: $gray-700;
+  color: $gray-200;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.source {
+  padding: 0.75rem 0;
+  font-family: $font-family-monospace;
+  font-size: 0.82rem;
+  line-height: 1.6;
+  flex: 1;
+}
+
+.sourceLine {
+  padding: 0.1rem 0.75rem;
+  color: $gray-700;
+  white-space: pre;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+.highlightedLine {
+  background-color: rgba($info, 0.12);
+  color: $gray-900;
+}
+
+// Parse tree panel
+
+.tree {
+  padding: 0.75rem 0;
+  font-family: $font-family-monospace;
+  font-size: 0.72rem;
+  line-height: 1.5;
+  flex: 1;
+}
+
+.treeLine {
+  padding: 0.05rem 0.75rem;
+  color: $gray-500;
+  white-space: pre;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+.treeLineHighlight {
+  color: $gray-700;
+  background-color: rgba($info, 0.08);
+}
+
+.treeLineForced {
+  color: $gray-900;
+  background-color: rgba($warning, 0.15);
+}
+
+.treeLineErroneous {
+  color: $gray-900;
+  background-color: rgba($danger, 0.15);
+}
+
+.controls {
+  padding: 0.75rem;
+  border-top: 1px solid $gray-300;
+}
+
+.description {
+  font-size: 0.9rem;
+  color: $gray-700;
+  min-height: 2.5em;
+  margin-bottom: 0.75rem;
+}
+
+// Work area
+
+.workArea {
+  padding: 1rem;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+// Fork cards
+
+.forksArea {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.forkCard {
+  border: 2px solid $warning;
+  border-radius: 8px;
+  padding: 0.75rem;
+  flex: 1;
+  min-width: 180px;
+}
+
+.forkCardDimmed {
+  opacity: 0.5;
+}
+
+.forkHeader {
+  font-family: $font-family-monospace;
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: darken($warning, 25%);
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.skipLabel {
+  font-size: 0.7rem;
+  color: $success;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+}
+
+.collectLabel {
+  font-size: 0.7rem;
+  color: $danger;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+}
+
+.branchRow {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.2rem 0;
+  flex-wrap: wrap;
+}
+
+.branchLabel {
+  font-family: $font-family-monospace;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: $gray-600;
+  min-width: 1.2rem;
+}
+
+.emptyLabel {
+  font-size: 0.78rem;
+  color: $gray-400;
+  font-style: italic;
+}
+
+// Tag pills
+
+.tagPill {
+  display: inline-block;
+  padding: 0.15rem 0.45rem;
+  border-radius: 4px;
+  font-family: $font-family-monospace;
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.openTag {
+  background-color: rgba($info, 0.15);
+  color: darken($info, 15%);
+  border: 1px solid rgba($info, 0.3);
+}
+
+.closeTag {
+  background-color: rgba($purple, 0.15);
+  color: darken($purple, 10%);
+  border: 1px solid rgba($purple, 0.3);
+}
+
+// Balance icons
+
+.balanceIcon {
+  font-size: 0.85rem;
+  font-weight: 700;
+  margin-left: 0.25rem;
+}
+
+.balanced {
+  color: $success;
+}
+
+.unbalanced {
+  color: $danger;
+}
+
+// Collected annotation
+
+.collectedAnnotation {
+  width: 100%;
+  text-align: center;
+  font-size: 0.85rem;
+  color: $gray-600;
+  padding-top: 0.5rem;
+  border-top: 1px dashed $gray-300;
+  margin-top: 0.25rem;
+}
+
+// Enumerate phase
+
+.enumerateArea {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+}
+
+.enumerationRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.assignmentPill {
+  font-family: $font-family-monospace;
+  font-size: 0.9rem;
+  padding: 0.35rem 0.75rem;
+  border-radius: 6px;
+  background-color: rgba($purple, 0.1);
+  color: darken($purple, 10%);
+  border: 1px solid rgba($purple, 0.2);
+}
+
+.eventsStrip {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.resultBadge {
+  padding: 0.4rem 0.8rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.resultBalanced {
+  background-color: rgba($success, 0.1);
+  color: $success;
+  border: 1px solid rgba($success, 0.3);
+}
+
+.resultUnbalanced {
+  background-color: rgba($danger, 0.1);
+  color: $danger;
+  border: 1px solid rgba($danger, 0.3);
+}
+
+// Result alert
+
+.resultAlert {
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  background-color: rgba($danger, 0.08);
+  border: 1px solid rgba($danger, 0.2);
+  color: darken($danger, 10%);
+  font-size: 0.95rem;
+  font-weight: 500;
+  text-align: center;
+  font-family: $font-family-monospace;
+}