Changes to signalwave.scroll.pub

root

26 days ago

Initial commit

body.html

Changed around line 1
+ 
+   SignalWave
+   Generate and visualize periodic signals with customizable frequencies and harmonics.
+ 
+ 
+   
+     
+       Frequency (Hz):
+       
+     
+     
+       Harmonics:
+       
+     
+     
+       Signal Type:
+       
+     
+     
+   
+   
+     
+   
+ 
+ 
+   Explore the beauty of periodic signals with SignalWave.
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://signalwave.scroll.pub
+ metaTags
+ editButton /edit.html
+ title SignalWave - Periodic Signal Generator
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "868c6b23-3ca8-42f0-a5b2-513e3178babb",
+   "object": "chat.completion",
+   "created": 1735321573,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nsignalwave.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://signalwave.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SignalWave - Periodic Signal Generator\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  SignalWave\n  Generate and visualize periodic signals with customizable frequencies and harmonics.
\n\n\n  \n    \n      Frequency (Hz):\n      \n    
\n    \n      Harmonics:\n      \n    
\n    \n      Signal Type:\n      \n    
\n    \n  \n  \n    \n  \n\n\n  Explore the beauty of periodic signals with SignalWave.
\n\n---style.css---\nbody {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  margin: 0;\n  padding: 0;\n  background: linear-gradient(135deg, #1e3c72, #2a5298);\n  color: white;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n}\n\nheader {\n  text-align: center;\n  margin-bottom: 2rem;\n}\n\nheader h1 {\n  font-size: 2.5rem;\n  margin: 0;\n}\n\nheader p {\n  font-size: 1.2rem;\n  margin: 0.5rem 0 0;\n}\n\nmain {\n  width: 90%;\n  max-width: 800px;\n  background: rgba(255, 255, 255, 0.1);\n  padding: 2rem;\n  border-radius: 10px;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n}\n\n#controls {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 2rem;\n}\n\n.control-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\nlabel {\n  font-size: 1rem;\n}\n\ninput, select {\n  padding: 0.5rem;\n  border: none;\n  border-radius: 5px;\n  background: rgba(255, 255, 255, 0.8);\n  color: #333;\n}\n\nbutton {\n  padding: 0.5rem 1rem;\n  border: none;\n  border-radius: 5px;\n  background: #ff6f61;\n  color: white;\n  cursor: pointer;\n  transition: background 0.3s;\n}\n\nbutton:hover {\n  background: #ff3b2f;\n}\n\n#visualization {\n  width: 100%;\n  height: 300px;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 10px;\n  overflow: hidden;\n}\n\ncanvas {\n  width: 100%;\n  height: 100%;\n}\n\nfooter {\n  text-align: center;\n  margin-top: 2rem;\n  font-size: 0.9rem;\n}\n\n@media (max-width: 600px) {\n  header h1 {\n    font-size: 2rem;\n  }\n\n  header p {\n    font-size: 1rem;\n  }\n\n  #controls {\n    flex-direction: column;\n  }\n\n  button {\n    width: 100%;\n  }\n}\n---script.js---\nconst canvas = document.getElementById('signal-canvas');\nconst ctx = canvas.getContext('2d');\nconst frequencyInput = document.getElementById('frequency');\nconst harmonicsInput = document.getElementById('harmonics');\nconst signalTypeSelect = document.getElementById('signal-type');\nconst generateButton = document.getElementById('generate');\n\nfunction generateSignal() {\n  const frequency = parseFloat(frequencyInput.value);\n  const harmonics = parseInt(harmonicsInput.value);\n  const signalType = signalTypeSelect.value;\n\n  const width = canvas.width;\n  const height = canvas.height;\n  ctx.clearRect(0, 0, width, height);\n  ctx.beginPath();\n  ctx.strokeStyle = '#ff6f61';\n  ctx.lineWidth = 2;\n\n  for (let x = 0; x < width; x++) {\n    let y = 0;\n    for (let n = 1; n <= harmonics; n++) {\n      const amplitude = 1 / n;\n      const phase = (2 * Math.PI * frequency * n * x) / width;\n      y += amplitude * (signalType === 'sin' ? Math.sin(phase) : Math.cos(phase));\n    }\n    y = (y * height / 4) + height / 2;\n    if (x === 0) {\n      ctx.moveTo(x, y);\n    } else {\n      ctx.lineTo(x, y);\n    }\n  }\n\n  ctx.stroke();\n}\n\ngenerateButton.addEventListener('click', generateSignal);\nwindow.addEventListener('resize', () => {\n  canvas.width = canvas.offsetWidth;\n  canvas.height = canvas.offsetHeight;\n  generateSignal();\n});\n\ncanvas.width = canvas.offsetWidth;\ncanvas.height = canvas.offsetHeight;\ngenerateSignal();\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 263,
+     "completion_tokens": 1272,
+     "total_tokens": 1535,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 263
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # signalwave.scroll.pub

+ Website generated by DeepSeek from prompt: Create a page which allows to generate periodic singal sin and cos, it will allows to generate it on specific frequencies and provide harmonics. Be creative.

script.js

Changed around line 1
+ const canvas = document.getElementById('signal-canvas');
+ const ctx = canvas.getContext('2d');
+ const frequencyInput = document.getElementById('frequency');
+ const harmonicsInput = document.getElementById('harmonics');
+ const signalTypeSelect = document.getElementById('signal-type');
+ const generateButton = document.getElementById('generate');
+ 
+ function generateSignal() {
+   const frequency = parseFloat(frequencyInput.value);
+   const harmonics = parseInt(harmonicsInput.value);
+   const signalType = signalTypeSelect.value;
+ 
+   const width = canvas.width;
+   const height = canvas.height;
+   ctx.clearRect(0, 0, width, height);
+   ctx.beginPath();
+   ctx.strokeStyle = '#ff6f61';
+   ctx.lineWidth = 2;
+ 
+   for (let x = 0; x < width; x++) {
+     let y = 0;
+     for (let n = 1; n <= harmonics; n++) {
+       const amplitude = 1 / n;
+       const phase = (2 * Math.PI * frequency * n * x) / width;
+       y += amplitude * (signalType === 'sin' ? Math.sin(phase) : Math.cos(phase));
+     }
+     y = (y * height / 4) + height / 2;
+     if (x === 0) {
+       ctx.moveTo(x, y);
+     } else {
+       ctx.lineTo(x, y);
+     }
+   }
+ 
+   ctx.stroke();
+ }
+ 
+ generateButton.addEventListener('click', generateSignal);
+ window.addEventListener('resize', () => {
+   canvas.width = canvas.offsetWidth;
+   canvas.height = canvas.offsetHeight;
+   generateSignal();
+ });
+ 
+ canvas.width = canvas.offsetWidth;
+ canvas.height = canvas.offsetHeight;
+ generateSignal();

style.css

Changed around line 1
+ body {
+   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+   margin: 0;
+   padding: 0;
+   background: linear-gradient(135deg, #1e3c72, #2a5298);
+   color: white;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   min-height: 100vh;
+ }
+ 
+ header {
+   text-align: center;
+   margin-bottom: 2rem;
+ }
+ 
+ header h1 {
+   font-size: 2.5rem;
+   margin: 0;
+ }
+ 
+ header p {
+   font-size: 1.2rem;
+   margin: 0.5rem 0 0;
+ }
+ 
+ main {
+   width: 90%;
+   max-width: 800px;
+   background: rgba(255, 255, 255, 0.1);
+   padding: 2rem;
+   border-radius: 10px;
+   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+ }
+ 
+ #controls {
+   display: flex;
+   flex-wrap: wrap;
+   gap: 1rem;
+   margin-bottom: 2rem;
+ }
+ 
+ .control-group {
+   display: flex;
+   flex-direction: column;
+   gap: 0.5rem;
+ }
+ 
+ label {
+   font-size: 1rem;
+ }
+ 
+ input, select {
+   padding: 0.5rem;
+   border: none;
+   border-radius: 5px;
+   background: rgba(255, 255, 255, 0.8);
+   color: #333;
+ }
+ 
+ button {
+   padding: 0.5rem 1rem;
+   border: none;
+   border-radius: 5px;
+   background: #ff6f61;
+   color: white;
+   cursor: pointer;
+   transition: background 0.3s;
+ }
+ 
+ button:hover {
+   background: #ff3b2f;
+ }
+ 
+ #visualization {
+   width: 100%;
+   height: 300px;
+   background: rgba(255, 255, 255, 0.1);
+   border-radius: 10px;
+   overflow: hidden;
+ }
+ 
+ canvas {
+   width: 100%;
+   height: 100%;
+ }
+ 
+ footer {
+   text-align: center;
+   margin-top: 2rem;
+   font-size: 0.9rem;
+ }
+ 
+ @media (max-width: 600px) {
+   header h1 {
+     font-size: 2rem;
+   }
+ 
+   header p {
+     font-size: 1rem;
+   }
+ 
+   #controls {
+     flex-direction: column;
+   }
+ 
+   button {
+     width: 100%;
+   }
+ }