.

Нефритовая пыль

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Нефритовая пыль » Регистрация » Шаблон анкеты

Шаблон анкеты

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: Dust
  • Администратор
  • Dust
  • Сообщений: 114
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    2 дня 6 часов
  • Последний визит:
    2025-09-09 23:03:55

[html]<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.1.2/css/pro.min.css">
<div class="guest-template-container">
<div class="guest-header">
    <h1>Шаблон анкеты</h1>
<p></p>
<p>★ Подавая анкету, вы подтверждаете, что вам уже есть 18 лет.</p>
<p>★ Анкета создается новой темой в разделе Регистрация. </p>
<p>★ В дальнейшем вы можете вести ее как личную тему с персональной хронологией, отношениями и т.д.</p>
<p>★ Заголовок анкеты - имя и фамилия на английском, возраст. Сгенерированный код выставляйте в теги [*html][*/html] (без звездочек).</p>[/html]

0

2

  • Автор: Dust
  • Администратор
  • Dust
  • Сообщений: 114
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    2 дня 6 часов
  • Последний визит:
    2025-09-09 23:03:55

[html]<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Yeseva+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.1.2/css/pro.min.css">
<style>
    .form-container {
        font-family: 'Roboto', sans-serif;
        max-width: 600px;
        margin: 10px auto;
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background-color: #f8f8f8;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    .form-group {
        margin-bottom: 12px;
    }
    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 700;
        color: #555;
        font-size: 13px;
    }
    .form-group input[type="text"], .form-group textarea, .form-group select, .form-group input[type="number"] {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #fff;
        font-size: 13px;
        box-sizing: border-box;
    }
    .form-group textarea {
        height: 60px;
        resize: vertical;
    }
    .image-inputs {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
    }
    .image-inputs input {
        flex: 1;
        font-size: 12px;
    }
    .short-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .gang-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 5px;
    }
    .gang-option {
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        padding: 5px;
        border: 1px solid transparent;
        border-radius: 4px;
        transition: border-color 0.2s;
    }
    .gang-option:hover {
        border-color: #756983;
    }
    .gang-option input[type="radio"] {
        width: auto;
        margin: 0;
        cursor: pointer;
    }
    .gang-option img {
        width: 25px;
        height: 25px;
        object-fit: cover;
        border-radius: 4px;
    }
    .result-area {
        margin-top: 20px;
        border-top: 1px solid #e0e0e0;
        padding-top: 20px;
    }
    .result-area h3 {
        font-family: 'Yeseva One', serif;
        text-align: center;
        color: #756983;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .result-area textarea {
        width: 100%;
        height: 150px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
        resize: vertical;
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px;
        background-color: #f1f1f1;
        box-sizing: border-box;
    }
    .copy-button {
        display: block;
        width: 100%;
        padding: 10px;
        margin-top: 10px;
        font-size: 13px;
        font-weight: 500;
        color: #fff;
        background-color: #756983;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .copy-button:hover {
        background-color: #5d5367;
    }

    /* Styles for the final profile template */
    .guest-template-container {
        font-family: 'Roboto', sans-serif;
        max-width: 600px;
        margin: 10px auto;
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background-color: #f8f8f8;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    .guest-header {
        text-align: center;
        margin-bottom: 15px;
    }
    .profile-section h3 {
        color: #756983;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 700;
    }
    .profile-content {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fff;
        font-size: 12px;
    }
    .gang-icon-final {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-left: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    /* Hide number input spinners for all browsers */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance: textfield;
    }
</style>

