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