Harmony - Гид по здоровым отношениям и романтике
About this app
Приложение для укрепления отношений, поиска идей для свиданий и изучения языков любви.
Harmony - Гид по здоровым отношениям и романтике Harmony Инструменты для вашей близости Генератор Свиданий Не знаете, чем заняться? Мы подберем идеальный вариант для вас двоих. Нажмите кнопку, чтобы получить идею! Новая идея Совет дня Активное слушание Когда партнер говорит, не готовьте ответ. Просто слушайте и пытайтесь понять чувства. Другой совет Тест: Язык Любви Узнайте, что действительно важно для вас в отношениях. Основы гармонии 1. Честность Умение говорить о своих страхах и желаниях без страха осуждения — фундамент крепкой связи. 2. Границы Важно помнить, что в отношениях участвуют две личности. Уважайте личное время и пространство партнера. 3. Бла�...
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
LoopTube 2016 - Infinite Video Looper & Repeater
VoxTransform - 50+ Pro Video Voice Effects
TinyTip | Simple Tip Calculator & Bill Splitter
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Source
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Harmony - Гид по здоровым отношениям и романтике</title>
<meta name="description" content="Приложение для укрепления отношений, поиска идей для свиданий и изучения языков любви.">
<meta name="keywords" content="отношения, романтика, свидания, психология, любовь, идеи для пар, гармония">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" crossorigin="anonymous">
<style>
/* Mobile-first base */
*, *::before, *::after { box-sizing: border-box; }
:root {
--primary-color: #ff4d6d;
--secondary-color: #ff85a1;
--accent-color: #800f2f;
--bg-gradient: linear-gradient(135deg, #fff0f3 0%, #ffccd5 100%);
--text-dark: #333;
--white: #ffffff;
}
body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
background: var(--bg-gradient);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
}
#main-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
min-height: 100dvh;
padding: 1rem;
padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}
.app-header {
text-align: center;
padding: 2rem 0;
animation: fadeIn 1s ease-in;
}
.app-header h1 {
font-weight: 800;
color: var(--accent-color);
margin-bottom: 0.5rem;
}
.card {
border: none;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
margin-bottom: 1.5rem;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
transition: transform 0.3s ease;
}
.card:active {
transform: scale(0.98);
}
.card-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.nav-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--white);
display: flex;
justify-content: space-around;
padding: 0.8rem 0;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 1000;
padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
}
.nav-item {
text-align: center;
color: #888;
cursor: pointer;
transition: color 0.3s ease;
font-size: 0.8rem;
}
.nav-item.active {
color: var(--primary-color);
}
.nav-item i {
font-size: 1.4rem;
display: block;
margin-bottom: 2px;
}
.section {
display: none;
}
.section.active {
display: block;
animation: slideIn 0.4s ease-out;
}
@keyframes slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.btn-harmony {
background-color: var(--primary-color);
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
font-weight: 600;
width: 100%;
transition: all 0.3s ease;
margin-top: 10px;
}
.btn-harmony:hover {
background-color: var(--accent-color);
color: white;
}
.idea-box {
padding: 20px;
background: var(--primary-color);
color: white;
border-radius: 15px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-style: italic;
font-size: 1.1rem;
margin: 15px 0;
}
.progress-bar-custom {
height: 10px;
background: #eee;
border-radius: 5px;
margin: 20px 0;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--primary-color);
width: 0%;
transition: width 0.5s ease;
}
.quiz-question {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.option-btn {
width: 100%;
text-align: left;
padding: 12px 20px;
margin-bottom: 10px;
border: 2px solid #eee;
background: white;
border-radius: 10px;
transition: all 0.2s;
}
.option-btn:hover {
border-color: var(--secondary-color);
}
.option-btn.selected {
border-color: var(--primary-color);
background: #fff0f3;
}
.badge-custom {
background: var(--secondary-color);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
margin-right: 5px;
}
.heart-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
.floating-heart {
position: absolute;
color: var(--primary-color);
opacity: 0.2;
animation: float 10s infinite linear;
}
@keyframes float {
0% { transform: translateY(100vh) scale(1); opacity: 0; }
10% { opacity: 0.2; }
90% { opacity: 0.2; }
100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}
</style>
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
initApp();
createFloatingHearts();
});
const dateIdeas = [
"Пикник в ближайшем парке на закате",
"Совместное приготовление блюда, которое вы никогда не пробовали",
"Домашний вечер настольных игр и какао",
"Прогулка по ночному городу с аудиогидом по истории",
"Мастер-класс по рисованию вином или акрилом",
"Поход в антикафе или на квест в реальности",
"Киномарафон фильмов вашего детства",
"Совместная тренировка на свежем воздухе",
"Фотосессия 'друг для друга' на смартфон",
"Посещение приюта для животных и помощь волонтерам",
"Сборка сложного пазла на 1000 деталей",
"Вечер обмена плейлистами: включите музыку, которая важна для вас",
"Мини-путешествие в соседний город на электричке",
"Устройте вечер дегустации разных видов чая или кофе",
"Напишите друг другу письма 'в будущее' (через год)"
];
const wellnessTips = [
{ title: "Активное слушание", text: "Когда партнер говорит, не готовьте ответ. Просто слушайте и пытайтесь понять чувства." },
{ title: "Я-высказывания", text: "Вместо 'Ты меня злишь', попробуйте: 'Я чувствую раздражение, когда это происходит'." },
{ title: "Правило 5 к 1", text: "Для поддержания счастья на 1 негативное взаимодействие должно приходиться 5 позитивных." },
{ title: "Цифровой детокс", text: "Установите время вечером (например, после 21:00), когда вы оба убираете телефоны." },
{ title: "Мелкие знаки внимания", text: "Оставленная записка или внезапный комплимент значат больше, чем дорогие подарки раз в год." }
];
function initApp() {
// Navigation logic
$('.nav-item').on('click', function() {
const target = $(this).data('target');
$('.nav-item').removeClass('active');
$(this).addClass('active');
$('.section').removeClass('active');
$('#' + target).addClass('active');
});
// Date Generator logic
$('#generate-idea').on('click', function() {
const randomIdea = dateIdeas[Math.floor(Math.random() * dateIdeas.length)];
$('#idea-display').fadeOut(200, function() {
$(this).text(randomIdea).fadeIn(200);
});
});
// Quiz Logic
let currentQuestion = 0;
const quizQuestions = [
{ q: "Как вы лучше всего чувствуете любовь?", a: ["Слова поддержки", "Качественное время", "Подарки", "Помощь", "Прикосновения"] },
{ q: "Что вас больше всего расстраивает?", a: ["Критика", "Игнорирование", "Забытые даты", "Лень партнера", "Отсутствие близости"] },
{ q: "Идеальный вечер для вас - это...", a: ["Разговоры по душам", "Общее хобби", "Сюрприз", "Помощь по дому", "Объятия"] }
];
function renderQuiz() {
if (currentQuestion < quizQuestions.length) {
const qData = quizQuestions[currentQuestion];
$('#quiz-content').html(`
<div class="quiz-question">${qData.q}</div>
${qData.a.map(opt => `<button class="option-btn" onclick="nextQuizStep()">${opt}</button>`).join('')}
`);
const progress = ((currentQuestion) / quizQuestions.length) * 100;
$('.progress-fill').css('width', progress + '%');
} else {
$('.progress-fill').css('width', '100%');
$('#quiz-content').html(`
<div class="text-center">
<i class="fas fa-award card-icon"></i>
<h3>Ваш язык любви: Качественное время!</h3>
<p>Для вас важнее всего внимание и присутствие партнера в моменте.</p>
<button class="btn-harmony" onclick="resetQuiz()">Пройти еще раз</button>
</div>
`);
}
}
window.nextQuizStep = function() {
currentQuestion++;
renderQuiz();
};
window.resetQuiz = function() {
currentQuestion = 0;
renderQuiz();
};
renderQuiz();
// Tip logic
let currentTip = 0;
$('#next-tip').on('click', function() {
currentTip = (currentTip + 1) % wellnessTips.length;
$('#tip-title').text(wellnessTips[currentTip].title);
$('#tip-text').text(wellnessTips[currentTip].text);
});
}
function createFloatingHearts() {
const container = document.getElementById('heart-bg');
for (let i = 0; i < 15; i++) {
const heart = document.createElement('i');
heart.className = 'fas fa-heart floating-heart';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.animationDuration = (Math.random() * 5 + 5) + 's';
heart.style.animationDelay = (Math.random() * 5) + 's';
heart.style.fontSize = (Math.random() * 20 + 10) + 'px';
container.appendChild(heart);
}
}
} catch (error) {
console.error("Harmony App Error: ", error);
}
</script>
</head>
<body>
<div id="heart-bg" class="heart-bg"></div>
<div id="main-container">
<header class="app-header">
<h1><i class="fas fa-heart-pulse"></i> Harmony</h1>
<p class="text-muted">Инструменты для вашей близости</p>
</header>
<!-- Главная Секция -->
<main id="home" class="section active">
<div class="card p-4">
<div class="text-center">
<i class="fas fa-calendar-heart card-icon"></i>
<h3>Генератор Свиданий</h3>
<p>Не знаете, чем заняться? Мы подберем идеальный вариант для вас двоих.</p>
<div id="idea-display" class="idea-box">
Нажмите кнопку, чтобы получить идею!
</div>
<button id="generate-idea" class="btn-harmony">Новая идея</button>
</div>
</div>
<div class="card p-4">
<div class="d-flex align-items-center mb-3">
<div class="badge-custom">Совет дня</div>
</div>
<h5 id="tip-title">Активное слушание</h5>
<p id="tip-text" class="text-muted small">Когда партнер говорит, не готовьте ответ. Просто слушайте и пытайтесь понять чувства.</p>
<button id="next-tip" class="btn btn-sm btn-outline-secondary rounded-pill">Другой совет</button>
</div>
</main>
<!-- Секция Теста -->
<section id="quiz" class="section">
<div class="card p-4">
<div class="text-center mb-4">
<h3>Тест: Язык Любви</h3>
<p class="small text-muted">Узнайте, что действительно важно для вас в отношениях.</p>
</div>
<div class="progress-bar-custom">
<div class="progress-fill"></div>
</div>
<div id="quiz-content">
<!-- JS handles content -->
</div>
</div>
</section>
<!-- Секция База знаний -->
<section id="guide" class="section">
<div class="card p-4">
<h3><i class="fas fa-book-open text-primary me-2"></i> Основы гармонии</h3>
<div class="mt-3">
<div class="mb-4">
<h6 class="fw-bold">1. Честность</h6>
<p class="small">Умение говорить о своих страхах и желаниях без страха осуждения — фундамент крепкой связи.</p>
</div>
<div class="mb-4">
<h6 class="fw-bold">2. Границы</h6>
<p class="small">Важно помнить, что в отношениях участвуют две личности. Уважайте личное время и пространство партнера.</p>
</div>
<div class="mb-4">
<h6 class="fw-bold">3. Благодарность</h6>
<p class="small">Замечайте мелочи. Простое "спасибо за завтрак" или "ты отлично выглядишь" творит чудеса.</p>
</div>
<div class="mb-4">
<h6 class="fw-bold">4. Разрешение конфликтов</h6>
<p class="small">В споре стремитесь не победить, а найти решение, которое устроит обоих.</p>
</div>
</div>
</div>
</section>
<!-- Навигация -->
<nav class="nav-bar">
<div class="nav-item active" data-target="home">
<i class="fas fa-house"></i>
<span>Главная</span>
</div>
<div class="nav-item" data-target="quiz">
<i class="fas fa-vial"></i>
<span>Тест</span>
</div>
<div class="nav-item" data-target="guide">
<i class="fas fa-lightbulb"></i>
<span>Гид</span>
</div>
</nav>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!