Sparky/404.html at main · EnesYilmazcode/Sparky · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Page not found: Sparky</title>
  <meta name="robots" content="noindex" />
  <meta name="theme-color" content="#FAF9F6" />
  <link rel="icon" href="/logo.svg" type="image/svg+xml" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --paper:     #FAF9F6;
      --line-hi:   #D5CFC5;
      --panel:     #F3F1EC;
      --ink:       #1A1814;
      --ink-2:     #57514B;
      --ink-3:     #6E6862;
      --amber:     #D97706;
      --amber-ink: #B45309;
      --amber-deep:#92400E;
    }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      line-height: 1.6;
      color: var(--ink);
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
    }
    /* Breadboard hole grid, like the landing page hero. */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      background-image: radial-gradient(circle, #CFC8BD 1px, transparent 1.3px);
      background-size: 22px 22px;
      -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 70%);
      mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 70%);
    }

    :focus-visible { outline: 2px solid var(--amber-ink); outline-offset: 3px; border-radius: 6px; }

    header { padding: 1.25rem clamp(1rem, 4vw, 2rem); }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Space Grotesk', system-ui, sans-serif;
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      text-decoration: none;
    }
    .brand img { display: block; }

    main {
      flex: 1;
      display: grid;
      place-items: center;
      padding: 1rem clamp(1rem, 4vw, 2rem) 4rem;
    }
    .box { max-width: 30rem; text-align: center; }
    .wire { display: block; width: min(100%, 320px); height: auto; margin: 0 auto 2rem; }
    h1 {
      font-family: 'Space Grotesk', system-ui, sans-serif;
      font-size: clamp(2rem, 4vw + 1rem, 2.75rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.035em;
    }
    p { margin-top: 0.9rem; font-size: 1.0625rem; color: var(--ink-2); }
    .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.75rem;
      margin-top: 2rem;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 2.75rem;
      padding: 0 1.25rem;
      border-radius: 10px;
      border: 1px solid transparent;
      font-family: 'Space Grotesk', system-ui, sans-serif;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      text-decoration: none;
      transition: background-color 0.15s, border-color 0.15s;
    }
    .btn-primary {
      background: var(--amber-ink);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(146,64,14,0.25);
    }
    .btn-primary:hover { background: var(--amber-deep); }
    .btn-quiet { background: #fff; color: var(--ink); border-color: var(--line-hi); }
    .btn-quiet:hover { background: var(--panel); border-color: #BDB5A9; }
    .code { margin-top: 2rem; font-size: 0.8125rem; color: var(--ink-3); }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 0.01ms !important; }
    }
  </style>
</head>
<body>
  <header>
    <a href="/landing.html" class="brand">
      <img src="/logo.svg" width="24" height="24" alt="" />
      Sparky
    </a>
  </header>

  <main>
    <div class="box">
      <svg class="wire" viewBox="0 0 320 120" width="320" height="120" aria-hidden="true">
        <rect x="1" y="80" width="318" height="36" rx="6" fill="#EDE8DF" stroke="#DDD5C8"/>
        <g fill="#5A5249" opacity="0.55">
          <rect x="18" y="89" width="4" height="4" rx="1"/><rect x="38" y="89" width="4" height="4" rx="1"/><rect x="58" y="89" width="4" height="4" rx="1"/><rect x="78" y="89" width="4" height="4" rx="1"/><rect x="98" y="89" width="4" height="4" rx="1"/><rect x="118" y="89" width="4" height="4" rx="1"/><rect x="138" y="89" width="4" height="4" rx="1"/><rect x="158" y="89" width="4" height="4" rx="1"/><rect x="178" y="89" width="4" height="4" rx="1"/><rect x="198" y="89" width="4" height="4" rx="1"/><rect x="218" y="89" width="4" height="4" rx="1"/><rect x="238" y="89" width="4" height="4" rx="1"/><rect x="258" y="89" width="4" height="4" rx="1"/><rect x="278" y="89" width="4" height="4" rx="1"/><rect x="298" y="89" width="4" height="4" rx="1"/>
          <rect x="18" y="103" width="4" height="4" rx="1"/><rect x="38" y="103" width="4" height="4" rx="1"/><rect x="58" y="103" width="4" height="4" rx="1"/><rect x="78" y="103" width="4" height="4" rx="1"/><rect x="98" y="103" width="4" height="4" rx="1"/><rect x="118" y="103" width="4" height="4" rx="1"/><rect x="138" y="103" width="4" height="4" rx="1"/><rect x="158" y="103" width="4" height="4" rx="1"/><rect x="178" y="103" width="4" height="4" rx="1"/><rect x="198" y="103" width="4" height="4" rx="1"/><rect x="218" y="103" width="4" height="4" rx="1"/><rect x="238" y="103" width="4" height="4" rx="1"/><rect x="258" y="103" width="4" height="4" rx="1"/><rect x="278" y="103" width="4" height="4" rx="1"/><rect x="298" y="103" width="4" height="4" rx="1"/>
        </g>
        <!-- One end in a hole, the other hanging in the air. -->
        <path d="M60 91 C60 24, 170 6, 238 34" fill="none" stroke="#EF4444" stroke-width="5" stroke-linecap="round"/>
        <path d="M238 34 l11 6" stroke="#A8A29A" stroke-width="3" stroke-linecap="round"/>
      </svg>

      <h1>This wire goes nowhere.</h1>
      <p>The page you followed is not here. Check the address, or head back to Sparky.</p>
      <div class="actions">
        <a href="/landing.html" class="btn btn-primary">Back to Sparky</a>
        <a href="/circuit3d/index.html" class="btn btn-quiet">Open the editor</a>
      </div>
      <p class="code">Error 404</p>
    </div>
  </main>
</body>
</html>