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

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

View File

@ -3,16 +3,17 @@
<head>
<meta charset="UTF-8" />
<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="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" />
<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=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" />
<title>Story Writer</title>
<title>Grimoire</title>
</head>
<body>
<div id="root"></div>

View File

@ -1,4 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#1a1814"/>
<text x="50" y="70" font-size="60" text-anchor="middle" fill="#c8941a" font-family="serif"></text>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!-- Background -->
<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>

Before

Width:  |  Height:  |  Size: 224 B

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

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

View File

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