diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9607d34 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "livePreview.defaultPreviewPath": "/index.html" +} \ No newline at end of file diff --git a/data/polls.json b/data/polls.json new file mode 100644 index 0000000..76af66e --- /dev/null +++ b/data/polls.json @@ -0,0 +1,98 @@ +[ + { + "id": "1", + "question": "Яка ваша улюблена мова програмування?", + "category": "Програмування", + "options": [ + { "text": "Python", "votes": 30 }, + { "text": "Java", "votes": 50 }, + { "text": "Javascript", "votes": 15 }, + { "text": "Swift", "votes": 5 } + ], + "totalVotes": 100 + }, + { + "id": "2", + "question": "Якою соціальною мережею ви користуєтесь частіше над усе?", + "category": "Інше", + "options": [ + { "text": "Instagram", "votes": 30 }, + { "text": "Tiktok", "votes": 50 }, + { "text": "Facebook", "votes": 15 }, + { "text": "LinkedIn", "votes": 5 } + ], + "totalVotes": 100 + }, + { + "id": "3", + "question": "Ваша улюблена пора року?", + "category": "Інше", + "options": [ + { "text": "Весна", "votes": 25 }, + { "text": "Літо", "votes": 40 }, + { "text": "Осінь", "votes": 20 }, + { "text": "Зима", "votes": 15 } + ], + "totalVotes": 100 + }, + { + "id": "4", + "question": "Який ваш улюблений жанр літератури?", + "category": "Література", + "options": [ + { "text": "Фантастика", "votes": 35 }, + { "text": "Фентезі", "votes": 30 }, + { "text": "Детектив", "votes": 20 }, + { "text": "Роман", "votes": 15 } + ], + "totalVotes": 100 + }, + { + "id": "5", + "question": "Яка ваша улюблена тварина?", + "category": "Тварини", + "options": [ + { "text": "Собака", "votes": 45 }, + { "text": "Кішка", "votes": 35 }, + { "text": "Папуга", "votes": 10 }, + { "text": "Рибка", "votes": 10 } + ], + "totalVotes": 100 + }, + { + "id": "6", + "question": "Який філософський напрямок вам найближчий?", + "category": "Філософія", + "options": [ + { "text": "Екзистенціалізм", "votes": 20 }, + { "text": "Стоїцизм", "votes": 40 }, + { "text": "Раціоналізм", "votes": 25 }, + { "text": "Емпіризм", "votes": 15 } + ], + "totalVotes": 100 + }, + { + "id": "7", + "question": "Найважливіша історична подія 20 століття?", + "category": "Історія", + "options": [ + { "text": "Перша світова війна", "votes": 20 }, + { "text": "Друга світова війна", "votes": 60 }, + { "text": "Холодна війна", "votes": 10 }, + { "text": "Розпад СРСР", "votes": 10 } + ], + "totalVotes": 100 + }, + { + "id": "8", + "question": "Яка математична операція найважливіша?", + "category": "Математика", + "options": [ + { "text": "Додавання", "votes": 25 }, + { "text": "Віднімання", "votes": 25 }, + { "text": "Множення", "votes": 25 }, + { "text": "Ділення", "votes": 25 } + ], + "totalVotes": 100 + } +] \ No newline at end of file diff --git a/index.html b/index.html index 09c6dc0..379b101 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,92 @@ + + + + + - Simple HTML Page + Опитування + +
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+
+ +
+ \ No newline at end of file diff --git a/report.html b/report.html new file mode 100644 index 0000000..6ae8989 --- /dev/null +++ b/report.html @@ -0,0 +1,65 @@ + + + + + + Аналітика опитувань + + + + + + +
+

Аналітика опитувань

