Skip to content

Commit ec7a0db

Browse files
jango-gitjango-git
committed
Add a Help screen
1 parent 26a7abc commit ec7a0db

28 files changed

Lines changed: 1035 additions & 117 deletions

‎index.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,61 @@
336336
background: var(--border-hard);
337337
margin: 0 2px;
338338
}
339+
.modifier-file-actions {
340+
margin-top: auto;
341+
padding-top: 8px;
342+
border-top: 1px solid var(--border-hard);
343+
display: flex;
344+
flex-direction: column;
345+
gap: 8px;
346+
}
347+
.modifier-action-wrap {
348+
display: flex;
349+
}
350+
.modifier-action-wrap .modifier-tool {
351+
flex: 1;
352+
}
353+
.modifier-action.modifier-tool {
354+
height: 40px;
355+
color: var(--muted);
356+
}
357+
.modifier-action.modifier-tool:hover {
358+
color: var(--on-accent);
359+
}
360+
.modifier-action-spacer {
361+
height: 4px;
362+
}
363+
.modifier-reset.modifier-tool {
364+
color: var(--danger);
365+
border-color: color-mix(in srgb, var(--danger) 45%, var(--border-mid));
366+
font-variant-numeric: tabular-nums;
367+
}
368+
.modifier-reset.modifier-tool:hover {
369+
background: var(--danger);
370+
border-color: var(--danger);
371+
color: var(--on-accent);
372+
}
373+
.modifier-reset.counting {
374+
background: var(--danger);
375+
border-color: var(--danger);
376+
color: var(--on-accent);
377+
font-size: 17px;
378+
font-weight: 700;
379+
}
380+
.needs-image {
381+
animation: needs-image-blink 1s step-end infinite;
382+
}
383+
@keyframes needs-image-blink {
384+
0%,
385+
100% {
386+
border-color: #ff7a1a;
387+
color: #ff7a1a;
388+
}
389+
50% {
390+
border-color: var(--border-mid);
391+
color: var(--muted);
392+
}
393+
}
339394
#panel {
340395
grid-column: 2;
341396
grid-row: 1 / 3;
@@ -788,6 +843,78 @@
788843
border-top: 2px solid var(--accent);
789844
pointer-events: none;
790845
}
846+
.modal-overlay {
847+
position: fixed;
848+
inset: 0;
849+
z-index: 2000;
850+
display: flex;
851+
align-items: center;
852+
justify-content: center;
853+
padding: 24px;
854+
background: color-mix(in srgb, var(--stage-bg) 70%, transparent);
855+
backdrop-filter: blur(2px);
856+
}
857+
.help-dialog {
858+
position: relative;
859+
width: min(560px, 100%);
860+
max-height: calc(100vh - 48px);
861+
overflow-y: auto;
862+
background: var(--panel-bg);
863+
color: var(--panel-fg);
864+
border: 1px solid var(--border-hard);
865+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
866+
padding: 24px 28px 26px;
867+
}
868+
.help-close {
869+
position: absolute;
870+
top: 10px;
871+
right: 12px;
872+
width: 30px;
873+
height: 30px;
874+
background: transparent;
875+
border: none;
876+
color: var(--muted);
877+
font-size: 22px;
878+
line-height: 1;
879+
cursor: pointer;
880+
}
881+
.help-close:hover {
882+
color: var(--accent);
883+
}
884+
.help-title {
885+
margin: 0;
886+
font-size: 20px;
887+
color: var(--accent);
888+
letter-spacing: 0.01em;
889+
}
890+
.help-subtitle {
891+
margin: 4px 0 18px;
892+
color: var(--muted);
893+
font-size: 13px;
894+
}
895+
.help-step {
896+
padding: 12px 0;
897+
border-top: 1px solid var(--border-soft);
898+
}
899+
.help-step-title {
900+
margin: 0 0 5px;
901+
font-size: 14px;
902+
font-weight: 600;
903+
}
904+
.help-step-body {
905+
margin: 0;
906+
font-size: 13px;
907+
line-height: 1.55;
908+
color: var(--panel-fg);
909+
}
910+
.help-footer {
911+
margin: 16px 0 0;
912+
padding-top: 14px;
913+
border-top: 1px solid var(--border-soft);
914+
font-size: 12px;
915+
color: var(--muted);
916+
line-height: 1.5;
917+
}
791918
</style>
792919
</head>
793920
<body>

