Compare commits
2 Commits
8550e6ecc5
...
a4326cd16d
Author | SHA1 | Date | |
---|---|---|---|
a4326cd16d | |||
37a6373714 |
BIN
public/images/1.jpg
Normal file
BIN
public/images/1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 164 KiB |
BIN
public/images/12.jpg
Normal file
BIN
public/images/12.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 56 KiB |
BIN
public/images/123.jpg
Normal file
BIN
public/images/123.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 59 KiB |
BIN
public/images/1234.jpg
Normal file
BIN
public/images/1234.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 83 KiB |
@ -23,11 +23,13 @@
|
||||
/* Базовые стили */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background: linear-gradient(135deg, #111827, #1f2937, #111827);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f7f7;
|
||||
color: #2c2c2c;
|
||||
background: linear-gradient(135deg, #111827, #1f2937, #111827);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Отступы от фиксированного хедера */
|
||||
@ -303,3 +305,354 @@ body {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Стили для загрузчика страницы */
|
||||
#page-loader {
|
||||
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Стили для контента страницы */
|
||||
#page-content {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
/* Предотвращение белого фона во время загрузки */
|
||||
html, body {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #111827, #1f2937, #111827);
|
||||
}
|
||||
|
||||
/* Анимация появления для загрузчика */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* Улучшенная анимация bounce для точек загрузки */
|
||||
@keyframes enhanced-bounce {
|
||||
0%, 20%, 53%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40%, 43% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
70% {
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
90% {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-enhanced-bounce {
|
||||
animation: enhanced-bounce 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Анимация пульсации для логотипа */
|
||||
@keyframes logo-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-logo-pulse {
|
||||
animation: logo-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Градиентная анимация для прогресс-бара */
|
||||
@keyframes progress-shimmer {
|
||||
0% {
|
||||
background-position: -200px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#fbbf24 25%,
|
||||
#f59e0b 50%,
|
||||
#fbbf24 75%
|
||||
);
|
||||
background-size: 200px 100%;
|
||||
animation: progress-shimmer 2s infinite;
|
||||
}
|
||||
|
||||
/* Адаптивные стили для загрузчика */
|
||||
|
||||
/* Очень маленькие экраны (до 320px) */
|
||||
@media (max-width: 319px) {
|
||||
#page-loader .text-center {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 1.25rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 12rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 3rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 0.5rem !important;
|
||||
height: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Маленькие экраны (320px - 479px) */
|
||||
@media (min-width: 320px) and (max-width: 479px) {
|
||||
#page-loader .text-center {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 14rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Средние экраны (480px - 767px) */
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .text-center {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 2rem !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 18rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Планшеты (768px - 1027px) */
|
||||
@media (min-width: 768px) and (max-width: 1027px) {
|
||||
#page-loader .text-center {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 2.5rem !important;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1.125rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 24rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 6rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ноутбуки (1028px - 1439px) */
|
||||
@media (min-width: 1028px) and (max-width: 1439px) {
|
||||
#page-loader .text-center {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 3rem !important;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 28rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 7rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Большие экраны (1440px+) */
|
||||
@media (min-width: 1440px) {
|
||||
#page-loader .text-center {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 3.5rem !important;
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 32rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 8rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 1.5rem !important;
|
||||
height: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Дополнительные адаптивные стили для декоративных элементов */
|
||||
@media (max-width: 479px) {
|
||||
#page-loader .absolute.top-1\/4 {
|
||||
width: 4rem !important;
|
||||
height: 4rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.bottom-1\/4 {
|
||||
width: 5rem !important;
|
||||
height: 5rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.top-1\/2 {
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .absolute.top-1\/4 {
|
||||
width: 6rem !important;
|
||||
height: 6rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.bottom-1\/4 {
|
||||
width: 7rem !important;
|
||||
height: 7rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.top-1\/2 {
|
||||
width: 4rem !important;
|
||||
height: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Адаптивные стили для прогресс-бара */
|
||||
@media (max-width: 319px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.375rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 320px) and (max-width: 479px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.625rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1027px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1028px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Адаптивные стили для отступов между элементами */
|
||||
@media (max-width: 479px) {
|
||||
#page-loader .mb-8 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mb-6 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mt-4 {
|
||||
margin-top: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .mb-8 {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mb-6 {
|
||||
margin-bottom: 1.25rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mt-4 {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
@ -4,10 +4,10 @@ const about = {
|
||||
title: "О НАС",
|
||||
paragraph1: "Наша компания занимается производством продукции из драгоценных металлов.",
|
||||
imageUrls: [
|
||||
"/images/hero.webp",
|
||||
"/images/hero.webp",
|
||||
"/images/hero.webp",
|
||||
"/images/hero.webp"
|
||||
"/images/1.jpg",
|
||||
"/images/12.jpg",
|
||||
"/images/123.jpg",
|
||||
"/images/1234.jpg"
|
||||
]
|
||||
};
|
||||
---
|
||||
@ -56,11 +56,11 @@ const about = {
|
||||
<div class="lg:w-1/2 grid grid-cols-2 gap-3 xs:gap-4 sm:gap-6">
|
||||
{
|
||||
about.imageUrls.map((imageUrl, index) => (
|
||||
<div class="group relative overflow-hidden rounded-xl xs:rounded-2xl shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500 transform hover:scale-105">
|
||||
<div class="group relative overflow-hidden rounded-xl xs:rounded-2xl shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500 transform hover:scale-105 h-32 xs:h-36 sm:h-40 md:h-44 lg:h-48 xl:h-52">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={`О нас изображение ${index + 1}`}
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
class="w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
</div>
|
||||
@ -75,8 +75,55 @@ const about = {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
/* Фиксированные размеры для изображений в сетке */
|
||||
.grid img {
|
||||
aspect-ratio: 4/3;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Дополнительные адаптивные стили для изображений */
|
||||
@media (max-width: 320px) {
|
||||
.grid > div {
|
||||
height: 7rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 321px) and (max-width: 479px) {
|
||||
.grid > div {
|
||||
height: 8rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 639px) {
|
||||
.grid > div {
|
||||
height: 9rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) and (max-width: 767px) {
|
||||
.grid > div {
|
||||
height: 10rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.grid > div {
|
||||
height: 11rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) and (max-width: 1279px) {
|
||||
.grid > div {
|
||||
height: 12rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.grid > div {
|
||||
height: 13rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -121,10 +121,146 @@ const allKeywords = `${commonKeywords}, ${silverKeywords}, ${goldKeywords}`;
|
||||
<slot name="head" />
|
||||
</head>
|
||||
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white">
|
||||
<Header />
|
||||
<slot />
|
||||
<FloatingFAQ />
|
||||
<Up />
|
||||
<Footer />
|
||||
<!-- Загрузчик страницы -->
|
||||
<div id="page-loader" class="fixed inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-black z-50 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<!-- Логотип -->
|
||||
<div class="mb-8">
|
||||
<img src="/logo.svg" alt="ООО «ДМДК»" class="h-16 xs:h-20 sm:h-24 md:h-28 lg:h-32 mx-auto animate-logo-pulse" />
|
||||
</div>
|
||||
|
||||
<!-- Название компании -->
|
||||
<h1 class="text-2xl xs:text-3xl sm:text-4xl md:text-5xl font-bold text-white font-nevduplenysh mb-6 xs:mb-8 animate-fade-in">
|
||||
ООО «ДМДК»
|
||||
</h1>
|
||||
|
||||
<!-- Подзаголовок -->
|
||||
<p class="text-gray-300 text-sm xs:text-base lg:text-lg font-gilroy mb-8 animate-fade-in" style="animation-delay: 0.3s;">
|
||||
Драгоценные металлы высшей пробы
|
||||
</p>
|
||||
|
||||
<!-- Анимированные точки загрузки -->
|
||||
<div class="flex justify-center space-x-2 mb-8">
|
||||
<div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce"></div>
|
||||
<div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce" style="animation-delay: 0.1s;"></div>
|
||||
<div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce" style="animation-delay: 0.2s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Прогресс бар -->
|
||||
<div class="w-64 xs:w-80 sm:w-96 mx-auto">
|
||||
<div class="bg-gray-700 rounded-full h-2 xs:h-3 overflow-hidden shadow-inner">
|
||||
<div id="progress-bar" class="progress-shimmer h-full rounded-full transition-all duration-300 ease-out" style="width: 0%"></div>
|
||||
</div>
|
||||
<p id="loading-text" class="text-gray-300 text-sm xs:text-base mt-4 font-gilroy">Загрузка...</p>
|
||||
</div>
|
||||
|
||||
<!-- Декоративные элементы -->
|
||||
<div class="absolute inset-0 opacity-10 pointer-events-none">
|
||||
<div class="absolute top-1/4 left-1/4 w-32 h-32 xs:w-48 xs:h-48 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-40 h-40 xs:w-60 xs:h-60 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
|
||||
<div class="absolute top-1/2 left-1/3 w-24 h-24 xs:w-36 xs:h-36 bg-yellow-300 rounded-full blur-2xl animate-pulse" style="animation-delay: 1s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page-content" style="display: none;">
|
||||
<Header />
|
||||
<slot />
|
||||
<FloatingFAQ />
|
||||
<Up />
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<!-- Скрипт для управления загрузчиком -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const loader = document.getElementById('page-loader');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const loadingText = document.getElementById('loading-text');
|
||||
let progress = 0;
|
||||
|
||||
// Массив сообщений для загрузки
|
||||
const loadingMessages = [
|
||||
'Загрузка...',
|
||||
'Подготовка драгоценных металлов...',
|
||||
'Инициализация системы...',
|
||||
'Проверка качества...',
|
||||
'Почти готово...'
|
||||
];
|
||||
|
||||
let messageIndex = 0;
|
||||
|
||||
// Функция для скрытия загрузчика
|
||||
function hideLoader() {
|
||||
const pageContent = document.getElementById('page-content');
|
||||
loadingText.textContent = 'Готово!';
|
||||
|
||||
setTimeout(() => {
|
||||
loader.style.opacity = '0';
|
||||
loader.style.transform = 'scale(0.95)';
|
||||
loader.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';
|
||||
|
||||
setTimeout(() => {
|
||||
loader.style.display = 'none';
|
||||
pageContent.style.display = 'block';
|
||||
document.body.style.overflow = 'auto';
|
||||
}, 500);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Анимация прогресс-бара
|
||||
const progressInterval = setInterval(() => {
|
||||
progress += Math.random() * 12 + 3; // Случайный прирост от 3 до 15%
|
||||
if (progress > 100) progress = 100;
|
||||
|
||||
progressBar.style.width = progress + '%';
|
||||
|
||||
// Обновляем сообщение в зависимости от прогресса
|
||||
if (progress >= 20 && messageIndex === 0) {
|
||||
messageIndex = 1;
|
||||
loadingText.textContent = loadingMessages[messageIndex];
|
||||
} else if (progress >= 40 && messageIndex === 1) {
|
||||
messageIndex = 2;
|
||||
loadingText.textContent = loadingMessages[messageIndex];
|
||||
} else if (progress >= 60 && messageIndex === 2) {
|
||||
messageIndex = 3;
|
||||
loadingText.textContent = loadingMessages[messageIndex];
|
||||
} else if (progress >= 80 && messageIndex === 3) {
|
||||
messageIndex = 4;
|
||||
loadingText.textContent = loadingMessages[messageIndex];
|
||||
}
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(progressInterval);
|
||||
hideLoader();
|
||||
}
|
||||
}, 80);
|
||||
|
||||
// Блокируем прокрутку во время загрузки и скрываем контент
|
||||
document.body.style.overflow = 'hidden';
|
||||
const pageContent = document.getElementById('page-content');
|
||||
pageContent.style.display = 'none';
|
||||
|
||||
// Принудительно скрыть загрузчик через 4 секунды на случай медленной загрузки
|
||||
setTimeout(() => {
|
||||
if (loader.style.display !== 'none') {
|
||||
progress = 100;
|
||||
progressBar.style.width = '100%';
|
||||
clearInterval(progressInterval);
|
||||
hideLoader();
|
||||
}
|
||||
}, 4000);
|
||||
|
||||
// Скрыть загрузчик когда страница полностью загружена
|
||||
window.addEventListener('load', function() {
|
||||
if (progress < 100) {
|
||||
progress = 100;
|
||||
progressBar.style.width = '100%';
|
||||
clearInterval(progressInterval);
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
Reference in New Issue
Block a user