Changes to focusfun.scroll.pub

root

20 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Focus Fun
+   Interactive activities to help kids improve concentration!
+ 
+ 
+ 
+   
+     Breathing Exercise
+     
+       
+     
+     Follow the circle as it grows and shrinks. Breathe in as it grows, breathe out as it shrinks.
+   
+ 
+   
+     Memory Game
+     
+       
+       
+       
+       
+     
+     Find matching pairs by remembering their positions!
+   
+ 
+   
+     Focus Challenge
+     
+       
+     
+     Keep your eyes on the moving target for as long as you can!
+   
+ 
+ 
+ 
+   Made with ❤️ for kids everywhere
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://focusfun.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Focus Fun - Improve Concentration for Kids
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "466331cd-e977-417d-9535-d9433fbf8164",
+   "object": "chat.completion",
+   "created": 1735820683,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nfocusfun.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://focusfun.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Focus Fun - Improve Concentration for Kids\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Focus Fun\n  Interactive activities to help kids improve concentration!
\n\n\n\n  \n    Breathing Exercise\n    \n      
\n    
\n    Follow the circle as it grows and shrinks. Breathe in as it grows, breathe out as it shrinks.
\n  \n\n  \n    Memory Game\n    \n      
\n      
\n      
\n      
\n    
\n    Find matching pairs by remembering their positions!
\n  \n\n  \n    Focus Challenge\n    \n      
\n    
\n    Keep your eyes on the moving target for as long as you can!
\n  \n\n\n\n  Made with ❤️ for kids everywhere
\n\n---style.css---\n:root {\n  --primary-color: #4CAF50;\n  --secondary-color: #FFC107;\n  --background-color: #F5F5F5;\n  --text-color: #333;\n}\n\nbody {\n  font-family: 'Arial', sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  line-height: 1.6;\n}\n\nheader {\n  background: var(--primary-color);\n  color: white;\n  padding: 2rem;\n  text-align: center;\n}\n\nh1 {\n  margin: 0;\n  font-size: 2.5rem;\n}\n\nmain {\n  padding: 2rem;\n}\n\n.activity {\n  margin-bottom: 3rem;\n  background: white;\n  padding: 2rem;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.circle-container {\n  display: flex;\n  justify-content: center;\n  margin: 2rem 0;\n}\n\n.circle {\n  width: 100px;\n  height: 100px;\n  background: var(--secondary-color);\n  border-radius: 50%;\n  animation: breathe 4s infinite;\n}\n\n@keyframes breathe {\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.5); }\n}\n\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 1rem;\n  margin: 2rem 0;\n}\n\n.card {\n  background: var(--primary-color);\n  height: 100px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: transform 0.3s;\n}\n\n.card:hover {\n  transform: scale(1.05);\n}\n\n.focus-container {\n  position: relative;\n  height: 200px;\n  margin: 2rem 0;\n}\n\n.moving-target {\n  width: 50px;\n  height: 50px;\n  background: var(--secondary-color);\n  border-radius: 50%;\n  position: absolute;\n  animation: move 5s infinite alternate;\n}\n\n@keyframes move {\n  0% { left: 0; top: 0; }\n  50% { left: calc(100% - 50px); top: calc(100% - 50px); }\n  100% { left: 0; top: calc(100% - 50px); }\n}\n\nfooter {\n  text-align: center;\n  padding: 1rem;\n  background: var(--primary-color);\n  color: white;\n}\n\n@media (max-width: 768px) {\n  h1 {\n    font-size: 2rem;\n  }\n\n  .card-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n---script.js---\n// Memory Game Logic\nconst cards = document.querySelectorAll('.card');\nlet hasFlippedCard = false;\nlet lockBoard = false;\nlet firstCard, secondCard;\n\nfunction flipCard() {\n  if (lockBoard) return;\n  if (this === firstCard) return;\n\n  this.classList.add('flipped');\n\n  if (!hasFlippedCard) {\n    hasFlippedCard = true;\n    firstCard = this;\n    return;\n  }\n\n  secondCard = this;\n  checkForMatch();\n}\n\nfunction checkForMatch() {\n  let isMatch = firstCard.dataset.value === secondCard.dataset.value;\n  isMatch ? disableCards() : unflipCards();\n}\n\nfunction disableCards() {\n  firstCard.removeEventListener('click', flipCard);\n  secondCard.removeEventListener('click', flipCard);\n  resetBoard();\n}\n\nfunction unflipCards() {\n  lockBoard = true;\n  setTimeout(() => {\n    firstCard.classList.remove('flipped');\n    secondCard.classList.remove('flipped');\n    resetBoard();\n  }, 1000);\n}\n\nfunction resetBoard() {\n  [hasFlippedCard, lockBoard] = [false, false];\n  [firstCard, secondCard] = [null, null];\n}\n\n(function shuffle() {\n  cards.forEach(card => {\n    let randomPos = Math.floor(Math.random() * 12);\n    card.style.order = randomPos;\n  });\n})();\n\ncards.forEach(card => card.addEventListener('click', flipCard));\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 251,
+     "completion_tokens": 1321,
+     "total_tokens": 1572,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 251
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # focusfun.scroll.pub

+ Website generated by DeepSeek from prompt: 我需要创建一个网站，让小学生可以提高专注度，要有一些互动，有创意一些

script.js

Changed around line 1
+ // Memory Game Logic
+ const cards = document.querySelectorAll('.card');
+ let hasFlippedCard = false;
+ let lockBoard = false;
+ let firstCard, secondCard;
+ 
+ function flipCard() {
+   if (lockBoard) return;
+   if (this === firstCard) return;
+ 
+   this.classList.add('flipped');
+ 
+   if (!hasFlippedCard) {
+     hasFlippedCard = true;
+     firstCard = this;
+     return;
+   }
+ 
+   secondCard = this;
+   checkForMatch();
+ }
+ 
+ function checkForMatch() {
+   let isMatch = firstCard.dataset.value === secondCard.dataset.value;
+   isMatch ? disableCards() : unflipCards();
+ }
+ 
+ function disableCards() {
+   firstCard.removeEventListener('click', flipCard);
+   secondCard.removeEventListener('click', flipCard);
+   resetBoard();
+ }
+ 
+ function unflipCards() {
+   lockBoard = true;
+   setTimeout(() => {
+     firstCard.classList.remove('flipped');
+     secondCard.classList.remove('flipped');
+     resetBoard();
+   }, 1000);
+ }
+ 
+ function resetBoard() {
+   [hasFlippedCard, lockBoard] = [false, false];
+   [firstCard, secondCard] = [null, null];
+ }
+ 
+ (function shuffle() {
+   cards.forEach(card => {
+     let randomPos = Math.floor(Math.random() * 12);
+     card.style.order = randomPos;
+   });
+ })();
+ 
+ cards.forEach(card => card.addEventListener('click', flipCard));

style.css

Changed around line 1
+ :root {
+   --primary-color: #4CAF50;
+   --secondary-color: #FFC107;
+   --background-color: #F5F5F5;
+   --text-color: #333;
+ }
+ 
+ body {
+   font-family: 'Arial', sans-serif;
+   margin: 0;
+   padding: 0;
+   background-color: var(--background-color);
+   color: var(--text-color);
+   line-height: 1.6;
+ }
+ 
+ header {
+   background: var(--primary-color);
+   color: white;
+   padding: 2rem;
+   text-align: center;
+ }
+ 
+ h1 {
+   margin: 0;
+   font-size: 2.5rem;
+ }
+ 
+ main {
+   padding: 2rem;
+ }
+ 
+ .activity {
+   margin-bottom: 3rem;
+   background: white;
+   padding: 2rem;
+   border-radius: 8px;
+   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ }
+ 
+ .circle-container {
+   display: flex;
+   justify-content: center;
+   margin: 2rem 0;
+ }
+ 
+ .circle {
+   width: 100px;
+   height: 100px;
+   background: var(--secondary-color);
+   border-radius: 50%;
+   animation: breathe 4s infinite;
+ }
+ 
+ @keyframes breathe {
+   0%, 100% { transform: scale(1); }
+   50% { transform: scale(1.5); }
+ }
+ 
+ .card-grid {
+   display: grid;
+   grid-template-columns: repeat(2, 1fr);
+   gap: 1rem;
+   margin: 2rem 0;
+ }
+ 
+ .card {
+   background: var(--primary-color);
+   height: 100px;
+   border-radius: 8px;
+   cursor: pointer;
+   transition: transform 0.3s;
+ }
+ 
+ .card:hover {
+   transform: scale(1.05);
+ }
+ 
+ .focus-container {
+   position: relative;
+   height: 200px;
+   margin: 2rem 0;
+ }
+ 
+ .moving-target {
+   width: 50px;
+   height: 50px;
+   background: var(--secondary-color);
+   border-radius: 50%;
+   position: absolute;
+   animation: move 5s infinite alternate;
+ }
+ 
+ @keyframes move {
+   0% { left: 0; top: 0; }
+   50% { left: calc(100% - 50px); top: calc(100% - 50px); }
+   100% { left: 0; top: calc(100% - 50px); }
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 1rem;
+   background: var(--primary-color);
+   color: white;
+ }
+ 
+ @media (max-width: 768px) {
+   h1 {
+     font-size: 2rem;
+   }
+ 
+   .card-grid {
+     grid-template-columns: repeat(2, 1fr);
+   }
+ }