chris/write
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename app to Grimoire, add book+crescent moon SVG icon

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-05-11 15:56:46 -04:00
parent 88e4441222
commit b7baf4fa15
4 changed files with 51 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/index.html
View File

@ -3,16 +3,17 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#1a1814" /> <meta name="theme-color" content="#09090f" />
<meta name="description" content="Write your stories, anywhere." /> <meta name="description" content="Write your stories, anywhere." />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Special+Elite&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Special+Elite&display=swap" rel="stylesheet" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<title>Story Writer</title> <title>Grimoire</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

44
frontend/public/icon.svg
View File

@ -1,4 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<rect width="100" height="100" fill="#1a1814"/> <!-- Background -->
<text x="50" y="70" font-size="60" text-anchor="middle" fill="#c8941a" font-family="serif">✍</text> <rect width="512" height="512" rx="96" fill="#09090f"/>
<!-- Book depth shadow -->
<rect x="124" y="88" width="276" height="348" rx="14" fill="#060408"/>
<!-- Book back cover -->
<rect x="120" y="82" width="276" height="348" rx="14" fill="#110e24"/>
<!-- Book spine -->
<rect x="120" y="82" width="30" height="348" rx="13" fill="#090716"/>
<!-- Spine binding rings -->
<rect x="126" y="148" width="14" height="4" rx="2" fill="#c8941a" opacity="0.55"/>
<rect x="126" y="254" width="14" height="4" rx="2" fill="#c8941a" opacity="0.55"/>
<rect x="126" y="360" width="14" height="4" rx="2" fill="#c8941a" opacity="0.55"/>
<!-- Cover border inset -->
<rect x="162" y="110" width="216" height="292" rx="6" fill="none" stroke="#c8941a" stroke-width="1.5" opacity="0.22"/>
<!-- Crescent moon emblem -->
<defs>
<clipPath id="mc">
<circle cx="264" cy="240" r="84"/>
</clipPath>
</defs>
<circle cx="264" cy="240" r="84" fill="#c8941a" opacity="0.92"/>
<circle cx="295" cy="210" r="67" fill="#110e24" clip-path="url(#mc)"/>
<!-- Stars on cover -->
<circle cx="186" cy="142" r="5.5" fill="#c8941a" opacity="0.95"/>
<circle cx="356" cy="134" r="3.5" fill="#c8941a" opacity="0.85"/>
<circle cx="372" cy="156" r="2.5" fill="#c8941a" opacity="0.55"/>
<circle cx="178" cy="356" r="4" fill="#c8941a" opacity="0.75"/>
<circle cx="362" cy="346" r="4.5" fill="#c8941a" opacity="0.85"/>
<circle cx="348" cy="370" r="2.5" fill="#c8941a" opacity="0.50"/>
<!-- Title rule lines -->
<rect x="172" y="370" width="172" height="4" rx="2" fill="#c8941a" opacity="0.40"/>
<rect x="196" y="382" width="124" height="2.5" rx="1.5" fill="#c8941a" opacity="0.22"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 224 B

After

Width:  |  Height:  |  Size: 1.8 KiB

8
frontend/public/manifest.json
View File

@ -1,11 +1,11 @@
{ {
"name": "Story Writer", "name": "Grimoire",
"short_name": "Stories", "short_name": "Grimoire",
"description": "Write your stories, anywhere.", "description": "Write your stories, anywhere.",
"start_url": "/", "start_url": "/",
"display": "standalone", "display": "standalone",
"background_color": "#1a1814", "background_color": "#09090f",
"theme_color": "#1a1814", "theme_color": "#09090f",
"icons": [ "icons": [
{ {
"src": "/icon.svg", "src": "/icon.svg",

4
frontend/src/pages/Login.jsx
View File

@ -25,8 +25,8 @@ export default function Login({ onLogin }) {
<div className="login-page"> <div className="login-page">
<div className="login-box"> <div className="login-box">
<div className="login-quill">✍</div> <div className="login-quill">✍</div>
<h1 className="login-title">Story Writer</h1> <h1 className="login-title">Grimoire</h1>
<p className="login-sub">Your stories, your world</p> <p className="login-sub">Your stories, your magic</p>
<form onSubmit={handleSubmit} className="login-form"> <form onSubmit={handleSubmit} className="login-form">
<input <input
type="text" type="text"