app / index.html
Aleksmorshen's picture
Update index.html
019cc80 verified
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SYNKRIS AI приложение</title>
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="icon" type="image/png" sizes="192x192" href="/icon.png">
<link rel="icon" href="icon.png" type="image/png">
<meta name="google-site-verification" content="V6EqDTA9Oj9V1OfNbnBHj5RKrdcXlABD8tqfEFVUHJY" />
<meta name="description" content=" ">
<style>
body {
background-color: #000000;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 0;
font-family: sans-serif;
gap: 20px;
}
button {
padding: 15px 30px;
font-size: 18px;
cursor: pointer;
border-radius: 8px;
border: 1px solid #333;
color: #000000;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
#openAppButton, #installButton, #iosInstallPrompt {
background-color: #7FFF00; /* Ядерно-салатовый */
}
#iosInstallModal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
}
.modal-content {
background-color: #1a1a1a;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
text-align: center;
border-radius: 10px;
}
.modal-content img {
max-width: 100%;
border-radius: 5px;
}
#closeIosModal {
background-color: #333;
color: white;
margin-top: 15px;
}
#imageZoomModal {
display: none;
position: fixed;
z-index: 100;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
#zoomedImage {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#closeZoomModal {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
</style>
</head>
<body>
<button id="openAppButton" onclick="window.open('https://ai.studio/apps/drive/1UEHu1-uSjCBFvuLW7wYsnHXPS0TDRuf3?fullscreenApplet=true', '_blank')">авторизация</button>
<button id="installButton" style="display: none;">Установить приложение</button>
<button id="iosInstallPrompt" style="display: none;">Установить приложение</button>
<div id="iosInstallModal">
<div class="modal-content">
<h2>Установите приложение Synkris AI</h2>
<a href="#" id="openZoomModal">
<img src="https://huggingface.co/spaces/Morshen/alpha/resolve/main/pwa_ios.png" alt="Инструкция по установке PWA на iOS">
</a>
<p>1. Нажмите кнопку "Поделиться" внизу Safari.</p>
<p>2. Выберите "На экран «Домой»".</p>
<p>3. Подтвердите установку.</p>
<button id="closeIosModal">Закрыть</button>
</div>
</div>
<div id="imageZoomModal">
<span id="closeZoomModal">×</span>
<img id="zoomedImage" src="" alt="Увеличенное изображение">
</div>
<script>
let deferredPrompt;
const installButton = document.getElementById('installButton');
const iosInstallPrompt = document.getElementById('iosInstallPrompt');
const iosInstallModal = document.getElementById('iosInstallModal');
const closeIosModal = document.getElementById('closeIosModal');
const openZoomModal = document.getElementById('openZoomModal');
const imageZoomModal = document.getElementById('imageZoomModal');
const closeZoomModal = document.getElementById('closeZoomModal');
const zoomedImage = document.getElementById('zoomedImage');
function isIos() {
return /iphone|ipad|ipod/i.test(navigator.userAgent);
}
function isInStandaloneMode() {
return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
}
window.addEventListener('beforeinstallprompt', (event) => {
event.preventDefault();
deferredPrompt = event;
installButton.style.display = 'block';
installButton.classList.add('pulse-animation');
installButton.addEventListener('click', async () => {
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
if (outcome === 'accepted') {
console.log('Пользователь принял запрос на установку');
} else {
console.log('Пользователь отклонил запрос на установку');
}
deferredPrompt = null;
installButton.style.display = 'none';
installButton.classList.remove('pulse-animation');
});
});
if (isIos() && !isInStandaloneMode()) {
iosInstallPrompt.style.display = 'block';
installButton.style.display = 'none';
iosInstallPrompt.classList.add('pulse-animation');
iosInstallPrompt.addEventListener('click', () => {
iosInstallModal.style.display = 'block';
localStorage.setItem('iosInstallPromptShown', 'true');
});
closeIosModal.addEventListener('click', () => {
iosInstallModal.style.display = 'none';
});
openZoomModal.addEventListener('click', (event) => {
event.preventDefault();
zoomedImage.src = 'https://huggingface.co/spaces/Morshen/alpha/resolve/main/pwa_ios.png';
imageZoomModal.style.display = 'block';
});
closeZoomModal.addEventListener('click', () => {
imageZoomModal.style.display = 'none';
});
} else {
if (!isIos()) {
installButton.style.display = deferredPrompt ? 'block' : 'none';
iosInstallPrompt.style.display = 'none';
if (deferredPrompt) {
installButton.classList.add('pulse-animation');
}
}
}
if (isIos() && !isInStandaloneMode() && localStorage.getItem('iosInstallPromptShown') === 'true') {
setTimeout(() => {
iosInstallModal.style.display = 'block';
}, 5000);
}
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then((registration) => {
console.log('Сервисный рабочий процесс зарегистрирован:', registration);
})
.catch((error) => {
console.log('Ошибка регистрации сервисного рабочего процесса:', error);
});
});
}
window.addEventListener('error', (event) => {
console.error('Произошла ошибка:', event.message, event.filename, event.lineno);
});
</script>
</body>
</html>