Add RSVP invite page (index.html) from TRD
This commit is contained in:
popit
parent
8657757ae4
commit
361a7cc08c
281
TRD.md
281
TRD.md
@ -0,0 +1,281 @@
|
||||
<!--
|
||||
=============================================================================
|
||||
КОД ДЛЯ GOOGLE APPS SCRIPT (ВСТАВИТЬ В РАСШИРЕНИЯ -> APPS SCRIPT ТАБЛИЦЫ):
|
||||
=============================================================================
|
||||
|
||||
function doPost(e) {
|
||||
var lock = LockService.getScriptLock();
|
||||
lock.tryLock(10000);
|
||||
try {
|
||||
var doc = SpreadsheetApp.getActiveSpreadsheet();
|
||||
var sheet = doc.getSheets()[0];
|
||||
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
|
||||
var nextRow = sheet.getLastRow() + 1;
|
||||
var row = [];
|
||||
for (var i = 0; i < headers.length; i++) {
|
||||
if (headers[i] == 'Timestamp') { row.push(new Date()); }
|
||||
else { row.push(e.parameter[headers[i]] || ''); }
|
||||
}
|
||||
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
|
||||
return ContentService.createTextOutput(JSON.stringify({ 'result': 'success' })).setMimeType(ContentService.MimeType.JSON);
|
||||
} catch (e) {
|
||||
return ContentService.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e })).setMimeType(ContentService.MimeType.JSON);
|
||||
} finally {
|
||||
lock.releaseLock();
|
||||
}
|
||||
}
|
||||
|
||||
=============================================================================
|
||||
КОНЕЦ КОДА ДЛЯ СКИПТА. ДАЛЕЕ ИДЕТ ЧИСТЫЙ HTML/CSS/JS ДЛЯ САЙТА:
|
||||
=============================================================================
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Приглашение на День Рождения! 🎉</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #0f172a;
|
||||
--card-bg: #1e293b;
|
||||
--accent: #ec4899;
|
||||
--accent-hover: #db2777;
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
background: var(--card-bg);
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(45deg, #f43f5e, #ec4899, #8b5cf6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.date-place {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Таймер */
|
||||
.countdown {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.countdown-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.countdown-time {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.countdown-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Форма */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #334155;
|
||||
background: #0f172a;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
#statusMessage {
|
||||
margin-top: 15px;
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>День Рождения! 🎂</h1>
|
||||
<div class="date-place">05 июня • Жду именно тебя!</div>
|
||||
|
||||
<!-- Таймер обратного отсчета -->
|
||||
<div class="countdown">
|
||||
<div class="countdown-item">
|
||||
<div class="countdown-time" id="days">00</div>
|
||||
<div class="countdown-label">дней</div>
|
||||
</div>
|
||||
<div class="countdown-item">
|
||||
<div class="countdown-time" id="hours">00</div>
|
||||
<div class="countdown-label">часов</div>
|
||||
</div>
|
||||
<div class="countdown-item">
|
||||
<div class="countdown-time" id="minutes">00</div>
|
||||
<div class="countdown-label">минут</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Форма RSVP -->
|
||||
<form id="inviteForm">
|
||||
<label for="name">Твое имя и фамилия:</label>
|
||||
<input type="text" id="name" name="name" placeholder="Имя Фамилия" required>
|
||||
|
||||
<label>Придешь?</label>
|
||||
<div class="radio-group">
|
||||
<label class="radio-label">
|
||||
<input type="radio" name="attendance" value="Да, буду обязательно!" checked> Да, буду! 🎉
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<input type="radio" name="attendance" value="Не смогу"> Не смогу 😔
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="submitBtn">Отправить ответ</button>
|
||||
</form>
|
||||
|
||||
<div id="statusMessage"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- 1. ЛОГИКА ТАЙМЕРА (Нацелен на 5 июня) ---
|
||||
function updateCountdown() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
let targetDate = new Date(`June 5, ${currentYear} 18:00:00`).getTime();
|
||||
const now = new Date().getTime();
|
||||
|
||||
if (targetDate - now < 0) {
|
||||
targetDate = new Date(`June 5, ${currentYear + 1} 18:00:00`).getTime();
|
||||
}
|
||||
|
||||
const difference = targetDate - now;
|
||||
|
||||
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
|
||||
|
||||
document.getElementById("days").innerText = days < 10 ? "0" + days : days;
|
||||
document.getElementById("hours").innerText = hours < 10 ? "0" + hours : hours;
|
||||
document.getElementById("minutes").innerText = minutes < 10 ? "0" + minutes : minutes;
|
||||
}
|
||||
setInterval(updateCountdown, 1000);
|
||||
updateCountdown();
|
||||
|
||||
// --- 2. ОТПРАВКА ДАННЫХ В GOOGLE ТАБЛИЦУ ---
|
||||
// ЗАМЕНИТЬ НА СВОЙ URL ПОСЛЕ РАЗВЕРТЫВАНИЯ SCRIPT В GOOGLE ТАБЛИЦАХ:
|
||||
const scriptURL = 'ССЫЛКА_НА_ТВОЙ_APPS_SCRIPT';
|
||||
|
||||
const form = document.getElementById('inviteForm');
|
||||
const statusMsg = document.getElementById('statusMessage');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
|
||||
form.addEventListener('submit', e => {
|
||||
e.preventDefault();
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerText = 'Отправка...';
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('Имя', form.name.value);
|
||||
formData.append('Приду / Нет', form.attendance.value);
|
||||
|
||||
fetch(scriptURL, { method: 'POST', body: formData })
|
||||
.then(response => {
|
||||
statusMsg.style.display = 'block';
|
||||
statusMsg.style.color = '#10b981';
|
||||
statusMsg.innerText = 'Ура! Твой ответ успешно записан. До встречи! 🙌';
|
||||
form.reset();
|
||||
submitBtn.innerText = 'Отправлено!';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка отправки!', error.message);
|
||||
statusMsg.style.display = 'block';
|
||||
statusMsg.style.color = '#ef4444';
|
||||
statusMsg.innerText = 'Что-то пошло не так. Попробуй еще раз.';
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.innerText = 'Отправить ответ';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
249
index.html
Normal file
249
index.html
Normal file
@ -0,0 +1,249 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Приглашение на День Рождения! 🎉</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #0f172a;
|
||||
--card-bg: #1e293b;
|
||||
--accent: #ec4899;
|
||||
--accent-hover: #db2777;
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
background: var(--card-bg);
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(45deg, #f43f5e, #ec4899, #8b5cf6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.date-place {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Таймер */
|
||||
.countdown {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.countdown-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.countdown-time {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.countdown-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Форма */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #334155;
|
||||
background: #0f172a;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
#statusMessage {
|
||||
margin-top: 15px;
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>День Рождения! 🎂</h1>
|
||||
<div class="date-place">05 июня • Жду именно тебя!</div>
|
||||
|
||||
<!-- Таймер обратного отсчета -->
|
||||
<div class="countdown">
|
||||
<div class="countdown-item">
|
||||
<div class="countdown-time" id="days">00</div>
|
||||
<div class="countdown-label">дней</div>
|
||||
</div>
|
||||
<div class="countdown-item">
|
||||
<div class="countdown-time" id="hours">00</div>
|
||||
<div class="countdown-label">часов</div>
|
||||
</div>
|
||||
<div class="countdown-item">
|
||||
<div class="countdown-time" id="minutes">00</div>
|
||||
<div class="countdown-label">минут</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Форма RSVP -->
|
||||
<form id="inviteForm">
|
||||
<label for="name">Твое имя и фамилия:</label>
|
||||
<input type="text" id="name" name="name" placeholder="Имя Фамилия" required>
|
||||
|
||||
<label>Придешь?</label>
|
||||
<div class="radio-group">
|
||||
<label class="radio-label">
|
||||
<input type="radio" name="attendance" value="Да, буду обязательно!" checked> Да, буду! 🎉
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<input type="radio" name="attendance" value="Не смогу"> Не смогу 😔
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="submitBtn">Отправить ответ</button>
|
||||
</form>
|
||||
|
||||
<div id="statusMessage"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- 1. ЛОГИКА ТАЙМЕРА (Нацелен на 5 июня) ---
|
||||
function updateCountdown() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
let targetDate = new Date(`June 5, ${currentYear} 18:00:00`).getTime();
|
||||
const now = new Date().getTime();
|
||||
|
||||
if (targetDate - now < 0) {
|
||||
targetDate = new Date(`June 5, ${currentYear + 1} 18:00:00`).getTime();
|
||||
}
|
||||
|
||||
const difference = targetDate - now;
|
||||
|
||||
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
|
||||
|
||||
document.getElementById("days").innerText = days < 10 ? "0" + days : days;
|
||||
document.getElementById("hours").innerText = hours < 10 ? "0" + hours : hours;
|
||||
document.getElementById("minutes").innerText = minutes < 10 ? "0" + minutes : minutes;
|
||||
}
|
||||
setInterval(updateCountdown, 1000);
|
||||
updateCountdown();
|
||||
|
||||
// --- 2. ОТПРАВКА ДАННЫХ В GOOGLE ТАБЛИЦУ ---
|
||||
// ЗАМЕНИТЬ НА СВОЙ URL ПОСЛЕ РАЗВЕРТЫВАНИЯ SCRIPT В GOOGLE ТАБЛИЦАХ:
|
||||
const scriptURL = 'ССЫЛКА_НА_ТВОЙ_APPS_SCRIPT';
|
||||
|
||||
const form = document.getElementById('inviteForm');
|
||||
const statusMsg = document.getElementById('statusMessage');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
|
||||
form.addEventListener('submit', e => {
|
||||
e.preventDefault();
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerText = 'Отправка...';
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('Имя', form.name.value);
|
||||
formData.append('Приду / Нет', form.attendance.value);
|
||||
|
||||
fetch(scriptURL, { method: 'POST', body: formData })
|
||||
.then(response => {
|
||||
statusMsg.style.display = 'block';
|
||||
statusMsg.style.color = '#10b981';
|
||||
statusMsg.innerText = 'Ура! Твой ответ успешно записан. До встречи! 🙌';
|
||||
form.reset();
|
||||
submitBtn.innerText = 'Отправлено!';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка отправки!', error.message);
|
||||
statusMsg.style.display = 'block';
|
||||
statusMsg.style.color = '#ef4444';
|
||||
statusMsg.innerText = 'Что-то пошло не так. Попробуй еще раз.';
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.innerText = 'Отправить ответ';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user