Маришка - Кристоф
Любляна - Арман
Анджей
Михаэль
[html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Code Generator</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
padding: 20px;
box-sizing: border-box;
}
.form-container {
width: 100%;
max-width: 600px;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.form-section {
margin-bottom: 20px;
}
.form-section label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
.form-section input, .form-section textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
box-sizing: border-box;
}
.output-container {
margin-top: 20px;
}
.output-container textarea {
width: 100%;
height: 300px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="form-container">
<form id="generatorForm">
<div class="form-section">
<label for="avatar-url">Avatar URL</label>
<input type="url" id="avatar-url" name="avatar-url" placeholder="https://example.com/avatar.jpg" required>
</div>
<div class="form-section">
<label for="character-name">Имя и фамилия</label>
<input type="text" id="character-name" name="character-name" required>
</div>
<div class="form-section">
<label for="age">Возраст</label>
<input type="text" id="age" name="age" required>
</div>
<div class="form-section">
<label for="biography">История</label>
<textarea id="biography" name="biography" rows="4" required></textarea>
</div>
<div class="form-section">
<label for="appearance">Способности </label>
<textarea id="appearance" name="appearance" rows="2" required></textarea>
</div>
</div>
<button type="button" onclick="generateHTML()">Generate HTML</button>
</form>
<div class="output-container">
<label for="output">Generated HTML Code</label>
<textarea id="output" readonly></textarea>
</div>
</div>
<script>
function generateHTML() {
const avatarUrl = document.getElementById('avatar-url').value;
const characterName = document.getElementById('character-name').value;
const age = document.getElementById('age').value;
const gender = document.getElementById('gender').value;
const biography = document.getElementById('biography').value;
const appearance = document.getElementById('appearance').value;
const abilities = document.getElementById('abilities').value;
const htmlCode = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Character Profile</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
}
.profile-container {
width: 600px;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
font-family: 'Arial', sans-serif;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
.profile-header {
text-align: center;
margin-bottom: 20px;
width: 100%;
}
.profile-header h2 {
margin: 0;
font-size: 28px;
color: #555;
}
.profile-section {
margin-bottom: 15px;
width: 100%;
}
.profile-section label {
font-weight: bold;
display: block;
margin-bottom: 5px;
color: #777;
}
.profile-section p {
margin: 0;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
}
.profile-section img {
max-width: 100%;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.decorative-element {
width: 100%;
height: 2px;
background-color: #ddd;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="profile-container">
<div class="profile-header">
<img src="${avatarUrl}" alt="Character Avatar">
<h2>Character Profile</h2>
</div>
<div class="profile-section">
<label>Character Name</label>
<p>${characterName}</p>
</div>
<div class="profile-section">
<label>Age</label>
<p>${age}</p>
</div>
<div class="profile-section">
<label>Gender</label>
<p>${gender}</p>
</div>
<div class="decorative-element"></div>
<div class="profile-section">
<label>Biography</label>
<p>${biography}</p>
</div>
<div class="decorative-element"></div>
<div class="profile-section">
<label>Appearance</label>
<p>${appearance}</p>
</div>
<div class="decorative-element"></div>
<div class="profile-section">
<label>Abilities</label>
<p>${abilities}</p>
</div>
</div>
</body>
</html>`;
document.getElementById('output').value = htmlCode.trim();
}
</script>
</body>
</html>
[/html]