<div class="form-container">
    <h2 style="font-family: 'Yeseva One', serif; text-align: center; color: #756983; font-size: 20px;">Генератор анкеты</h2>
   
    <div class="form-group">
        <label>URL изображений (180x180):</label>
        <div class="image-inputs">
            <input type="text" id="img1-url" oninput="updateOutput()" placeholder="URL 1">
            <input type="text" id="img2-url" oninput="updateOutput()" placeholder="URL 2">
            <input type="text" id="img3-url" oninput="updateOutput()" placeholder="URL 3">
        </div>
    </div>

    <div class="form-group">
        <label for="char-name">Имя и Фамилия:</label>
        <input type="text" id="char-name" oninput="updateOutput()" placeholder="Имя и Фамилия">
    </div>
   
    <div class="form-group">
        <label for="char-alias">Крылатая фраза, цитата, девиз:</label>
        <input type="text" id="char-alias" oninput="updateOutput()" placeholder="Например: 'Никогда не сдавайся'">
    </div>

    <hr style="border: none; border-top: 1px solid #ccc; margin: 12px 0;">

    <div class="short-fields">
        <div class="form-group">
            <label for="char-age">Возраст (от 18 лет):</label>
            <input type="number" id="char-age" oninput="updateOutput()" onblur="validateAge()" min="18" placeholder="Напишите возраст">
        </div>
        <div class="form-group">
            <label for="char-occupation">Род занятий:</label>
            <input type="text" id="char-occupation" oninput="updateOutput()" placeholder="Факультет и курс, или профессия">
        </div>
    </div>

    <div class="form-group">
        <label>Банда:</label>
        <div class="gang-options" onchange="updateOutput()">
            <div class="gang-option">
                <input type="radio" id="gang-1" name="gang-name" value="Шорохи">
                <img src="https://i.imgur.com/P7iwLIO.png" alt="Шорохи">
                <label for="gang-1">Шорохи</label>
            </div>
            <div class="gang-option">
                <input type="radio" id="gang-2" name="gang-name" value="Гвозди">
                <img src="https://i.imgur.com/ltGZmZM.png" alt="Гвозди">
                <label for="gang-2">Гвозди</label>
            </div>
            <div class="gang-option">
                <input type="radio" id="gang-3" name="gang-name" value="Спички">
                <img src="https://i.imgur.com/L4SBVW2.png" alt="Спички">
                <label for="gang-3">Спички</label>
            </div>
            <div class="gang-option">
                <input type="radio" id="gang-4" name="gang-name" value="Две луны">
                <img src="https://i.imgur.com/WPYoXNY.png" alt="Две луны">
                <label for="gang-4">Две луны</label>
            </div>
            <div class="gang-option">
                <input type="radio" id="gang-5" name="gang-name" value="Не является членом банды" checked>
                <label for="gang-5">Не является членом банды</label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="char-gang-role">Роль в банде:</label>
        <input type="text" id="char-gang-role" oninput="updateOutput()" placeholder="Лидер, член, новичок и т.д.">
    </div>

    <hr style="border: none; border-top: 1px solid #ccc; margin: 12px 0;">

    <div class="form-group">
        <label for="char-looks">Внешность:</label>
        <textarea id="char-looks" oninput="updateOutput()" placeholder="Описание внешности"></textarea>
    </div>

    <div class="form-group">
        <label for="char-bio">Биография:</label>
        <textarea id="char-bio" oninput="updateOutput()" placeholder="История персонажа"></textarea>
    </div>

    <div class="form-group">
        <label for="char-traits">Характер и умения:</label>
        <textarea id="char-traits" oninput="updateOutput()" placeholder="Характер, привычки, способности"></textarea>
    </div>

    <div class="result-area">
        <h3>Готовый HTML-код анкеты</h3>
        <textarea id="output-code" readonly></textarea>
        <button class="copy-button" onclick="copyCode()">Скопировать код</button>
    </div>
</div>

