-
Notifications
You must be signed in to change notification settings - Fork 1
/
test.html
135 lines (111 loc) · 4.4 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<html>
<head>
<title>Save Text Input</title>
</head>
<body>
<h1>Save Text Input</h1>
<form action="/save" method="POST">
<label for="textInput">Enter Text:</label>
<input type="text" id="textInput" name="textInput" required>
<br>
<button type="submit">Save</button>
</form>
</body>
</html>
<form id="feedbackForm">
<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('feedbackForm').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the default form submission
var feedback = document.getElementById('feedback').value;
// Send the feedback data to the server
fetch('feedback.php', {
method: 'POST',
body: new URLSearchParams({
feedback: feedback
})
})
.then(function (response) {
// Handle the response from the server
if (response.ok) {
// Feedback submitted successfully
console.log('Feedback submitted');
} else {
// Error occurred
console.log('Error submitting feedback');
}
})
.catch(function (error) {
console.log('Error:', error);
});
});
</script>
<label for="frequency">Frequency:</label>
<input type="range" id="frequency" min="1" max="10" value="5">
<br>
<label for="amplitude">Amplitude:</label>
<input type="range" id="amplitude" min="10" max="100" value="50">
<br>
<label for="speed">Speed:</label>
<input type="range" id="speed" min="0.1" max="1" step="0.1" value="0.5">
<br>
<label for="gradientColor1">Gradient Color 1:</label>
<input type="color" id="gradientColor1" value="#ff0000">
<br>
<label for="gradientColor2">Gradient Color 2:</label>
<input type="color" id="gradientColor2" value="#0000ff">
<br>
<canvas id="canvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const frequencySlider = document.getElementById('frequency');
const amplitudeSlider = document.getElementById('amplitude');
const speedSlider = document.getElementById('speed');
const gradientColor1Input = document.getElementById('gradientColor1');
const gradientColor2Input = document.getElementById('gradientColor2');
let time = 0;
function drawWave() {
const frequency = parseFloat(frequencySlider.value);
const amplitude = parseFloat(amplitudeSlider.value);
const speed = parseFloat(speedSlider.value);
const gradientColor1 = gradientColor1Input.value;
const gradientColor2 = gradientColor2Input.value;
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(0, canvas.height / 2);
const gradient = context.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, gradientColor1);
gradient.addColorStop(1, gradientColor2);
context.strokeStyle = gradient;
for (let x = 0; x < canvas.width; x++) {
const y = Math.sin((x / canvas.width) * frequency + time) * amplitude + canvas.height / 2;
context.lineTo(x, y);
}
context.lineWidth = 3;
context.stroke();
time += speed;
}
frequencySlider.addEventListener('input', drawWave);
amplitudeSlider.addEventListener('input', drawWave);
speedSlider.addEventListener('input', drawWave);
gradientColor1Input.addEventListener('input', drawWave);
gradientColor2Input.addEventListener('input', drawWave);
drawWave(); // Initial drawing
setInterval(drawWave, 20); // Redraw every 20 milliseconds
</script>
</body>
</html>