commit 6634fc16620f9f15e7b6af313090845d706c086f
Author: root <root@hub.scroll.pub> Date: 2025-01-01 09:44:22 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..5795d88 --- /dev/null +++ b/body.html @@ -0,0 +1,35 @@ +<header> + <h1>Pollify</h1> + <p>Create and share interactive opinion polls with ease!</p> +</header> + +<main> + <section id="poll-creator"> + <h2>Create Your Poll</h2> + <form id="poll-form"> + <label for="poll-question">Poll Question:</label> + <input type="text" id="poll-question" placeholder="Enter your question here" required> + + <div id="options-container"> + <label>Poll Options:</label> + <div class="option"> + <input type="text" class="option-input" placeholder="Option 1" required> + <button type="button" class="remove-option">×</button> + </div> + </div> + + <button type="button" id="add-option">Add Option</button> + <button type="submit">Create Poll</button> + </form> + </section> + + <section id="poll-display" class="hidden"> + <h2>Your Poll</h2> + <div id="poll-results"></div> + <button id="reset-poll">Create New Poll</button> + </section> +</main> + +<footer> + <p>Share your poll and gather opinions!</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..6c7303d --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://pollify.scroll.pub +metaTags +editButton /edit.html +title Pollify - Interactive Opinion Polls +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..ac5cb7b --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "1acdea88-88f6-4640-8308-2bb11ba034ec", + "object": "chat.completion", + "created": 1735724639, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\npollify.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://pollify.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Pollify - Interactive Opinion Polls\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Pollify</h1>\n <p>Create and share interactive opinion polls with ease!</p>\n</header>\n\n<main>\n <section id=\"poll-creator\">\n <h2>Create Your Poll</h2>\n <form id=\"poll-form\">\n <label for=\"poll-question\">Poll Question:</label>\n <input type=\"text\" id=\"poll-question\" placeholder=\"Enter your question here\" required>\n \n <div id=\"options-container\">\n <label>Poll Options:</label>\n <div class=\"option\">\n <input type=\"text\" class=\"option-input\" placeholder=\"Option 1\" required>\n <button type=\"button\" class=\"remove-option\">×</button>\n </div>\n </div>\n \n <button type=\"button\" id=\"add-option\">Add Option</button>\n <button type=\"submit\">Create Poll</button>\n </form>\n </section>\n\n <section id=\"poll-display\" class=\"hidden\">\n <h2>Your Poll</h2>\n <div id=\"poll-results\"></div>\n <button id=\"reset-poll\">Create New Poll</button>\n </section>\n</main>\n\n<footer>\n <p>Share your poll and gather opinions!</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --secondary-color: #50e3c2;\n --background-color: #f5f5f5;\n --text-color: #333;\n --border-radius: 8px;\n --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n padding: 20px;\n}\n\nheader {\n text-align: center;\n margin-bottom: 40px;\n}\n\nh1 {\n color: var(--primary-color);\n font-size: 2.5rem;\n}\n\nh2 {\n color: var(--primary-color);\n margin-bottom: 20px;\n}\n\nmain {\n max-width: 800px;\n margin: 0 auto;\n}\n\n#poll-creator {\n background: white;\n padding: 20px;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n}\n\nlabel {\n display: block;\n margin-bottom: 10px;\n font-weight: bold;\n}\n\ninput[type=\"text\"] {\n width: 100%;\n padding: 10px;\n margin-bottom: 15px;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n}\n\n.option {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.option-input {\n flex: 1;\n margin-right: 10px;\n}\n\n.remove-option {\n background: #ff6b6b;\n color: white;\n border: none;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n cursor: pointer;\n}\n\nbutton {\n padding: 10px 20px;\n border: none;\n border-radius: var(--border-radius);\n background-color: var(--primary-color);\n color: white;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: var(--secondary-color);\n}\n\n#add-option {\n margin-bottom: 20px;\n}\n\n#poll-display {\n background: white;\n padding: 20px;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n margin-top: 20px;\n}\n\n#poll-results {\n margin-bottom: 20px;\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n margin-top: 40px;\n color: #666;\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n\n input[type=\"text\"] {\n padding: 8px;\n }\n\n button {\n padding: 8px 16px;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function () {\n const pollForm = document.getElementById('poll-form');\n const optionsContainer = document.getElementById('options-container');\n const addOptionButton = document.getElementById('add-option');\n const pollDisplay = document.getElementById('poll-display');\n const pollResults = document.getElementById('poll-results');\n const resetPollButton = document.getElementById('reset-poll');\n\n let optionCount = 1;\n\n addOptionButton.addEventListener('click', function () {\n optionCount++;\n const newOption = document.createElement('div');\n newOption.classList.add('option');\n newOption.innerHTML = `\n <input type=\"text\" class=\"option-input\" placeholder=\"Option ${optionCount}\" required>\n <button type=\"button\" class=\"remove-option\">×</button>\n `;\n optionsContainer.appendChild(newOption);\n });\n\n optionsContainer.addEventListener('click', function (e) {\n if (e.target.classList.contains('remove-option')) {\n e.target.parentElement.remove();\n optionCount--;\n }\n });\n\n pollForm.addEventListener('submit', function (e) {\n e.preventDefault();\n const question = document.getElementById('poll-question').value;\n const options = Array.from(document.querySelectorAll('.option-input')).map(input => input.value);\n\n pollResults.innerHTML = `\n <h3>${question}</h3>\n <ul>\n ${options.map(option => `<li>${option}</li>`).join('')}\n </ul>\n `;\n\n pollForm.reset();\n optionsContainer.innerHTML = `\n <label>Poll Options:</label>\n <div class=\"option\">\n <input type=\"text\" class=\"option-input\" placeholder=\"Option 1\" required>\n <button type=\"button\" class=\"remove-option\">×</button>\n </div>\n `;\n optionCount = 1;\n\n pollDisplay.classList.remove('hidden');\n pollForm.classList.add('hidden');\n });\n\n resetPollButton.addEventListener('click', function () {\n pollDisplay.classList.add('hidden');\n pollForm.classList.remove('hidden');\n });\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 258, + "completion_tokens": 1467, + "total_tokens": 1725, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 258 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..4481956 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# pollify.scroll.pub +Website generated by DeepSeek from prompt: Create an Interactive Webpage for opinion polls. Should be user friendly and colourful. Should be easy to customise all options \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..7563862 --- /dev/null +++ b/script.js @@ -0,0 +1,59 @@ +document.addEventListener('DOMContentLoaded', function () { + const pollForm = document.getElementById('poll-form'); + const optionsContainer = document.getElementById('options-container'); + const addOptionButton = document.getElementById('add-option'); + const pollDisplay = document.getElementById('poll-display'); + const pollResults = document.getElementById('poll-results'); + const resetPollButton = document.getElementById('reset-poll'); + + let optionCount = 1; + + addOptionButton.addEventListener('click', function () { + optionCount++; + const newOption = document.createElement('div'); + newOption.classList.add('option'); + newOption.innerHTML = ` + <input type="text" class="option-input" placeholder="Option ${optionCount}" required> + <button type="button" class="remove-option">×</button> + `; + optionsContainer.appendChild(newOption); + }); + + optionsContainer.addEventListener('click', function (e) { + if (e.target.classList.contains('remove-option')) { + e.target.parentElement.remove(); + optionCount--; + } + }); + + pollForm.addEventListener('submit', function (e) { + e.preventDefault(); + const question = document.getElementById('poll-question').value; + const options = Array.from(document.querySelectorAll('.option-input')).map(input => input.value); + + pollResults.innerHTML = ` + <h3>${question}</h3> + <ul> + ${options.map(option => `<li>${option}</li>`).join('')} + </ul> + `; + + pollForm.reset(); + optionsContainer.innerHTML = ` + <label>Poll Options:</label> + <div class="option"> + <input type="text" class="option-input" placeholder="Option 1" required> + <button type="button" class="remove-option">×</button> + </div> + `; + optionCount = 1; + + pollDisplay.classList.remove('hidden'); + pollForm.classList.add('hidden'); + }); + + resetPollButton.addEventListener('click', function () { + pollDisplay.classList.add('hidden'); + pollForm.classList.remove('hidden'); + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c257ef2 --- /dev/null +++ b/style.css @@ -0,0 +1,138 @@ +:root { + --primary-color: #4a90e2; + --secondary-color: #50e3c2; + --background-color: #f5f5f5; + --text-color: #333; + --border-radius: 8px; + --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); + padding: 20px; +} + +header { + text-align: center; + margin-bottom: 40px; +} + +h1 { + color: var(--primary-color); + font-size: 2.5rem; +} + +h2 { + color: var(--primary-color); + margin-bottom: 20px; +} + +main { + max-width: 800px; + margin: 0 auto; +} + +#poll-creator { + background: white; + padding: 20px; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); +} + +label { + display: block; + margin-bottom: 10px; + font-weight: bold; +} + +input[type="text"] { + width: 100%; + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ddd; + border-radius: var(--border-radius); +} + +.option { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.option-input { + flex: 1; + margin-right: 10px; +} + +.remove-option { + background: #ff6b6b; + color: white; + border: none; + border-radius: 50%; + width: 24px; + height: 24px; + cursor: pointer; +} + +button { + padding: 10px 20px; + border: none; + border-radius: var(--border-radius); + background-color: var(--primary-color); + color: white; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: var(--secondary-color); +} + +#add-option { + margin-bottom: 20px; +} + +#poll-display { + background: white; + padding: 20px; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + margin-top: 20px; +} + +#poll-results { + margin-bottom: 20px; +} + +.hidden { + display: none; +} + +footer { + text-align: center; + margin-top: 40px; + color: #666; +} + +@media (max-width: 600px) { + h1 { + font-size: 2rem; + } + + input[type="text"] { + padding: 8px; + } + + button { + padding: 8px 16px; + } +} \ No newline at end of file