128 lines
7.5 KiB
HTML
128 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||
crossorigin="anonymous"></script>
|
||
<script src="src/custom_block.js"></script>
|
||
<script src="src/ui.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="row">
|
||
<h1>hello</h1>
|
||
<h2>world</h2>
|
||
<div class="svg_block">
|
||
<div class="title_block">
|
||
Заголовок блока
|
||
</div>
|
||
<div class="up_text_block">
|
||
Как я уже сказал, взаимодействие игрока происходит через устройства ввода и пользовательский интерфейс, который представляет из себя обычные React компоненты.
|
||
</div>
|
||
<div class="down_text_block">
|
||
Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю.
|
||
</div>
|
||
</div>
|
||
<!-- <svg id="svg_block" height="400" width="900" xmlns="http://www.w3.org/2000/svg">-->
|
||
<!-- <path id="main" d="M 10 120 l 0 100 q 0 20 20 20 l 700 0 q 20 0 20 -20 l 0 -80 q 0 -20 20 -20 l 80 0 q 20 0 20 -20 l 0 -50 q 0 -20 -20 -20 l -500 0 q -20 0 -20 20 l 0 30 q 0 20 -20 20 l -280 0 q -20 0 -20 20" stroke="MistyRose" stroke-width="3" fill="MintCream"/>-->
|
||
<!-- <text x="330" y="40" >-->
|
||
<!-- <tspan x="340" dy="1em" fill="red">-->
|
||
<!-- Съешь еще этих мягких французских булок, да выпей чаю.-->
|
||
<!-- </tspan>-->
|
||
<!-- <tspan x="340" dy="1em" fill="blue">-->
|
||
<!-- Съешь еще этих мягких французских булок, да выпей чаю.-->
|
||
<!-- </tspan>-->
|
||
<!-- <tspan x="340" dy="1em" fill="green">-->
|
||
<!-- Съешь еще этих мягких французских булок, да выпей чаю.-->
|
||
<!-- </tspan>-->
|
||
<!-- </text>-->
|
||
<!-- </svg>-->
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-3">
|
||
<label for="title_text" class="form-label">Заголовок</label>
|
||
<div class="input-group mb-3">
|
||
<input id="title_text" name="title_text" type="text" class="form-control svg_info"
|
||
placeholder="Заголовок" value="Заголовок блока">
|
||
</div>
|
||
<label for="up_text" class="form-label">Верхний текст</label>
|
||
<div class="input-group mb-3">
|
||
<textarea id="up_text" name="up_text" class="form-control svg_info"></textarea>
|
||
</div>
|
||
<label for="down_text" class="form-label">Нижний текст</label>
|
||
<div class="input-group mb-3">
|
||
<textarea id="down_text" name="down_text" class="form-control svg_info"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="col-3">
|
||
<div class="mb-3">
|
||
<label for="title_font_size" class="form-label">Размер текста заголовка</label>
|
||
<input type="range" name="title_font_size" class="form-range range_to_info svg_info" min="10" max="50"
|
||
step="1" id="title_font_size">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="block_font_size" class="form-label">Размер текста блоке</label>
|
||
<input type="range" name="block_font_size" class="form-range range_to_info svg_info" min="10" max="30"
|
||
step="1" id="block_font_size">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="border_radius" class="form-label">Border radius</label>
|
||
<input type="range" class="form-range range_to_info svg_info" min="1" max="30" step="1"
|
||
id="border_radius">
|
||
</div>
|
||
</div>
|
||
<div class="col-3">
|
||
<label for="border_color" class="form-label">Border color</label>
|
||
<div class="input-group mb-3">
|
||
<input type="color" name="border_color" class="form-control svg_info" value="#FFE4E1" id="border_color">
|
||
</div>
|
||
<label for="background_color" class="form-label">Background color</label>
|
||
<div class="input-group mb-3">
|
||
<input type="color" name="background_color" class="form-control svg_info" value="#F5FFFA"
|
||
id="background_color">
|
||
</div>
|
||
<label for="left_up_rect_w" class="form-label">Ширина пространства с лева вверху</label>
|
||
<div class="input-group mb-3">
|
||
<input id="left_up_rect_w" name="left_up_rect_w" type="number" class="form-control svg_info">
|
||
</div>
|
||
<label for="left_up_rect_h" class="form-label">Высота пространства с лева вверху</label>
|
||
<div class="input-group mb-3">
|
||
<input id="left_up_rect_h" name="left_up_rect_h" type="number" class="form-control svg_info">
|
||
</div>
|
||
</div>
|
||
<div class="col-3">
|
||
<label for="right_down_rect_w" class="form-label">Ширина пространства с права внизу</label>
|
||
<div class="input-group mb-3">
|
||
<input id="right_down_rect_w" name="right_down_rect_w" type="number" class="form-control svg_info">
|
||
</div>
|
||
<label for="right_down_rect_h" class="form-label">Высота пространства с права внизу</label>
|
||
<div class="input-group mb-3">
|
||
<input id="right_down_rect_h" name="right_down_rect_h" type="number" class="form-control svg_info">
|
||
</div>
|
||
<div>
|
||
<input id="gen" type="button" class="btn btn-primary" value="Создать">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<script>
|
||
window.addEventListener("load", function () {
|
||
cb(".svg_block", {});
|
||
let btn_gen = document.getElementById("gen");
|
||
btn_gen.addEventListener("click", function () {
|
||
let inputs = document.querySelectorAll(".svg_info");
|
||
let data = {};
|
||
inputs.forEach((item) => {
|
||
data[item.id] = item.value
|
||
});
|
||
cb(".svg_block", data);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |