commit 3e7ed324df851df0ecee03b65041e91d6b33f357
Author: root <root@hub.scroll.pub> Date: 2024-12-28 00:37:17 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..3799f8a --- /dev/null +++ b/body.html @@ -0,0 +1,6 @@ +<main> + <canvas id="matrixCanvas"></canvas> + <div id="phraseContainer"> + <h1 id="phraseOfTheDay">Phrase of the Day</h1> + </div> +</main> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..2b3e9ad --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://matrixphrase.scroll.pub +metaTags +editButton /edit.html +title Matrix Phrase of the Day +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..9f666ce --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "bd09095a-8b57-4984-84fa-7de8867e5c4c", + "object": "chat.completion", + "created": 1735346227, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nmatrixphrase.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://matrixphrase.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Matrix Phrase of the Day\nstyle.css\nbody.html\nscript.js\n---body.html---\n<main>\n <canvas id=\"matrixCanvas\"></canvas>\n <div id=\"phraseContainer\">\n <h1 id=\"phraseOfTheDay\">Phrase of the Day</h1>\n </div>\n</main>\n---style.css---\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: black;\n overflow: hidden;\n font-family: 'Courier New', monospace;\n}\n\n#matrixCanvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n\n#phraseContainer {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 2;\n text-align: center;\n}\n\n#phraseOfTheDay {\n color: lime;\n font-size: 3rem;\n text-shadow: 0 0 10px lime;\n opacity: 0;\n animation: fadeIn 2s forwards;\n}\n\n@keyframes fadeIn {\n to {\n opacity: 1;\n }\n}\n\n@media (max-width: 768px) {\n #phraseOfTheDay {\n font-size: 2rem;\n }\n}\n---script.js---\nconst canvas = document.getElementById('matrixCanvas');\nconst ctx = canvas.getContext('2d');\n\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\nconst letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';\nconst lettersArray = letters.split('');\n\nconst fontSize = 14;\nconst columns = canvas.width / fontSize;\n\nconst drops = [];\nfor (let i = 0; i < columns; i++) {\n drops[i] = Math.floor(Math.random() * canvas.height);\n}\n\nfunction drawMatrix() {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n ctx.fillStyle = '#0F0';\n ctx.font = `${fontSize}px monospace`;\n\n for (let i = 0; i < drops.length; i++) {\n const text = lettersArray[Math.floor(Math.random() * lettersArray.length)];\n ctx.fillText(text, i * fontSize, drops[i] * fontSize);\n\n if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {\n drops[i] = 0;\n }\n\n drops[i]++;\n }\n}\n\nfunction animatePhrase() {\n const phrase = document.getElementById('phraseOfTheDay');\n const text = 'Phrase of the Day';\n let index = 0;\n\n const interval = setInterval(() => {\n phrase.textContent = text.slice(0, index);\n index++;\n\n if (index > text.length) {\n clearInterval(interval);\n }\n }, 100);\n}\n\nfunction resizeCanvas() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n}\n\nwindow.addEventListener('resize', resizeCanvas);\n\nsetInterval(drawMatrix, 50);\nsetTimeout(animatePhrase, 1000);\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 268, + "completion_tokens": 780, + "total_tokens": 1048, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 268 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..ba06e7c --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# matrixphrase.scroll.pub +Website generated by DeepSeek from prompt: A webpage with a background like matrix screen, with black and green letters falling down. At the center the phrase of day will form form the falling letters in matrix style. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e7b43ff --- /dev/null +++ b/script.js @@ -0,0 +1,60 @@ +const canvas = document.getElementById('matrixCanvas'); +const ctx = canvas.getContext('2d'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +const letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ'; +const lettersArray = letters.split(''); + +const fontSize = 14; +const columns = canvas.width / fontSize; + +const drops = []; +for (let i = 0; i < columns; i++) { + drops[i] = Math.floor(Math.random() * canvas.height); +} + +function drawMatrix() { + ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.fillStyle = '#0F0'; + ctx.font = `${fontSize}px monospace`; + + for (let i = 0; i < drops.length; i++) { + const text = lettersArray[Math.floor(Math.random() * lettersArray.length)]; + ctx.fillText(text, i * fontSize, drops[i] * fontSize); + + if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { + drops[i] = 0; + } + + drops[i]++; + } +} + +function animatePhrase() { + const phrase = document.getElementById('phraseOfTheDay'); + const text = 'Phrase of the Day'; + let index = 0; + + const interval = setInterval(() => { + phrase.textContent = text.slice(0, index); + index++; + + if (index > text.length) { + clearInterval(interval); + } + }, 100); +} + +function resizeCanvas() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; +} + +window.addEventListener('resize', resizeCanvas); + +setInterval(drawMatrix, 50); +setTimeout(animatePhrase, 1000); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6e4b6ef --- /dev/null +++ b/style.css @@ -0,0 +1,49 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: black; + overflow: hidden; + font-family: 'Courier New', monospace; +} + +#matrixCanvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +#phraseContainer { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + text-align: center; +} + +#phraseOfTheDay { + color: lime; + font-size: 3rem; + text-shadow: 0 0 10px lime; + opacity: 0; + animation: fadeIn 2s forwards; +} + +@keyframes fadeIn { + to { + opacity: 1; + } +} + +@media (max-width: 768px) { + #phraseOfTheDay { + font-size: 2rem; + } +} \ No newline at end of file