+ ← Повернутись +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..2173894 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,359 @@ +let pollsData = []; + +const openPollCreator = document.getElementById('open-poll-creator'); +const pollCreator = document.querySelector('.poll-creator'); +const content = document.querySelector('.content-container'); +const closeBtn = document.querySelector('.close-btn'); +const createNewPoll = document.getElementById('create-new-poll'); +let pollContainers = document.querySelectorAll('.poll-container'); + +const loadPolls = async () => { + try { + const savedPolls = localStorage.getItem('polls'); + if (savedPolls) { + pollsData = JSON.parse(savedPolls); + } else { + const response = await fetch('data/polls.json'); + const data = await response.json(); + pollsData = data; + localStorage.setItem('polls', JSON.stringify(data)); + } + renderPolls(pollsData); + } catch (error) { + console.error('Помилка завантаження опитувань:', error); + pollsData = [ + { + id: "1", + question: "Яка ваша улюблена мова програмування?", + category: "Програмування", + options: [ + { text: "Python", votes: 30 }, + { text: "Java", votes: 50 }, + { text: "Javascript", votes: 15 }, + { text: "Swift", votes: 5 } + ], + totalVotes: 100 + }, + { + id: "2", + question: "Якою соціальною мережею ви користуєтесь частіше над усе?", + category: "Інше", + options: [ + { text: "Instagram", votes: 30 }, + { text: "Tiktok", votes: 50 }, + { text: "Facebook", votes: 15 }, + { text: "LinkedIn", votes: 5 } + ], + totalVotes: 100 + } + ]; + renderPolls(pollsData); + } +}; + +const renderPolls = (polls) => { + const pollList = document.getElementById('poll-list'); + pollList.innerHTML = ''; + + polls.forEach(poll => { + const pollElement = document.createElement('li'); + pollElement.className = 'poll-container stats-view'; + pollElement.dataset.id = poll.id; + pollElement.dataset.category = poll.category; + + let optionsHTML = ''; + poll.options.forEach(option => { + const percent = poll.totalVotes > 0 + ? Math.round((option.votes / poll.totalVotes) * 100) + : 0; + + optionsHTML += ` +
  • + +
    + +
    + ${percent}% +
    • + `; + }); + + pollElement.innerHTML = ` +
    ${poll.question}
    +
    + +
    + ${poll.totalVotes} votes + `; + + pollList.appendChild(pollElement); + }); + + storeOriginalPollContent(); + bindPollEvents(); +}; + +const storeOriginalPollContent = () => { + const polls = document.querySelectorAll('.poll-container'); + polls.forEach(poll => { + poll.dataset.originalContent = poll.innerHTML; + }); +}; + +const convertToRadioView = (poll) => { + const pollId = poll.dataset.id; + const pollData = pollsData.find(p => p.id === pollId); + + if (!pollData) return; + + let radioHTML = ` +
    ${pollData.question}
    +
    + `; + + pollData.options.forEach((option, index) => { + radioHTML += ` +
    + + +
    + `; + }); + + radioHTML += ` +
    + ${pollData.totalVotes} votes + `; + + poll.innerHTML = radioHTML; + poll.classList.remove('stats-view'); + poll.classList.add('radio-view'); +}; + +const convertToStatsView = (poll) => { + const pollId = poll.dataset.id; + const pollData = pollsData.find(p => p.id === pollId); + + if (pollData) { + let optionsHTML = ''; + pollData.options.forEach(option => { + const percent = pollData.totalVotes > 0 + ? Math.round((option.votes / pollData.totalVotes) * 100) + : 0; + + optionsHTML += ` +
  • + +
    + +
    + ${percent}% +
    • + `; + }); + + const newContent = ` +
    ${pollData.question}
    +
    + +
    + ${pollData.totalVotes} votes + `; + + poll.innerHTML = newContent; + poll.dataset.originalContent = newContent; + } + + poll.classList.remove('radio-view'); + poll.classList.add('stats-view'); +}; + +const togglePollView = (poll) => { + if (poll.classList.contains('stats-view')) { + convertToRadioView(poll); + } else { + convertToStatsView(poll); + } +}; + +const filterPolls = () => { + const searchInput = document.querySelector('.category-container input'); + const categorySelect = document.querySelector('.category-container select'); + + const searchText = searchInput.value.toLowerCase(); + const selectedCategory = categorySelect.value; + + const filtered = pollsData.filter(poll => { + const matchesCategory = selectedCategory === 'Категорія' || + poll.category === selectedCategory; + const matchesSearch = poll.question.toLowerCase().includes(searchText); + return matchesCategory && matchesSearch; + }); + + renderPolls(filtered); +}; + +const addNewPoll = () => { + const questionInput = document.getElementById('question'); + const categorySelect = document.getElementById('category'); + const optionInputs = document.querySelectorAll('.option-input'); + + const question = questionInput.value.trim(); + const category = categorySelect.value; + const options = Array.from(optionInputs) + .map(input => input.value.trim()) + .filter(text => text !== ''); + + if (!question || options.length < 2) { + alert('Будь ласка, введіть питання та щонайменше два варіанти'); + return; + } + + const newPoll = { + id: Date.now().toString(), + question: question, + category: category, + options: options.map(text => ({ text, votes: 0 })), + totalVotes: 0 + }; + + pollsData.push(newPoll); + localStorage.setItem('polls', JSON.stringify(pollsData)); + renderPolls(pollsData); + + questionInput.value = ''; + categorySelect.value = 'Категорія'; + const optionsList = document.getElementById('options-list'); + optionsList.innerHTML = ` +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + `; +}; + +const addNewOption = () => { + const optionsList = document.getElementById('options-list'); + const newOption = document.createElement('li'); + newOption.className = 'option'; + newOption.innerHTML = ` + + `; + optionsList.appendChild(newOption); + + newOption.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); +}; + +const bindPollEvents = () => { + pollContainers = document.querySelectorAll('.poll-container'); + + pollContainers.forEach((poll) => { + poll.addEventListener('click', (event) => { + if (event.target.tagName === 'INPUT' && event.target.type === 'radio') { + const pollElement = event.target.closest('.poll-container'); + const pollId = pollElement.dataset.id; + const poll = pollsData.find(p => p.id === pollId); + + if (poll) { + const hasVoted = localStorage.getItem(`voted_${pollId}`); + if (hasVoted) { + alert('Ви вже голосували в цьому опитуванні'); + return; + } + + const optionIndex = Array.from( + pollElement.querySelectorAll('.option-row input') + ).indexOf(event.target); + + if (optionIndex !== -1) { + poll.options[optionIndex].votes++; + poll.totalVotes++; + localStorage.setItem('polls', JSON.stringify(pollsData)); + localStorage.setItem(`voted_${pollId}`, 'true'); + + const votesElement = pollElement.querySelector('.votes-quantity'); + if (votesElement) { + votesElement.textContent = `${poll.totalVotes} votes`; + } + } + } + return; + } + + if (event.target.tagName === 'LABEL') { + return; + } + + pollContainers.forEach((anotherPoll) => { + if (anotherPoll !== poll) { + anotherPoll.classList.toggle('disappear'); + anotherPoll.classList.add('slowly'); + } + }); + + poll.classList.toggle('big'); + + const pollUpper = document.querySelector('.create-poll-container'); + pollUpper.classList.toggle('disappear'); + + poll.classList.remove('slowly'); + + togglePollView(poll); + }); + }); +}; + +const initEventListeners = () => { + openPollCreator.addEventListener('click', () => { + pollCreator.classList.toggle('appear'); + content.classList.toggle('disappear'); + + document.body.classList.toggle('creator-open'); + }); + + closeBtn.addEventListener('click', () => { + pollCreator.classList.remove('appear'); + content.classList.remove('disappear'); + document.body.classList.remove('creator-open'); + }); + + createNewPoll.addEventListener('click', () => { + addNewPoll(); + pollCreator.classList.remove('appear'); + content.classList.remove('disappear'); + document.body.classList.remove('creator-open'); + }); + + pollCreator.addEventListener('click', (event) => { + if (event.target === pollCreator) { + pollCreator.classList.remove('appear'); + content.classList.remove('disappear'); + document.body.classList.remove('creator-open'); + } + }); + + document.getElementById('add-new-option').addEventListener('click', addNewOption); + + const searchInput = document.querySelector('.category-container input'); + const categorySelect = document.querySelector('.category-container select'); + searchInput.addEventListener('input', filterPolls); + categorySelect.addEventListener('change', filterPolls); + + document.getElementById('open-report').addEventListener('click', () => { + window.location.href = 'report.html'; + }); +}; + +document.addEventListener('DOMContentLoaded', () => { + loadPolls(); + initEventListeners(); + storeOriginalPollContent(); +}); \ No newline at end of file diff --git a/src/report.js b/src/report.js new file mode 100644 index 0000000..1000e6e --- /dev/null +++ b/src/report.js @@ -0,0 +1,86 @@ +document.addEventListener('DOMContentLoaded', async () => { + let pollsData = JSON.parse(localStorage.getItem('polls')) || []; + + if (pollsData.length === 0) { + try { + const response = await fetch('data/polls.json'); + if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); + + pollsData = await response.json(); + localStorage.setItem('polls', JSON.stringify(pollsData)); + } catch (error) { + alert('Не вдалося завантажити дані для аналітики: ' + error.message); + return; + } + } + + const reportData = []; + + pollsData.forEach(poll => { + poll.options.forEach(option => { + const percent = poll.totalVotes > 0 + ? Math.round((option.votes / poll.totalVotes) * 100) + : 0; + + reportData.push({ + "ID опитування": poll.id, + "Питання": poll.question, + "Категорія": poll.category, + "Варіант": option.text, + "Кількість голосів": option.votes, + "Відсоток": percent, + "Загальна кількість голосів": poll.totalVotes + }); + }); + }); + + try { + const report = { + dataSource: { + data: reportData + }, + options: { + grid: { + type: "flat", + showTotals: "on", + showGrandTotals: "on" + }, + configuratorActive: true + }, + slice: { + rows: [ + { uniqueName: "Категорія" }, + { uniqueName: "Питання" }, + { uniqueName: "Варіант" } + ], + columns: [ + { uniqueName: "Measures" } + ], + measures: [ + { uniqueName: "Кількість голосів", aggregation: "sum" }, + { uniqueName: "Відсоток", aggregation: "average" } + ] + }, + formats: [ + { + name: "Кількість голосів", + decimalPlaces: 0 + }, + { + name: "Відсоток", + decimalPlaces: 1, + maxDecimalPlaces: 1 + } + ] + }; + + new WebDataRocks({ + container: "#wdr-component", + toolbar: true, + report: report + }); + + } catch (e) { + alert("Помилка ініціалізації звіту: " + e.message); + } +}); \ No newline at end of file diff --git a/style/style.css b/style/style.css index e69de29..dde7254 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,810 @@ +:root { + --main-color: white; + --secondary-color: #4277d7; + --additional-color: #dbe3ea; + --border-radius: 5px; + --margin-percentage: 2%; + --padding-percentage: 3% 3%; + --shadow: 0.5vw 0.5vw 1vw var(--additional-color); +} + +* { + box-sizing: border-box; + font-size: large; + font-family: Verdana, Geneva, Tahoma, sans-serif; + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f5f7fa; + padding: 20px; +} + +.content-container { + width: 100%; + max-width: 800px; + opacity: 1; + transition: opacity 1s ease-in-out; +} + +.create-poll-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + opacity: 1; + transition: opacity 1s ease-in-out; + margin-bottom: 20px; +} + +.create-poll-container #open-poll-creator { + padding: 12px 20px; + border-radius: var(--border-radius); + border: none; + background-color: var(--secondary-color); + color: white; + font-size: 1.1em; + width: 100%; + font-weight: bold; + margin-bottom: 15px; + cursor: pointer; +} + +.create-poll-container #open-poll-creator:hover { + background-color: #3566c5; + box-shadow: 0 4px 8px rgba(66, 119, 215, 0.4); +} + +.create-poll-container .category-container { + width: 100%; + display: flex; + gap: 15px; +} + +/* + Poll-creator animation + */ + + + +.category-container input, +.category-container select { + padding: 12px; + border: 1px solid var(--additional-color); + border-radius: var(--border-radius); + font-size: 1rem; +} + +.category-container input { + flex: 1; +} + +.category-container select { + width: 25%; +} + +.poll-list-container { + width: 100%; +} + +.poll-list-container #poll-list { + display: flex; + flex-direction: column; +} + +.poll-container { + outline: thin solid var(--additional-color); + display: flex; + flex-direction: column; + padding: 20px; + border-radius: var(--border-radius); + box-shadow: var(--shadow); + background-color: var(--main-color); + cursor: pointer; + transition: all 0.3s; + margin-bottom: 20px; +} + +.poll-container:hover { + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); +} + +.poll-container.big { + transform: scale(1.05); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); + z-index: 10; +} + +.poll-title { + font-size: 1.3em; + margin-bottom: 15px; + font-weight: 600; + color: #2c3e50; +} + +.options-results { + margin-bottom: 15px; +} + +/* Statistics view styles */ +.stats-view .options-results-row { + display: grid; + grid-template-columns: 30% 1fr auto; + gap: 15px; + align-items: center; + margin-bottom: 10px; +} + +.stats-view label { + font-weight: 500; +} + +.slidecontainer { + width: 100%; +} + +.slider { + width: 100%; + height: 10px; + border-radius: 5px; + background: #e0e7ff; + outline: none; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + opacity: 0; + pointer-events: none; + width: 18px; + height: 18px; + border-radius: 50%; + background: var(--secondary-color); + cursor: pointer; +} + +.percent { + min-width: 50px; + text-align: right; +} + +/* Radio view styles */ +.radio-view .options-results { + display: flex; + flex-direction: column; + gap: 12px; +} + +.radio-view .option-row { + display: flex; + align-items: center; + padding: 12px; + border: 1px solid var(--additional-color); + border-radius: var(--border-radius); + transition: all 0.3s; + background: none; +} + +.radio-view .option-row:hover { + background: #eef5ff; + border-color: #a3c0ff; +} + +.radio-view .option-row input[type="radio"] { + margin-right: 12px; + width: 18px; + height: 18px; + cursor: pointer; + outline: none; + border: none; +} + +.radio-view .option-row label { + flex: 1; + cursor: pointer; +} + +.votes-quantity { + align-self: flex-end; + font-size: 0.9em; + color: #7f8c8d; +} + +.poll-creator { + background-color: var(--main-color); + width: 100%; + max-width: 600px; + border: 1px solid var(--additional-color); + border-radius: var(--border-radius); + padding: 25px; + flex-direction: column; + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); + position: fixed; + bottom: 0; + transform: translateY(100%); + transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0s 2s; + z-index: 1000; + opacity: 0; + + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0.95); + opacity: 0; + transition: all 0.3s ease; + z-index: 1000; + max-height: 90vh; + overflow-y: auto; + width: 90%; + max-width: 600px; +} + +.poll-creator.appear { + transform: translateY(0%); + transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); + opacity: 1; + + transform: translate(-50%, -50%) scale(1); + opacity: 1; +} + +.poll-creator .poll-creator-container { + width: 100%; + margin-bottom: 20px; +} + +.poll-creator .question-input-container, +.poll-creator .category-selector-container { + margin-bottom: 15px; +} + +.poll-creator label.text { + display: block; + margin-bottom: 8px; + font-weight: 600; +} + +.poll-creator input, +.poll-creator select { + width: 100%; + padding: 12px; + border: 1px solid var(--additional-color); + border-radius: var(--border-radius); + font-size: 1rem; +} + +.options-input-container { + width: 100%; + margin-bottom: 20px; +} + +.options-input-container ul { + display: flex; + flex-direction: column; + gap: 15px; +} + +.options-input-container li.option { + display: flex; +} + +.options-input-container li.option .option-input { + flex: 1; +} + +#add-new-option { + align-self: flex-start; + border: none; + background: none; + color: var(--secondary-color); + padding: 10px 0; + font-weight: bold; + cursor: pointer; +} + +#create-new-poll { + border-radius: var(--border-radius); + background-color: var(--secondary-color); + color: white; + border: none; + font-size: 1em; + font-weight: bold; + padding: 12px; + width: 100%; + cursor: pointer; + transition: all 0.3s; +} + +#create-new-poll:hover { + background-color: #3566c5; +} + +.slowly { + opacity: 1; + transition: opacity 0.5s ease-in-out; +} + +.disappear { + opacity: 0; + transition: opacity 0.5s ease-in-out, transform 0s 0.5s; + transform: translateX(250%); +} + +.close-btn { + position: absolute; + top: 15px; + right: 15px; + width: 30px; + height: 30px; + cursor: pointer; + background: #f1f3f9; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.close-btn::before, +.close-btn::after { + content: ''; + position: absolute; + width: 15px; + height: 2px; + background: #7f8c8d; +} + +.close-btn::before { + transform: rotate(45deg); +} + +.close-btn::after { + transform: rotate(-45deg); +} + +@media (max-width: 768px) { + .create-poll-container .category-container { + flex-direction: column; + } + + .category-container select { + width: 100%; + } + + .poll-container { + padding: 15px; + } + + .poll-title { + font-size: 1.1em; + } + + .stats-view .options-results-row { + grid-template-columns: 25% 1fr auto; + gap: 10px; + } +} + +@media (max-width: 480px) { + body { + padding: 15px; + } + + .poll-container { + padding: 12px; + } + + .stats-view .options-results-row { + grid-template-columns: 1fr; + gap: 8px; + } + + .slidecontainer, + .percent { + grid-column: 1; + } + + .percent { + text-align: left; + } + + .radio-view .option-row { + padding: 10px; + } +} + +@media (max-width: 320px) { + .poll-creator { + width: 95%; + padding: 3%; + } + + .question-input-container input, + .category-selector-container select, + .options-input-container li input { + padding: 8px; + } +} + +@media (max-width: 270px) { + + * { + font-size: 1em; + } + + .poll-creator { + width: 95%; + padding: 3%; + } + + .question-input-container input, + .category-selector-container select, + .options-input-container li input { + width: 95%; + } +} + +@media (max-width: 634px) and (min-width: 482px) { + .options-results-row { + grid-template-columns: 35% 1fr auto; + gap: 8px; + } + + .options-results-row label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .slidecontainer { + min-width: 100px; + } + + .percent { + min-width: 40px; + text-align: right; + } + + .poll-container { + padding: 12px; + } +} + +@media (max-width: 482px) { + .options-results-row { + grid-template-columns: 1fr; + grid-template-rows: auto auto auto; + gap: 5px; + } + + .options-results-row label { + grid-row: 1; + } + + .slidecontainer { + grid-row: 2; + width: 100%; + } + + .percent { + grid-row: 3; + text-align: left; + } +} + +@media (max-width: 210px) { + * { + font-size: 14px !important; + font-weight: 300 !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + + +@media (max-width: 180px) { + * { + font-size: 12px !important; + } + + body { + padding: 2px; + } + + .content-container { + margin-top: 5px; + } + + .create-poll-container #open-poll-creator { + padding: 4px; + font-size: 0.9em; + } + + .create-poll-container .category-container { + flex-direction: column; + margin: 5px 0; + gap: 3px; + } + + .category-container input, + .category-container select { + width: 100%; + padding: 3px; + } + + .poll-container { + padding: 5px; + margin-bottom: 5px; + } + + .poll-title { + font-size: 0.9em; + line-height: 1.2; + } + + .options-results-row { + grid-template-columns: 1fr; + gap: 3px; + margin-bottom: 5px; + } + + .options-results-row label { + font-size: 0.8em; + } + + .slidecontainer { + width: 100%; + } + + .slider { + width: 100%; + min-width: auto; + } + + .percent { + font-size: 0.8em; + text-align: left; + } + + .votes-quantity { + font-size: 0.7em; + } + + .poll-creator { + width: 95%; + padding: 5px; + height: auto; + } + + .poll-creator .question-input-container input, + .poll-creator .category-selector-container select, + .poll-creator .options-input-container li input { + padding: 3px; + margin-bottom: 3px; + font-size: 0.8em; + } + + .poll-creator #create-new-poll { + padding: 4px; + font-size: 0.9em; + } +} + +@media (max-width: 120px) { + * { + font-size: 6px !important; + } + + body { + padding: 1px; + } + + .content-container { + margin-top: 3px; + } + + .create-poll-container #open-poll-creator { + padding: 3px; + font-size: 0.8em; + } + + .create-poll-container .category-container { + margin: 3px 0; + gap: 2px; + } + + .category-container input, + .category-container select { + padding: 2px; + font-size: 0.7em; + } + + .poll-container { + padding: 4px; + margin-bottom: 4px; + } + + .poll-title { + font-size: 0.8em; + line-height: 1.1; + margin-bottom: 2px; + } + + .options-results-row { + gap: 2px; + margin-bottom: 3px; + } + + .options-results-row label { + font-size: 0.7em; + } + + .slider { + height: 8px; + } + + .percent { + font-size: 0.7em; + } + + .votes-quantity { + font-size: 0.6em; + } + + .poll-creator { + width: 98%; + padding: 3px; + } + + .poll-creator .text { + font-size: 0.8em; + margin-bottom: 2px; + } + + .poll-creator .question-input-container input, + .poll-creator .category-selector-container select, + .poll-creator .options-input-container li input { + padding: 0px; + font-size: 0.7em; + margin-bottom: 0px; + } + + .poll-creator #add-new-option { + font-size: 0.7em; + } + + .poll-creator #create-new-poll { + padding: 3px; + font-size: 0.8em; + } + + select>option:first-child, + #add-new-option span { + display: none; + } + + button, + input, + select { + max-height: 16px; + } +} + +@media (max-width: 70px) { + * { + font-size: 4px !important; + } + + body { + padding: 0px; + } + + .content-container { + margin-top: 0px; + } + + .create-poll-container #open-poll-creator { + padding: 3px; + font-size: 0.8em; + } + + .create-poll-container .category-container { + margin: 3px 0; + gap: 2px; + } + + .category-container input, + .category-container select { + padding: 2px; + font-size: 0.7em; + } + + .poll-container { + padding: 4px; + margin-bottom: 4px; + } + + .poll-title { + font-size: 0.8em; + line-height: 1.1; + margin-bottom: 2px; + } + + .options-results-row { + gap: 2px; + margin-bottom: 3px; + } + + .options-results-row label { + font-size: 0.7em; + } + + .slider { + height: 8px; + } + + .percent { + font-size: 0.7em; + } + + .votes-quantity { + font-size: 0.6em; + } + + .poll-creator { + width: 98%; + padding: 3px; + } + + .poll-creator .text { + font-size: 0.8em; + margin-bottom: 2px; + } + + .poll-creator .question-input-container input, + .poll-creator .category-selector-container select, + .poll-creator .options-input-container li input { + padding: 0px; + font-size: 0.7em; + margin-bottom: 0px; + } + + .poll-creator #add-new-option { + font-size: 0.7em; + } + + .poll-creator #create-new-poll { + padding: 3px; + font-size: 0.8em; + } + + select>option:first-child, + #add-new-option span { + display: none; + } + + button, + input, + select { + max-height: 16px; + } +} + +#open-report { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + background-color: #4277d7; + color: white; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + border-radius: var(--border-radius); + border: none; + outline: none; + margin-top: 20px; + } \ No newline at end of file