feat: add daily cipher page with attempts tracking and solve rate display

style: update layout.css for terms and privacy sections

feat: create privacy policy layout and content

feat: implement terms of service layout and content

Author: NotReeceHarris

package-lock.json

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './layout.css';
+	import '../layout.css';
 	import moment from 'moment';
 	import favicon from '$lib/assets/favicon.svg';
 	import { onMount } from 'svelte';
@@ -43,9 +43,9 @@
 
 		<nav class="grid grid-cols-[1fr_auto_1fr] items-center pt-4.5 px-1 pb-5.5 gap-3">
 
-			<div class="font-mono font-medium text-[15px] tracking-[-0.01em] justify-self-start">
+			<a href="https://cipherhunt.io" class="font-mono font-medium text-[15px] tracking-[-0.01em] justify-self-start">
 				<span>cipher</span><span class="text-mint">hunt</span><span class="text-muted">.io</span>
-			</div>
+			</a>
 
 			<div class="justify-self-center">
 				<div class="inline-flex items-center gap-1.5 py-1.25 px-2.5 bg-sky/8 border-[0.5px] border-sky/22 rounded-md text-sky font-mono text-[12px] font-normal tracking-[0.04em] whitespace-nowrap">
@@ -68,6 +68,18 @@
 
 		<main class="flex flex-col gap-5.5">
 			{@render children()}
+
+			<footer class="flex justify-between pt-4 text-[11px] text-muted">
+				<span>
+					cipherhunt.io &copy; {new Date().getFullYear()}. All rights reserved.
+				</span>
+				<span>
+					<a href="/privacy" class="underline hover:text-mint/80">privacy policy</a> 
+					· 
+					<a href="/terms" class="underline hover:text-mint/80">terms of service</a>
+				</span>
+			</footer>
+
 		</main>
 	</div>
 </div>

src/routes/+layout.svelte src/routes/(app)/+layout.sveltesrc/routes/+layout.svelte renamed to src/routes/(app)/+layout.svelte

@@ -4,36 +4,43 @@
 
     let todaysCipherId = 142;
     let todaysCipher = 'WKH RQOB WKLQJ ZH KDYH WRIHDU LV IHDU LWVHOI WKH RQOB WKLQJ ZH KDYH WRIHDU LV IHDU LWVHOI WKH RQOB WKLQJ ZH KDYH WRIHDU LV IHDU LWVHOI'
-
     let todaysSolvedCount = 847;
     let todaysStuckCount = 412;
 
     let todaysSolveRate = todaysSolvedCount > 0 ? ((todaysSolvedCount / (todaysSolvedCount + todaysStuckCount)) * 100).toFixed(0) : '0'
 
     let attempts = [
-        { attempted: true, answer: 'the quick brown fox jumps over the lazy dog', correct: false },
-        { attempted: true, answer: 'we have nothing to fear but fear itself', correct: false },
         { attempted: false, answer: '', correct: false },
         { attempted: false, answer: '', correct: false },
         { attempted: false, answer: '', correct: false },
-        { attempted: false, answer: '', correct: false }
+        { attempted: false, answer: '', correct: false },
+        { attempted: false, answer: '', correct: false },
+        { attempted: false, answer: '', correct: false },
     ]
 
