View file zip0.ru/index.php

<?php
require_once 'db.php';
include 'header.php';

// последние 5 зарегистрированных пользователей
$stmt = $mysqli->prepare("
    SELECT id, name, city, photo
    FROM users
    ORDER BY created_at DESC
    LIMIT 5
");
$stmt->execute();
$recent = $stmt->get_result();
$stmt->close();
?>

<style>
/* Локальные стили только для главной */

.hero {
    padding: 30px 0 10px;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.hero-title {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 12px;
}

.hero-text {
    font-size: 16px;
    color: #5a5367;
    margin-bottom: 18px;
}

.hero-secondary-card {
    background: rgba(255,255,255,0.96);
    border-radius: 24px;
    padding: 18px 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.06);
    font-size: 14px;
}

.hero-secondary-card h2 {
    margin: 0 0 6px;
}

/* Новые пользователи */

.recent-section {
    margin-top: 26px;
}

.recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.recent-title {
    font-size: 18px;
    font-weight: 600;
}

.recent-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.recent-user {
    min-width: 72px;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.recent-avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    margin: 0 auto 6px;
}

.recent-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe5f0, #f5ebff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 6px;
}

.recent-name {
    font-size: 13px;
    font-weight: 600;
}

.recent-city {
    font-size: 11px;
    color: #7b7287;
}

/* мобила */

@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
    .hero-title {
        font-size: 26px;
    }
    .hero-secondary-card {
        margin-top: 8px;
    }
}
</style>

<section class="hero">
    <div class="hero-grid">
        <div>
            <h1 class="hero-title">Мягкий сервис знакомств</h1>
            <p class="hero-text">
                Знакомься с людьми, с которыми комфортно просто быть собой.
                Без токсичности, давления и лишнего шума.
            </p>
            <a href="/browse.php" class="btn-primary">Смотреть анкеты</a>
        </div>
        <div>
            <div class="hero-secondary-card">
                <h2>Уютная атмосфера</h2>
                <p>Только честные анкеты и уважительное общение. Мы верим, что тёплые отношения начинаются с заботы и такта.</p>
                <p style="margin-top:8px;">Добавь немного мягкости в свою жизнь — сделай первый шаг 💗</p>
            </div>
        </div>
    </div>
</section>

<section class="recent-section">
    <div class="recent-header">
        <div class="recent-title">Новые лица рядом с тобой</div>
    </div>

    <?php if ($recent->num_rows === 0): ?>
        <p>Пока никого нет. Будьте первым, кто зарегистрируется 🙂</p>
    <?php else: ?>
        <div class="recent-strip">
            <?php while ($u = $recent->fetch_assoc()): ?>
                <a href="/messages.php?user_id=<?= (int)$u['id'] ?>" class="recent-user">
                    <?php if ($u['photo']): ?>
                        <img src="/assets/img/<?= htmlspecialchars($u['photo']) ?>" class="recent-avatar" alt="">
                    <?php else: ?>
                        <div class="recent-avatar-placeholder">🙂</div>
                    <?php endif; ?>
                    <div class="recent-name">
                        <?= htmlspecialchars(mb_strimwidth($u['name'] ?? 'Без имени', 0, 10, '…')) ?>
                    </div>
                    <?php if (!empty($u['city'])): ?>
                        <div class="recent-city"><?= htmlspecialchars(mb_strimwidth($u['city'], 0, 12, '…')) ?></div>
                    <?php endif; ?>
                </a>
            <?php endwhile; ?>
        </div>
    <?php endif; ?>
</section>

<?php include 'footer.php'; ?>