Refactor CLI and InkApp components for improved functionality and user experience. Update model settings in InkApp, enhance terminal input handling, and streamline dependency management in package.json. Remove unused dependencies and update dotenv version for better environment variable management.
This commit is contained in:
sebseb7
132
index.html
Normal file
132
index.html
Normal file
@@ -0,0 +1,132 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Pelikan fährt Rad – SVG</title>
|
||||
<style>
|
||||
html, body { height: 100%; margin: 0; background:#0e1320; color:#e7ecf3; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
|
||||
.wrap { display:grid; place-items:center; height:100%; }
|
||||
.cap { position: fixed; bottom: 0.75rem; left: 0; right: 0; text-align:center; font-size: 0.9rem; opacity: .8; }
|
||||
svg { width: min(92vw, 960px); height: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<!-- Rein vektoriell gezeichneter Pelikan auf einem Fahrrad. -->
|
||||
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="t d">
|
||||
<title id="t">Pelikan fährt Fahrrad</title>
|
||||
<desc id="d">Ein stilisierter Pelikan mit großem Schnabel fährt ein Fahrrad mit zwei Rädern; einfache Formen, klare Farben.</desc>
|
||||
|
||||
<!-- Hintergrund-Deko -->
|
||||
<defs>
|
||||
<radialGradient id="sky" cx="50%" cy="40%" r="70%">
|
||||
<stop offset="0%" stop-color="#1b2a4a" />
|
||||
<stop offset="100%" stop-color="#0e1320" />
|
||||
</radialGradient>
|
||||
<linearGradient id="beakGrad" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stop-color="#ffb347"/>
|
||||
<stop offset="100%" stop-color="#ff7f11"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="frameGrad" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stop-color="#4bd5ff"/>
|
||||
<stop offset="100%" stop-color="#6a5cff"/>
|
||||
</linearGradient>
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#000" flood-opacity="0.35"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#sky)"/>
|
||||
|
||||
<!-- Bodenlinie -->
|
||||
<g opacity="0.35">
|
||||
<ellipse cx="400" cy="520" rx="300" ry="40" fill="#000" />
|
||||
</g>
|
||||
|
||||
<!-- Fahrrad -->
|
||||
<g id="bike" transform="translate(0,0)" filter="url(#shadow)">
|
||||
<!-- Räder -->
|
||||
<g id="wheels" stroke="#cfe7ff" stroke-width="6" fill="none">
|
||||
<circle cx="260" cy="460" r="90" />
|
||||
<circle cx="540" cy="460" r="90" />
|
||||
<!-- Speichen -->
|
||||
<g stroke="#9fd0ff" stroke-width="3" opacity="0.6">
|
||||
<line x1="260" y1="370" x2="260" y2="550" />
|
||||
<line x1="170" y1="460" x2="350" y2="460" />
|
||||
<line x1="200" y1="400" x2="320" y2="520" />
|
||||
<line x1="200" y1="520" x2="320" y2="400" />
|
||||
<line x1="540" y1="370" x2="540" y2="550" />
|
||||
<line x1="450" y1="460" x2="630" y2="460" />
|
||||
<line x1="480" y1="400" x2="600" y2="520" />
|
||||
<line x1="480" y1="520" x2="600" y2="400" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Rahmen -->
|
||||
<g id="frame" stroke="url(#frameGrad)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" fill="none">
|
||||
<polyline points="260,460 360,420 450,460 540,460" />
|
||||
<line x1="360" y1="420" x2="410" y2="360" />
|
||||
<line x1="410" y1="360" x2="520" y2="360" />
|
||||
<line x1="520" y1="360" x2="540" y2="460" />
|
||||
</g>
|
||||
|
||||
<!-- Kurbel und Pedale -->
|
||||
<g id="crank" transform="translate(405,440)">
|
||||
<circle r="16" fill="#b7d8ff" />
|
||||
<g stroke="#b7d8ff" stroke-width="6" stroke-linecap="round">
|
||||
<line x1="0" y1="0" x2="28" y2="-28" />
|
||||
</g>
|
||||
<circle cx="28" cy="-28" r="8" fill="#e5f3ff" />
|
||||
</g>
|
||||
|
||||
<!-- Lenker und Sattel -->
|
||||
<g stroke="#cfe7ff" stroke-width="10" stroke-linecap="round" fill="none">
|
||||
<path d="M520 360 C 555 335, 585 345, 600 360"/>
|
||||
</g>
|
||||
<rect x="325" y="330" width="70" height="16" rx="8" fill="#cfe7ff" />
|
||||
</g>
|
||||
|
||||
<!-- Pelikan -->
|
||||
<g id="pelican" transform="translate(0,0)">
|
||||
<!-- Körper -->
|
||||
<ellipse cx="360" cy="360" rx="90" ry="70" fill="#f2f6fb" stroke="#e1e8f5" stroke-width="4" />
|
||||
<!-- Flügel -->
|
||||
<path d="M330 345 C 275 350, 250 395, 270 430 C 295 470, 355 470, 390 440 C 410 420, 400 380, 370 360 Z" fill="#eaf2fb" stroke="#d7e4f6" stroke-width="3" />
|
||||
<!-- Hals -->
|
||||
<path d="M400 335 C 445 320, 470 300, 500 295 C 520 292, 540 305, 540 325 C 540 345, 520 360, 500 360 C 470 360, 445 350, 415 355" fill="none" stroke="#f2f6fb" stroke-width="20" stroke-linecap="round" />
|
||||
<!-- Kopf -->
|
||||
<circle cx="520" cy="325" r="28" fill="#f7fbff" stroke="#e1e8f5" stroke-width="3" />
|
||||
<!-- Auge -->
|
||||
<circle cx="528" cy="322" r="5" fill="#21314f" />
|
||||
<circle cx="526" cy="320" r="2" fill="#ffffff" />
|
||||
<!-- Schnabel -->
|
||||
<path d="M535 330 C 585 330, 630 338, 675 352 C 640 360, 600 368, 555 368 C 545 360, 538 348, 535 330 Z" fill="url(#beakGrad)" stroke="#ff9a2a" stroke-width="3" />
|
||||
<!-- Kehlsack angedeutet -->
|
||||
<path d="M540 338 C 585 345, 590 352, 552 365" fill="none" stroke="#ffb347" stroke-width="4" opacity="0.7" />
|
||||
<!-- Beine -->
|
||||
<g stroke="#ffb347" stroke-width="10" stroke-linecap="round">
|
||||
<path d="M340 420 L 320 455" />
|
||||
<path d="M380 420 L 390 450" />
|
||||
</g>
|
||||
<!-- Füße auf Pedalen -->
|
||||
<g fill="#ffb347">
|
||||
<circle cx="320" cy="455" r="8" />
|
||||
<circle cx="390" cy="450" r="8" />
|
||||
</g>
|
||||
<!-- Schwanz -->
|
||||
<path d="M280 365 C 255 360, 240 350, 230 340 C 248 368, 260 390, 290 392" fill="#eaf2fb" stroke="#d7e4f6" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
<!-- Sterne / Deko -->
|
||||
<g fill="#9fd0ff" opacity="0.8">
|
||||
<circle cx="90" cy="80" r="2"/>
|
||||
<circle cx="160" cy="120" r="1.5"/>
|
||||
<circle cx="720" cy="90" r="2.2"/>
|
||||
<circle cx="650" cy="160" r="1.8"/>
|
||||
<circle cx="120" cy="200" r="1.6"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cap">SVG Illustration: Pelikan auf Fahrrad. Datei lokal öffnen oder auf einen Webserver legen.</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user