<script>
    const gangsData = {
        'Шорохи': 'https://i.imgur.com/P7iwLIO.png',
        'Гвозди': 'https://i.imgur.com/ltGZmZM.png',
        'Спички': 'https://i.imgur.com/L4SBVW2.png',
        'Две луны': 'https://i.imgur.com/WPYoXNY.png',
        'Не является членом банды': ''
    };

    function validateAge() {
        const ageInput = document.getElementById('char-age');
        let age = parseInt(ageInput.value);
        if (age < 18) {
            ageInput.value = 18;
        }
    }

    function updateOutput() {
        const img1Url = document.getElementById('img1-url').value;
        const img2Url = document.getElementById('img2-url').value;
        const img3Url = document.getElementById('img3-url').value;
        const charName = document.getElementById('char-name').value;
        const charAlias = document.getElementById('char-alias').value;
        const charAge = document.getElementById('char-age').value;
        const charOccupation = document.getElementById('char-occupation').value;
       
        const selectedGangName = document.querySelector('input[name="gang-name"]:checked').value;
        const selectedGangIcon = gangsData[selectedGangName];
        const charGangRoleInput = document.getElementById('char-gang-role');
       
        if (selectedGangName === 'Не является членом банды') {
            charGangRoleInput.value = '—';
            charGangRoleInput.readOnly = true;
        } else {
            if (charGangRoleInput.readOnly) {
                charGangRoleInput.value = '';
            }
            charGangRoleInput.readOnly = false;
        }
        const charGangRole = charGangRoleInput.value;
       
        const charLooks = document.getElementById('char-looks').value.replace(/\n/g, '<br>');
        const charBio = document.getElementById('char-bio').value.replace(/\n/g, '<br>');
        const charTraits = document.getElementById('char-traits').value.replace(/\n/g, '<br>');

        let imgHtml = '';
        if (img1Url || img2Url || img3Url) {
            imgHtml = `
            <div style="display: flex; justify-content: center; gap: 8px; margin-bottom: 8px;">
                ${img1Url ? `<img src="${img1Url}" alt="Изображение 1" style="width: 180px; height: 180px; object-fit: cover; border-radius: 6px; border: 2px solid #ddd;">` : ''}
                ${img2Url ? `<img src="${img2Url}" alt="Изображение 2" style="width: 180px; height: 180px; object-fit: cover; border-radius: 6px; border: 2px solid #ddd;">` : ''}
                ${img3Url ? `<img src="${img3Url}" alt="Изображение 3" style="width: 180px; height: 180px; object-fit: cover; border-radius: 6px; border: 2px solid #ddd;">` : ''}
            </div>`;
        }

        let nameAndIconHtml = charName ? charName.toUpperCase() : 'ИМЯ И ФАМИЛИЯ ПЕРСОНАЖА';
        if (selectedGangName !== 'Не является членом банды' && selectedGangIcon) {
            nameAndIconHtml += ` <img src="${selectedGangIcon}" alt="${selectedGangName}" class="gang-icon-final">`;
        }
       
        const generatedCode = `
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.1.2/css/pro.min.css">
<style>
    .guest-template-container {
        font-family: 'Roboto', sans-serif;
        max-width: 600px;
        margin: 10px auto;
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background-color: #f8f8f8;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    .guest-header {
        text-align: center;
        margin-bottom: 15px;
    }
    .profile-section h3 {
        color: #756983;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 700;
    }
    .profile-content {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fff;
        font-size: 12px;
    }
    .gang-icon-final {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-left: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
</style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Yeseva+One&display=swap" rel="stylesheet">

<div class="guest-template-container">
<div class="guest-header">
    ${imgHtml}
    <h2 style="font-family: 'Yeseva One', serif; font-size: 20px; color: #756983; margin: 0;">${nameAndIconHtml}</h2>
    <p style="font-size: 13px; color: #888; margin: 3px 0 0 0; font-style: italic;">«${charAlias || 'Крылатая фраза, цитата, девиз'}»</p>
</div>

<hr style="border: none; border-top: 1px solid #ccc; margin: 12px 0;">

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; text-align: left;">
    <div>
        <p style="margin: 0 0 3px 0; font-size: 13px;"><strong style="color: #756983;">Возраст:</strong> ${charAge || '(текст)'}</p>
        <p style="margin: 0 0 3px 0; font-size: 13px;"><strong style="color: #756983;">Род занятий:</strong> ${charOccupation || '(факультет и курс для студентов, профессия для взрослых)'}</p>
    </div>
    <div>
        <p style="margin: 0 0 3px 0; font-size: 13px;"><strong style="color: #756983;">Банда:</strong> ${selectedGangName || '(название банды)'}</p>
        <p style="margin: 0 0 3px 0; font-size: 13px;"><strong style="color: #756983;">Роль:</strong> ${charGangRole || '(текст)'}</p>
    </div>
</div>

<hr style="border: none; border-top: 1px solid #ccc; margin: 12px 0;">

<div style="margin-bottom: 12px;" class="profile-section">
    <h3>Внешность</h3>
    <div class="profile-content">
        ${charLooks || '(Подробно опишите, как выглядит персонаж: черты лица, телосложение, стиль одежды и другие детали.)'}
    </div>
</div>

<div style="margin-bottom: 12px;" class="profile-section">
    <h3>Биография</h3>
    <div class="profile-content">
        ${charBio || '(Напишите подробную историю вашего персонажа, как он поступил в академию и что привело его сюда.)'}
    </div>
</div>

<div class="profile-section">
    <h3>Характер и умения</h3>
    <div class="profile-content">
        ${charTraits || '(Характер, привычки, сильные и слабые стороны. Какие у него особенности или способности, приобретенные во время обучения?)'}
    </div>
</div>
</div>
</div>
        `.trim();

        document.getElementById('output-code').value = generatedCode;
    }

    function copyCode() {
        const outputCode = document.getElementById('output-code');
        outputCode.select();
        document.execCommand('copy');
        alert('HTML-код скопирован!');
    }

    document.addEventListener('DOMContentLoaded', updateOutput);
</script>
[/html]

0

Страница: 1

Вы здесь » Нефритовая пыль » Регистрация » Шаблон анкеты

Рейтинг форумов | Создать форум бесплатно