From 007e414a9a33672cd1d19d9d9eb3f520e4331055 Mon Sep 17 00:00:00 2001 From: Physcik Date: Tue, 13 Jan 2026 21:06:23 +0500 Subject: Template v1 --- ClassIcons/Bard.jpg | Bin 0 -> 1732835 bytes ClassIcons/Ranger.svg | 6 ++ Components/corner.svg | 3 + Components/corner_v2.svg | 4 ++ Components/separation.svg | 3 + Components/sidePanel.svg | 4 ++ Components/textbox.svg | 7 ++ Components/window1.svg:Zone.Identifier | Bin 0 -> 25 bytes bard-bg.jpg | Bin 0 -> 209666 bytes bg.zip | Bin 88542 -> 0 bytes cardBack.png | Bin 0 -> 96001 bytes cardFace.png | Bin 0 -> 92124 bytes cards.json | 20 ++++++ index.css | 121 ++++++++++++++++++++++++++++----- index.html | 66 ++++++++++-------- index.js | 23 +++++++ 16 files changed, 212 insertions(+), 45 deletions(-) create mode 100644 ClassIcons/Bard.jpg create mode 100644 ClassIcons/Ranger.svg create mode 100644 Components/corner.svg create mode 100644 Components/corner_v2.svg create mode 100644 Components/separation.svg create mode 100644 Components/sidePanel.svg create mode 100644 Components/textbox.svg create mode 100644 Components/window1.svg:Zone.Identifier create mode 100644 bard-bg.jpg delete mode 100644 bg.zip create mode 100644 cardBack.png create mode 100644 cardFace.png create mode 100644 cards.json create mode 100644 index.js diff --git a/ClassIcons/Bard.jpg b/ClassIcons/Bard.jpg new file mode 100644 index 0000000..630429a Binary files /dev/null and b/ClassIcons/Bard.jpg differ diff --git a/ClassIcons/Ranger.svg b/ClassIcons/Ranger.svg new file mode 100644 index 0000000..9854a34 --- /dev/null +++ b/ClassIcons/Ranger.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Components/corner.svg b/Components/corner.svg new file mode 100644 index 0000000..0ebb48f --- /dev/null +++ b/Components/corner.svg @@ -0,0 +1,3 @@ + + + diff --git a/Components/corner_v2.svg b/Components/corner_v2.svg new file mode 100644 index 0000000..f451de0 --- /dev/null +++ b/Components/corner_v2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Components/separation.svg b/Components/separation.svg new file mode 100644 index 0000000..9ef6880 --- /dev/null +++ b/Components/separation.svg @@ -0,0 +1,3 @@ + + + diff --git a/Components/sidePanel.svg b/Components/sidePanel.svg new file mode 100644 index 0000000..e0b6725 --- /dev/null +++ b/Components/sidePanel.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Components/textbox.svg b/Components/textbox.svg new file mode 100644 index 0000000..bbba926 --- /dev/null +++ b/Components/textbox.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/Components/window1.svg:Zone.Identifier b/Components/window1.svg:Zone.Identifier new file mode 100644 index 0000000..d6c1ec6 Binary files /dev/null and b/Components/window1.svg:Zone.Identifier differ diff --git a/bard-bg.jpg b/bard-bg.jpg new file mode 100644 index 0000000..8f73dab Binary files /dev/null and b/bard-bg.jpg differ diff --git a/bg.zip b/bg.zip deleted file mode 100644 index 19c41d9..0000000 Binary files a/bg.zip and /dev/null differ diff --git a/cardBack.png b/cardBack.png new file mode 100644 index 0000000..f67f236 Binary files /dev/null and b/cardBack.png differ diff --git a/cardFace.png b/cardFace.png new file mode 100644 index 0000000..0fcf544 Binary files /dev/null and b/cardFace.png differ diff --git a/cards.json b/cards.json new file mode 100644 index 0000000..6bb6296 --- /dev/null +++ b/cards.json @@ -0,0 +1,20 @@ +{ + "cards": [ + { + "ClassName": "bard", + "Level": 1, + "SpellName": "Безмолвный образ", + "School": "Иллюзия", + "CastTime": "1 действие", + "Distance": "60 футов", + "Components": "В, С, М (кусок овечьей шерсти)", + "Duration": "Концентрация, до 10 минут", + "DescriptionScale": 20, + "Description": [ + "Вы создаёте образ предмета, существа или другого видимого явления, помещающийся в объёме в куб с длиной ребра 15 футов. Образ появляется в точке, которую вы видите в пределах дистанции, и существует, пока активно заклинание. Это исключительно зрительная иллюзия, не сопровождаемая звуками, запахами и прочими сенсорными эффектами.", + "Вы можете действием заставить образ переместиться в любое место в пределах дистанции. Пока образ меняет местоположение, вы можете изменять его внешность, чтобы перемещение выглядело естественным. Например, если вы создаёте образ существа и перемещаете его, вы можете изменить образ, чтобы казалось, что оно идёт.", + "Физическое взаимодействие с образом даёт понять, что это иллюзия, потому что сквозь него всё проходит. Существа, исследующие образ действием, могут определить, что это иллюзия, совершив успешную проверку Интеллекта (Анализ) против Сл ваших заклинаний. Если существо распознаёт иллюзию, оно может видеть сквозь неё." + ] + } + ] +} diff --git a/index.css b/index.css index 8b32243..2a42482 100644 --- a/index.css +++ b/index.css @@ -1,36 +1,68 @@ +:root { + --colorscheme-fighter: #9E3A2F; + --colorscheme-barbarian: #905945; + --colorscheme-wizard: #4265B8; + --colorscheme-bard: #B15063; + --colorscheme-paladin: #94C6E3; + --colorscheme-cleric: #ECCE65; + --colorscheme-warlock: #8576C2; + --colorscheme-druid: #5FB375; + --colorscheme-sorcerer: #8D578E; + --colorscheme-rouge: #525247; + --colorscheme-ranger: #66B99E; + --colorscheme-monk: #AB8C4E; + --colorscheme-focus: #B85812; + + --font-size: 18px; +} + * { margin: 0px; padding: 0px; font-family: "Brygada 1918", serif; } +.row { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 10px; +} + .card { padding: -5px; height: calc(160px * 4); width: calc(110px * 4); border: 5px solid black; - border-radius: 25px; + border-radius: 30px; display: flex; - background-image: url("bg.jpg"); + background-image: url("cardFace.png"); + background-size: cover; +} + +.in-box { + background-image: url("Components/textbox.svg"); + background-size: cover; + background-repeat: no-repeat; + background-size: 100%; } .side-panel { height: calc(160px * 4); - width: calc(160px * 4 * 0.1); + width: calc(160px * 4 * 0.1 - 23px + 10px); background-color: balck; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .level { - width: calc(160px * 4 * 0.1); - height: calc(160px * 4 * 0.1); + width: calc(180px * 4 * 0.1); + height: calc(180px * 4 * 0.1); background-image: url("bg.jpg"); + background-repeat: no-repeat; + background-size: calc(180px * 4 * 0.1); border-top-left-radius: 20px; - border-right: 5px solid; - border-bottom: 5px solid; - border-color: black; - border-bottom-right-radius: calc((160px * 4 * 0.1) / 2); + background-image: url("Components/corner_v2.svg"); padding: 0px; margin: 0px; text-align: center; @@ -50,22 +82,77 @@ .contents { padding: 10px; - width: calc(160px * 4 * 0.9 - 20px - 10px); - width: calc(110px * 4); + max-width: calc(160px * 4 * 0.9 - 20px - 20px); + display: flex; + flex-direction: column; } -.description > p { - font-size: 14px; +.class-name { + margin: 5px; + margin-left: 10px; + padding: 2px; + padding-left: 10px; + width: calc(160px * 4 * 0.9 - 30px - 220px); + line-height: 70px; } -.card.bard { - border-color: #c1121f; +.class-icon { + height: 50%; + justify-self: center; + background-size: cover; +} + +.spell-name { + margin: 5px; + padding: 10px; + width: calc(160px * 4 * 0.9 - 30px - 220px); + margin-bottom: 0px; + +} + +.stats { + align-self: center; + border-top: none; + justify-self: center; + padding: 3%; + width: calc((160px * 4 * 0.9 - 30px - 200px) * 0.86); + + display: flex; + flex-direction: row; + justify-content: flex-start; + gap: 10px; + list-style: none; + + flex-wrap: wrap; +} + +.description { + overflow: hidden; } -.card.bard > .side-panel { - background-color: #e63946CC; +li { + font-weight: bold; +} + +.contents > p { + font-size: var(--font-size); } .card.bard > .side-panel > .level { border-color: #c1121f; } + +.separator { + background-image: url("Components/separation.svg"); + background-repeat: no-repeat; + background-size: cover; + margin-top: calc(180px * 4 * 0.1 - 6px); + height: calc(160px * 4 - 180px * 4 * 0.1 + 10px); + min-width: 10; +} + +.back { + background-image: url("cardBack.png"); + display: flex; + flex-wrap: wrap; +} diff --git a/index.html b/index.html index c7f959c..1073865 100644 --- a/index.html +++ b/index.html @@ -2,43 +2,53 @@ + -
-
-

XIIX

-
-

Иллюзия

+ + +
+
+
+

1

+
+

Иллюзия

+
-
-
-

Безмолвный образ

-
+
+
+

+ Бард +

+ +

+ Безмолвный образ +

+
    +
  • +
  • 1 действие
  • +
  • +
  • 60 футов
  • +
  • +
  • В, С, М (кусок овечьей шерсти)
  • +
  • +
  • Концентрация, до 10 минут
  • +
  • +
-
-

- Вы создаёте образ предмета, существа или другого - видимого явления, помещающийся в объёме в куб - с длиной ребра 15 футов. Образ появляется в - точке, которую вы видите в пределах дистанции, - и существует, пока активно заклинание. Это исключительно зрительная иллюзия, не сопровождаемая звуками, запахами и прочими сенсорными эффектами. -

-

- Вы можете действием заставить образ переместиться в любое место в пределах дистанции. - Пока образ меняет местоположение, вы можете - изменять его внешность, чтобы перемещение выглядело естественным. Например, если вы создаёте - образ существа и перемещаете его, вы можете изменить образ, чтобы казалось, что оно идёт. -

-

- Физическое взаимодействие с образом даёт - понять, что это иллюзия, потому что сквозь него - всё проходит. Существа, исследующие образ действием, могут определить, что это иллюзия, совершив успешную проверку Интеллекта (Анализ) против Сл ваших заклинаний. Если существо распознаёт иллюзию, оно может видеть сквозь неё. -

+
+ +
+
+

Вы создаёте образ предмета, существа или другого видимого явления, помещающийся в объёме в куб с длиной ребра 15 футов. Образ появляется в точке, которую вы видите в пределах дистанции, и существует, пока активно заклинание. Это исключительно зрительная иллюзия, не сопровождаемая звуками, запахами и прочими сенсорными эффектами.

+

Вы можете действием заставить образ переместиться в любое место в пределах дистанции. Пока образ меняет местоположение, вы можете изменять его внешность, чтобы перемещение выглядело естественным. Например, если вы создаёте образ существа и перемещаете его, вы можете изменить образ, чтобы казалось, что оно идёт.

+

Физическое взаимодействие с образом даёт понять, что это иллюзия, потому что сквозь него всё проходит. Существа, исследующие образ действием, могут определить, что это иллюзия, совершив успешную проверку Интеллекта (Анализ) против Сл ваших заклинаний. Если существо распознаёт иллюзию, оно может видеть сквозь неё.

+
diff --git a/index.js b/index.js new file mode 100644 index 0000000..25c4313 --- /dev/null +++ b/index.js @@ -0,0 +1,23 @@ +function LoadData(data) { + const objects = JSON.parse(data).cards; + for (i of objects) { + console.log(i); + } +} + +function acceptFile() { + const inp = document.getElementById("inp"); + console.log(inp.files[0]); + readFileContent(inp.files[0]).then(content => { + LoadData(content); + }); +} + +function readFileContent(file) { + const reader = new FileReader() + return new Promise((resolve, reject) => { + reader.onload = event => resolve(event.target.result) + reader.onerror = error => reject(error) + reader.readAsText(file) + }) +} -- cgit v1.3