volandsz/astro_name_numbers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Первая готовая версия, пока без Tauri

Browse Source
This commit is contained in:
VolandSZ
2026-06-18 17:01:18 +03:00
parent 5decd5ba94
commit 8424ec469a
19 changed files with 1616 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
node_modules/
dist/
*.log

9
0.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

9
1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

9
2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

9
3.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

9
4.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

9
5.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

9
6.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

9
7.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

9
8.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

9
9.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

12
index.html Normal file
View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Программа мамы</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

35
letters.json Normal file
View File

@ -0,0 +1,35 @@
{
"А": 1,
"Б": 2,
"В": 6,
"Г": 3,
"Д": 4,
"Е": 5,
"Ё": 5,
"Ж": 1,
"З": 7,
"И": 1,
"Й": 1,
"К": 2,
"Л": 3,
"М": 4,
"Н": 5,
"О": 7,
"П": 8,
"Р": 2,
"С": 3,
"Т": 4,
"У": 6,
"Ф": 8,
"Х": 5,
"Ц": 3,
"Ч": 8,
"Ш": 8,
"Щ": 2,
"Ъ": 0,
"Ы": 1,
"Ь": 1,
"Э": 4,
"Ю": 7,
"Я": 2
}

1081
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

16
package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "astro-name-numbers",
"version": "1.1.2",
"private": true,
"type": "module",
"scripts": {
"dev": "vite --host 127.0.0.1",
"build": "vite build",
"preview": "vite preview --host 127.0.0.1"
},
"dependencies": {
"@vitejs/plugin-vue": "^6.0.7",
"vite": "^8.0.16",
"vue": "^3.5.16"
}
}

167
src/App.vue Normal file
View File

@ -0,0 +1,167 @@
<script setup>
import { computed, reactive, ref } from 'vue';
import rawLetters from '../letters.json';
const digitImages = import.meta.glob('../*.svg', {
eager: true,
import: 'default',
query: '?url',
});
const russianAlphabet = Array.from('АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ');
const letters = Object.fromEntries(
Object.entries(rawLetters).map(([letter, value], index) => {
const normalizedLetter = /^[А-ЯЁ]$/u.test(letter)
? letter.toLocaleUpperCase('ru-RU')
: russianAlphabet[index];
return [normalizedLetter, value];
}),
);
const form = reactive({
firstName: '',
patronymic: '',
lastName: '',
});
const frame = ref('input');
const normalizeName = (value) => value.replace(/[^а-яё-]/giu, '');
const calculateNameNumber = (value) =>
Array.from(normalizeName(value).toLocaleUpperCase('ru-RU')).reduce(
(sum, letter) => sum + (letters[letter] ?? 0),
0,
);
const sumDigits = (value) =>
Array.from(String(value)).reduce((sum, digit) => sum + Number(digit), 0);
const getNumberReductionSteps = (value) => {
const steps = [value];
let currentValue = value;
while (currentValue > 9) {
currentValue = sumDigits(currentValue);
steps.push(currentValue);
}
return steps;
};
const createResultRow = (label, value) => {
const steps = getNumberReductionSteps(value);
const finalDigit = steps.at(-1);
return {
label,
value: steps.join(' → '),
image: digitImages[`../${finalDigit}.svg`],
imageAlt: `Цифра ${finalDigit}`,
};
};
const result = computed(() => {
const firstName = calculateNameNumber(form.firstName);
const patronymic = calculateNameNumber(form.patronymic);
const lastName = calculateNameNumber(form.lastName);
return {
firstName,
patronymic,
lastName,
fullName: firstName + patronymic + lastName,
};
});
const fullName = computed(() =>
[form.lastName, form.firstName, form.patronymic].filter(Boolean).join(' '),
);
const resultRows = computed(() => {
const rows = [];
if (normalizeName(form.firstName).length > 0) {
rows.push(createResultRow(form.firstName, result.value.firstName));
}
if (normalizeName(form.patronymic).length > 0) {
rows.push(createResultRow(form.patronymic, result.value.patronymic));
}
if (normalizeName(form.lastName).length > 0) {
rows.push(createResultRow(form.lastName, result.value.lastName));
}
if (rows.length > 0) {
rows.push(createResultRow(fullName.value, result.value.fullName));
}
return rows;
});
const canSubmit = computed(() =>
[form.firstName, form.patronymic, form.lastName].some((value) => normalizeName(value).length > 0),
);
const showResult = () => {
if (canSubmit.value) {
frame.value = 'result';
}
};
const reset = () => {
form.firstName = '';
form.patronymic = '';
form.lastName = '';
frame.value = 'input';
};
</script>
<template>
<main class="page">
<section v-if="frame === 'input'" class="panel" aria-labelledby="app-title">
<h1 id="app-title">NVK&SNZ v1.1.2</h1>
<form class="name-form" @submit.prevent="showResult">
<label class="field-row">
<span>Введите имя</span>
<input v-model.trim="form.firstName" type="text" autocomplete="given-name" inputmode="text" />
</label>
<label class="field-row">
<span>Введите отчество</span>
<input v-model.trim="form.patronymic" type="text" autocomplete="additional-name" inputmode="text" />
</label>
<label class="field-row">
<span>Введите фамилию</span>
<input v-model.trim="form.lastName" type="text" autocomplete="family-name" inputmode="text" />
</label>
<button class="primary-button" type="submit" :disabled="!canSubmit" @click="showResult">ДАЛЕЕ</button>
</form>
</section>
<section v-else class="panel result-panel" aria-labelledby="result-title">
<h2 id="result-title" class="sr-only">Результат расчета ФИО</h2>
<dl class="result-grid">
<template v-for="row in resultRows" :key="row.label">
<dt>{{ row.label }}</dt>
<dd>
<span class="result-value">
<span>{{ row.value }}</span>
<span aria-hidden="true">→</span>
<img class="digit-icon" :src="row.image" :alt="row.imageAlt" />
</span>
</dd>
</template>
</dl>
<button class="primary-button result-button" type="button" @click="reset">Еще раз</button>
</section>
</main>
</template>