+    let answer: string = $state('');
+
+    $effect(() => {
+        answer = answer.toLowerCase();
+    });
+
 </script>
 
 {#snippet attempt(num: number = 0, attempted: boolean = false, anwser: string = "", correct: boolean = false)}
     <div class="flex items-center gap-2 border-[0.5px] {attempted ? 'bg-card  border-border' : 'border-dashed border-white/8'} rounded-md px-2.25 py-3.5 h-10.5">
         <div class="font-mono text-[10px] text-muted tracking-widest opacity-70 shrink-0">
             {num.toString().padStart(2, '0')}
         </div>
-        <div class="flex-[1_1_0%] font-mono text-[13px] {correct ? 'text-text' : 'text-muted'} whitespace-nowrap overflow-hidden text-ellipsis tracking-[0.02em]">
-            {anwser}
-        </div>
         {#if attempted}
+            <div class="flex-[1_1_0%] font-mono text-[13px] {correct ? 'text-text' : 'text-muted'} whitespace-nowrap overflow-hidden text-ellipsis tracking-[0.02em]">
+                {anwser}
+            </div>
             <div class="shrink-0 inline-flex items-center gap-1.25 text-[11px] font-medium py-1 px-2.25 rounded-md border-[0.5px] {correct ? 'bg-mint/18 border-mint/36 text-mint' : 'bg-white/3 border-border text-muted'} font-sans tracking-[0.02em]">
                 <span>{correct ? '✓' : '✗'}</span>
                 <span>{correct ? 'correct' : 'wrong'}</span>
             </div>
+        {:else}
+            <div class="flex-[1_1_0%] h-px bg-[repeating-linear-gradient(90deg,rgba(255,255,255,0.08)_0px,rgba(255,255,255,0.08)_4px,transparent_4px,transparent_8px)]"></div>
         {/if}
     </div>
 {/snippet}
@@ -112,7 +119,7 @@
 </div>
 
 
-<div class="flex flex-col gap-2 bg-surface border-[0.5px] border-border rounded-md px-4 pt-4 pb-4.5">
+<section class="flex flex-col gap-2 bg-surface border-[0.5px] border-border rounded-md px-4 pt-4 pb-4.5">
 
     <div class="text-[11px] tracking-widest uppercase text-muted font-medium pt-px px-0.5 pb-1">
         <span>Attempts</span>
@@ -151,4 +158,31 @@
 
     </div>
 
+</section>
+
+<div class="flex flex-col gap-1.5">
+
+    <div class="flex items-center gap-2 bg-card border border-border-strong rounded-md py-1.5 px-1.5 pl-3.5">
+        <input bind:value={answer} type="text" name="answer" id="answer" class="flex-[1_1_0%] min-w-0 appearance-none outline-none bg-transparent py-2 font-mono text-[14px] text-text tracking-[0.02em]" placeholder="Type your answer here...">
+        <button class="appearance-none border-[0.5px]  rounded-md py-2 px-3.5 font-mono text-[12px] font-medium tracking-[0.03em] inline-flex items-center gap-1.5 transition-colors whitespace-nowrap {answer ? 'cursor-pointer border-mint/36 bg-mint/16 text-mint' : 'cursor-default bg-transparent border-border text-muted'}">
+            <span>
+                submit
+            </span>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="display: block; flex-shrink: 0;" data-om-id="jsx:/https:/cf29dfbe-6a21-46d5-bcff-383c3e39d5bb.claudeusercontent.com/v1/design/projects/cf29dfbe-6a21-46d5-bcff-383c3e39d5bb/serve/app.jsx:335:9:3"><path d="M5 12h14M13 6l6 6-6 6" data-om-id="jsx:/https:/cf29dfbe-6a21-46d5-bcff-383c3e39d5bb.claudeusercontent.com/v1/design/projects/cf29dfbe-6a21-46d5-bcff-383c3e39d5bb/serve/app.jsx:1994:62:5"></path></svg>
+        </button>
+    </div>
+
+    <div class="flex justify-between items-center px-0.5">
+        <div class="text-[11px] text-muted">
+            <span>
+                Press Enter to submit · max 10 words
+            </span>
+        </div>
+        <div class="font-mono text-[10px] tracking-[0.04em] text-muted opacity-50 whitespace-nowrap transition-colors">
+            <span>
+                {answer.length ? answer.trim().split(' ').length : '0'}/10 words
+            </span>
+        </div>
+    </div>
+
 </div>

src/routes/+page.svelte src/routes/(app)/+page.sveltesrc/routes/+page.svelte renamed to src/routes/(app)/+page.svelte

@@ -38,4 +38,53 @@ body {
     font-weight: 100 900;
     font-style: normal;
     font-display: swap;
+}
+
+main.terms section:first-child {
+    @apply pt-0
+}
+
+main.terms section .content p {
+    @apply mb-3 text-muted text-[14px] leading-[1.75];
+}
+
+main.terms section .content p:last-child {
+    @apply mb-0;
+}
+
+main.terms section .content ul {
+    @apply mt-1.5 mb-3.5 pl-0 list-none flex flex-col gap-2
+}
+
+main.terms section .content ul li {
+    @apply text-[14px] text-muted leading-[1.7] pl-5.5 relative
+}
+
+main.terms section .content ul li::before {
+    content: '';
+    @apply absolute left-1.5 top-[0.7em] w-1.25 h-[0.5px] bg-muted/50
+}
+
+main.terms section .content div.callout {
+    @apply bg-mint/5 border-[0.5px] border-mint/20 border-l-2 border-l-mint rounded-r-sm py-3 px-3.5 mt-3.5 mb-1 text-[13px] text-text leading-[1.65]
+}
+
+main.terms section .content div.callout span.label {
+    @apply font-mono text-[10px] tracking-widest uppercase text-mint mb-1 block
+}
+
+main.terms section .content dl {
+    @apply mt-2 mb-1 bg-card border-[0.5px] border-border rounded-md overflow-hidden
+}
+
+main.terms section .content dl div {
+    @apply grid grid-cols-[140px_1fr] gap-3.5 py-2.75 px-3.5 border-[0.5px] border-border
+}
+
+main.terms section .content dl div dt {
+    @apply font-mono text-[12px] text-text/70 tracking-[0.02em]
+}
+
+main.terms section .content dl div dd {
+    @apply m-0 text-[13px] text-muted leading-[1.65]
 }