‎src/i18n/locales/az.json‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,44 @@
3636
"label": "İxrac",
3737
"tip": "Üçbucaqlaşdırmanı seçilmiş formatda endirin."
3838
},
39+
"resetProject": {
40+
"label": "Layihəni sıfırla",
41+
"tip": "Geri sayım üçün təkrar-təkrar klikləyin, sonra hər şeyi silib boş layihəyə qaytarın. Ləğv etmək üçün 2 saniyə gözləyin."
42+
},
43+
"help": {
44+
"label": "Kömək",
45+
"tip": "Necə başlamaq olar."
46+
},
3947
"exportFormat": "İxrac formatı",
4048
"rasterResolution": "Rastr ölçüsü (ən uzun tərəf)",
4149
"errors": {
4250
"loadImage": "Şəkil yüklənmədi",
4351
"openProject": "Layihə faylı açılmadı",
4452
"saveProject": "Layihə saxlanılmadı",
45-
"export": "İxrac alınmadı (şəkil yüklənibmi?)"
53+
"export": "İxrac alınmadı (şəkil yüklənibmi?)",
54+
"resetProject": "Layihə sıfırlanmadı"
4655
}
4756
},
57+
"help": {
58+
"title": "Başlanğıc",
59+
"subtitle": "Fotonu üç addımda aşağı poliqonlu üçbucaqlaşdırmaya çevirin.",
60+
"close": "Bağla",
61+
"steps": {
62+
"load": {
63+
"title": "1. Şəkil yükləyin",
64+
"body": "Modifikator panelinin (kətanın sağındakı şaquli alət zolağının) altındakı şəkil düyməsini istifadə edin. Onun ikonu yuxarıya doğru ox olan bir şəkildir. Üçbucaqlaşdırmaq üçün istənilən fotonu seçin."
65+
},
66+
"points": {
67+
"title": "2. Baza nöqtələrini yaradın",
68+
"body": "Sağ paneldə Nöqtə yaradılması bölməsini açın. Min radius dəyərini sonuna qədər minimumuna çəkin, sonra sıxlığı idarə etmək üçün Maks radius istifadə edin. Ortadan və ya bir az aşağıdan başlayın, sonra dəqiqləşdirin. Daha kiçik maksimum daha çox, daha incə üçbucaq yığır."
69+
},
70+
"emphasize": {
71+
"title": "3. Vacib olanı vurğulayın",
72+
"body": "Hansı formaları aydın saxlamaq istədiyinizi qərarlaşdırın. Modifikator panelindən bir alət (çoxxətli, əyri və ya dairə) seçin və həmin element üzərində çəkin. Məsələn, kənar boyunca bir xətt çəkin. Tətbiq etmək üçün Space, ləğv etmək üçün Esc basın."
73+
}
74+
},
75+
"footer": "İşinizi istənilən vaxt layihə kimi saxlayın və ya nəticəni yuxarı paneldən SVG, PDF və ya şəkil kimi ixrac edin."
76+
},
4877
"stats": {
4978
"title": "Statistika",
5079
"points": "Nöqtələr",

‎src/i18n/locales/be.json‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,44 @@
3636
"label": "Экспарт",
3737
"tip": "Спампаваць трыянгуляцыю ў выбраным фармаце."
3838
},
39+
"resetProject": {
40+
"label": "Скінуць праект",
41+
"tip": "Націскайце паўторна для адліку, потым усё сціраецца назад да пустога праекта. Пачакайце 2с, каб скасаваць."
42+
},
43+
"help": {
44+
"label": "Дапамога",
45+
"tip": "Як пачаць працу."
46+
},
3947
"exportFormat": "Фармат экспарту",
4048
"rasterResolution": "Растравае разрозненне (даўжэйшы бок)",
4149
"errors": {
4250
"loadImage": "Не ўдалося загрузіць выяву",
4351
"openProject": "Не ўдалося адкрыць файл праекта",
4452
"saveProject": "Не ўдалося захаваць праект",
45-
"export": "Не ўдалося экспартаваць (ці загружана выява?)"
53+
"export": "Не ўдалося экспартаваць (ці загружана выява?)",
54+
"resetProject": "Не ўдалося скінуць праект"
4655
}
4756
},
57+
"help": {
58+
"title": "Пачатак працы",
59+
"subtitle": "Ператварыце фота ў нізкаполіганальную трыянгуляцыю за тры крокі.",
60+
"close": "Закрыць",
61+
"steps": {
62+
"load": {
63+
"title": "1. Загрузіце выяву",
64+
"body": "Скарыстайцеся кнопкай выявы ўнізе панэлі мадыфікатараў, вертыкальнай паласы інструментаў справа ад палатна. Яе значок - выява са стрэлкай уверх. Выберыце любое фота для паліганізацыі."
65+
},
66+
"points": {
67+
"title": "2. Згенеруйце базавыя кропкі",
68+
"body": "Адкрыйце Генерацыя кропак на правай панэлі. Перацягніце Мін. радыус, px да самага мінімуму, потым выкарыстоўвайце Макс. радыус, px для кіравання шчыльнасцю. Пачніце прыкладна з сярэдзіны ці крыху ніжэй, потым удакладніце. Меншы максімум дае больш дробных трохвугольнікаў."
69+
},
70+
"emphasize": {
71+
"title": "3. Вылучыце важнае",
72+
"body": "Вырашыце, якія формы трэба захаваць рэзкімі. Выберыце інструмент з панэлі мадыфікатараў (Палілінія, Крывая Catmull-Rom ці Акружнасць) і намалюйце па-над гэтай дэталлю. Напрыклад, правядзіце лінію ўздоўж краю. Націсніце Прабел, каб ужыць, Esc, каб скасаваць."
73+
}
74+
},
75+
"footer": "Захоўвайце сваю працу як праект у любы час ці экспартуйце вынік як SVG, PDF ці выяву з верхняй панэлі."
76+
},
4877
"stats": {
4978
"title": "Статыстыка",
5079
"points": "Кропкі",

‎src/i18n/locales/bn.json‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,44 @@
3636
"label": "এক্সপোর্ট",
3737
"tip": "নির্বাচিত ফরম্যাটে ত্রিভুজায়ন ডাউনলোড করুন।"
3838
},
39+
"resetProject": {
40+
"label": "প্রকল্প রিসেট করুন",
41+
"tip": "গণনা কমাতে বারবার ক্লিক করুন, তারপর সবকিছু মুছে একটি খালি প্রকল্পে ফিরে যান। বাতিল করতে ২ সেকেন্ড অপেক্ষা করুন।"
42+
},
43+
"help": {
44+
"label": "সাহায্য",
45+
"tip": "কীভাবে শুরু করবেন।"
46+
},
3947
"exportFormat": "এক্সপোর্ট ফরম্যাট",
4048
"rasterResolution": "র‍্যাস্টার রেজোলিউশন (দীর্ঘতম দিক)",
4149
"errors": {
4250
"loadImage": "ছবি লোড করতে ব্যর্থ",
4351
"openProject": "প্রকল্প ফাইল খুলতে ব্যর্থ",
4452
"saveProject": "প্রকল্প সংরক্ষণ করতে ব্যর্থ",
45-
"export": "এক্সপোর্ট করতে ব্যর্থ (কোনো ছবি কি লোড করা আছে?)"
53+
"export": "এক্সপোর্ট করতে ব্যর্থ (কোনো ছবি কি লোড করা আছে?)",
54+
"resetProject": "প্রকল্প রিসেট করতে ব্যর্থ"
4655
}
4756
},
57+
"help": {
58+
"title": "শুরু করা",
59+
"subtitle": "তিনটি ধাপে একটি ছবিকে লো-পলি ত্রিভুজায়নে পরিণত করুন।",
60+
"close": "বন্ধ করুন",
61+
"steps": {
62+
"load": {
63+
"title": "১. একটি ছবি লোড করুন",
64+
"body": "মডিফায়ার বারের নিচে থাকা ছবির বোতামটি ব্যবহার করুন, এটি ক্যানভাসের ডানদিকে টুলের উল্লম্ব সারি। এর আইকন হলো উপরের দিকে নির্দেশকারী তীরসহ একটি ছবি। পলিগনাইজ করার জন্য যেকোনো ছবি বেছে নিন।"
65+
},
66+
"points": {
67+
"title": "২. বেস বিন্দু তৈরি করুন",
68+
"body": "ডান প্যানেলে বিন্দু তৈরি খুলুন। ন্যূনতম ব্যাসার্ধ একদম তার সর্বনিম্নে টেনে নামান, তারপর ঘনত্ব নিয়ন্ত্রণ করতে সর্বোচ্চ ব্যাসার্ধ ব্যবহার করুন। মাঝামাঝি বা সামান্য নিচ থেকে শুরু করুন, তারপর সূক্ষ্ম করুন। ছোট সর্বোচ্চ মান আরও বেশি, সূক্ষ্মতর ত্রিভুজ গুছিয়ে দেয়।"
69+
},
70+
"emphasize": {
71+
"title": "৩. যা গুরুত্বপূর্ণ তা জোর দিন",
72+
"body": "কোন আকারগুলো স্পষ্ট রাখতে চান তা ঠিক করুন। মডিফায়ার বার থেকে একটি টুল বেছে নিন (পলিলাইন, কার্ভ, বা বৃত্ত) এবং সেই বৈশিষ্ট্যের উপর আঁকুন। উদাহরণস্বরূপ, একটি প্রান্ত বরাবর একটি রেখা টানুন। প্রয়োগ করতে স্পেস চাপুন, বাতিল করতে Esc।"
73+
}
74+
},
75+
"footer": "যেকোনো সময় আপনার কাজ প্রকল্প হিসেবে সংরক্ষণ করুন, অথবা উপরের বার থেকে ফলাফল SVG, PDF, বা ছবি হিসেবে এক্সপোর্ট করুন।"
76+
},
4877
"stats": {
4978
"title": "পরিসংখ্যান",
5079
"points": "বিন্দু",

‎src/i18n/locales/de.json‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,44 @@
3636
"label": "Exportieren",
3737
"tip": "Triangulation im gewählten Format herunterladen."
3838
},
39+
"resetProject": {
40+
"label": "Projekt zurücksetzen",
41+
"tip": "Wiederholt klicken, um herunterzuzählen, dann wird alles auf ein leeres Projekt zurückgesetzt. 2s warten zum Abbrechen."
42+
},
43+
"help": {
44+
"label": "Hilfe",
45+
"tip": "So fangen Sie an."
46+
},
3947
"exportFormat": "Exportformat",
4048
"rasterResolution": "Rasterauflösung (längste Seite)",
4149
"errors": {
4250
"loadImage": "Bild konnte nicht geladen werden",
4351
"openProject": "Projektdatei konnte nicht geöffnet werden",
4452
"saveProject": "Projekt konnte nicht gespeichert werden",
45-
"export": "Export fehlgeschlagen (ist ein Bild geladen?)"
53+
"export": "Export fehlgeschlagen (ist ein Bild geladen?)",
54+
"resetProject": "Projekt konnte nicht zurückgesetzt werden"
4655
}
4756
},
57+
"help": {
58+
"title": "Erste Schritte",
59+
"subtitle": "Verwandeln Sie ein Foto in drei Schritten in eine Low-Poly-Triangulation.",
60+
"close": "Schließen",
61+
"steps": {
62+
"load": {
63+
"title": "1. Bild laden",
64+
"body": "Verwenden Sie die Bild-Schaltfläche unten in der Modifikatorleiste, dem vertikalen Werkzeugstreifen rechts neben der Leinwand. Ihr Symbol ist ein Bild mit einem nach oben zeigenden Pfeil. Wählen Sie ein beliebiges Foto zum Polygonisieren."
65+
},
66+
"points": {
67+
"title": "2. Die Basispunkte erzeugen",
68+
"body": "Öffnen Sie Punkterzeugung im rechten Bedienfeld. Ziehen Sie Min-Radius ganz auf das Minimum, und steuern Sie dann mit Max-Radius die Dichte. Beginnen Sie etwa in der Mitte oder etwas darunter und verfeinern Sie dann. Ein kleinerer Max-Wert packt mehr und feinere Dreiecke hinein."
69+
},
70+
"emphasize": {
71+
"title": "3. Das Wesentliche hervorheben",
72+
"body": "Entscheiden Sie, welche Formen scharf bleiben sollen. Wählen Sie ein Werkzeug aus der Modifikatorleiste (Polylinie, Catmull-Rom-Kurve oder Kreis) und zeichnen Sie über dieses Merkmal. Ziehen Sie zum Beispiel eine Linie entlang einer Kante. Drücken Sie Leertaste zum Anwenden, Esc zum Abbrechen."
73+
}
74+
},
75+
"footer": "Speichern Sie Ihre Arbeit jederzeit als Projekt, oder exportieren Sie das Ergebnis als SVG, PDF oder Bild aus der oberen Leiste."
76+
},
4877
"stats": {
4978
"title": "Statistik",
5079
"points": "Punkte",

‎src/i18n/locales/en.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,44 @@
3636
"label": "Export",
3737
"tip": "Download the triangulation in the chosen format."
3838
},
39+
"resetProject": {
40+
"label": "Reset project",
41+
"tip": "Click repeatedly to count down, then wipe everything back to a blank project. Wait 2s to cancel."
42+
},
43+
"help": {
44+
"label": "Help",
45+
"tip": "How to get started."
46+
},
3947
"exportFormat": "Export format",
4048
"rasterResolution": "Raster resolution (longest side)",
4149
"errors": {
4250
"loadImage": "Failed to load image",
4351
"openProject": "Failed to open the project file",
4452
"saveProject": "Failed to save the project",
53+
"resetProject": "Failed to reset the project",
4554
"export": "Failed to export (is an image loaded?)"
4655
}
4756
},
57+
"help": {
58+
"title": "Getting started",
59+
"subtitle": "Turn a photo into a low-poly triangulation in three steps.",
60+
"close": "Close",
61+
"steps": {
62+
"load": {
63+
"title": "1. Load an image",
64+
"body": "Use the image button at the bottom of the modifier bar, the vertical strip of tools to the right of the canvas. Its icon is a picture with an arrow pointing up. Pick any photo to polygonize."
65+
},
66+
"points": {
67+
"title": "2. Generate the base points",
68+
"body": "Open Point generation in the right panel. Drag Min radius all the way down to its minimum, then use Max radius to control density. Start around the middle or a little below, then refine. A smaller max packs in more, finer triangles."
69+
},
70+
"emphasize": {
71+
"title": "3. Emphasize what matters",
72+
"body": "Decide which shapes you want to keep crisp. Pick a tool from the modifier bar (polyline, curve, or circle) and draw over that feature. For example, trace a line along an edge. Press Space to apply, Esc to cancel."
73+
}
74+
},
75+
"footer": "Save your work as a project anytime, or export the result as SVG, PDF, or an image from the top bar."
76+
},
4877
"stats": {
4978
"title": "Stats",
5079
"points": "Points",

0 commit comments

Comments
 (0)