Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VLAD-ARCHITECT: REALITY OS</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>VLAD-ARCHITECT: REALITY OS</h1> | |
| <p>Персонализированная RPG-система для управления реальностью</p> | |
| </header> | |
| <main> | |
| <!-- Дашборд --> | |
| <section class="dashboard"> | |
| <h2>📊 Дашборд</h2> | |
| <!-- Характеристики --> | |
| <div class="characteristics"> | |
| <h3>Характеристики</h3> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <span class="stat-name">💪 Сила воли (SW)</span> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 45%"></div> | |
| </div> | |
| <span class="stat-value">450/1000</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-name">🔋 Энергия (HP)</span> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 75%"></div> | |
| </div> | |
| <span class="stat-value">750/1000</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-name">🎯 Дисциплина (DISC)</span> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 60%"></div> | |
| </div> | |
| <span class="stat-value">600/1000</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-name">💰 Финансовая грамотность (FG)</span> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 35%"></div> | |
| </div> | |
| <span class="stat-value">350/1000</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-name">⚙️ Техническая экспертиза (TECH)</span> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 55%"></div> | |
| </div> | |
| <span class="stat-value">550/1000</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-name">📊 Системное мышление (SYS)</span> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 50%"></div> | |
| </div> | |
| <span class="stat-value">500/1000</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-name">👥 Лидерство (LDR)</span> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 25%"></div> | |
| </div> | |
| <span class="stat-value">250/1000</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-name">🛡️ Стрессоустойчивость (STR)</span> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 40%"></div> | |
| </div> | |
| <span class="stat-value">400/1000</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Прогресс к цели --> | |
| <div class="financial-goal"> | |
| <h3>Прогресс к 1,000,000 ₽</h3> | |
| <div class="progress-bar large"> | |
| <div class="progress-fill" style="width: 0.47%"></div> | |
| </div> | |
| <div class="financial-stats"> | |
| <span>Текущий портфель: 4,726 ₽</span> | |
| <span>Цель: 1,000,000 ₽</span> | |
| </div> | |
| </div> | |
| <!-- Активные уровни --> | |
| <div class="active-levels"> | |
| <h3>Активные уровни</h3> | |
| <div class="levels-grid"> | |
| <div class="level-card"> | |
| <h4>Инженерная ветка</h4> | |
| <p>Уровень 4: Бригадир монтажников</p> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 65%"></div> | |
| </div> | |
| <span>650,000/1,000,000 EXP</span> | |
| </div> | |
| <div class="level-card"> | |
| <h4>Инвесторская ветка</h4> | |
| <p>Уровень 1: Финансовый новичок</p> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 3%"></div> | |
| </div> | |
| <span>4,726/150,000 EXP</span> | |
| </div> | |
| <div class="level-card"> | |
| <h4>Личностная ветка</h4> | |
| <p>Уровень 2: Самопознающий</p> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 45%"></div> | |
| </div> | |
| <span>112,500/250,000 EXP</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ближайшие цели --> | |
| <div class="upcoming-goals"> | |
| <h3>Ближайшие цели</h3> | |
| <ul> | |
| <li>📈 Повысить финансовую грамотность до 400</li> | |
| <li>💪 Достичь 500 силы воли</li> | |
| <li>💰 Инвестировать 100,000 ₽ в ВДО</li> | |
| <li>⚙️ Пройти курс по системному мышлению</li> | |
| </ul> | |
| </div> | |
| </section> | |
| <!-- Быстрый ввод данных --> | |
| <section class="quick-input"> | |
| <h2>🎯 Быстрый ввод данных</h2> | |
| <div class="input-grid"> | |
| <button class="action-btn">💼 Работа</button> | |
| <button class="action-btn">💰 Инвестиции</button> | |
| <button class="action-btn">🧘 Тренировка</button> | |
| <button class="action-btn">📚 Обучение</button> | |
| <button class="action-btn">📝 Медитация</button> | |
| <button class="action-btn">🏖️ Отдых</button> | |
| </div> | |
| <form class="manual-input"> | |
| <h3>Ручной ввод показателей</h3> | |
| <div class="form-group"> | |
| <label for="activity-type">Тип активности:</label> | |
| <select id="activity-type"> | |
| <option value="career">Карьера</option> | |
| <option value="finance">Финансы</option> | |
| <option value="personal">Личное развитие</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="activity-description">Описание:</label> | |
| <input type="text" id="activity-description" placeholder="Что было сделано?"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exp-amount">Количество EXP:</label> | |
| <input type="number" id="exp-amount" placeholder="Сколько EXP получено?"> | |
| </div> | |
| <button type="submit" class="submit-btn">Добавить</button> | |
| </form> | |
| </section> | |
| <!-- Детализированные отчеты --> | |
| <section class="detailed-reports"> | |
| <h2>📈 Детализированные отчеты</h2> | |
| <div class="report-tabs"> | |
| <button class="tab-btn active">Ежедневно</button> | |
| <button class="tab-btn">Еженедельно</button> | |
| <button class="tab-btn">Ежемесячно</button> | |
| <button class="tab-btn">Годовые цели</button> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="progressChart"></canvas> | |
| </div> | |
| <div class="report-content"> | |
| <h3>Ежедневная статистика</h3> | |
| <ul> | |
| <li>💼 Работа: 8 часов</li> | |
| <li>💰 Инвестиции: 30 минут</li> | |
| <li>🧘 Тренировка: 1 час</li> | |
| <li>📚 Обучение: 2 часа</li> | |
| </ul> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>VLAD-ARCHITECT: REALITY OS v1.0 | Московское время (MSK)</p> | |
| <div class="footer-actions"> | |
| <button class="footer-btn">💾 Сохранить</button> | |
| <button class="footer-btn">📤 Экспорт данных</button> | |
| <button class="footer-btn">📥 Импорт данных</button> | |
| </div> | |
| </footer> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |