blue

line-segment-intersection/src/App.svelte

@@ -33,7 +33,7 @@
 
   function redraw() {
     drawGrid();
-    drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(100, 108, 255, 0.3)');
+    drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(0, 128, 255, 0.3)');
     drawRectangle(userPoint.x, userPoint.y, 1, 7, 'rgba(255, 0, 0, 0.3)');
     drawLineSegment(1, 1, 6, 7, '#ff3e00');
     drawLabel('A', 1, 1);
@@ -122,7 +122,7 @@
     const coords = toCanvasCoords(userPoint.x, userPoint.y);
 
     // Draw point
-    ctx.fillStyle = '#646cff';
+    ctx.fillStyle = '#0080ff';
     ctx.beginPath();
     ctx.arc(coords.x, coords.y, 6, 0, Math.PI * 2);
     ctx.fill();
@@ -203,6 +203,7 @@
 </script>
 
 <main>
+  <a href="https://ajet.fyi" class="back-button">← Back</a>
   <h1>Line Segment Intersection</h1>
   <div class="canvas-container">
     <canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:click={handleCanvasClick}></canvas>
@@ -236,6 +237,23 @@
     flex-direction: column;
     align-items: center;
     padding: 2rem;
+    position: relative;
+  }
+
+  .back-button {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    color: #0080ff;
+    text-decoration: none;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+  }
+
+  .back-button:hover {
+    background-color: rgba(0, 128, 255, 0.1);
   }
 
   h1 {
@@ -272,7 +290,7 @@
   .point-c {
     width: 100%;
     text-align: center;
-    color: #646cff;
+    color: #0080ff;
     font-family: monospace;
     font-size: 1.1em;
     font-weight: bold;
@@ -288,7 +306,7 @@
   }
 
   .rect-calc.blue {
-    border-color: #646cff;
+    border-color: #0080ff;
   }
 
   .rect-calc.red {
@@ -309,7 +327,7 @@
   }
 
   .rect-calc.blue h3 {
-    color: #646cff;
+    color: #0080ff;
   }
 
   .rect-calc.red h3 {