5
src/main.js Normal file
View File

@ -0,0 +1,5 @@
import { createApp } from 'vue';
import App from './App.vue';
import './styles.css';
createApp(App).mount('#app');

201
src/styles.css Normal file
View File

@ -0,0 +1,201 @@
* {
box-sizing: border-box;
}
html {
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
color: #252525;
background-image: radial-gradient(#dddddd 1px, transparent 1px);
background-size: 18px 18px;
}
body {
min-width: 320px;
min-height: 100vh;
margin: 0;
}
button,
input {
font: inherit;
}
.page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.panel {
width: min(980px, 100%);
min-height: 550px;
padding: 48px 84px 40px;
border: 2px solid #d7d7d7;
border-radius: 8px;
background: #ffffff;
}
h1 {
width: fit-content;
max-width: 100%;
margin: 0 auto 42px;
padding: 12px 28px 16px;
text-align: center;
font-size: 44px;
font-weight: 700;
line-height: 1.15;
color: #24384a;
text-transform: uppercase;
background: linear-gradient(180deg, #f8fbfd 0%, #eef7f2 100%);
border-bottom: 4px solid #2f9e69;
border-radius: 6px 6px 0 0;
box-shadow: 0 10px 24px rgba(36, 56, 74, 0.08);
}
.name-form {
display: grid;
gap: 34px;
}
.field-row {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(280px, 435px);
align-items: center;
gap: 36px;
font-size: 48px;
line-height: 1.12;
}
.field-row input {
width: 100%;
min-height: 50px;
padding: 8px 12px;
border: 2px solid #7d7d7d;
border-radius: 0;
outline: none;
}
.field-row input:focus {
border-color: #1f8f5a;
box-shadow: 0 0 0 3px rgba(47, 158, 105, 0.16);
}
.primary-button {
min-height: 60px;
margin-top: 6px;
border: 2px solid #216745;
border-radius: 4px;
color: #ffffff;
background: #2f9e69;
font-size: 32px;
line-height: 1;
cursor: pointer;
}
.primary-button:disabled {
border-color: #9aa19d;
background: #9aa19d;
cursor: not-allowed;
}
.primary-button:not(:disabled):hover {
background: #278b5b;
}
.result-panel {
display: grid;
align-content: center;
gap: 42px;
}
.result-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(310px, 0.9fr);
gap: 22px 64px;
margin: 0;
font-size: 48px;
line-height: 1.12;
}
.result-grid dt,
.result-grid dd {
margin: 0;
overflow-wrap: anywhere;
}
.result-value {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.digit-icon {
width: 58px;
height: 58px;
object-fit: contain;
flex: 0 0 auto;
}
.result-button {
justify-self: center;
width: min(525px, 100%);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 840px) {
.panel {
min-height: auto;
padding: 32px 24px;
}
h1,
.field-row,
.result-grid {
font-size: 34px;
}
.field-row,
.result-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.name-form {
gap: 24px;
}
}
@media (max-width: 480px) {
.page {
padding: 12px;
}
h1,
.field-row,
.result-grid {
font-size: 28px;
}
.primary-button {
font-size: 26px;
}
.digit-icon {
width: 48px;
height: 48px;
}
}

6
vite.config.js Normal file
View File

@ -0,0 +1,6 @@
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [vue()],
});