commit d3f20d324cc753863f29b498c3eb5c3d249aa19c
Author: root <root@hub.scroll.pub> Date: 2025-01-03 01:14:45 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..a5ee58e --- /dev/null +++ b/body.html @@ -0,0 +1,56 @@ +<header> + <h1>Should I Marry?</h1> + <p>Take the ultimate compatibility test to help you decide</p> +</header> + +<main> + <section class="quiz-section"> + <div class="progress-bar"> + <div class="progress"></div> + </div> + + <div class="question-container"> + <div class="question active"> + <h2>Question 1: How do you handle conflicts?</h2> + <div class="options"> + <button data-score="1">Avoid them completely</button> + <button data-score="3">Talk it out calmly</button> + <button data-score="5">Stand my ground firmly</button> + </div> + </div> + + <div class="question"> + <h2>Question 2: What's your view on finances?</h2> + <div class="options"> + <button data-score="1">Separate accounts only</button> + <button data-score="3">Some shared, some separate</button> + <button data-score="5">Fully combined finances</button> + </div> + </div> + + <div class="question"> + <h2>Question 3: How important is family?</h2> + <div class="options"> + <button data-score="1">Not very important</button> + <button data-score="3">Important but not everything</button> + <button data-score="5">Family comes first</button> + </div> + </div> + </div> + + <button class="next-btn" disabled>Next Question</button> + </section> + + <section class="results-section hidden"> + <h2>Your Results</h2> + <div class="result-meter"> + <div class="needle"></div> + </div> + <p class="result-text"></p> + <button class="retry-btn">Try Again</button> + </section> +</main> + +<footer> + <p>Made with ❤️ for thoughtful decisions</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..1b0de10 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://shouldimarry.scroll.pub +metaTags +editButton /edit.html +title Should I Marry? - The Ultimate Decision Tool +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..b245079 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "d51bd632-2120-4858-9ba6-890ac39732a8", + "object": "chat.completion", + "created": 1735866856, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nshouldimarry.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://shouldimarry.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Should I Marry? - The Ultimate Decision Tool\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Should I Marry?</h1>\n <p>Take the ultimate compatibility test to help you decide</p>\n</header>\n\n<main>\n <section class=\"quiz-section\">\n <div class=\"progress-bar\">\n <div class=\"progress\"></div>\n </div>\n \n <div class=\"question-container\">\n <div class=\"question active\">\n <h2>Question 1: How do you handle conflicts?</h2>\n <div class=\"options\">\n <button data-score=\"1\">Avoid them completely</button>\n <button data-score=\"3\">Talk it out calmly</button>\n <button data-score=\"5\">Stand my ground firmly</button>\n </div>\n </div>\n \n <div class=\"question\">\n <h2>Question 2: What's your view on finances?</h2>\n <div class=\"options\">\n <button data-score=\"1\">Separate accounts only</button>\n <button data-score=\"3\">Some shared, some separate</button>\n <button data-score=\"5\">Fully combined finances</button>\n </div>\n </div>\n \n <div class=\"question\">\n <h2>Question 3: How important is family?</h2>\n <div class=\"options\">\n <button data-score=\"1\">Not very important</button>\n <button data-score=\"3\">Important but not everything</button>\n <button data-score=\"5\">Family comes first</button>\n </div>\n </div>\n </div>\n \n <button class=\"next-btn\" disabled>Next Question</button>\n </section>\n\n <section class=\"results-section hidden\">\n <h2>Your Results</h2>\n <div class=\"result-meter\">\n <div class=\"needle\"></div>\n </div>\n <p class=\"result-text\"></p>\n <button class=\"retry-btn\">Try Again</button>\n </section>\n</main>\n\n<footer>\n <p>Made with ❤️ for thoughtful decisions</p>\n</footer>\n---style.css---\n:root {\n --primary: #ff6b6b;\n --secondary: #4ecdc4;\n --bg: #f7fff7;\n --text: #1a535c;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\nmain {\n flex: 1;\n padding: 2rem;\n max-width: 800px;\n margin: 0 auto;\n width: 100%;\n}\n\n.progress-bar {\n width: 100%;\n height: 10px;\n background: #eee;\n border-radius: 5px;\n margin-bottom: 2rem;\n overflow: hidden;\n}\n\n.progress {\n height: 100%;\n width: 0%;\n background: var(--primary);\n transition: width 0.3s ease;\n}\n\n.question-container {\n position: relative;\n min-height: 300px;\n}\n\n.question {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.question.active {\n opacity: 1;\n pointer-events: all;\n}\n\n.options {\n display: grid;\n gap: 1rem;\n margin-top: 2rem;\n}\n\n.options button {\n padding: 1rem;\n border: 2px solid var(--secondary);\n background: white;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.options button:hover {\n background: var(--secondary);\n color: white;\n transform: translateY(-2px);\n}\n\n.next-btn {\n margin-top: 2rem;\n padding: 1rem 2rem;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n float: right;\n transition: opacity 0.3s ease;\n}\n\n.next-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.results-section {\n text-align: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.results-section.visible {\n opacity: 1;\n pointer-events: all;\n}\n\n.result-meter {\n width: 200px;\n height: 200px;\n border-radius: 50%;\n background: conic-gradient(var(--primary) 0%, var(--secondary) 100%);\n margin: 2rem auto;\n position: relative;\n}\n\n.needle {\n width: 2px;\n height: 50%;\n background: var(--text);\n position: absolute;\n bottom: 50%;\n left: 50%;\n transform-origin: bottom;\n transform: rotate(-90deg);\n transition: transform 1s ease;\n}\n\n.result-text {\n font-size: 1.5rem;\n margin: 2rem 0;\n}\n\n.retry-btn {\n padding: 1rem 2rem;\n background: var(--secondary);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: var(--text);\n color: white;\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n \n .options {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\nconst questions = document.querySelectorAll('.question');\nconst options = document.querySelectorAll('.options button');\nconst nextBtn = document.querySelector('.next-btn');\nconst progressBar = document.querySelector('.progress');\nconst resultsSection = document.querySelector('.results-section');\nconst resultMeter = document.querySelector('.result-meter');\nconst needle = document.querySelector('.needle');\nconst resultText = document.querySelector('.result-text');\nconst retryBtn = document.querySelector('.retry-btn');\n\nlet currentQuestion = 0;\nlet totalScore = 0;\n\noptions.forEach(option => {\n option.addEventListener('click', () => {\n const score = parseInt(option.dataset.score);\n totalScore += score;\n \n // Disable all options\n option.parentElement.querySelectorAll('button').forEach(btn => {\n btn.disabled = true;\n });\n \n // Enable next button\n nextBtn.disabled = false;\n });\n});\n\nnextBtn.addEventListener('click', () => {\n if (currentQuestion < questions.length - 1) {\n questions[currentQuestion].classList.remove('active');\n currentQuestion++;\n questions[currentQuestion].classList.add('active');\n \n // Update progress bar\n const progress = ((currentQuestion + 1) / questions.length) * 100;\n progressBar.style.width = `${progress}%`;\n \n // Disable next button\n nextBtn.disabled = true;\n } else {\n showResults();\n }\n});\n\nfunction showResults() {\n document.querySelector('.quiz-section').classList.add('hidden');\n resultsSection.classList.add('visible');\n \n const averageScore = totalScore / questions.length;\n const rotation = (averageScore / 5) * 180 - 90;\n \n needle.style.transform = `rotate(${rotation}deg)`;\n \n if (averageScore < 2) {\n resultText.textContent = \"Maybe marriage isn't the right path for you right now.\";\n } else if (averageScore < 4) {\n resultText.textContent = \"You might want to wait and work on some things first.\";\n } else {\n resultText.textContent = \"You're ready! Marriage could be a great choice for you!\";\n }\n}\n\nretryBtn.addEventListener('click', () => {\n location.reload();\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 254, + "completion_tokens": 1884, + "total_tokens": 2138, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 254 + }, + "system_fingerprint": "fp_3a5770e1b4" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..c6f4075 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# shouldimarry.scroll.pub +Website generated by DeepSeek from prompt: 我想要一个网站,帮我决定是否需要结婚,所以他应该有一些数值工具和互动性,要有创意 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..dc4d918 --- /dev/null +++ b/script.js @@ -0,0 +1,66 @@ +const questions = document.querySelectorAll('.question'); +const options = document.querySelectorAll('.options button'); +const nextBtn = document.querySelector('.next-btn'); +const progressBar = document.querySelector('.progress'); +const resultsSection = document.querySelector('.results-section'); +const resultMeter = document.querySelector('.result-meter'); +const needle = document.querySelector('.needle'); +const resultText = document.querySelector('.result-text'); +const retryBtn = document.querySelector('.retry-btn'); + +let currentQuestion = 0; +let totalScore = 0; + +options.forEach(option => { + option.addEventListener('click', () => { + const score = parseInt(option.dataset.score); + totalScore += score; + + // Disable all options + option.parentElement.querySelectorAll('button').forEach(btn => { + btn.disabled = true; + }); + + // Enable next button + nextBtn.disabled = false; + }); +}); + +nextBtn.addEventListener('click', () => { + if (currentQuestion < questions.length - 1) { + questions[currentQuestion].classList.remove('active'); + currentQuestion++; + questions[currentQuestion].classList.add('active'); + + // Update progress bar + const progress = ((currentQuestion + 1) / questions.length) * 100; + progressBar.style.width = `${progress}%`; + + // Disable next button + nextBtn.disabled = true; + } else { + showResults(); + } +}); + +function showResults() { + document.querySelector('.quiz-section').classList.add('hidden'); + resultsSection.classList.add('visible'); + + const averageScore = totalScore / questions.length; + const rotation = (averageScore / 5) * 180 - 90; + + needle.style.transform = `rotate(${rotation}deg)`; + + if (averageScore < 2) { + resultText.textContent = "Maybe marriage isn't the right path for you right now."; + } else if (averageScore < 4) { + resultText.textContent = "You might want to wait and work on some things first."; + } else { + resultText.textContent = "You're ready! Marriage could be a great choice for you!"; + } +} + +retryBtn.addEventListener('click', () => { + location.reload(); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7724908 --- /dev/null +++ b/style.css @@ -0,0 +1,179 @@ +:root { + --primary: #ff6b6b; + --secondary: #4ecdc4; + --bg: #f7fff7; + --text: #1a535c; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', sans-serif; + background: var(--bg); + color: var(--text); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + text-align: center; + padding: 2rem; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +main { + flex: 1; + padding: 2rem; + max-width: 800px; + margin: 0 auto; + width: 100%; +} + +.progress-bar { + width: 100%; + height: 10px; + background: #eee; + border-radius: 5px; + margin-bottom: 2rem; + overflow: hidden; +} + +.progress { + height: 100%; + width: 0%; + background: var(--primary); + transition: width 0.3s ease; +} + +.question-container { + position: relative; + min-height: 300px; +} + +.question { + position: absolute; + top: 0; + left: 0; + width: 100%; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; +} + +.question.active { + opacity: 1; + pointer-events: all; +} + +.options { + display: grid; + gap: 1rem; + margin-top: 2rem; +} + +.options button { + padding: 1rem; + border: 2px solid var(--secondary); + background: white; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; +} + +.options button:hover { + background: var(--secondary); + color: white; + transform: translateY(-2px); +} + +.next-btn { + margin-top: 2rem; + padding: 1rem 2rem; + background: var(--primary); + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + float: right; + transition: opacity 0.3s ease; +} + +.next-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.results-section { + text-align: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; +} + +.results-section.visible { + opacity: 1; + pointer-events: all; +} + +.result-meter { + width: 200px; + height: 200px; + border-radius: 50%; + background: conic-gradient(var(--primary) 0%, var(--secondary) 100%); + margin: 2rem auto; + position: relative; +} + +.needle { + width: 2px; + height: 50%; + background: var(--text); + position: absolute; + bottom: 50%; + left: 50%; + transform-origin: bottom; + transform: rotate(-90deg); + transition: transform 1s ease; +} + +.result-text { + font-size: 1.5rem; + margin: 2rem 0; +} + +.retry-btn { + padding: 1rem 2rem; + background: var(--secondary); + color: white; + border: none; + border-radius: 8px; + cursor: pointer; +} + +footer { + text-align: center; + padding: 1rem; + background: var(--text); + color: white; +} + +@media (max-width: 600px) { + h1 { + font-size: 2rem; + } + + .options { + grid-template-columns: 1fr; + } +} \ No newline at end of file