From 44fdf3796cf86021e8efddbad4015bd5453eb3ea Mon Sep 17 00:00:00 2001
From: manvi <manviraip@gmail.com>
Date: Fri, 20 Mar 2026 17:21:12 +0530
Subject: [PATCH] Add files via upload

---
 index.html | 362 +++++++++++++++++++++++++++++------------------------
 style.css  | 205 +++++++++++++++---------------
 2 files changed, 298 insertions(+), 269 deletions(-)
diff --git a/index.html b/index.html
index 8cc7ab0..7fcd286 100644
--- a/index.html
+++ b/index.html
@@ -1,167 +1,195 @@
-<!DOCTYPE html>
-<html>
-<head>
-<title>Typing Pulse Visualizer</title>
-
-<link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-<header>
-<h1>⌨️ Typing Pulse Visualizer</h1>
-<p>Click Start → then type for music 🎧🔥</p>
-</header>
-
-<button id="startBtn">Start Music</button>
-
-<div id="stats">
-Keys Pressed: <span id="keyCount">0</span><br>
-Typing Speed: <span id="speed">0</span> WPM<br>
-Typing Style: <span id="style">Waiting...</span>
-</div>
-
-<canvas id="canvas"></canvas>
-
-<script>
-let canvas = document.getElementById("canvas");
-let ctx = canvas.getContext("2d");
-
-function resizeCanvas(){
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
-}
-resizeCanvas();
-
-window.addEventListener("resize", resizeCanvas);
-
-let angle = 0;
-let energy = 0;
-
-let keys = 0;
-let startTime = null;
-
-let keyText = document.getElementById("keyCount");
-let speedText = document.getElementById("speed");
-let styleText = document.getElementById("style");
-
-/* AUDIO */
-let audioCtx = null;
-
-document.getElementById("startBtn").addEventListener("click", () => {
-    if (!audioCtx) {
-        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    }
-});
-
-/* 🎵 MELODIC SCALE */
-const melodyScale = [
-261.63, // C
-293.66, // D
-329.63, // E
-349.23, // F
-392.00, // G
-440.00, // A
-493.88, // B
-523.25  // C5
-];
-
-function playTypingSound(key){
-    if(!audioCtx) return;
-
-    let now = audioCtx.currentTime;
-
-    let index = key.charCodeAt(0) % melodyScale.length;
-    let freq = melodyScale[index];
-
-    let osc = audioCtx.createOscillator();
-    let gain = audioCtx.createGain();
-
-    osc.type = "sine";
-
-    osc.frequency.setValueAtTime(freq, now);
-
-    osc.connect(gain);
-    gain.connect(audioCtx.destination);
-
-    // smoother musical envelope
-    gain.gain.setValueAtTime(0.3, now);
-    gain.gain.exponentialRampToValueAtTime(0.001, now + 0.4);
-
-    osc.start(now);
-    osc.stop(now + 0.4);
-}
-
-/* KEY INPUT */
-document.addEventListener("keydown", function(e){
-
-playTypingSound(e.key.toLowerCase());
-
-if(!startTime){
-startTime = Date.now();
-}
-
-keys++;
-energy += 0.4;
-
-keyText.innerText = keys;
-
-let minutes = (Date.now() - startTime) / 60000;
-
-if(minutes > 0){
-let wpm = Math.floor((keys / 5) / minutes);
-speedText.innerText = wpm;
-
-if(wpm < 20){
-styleText.innerText = "Calm Thinker";
-}
-else if(wpm < 40){
-styleText.innerText = "Balanced Typer";
-}
-else{
-styleText.innerText = "Speed Typer";
-}
-}
-
-});
-
-/* ANIMATION */
-function animate(){
-
-ctx.fillStyle = "#000";
-ctx.fillRect(0,0,canvas.width,canvas.height);
-
-let cx = canvas.width / 2;
-let cy = canvas.height / 2;
-
-for(let i = 0; i < 100; i++){
-
-let t = i * 0.25 + angle;
-
-let x1 = cx + Math.sin(t) * 180;
-let y1 = cy + i * 5 - 250;
-
-let x2 = cx + Math.sin(t + Math.PI) * 180;
-
-ctx.strokeStyle = "rgba(0,255,0,0.8)";
-ctx.shadowBlur = 8;
-ctx.shadowColor = "rgba(0,255,0,0.8)";
-
-ctx.beginPath();
-ctx.moveTo(x1,y1);
-ctx.lineTo(x2,y1);
-ctx.stroke();
-}
-
-angle += 0.02 + energy;
-energy *= 0.93;
-
-requestAnimationFrame(animate);
-}
-
-animate();
-
-</script>
-
-</body>
-</html>
+<!DOCTYPE html>
+<html>
+<head>
+<title>Typing Pulse Visualizer</title>
+<link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+<header>
+<h1>⌨️ Typing Pulse Visualizer</h1>
+<p>Click Start → then type for music 🎧</p>
+</header>
+
+<button id="startBtn">Start Music</button>
+<button id="resetBtn">Reset</button>
+<button id="muteBtn">Mute</button>
+
+<div id="stats">
+Keys Pressed: <span id="keyCount">0</span><br>
+Typing Speed: <span id="speed">0</span> WPM<br>
+Typing Style: <span id="style">Waiting...</span><br>
+Time: <span id="time">0</span>s
+</div>
+
+<canvas id="canvas"></canvas>
+
+<script>
+
+let canvas=document.getElementById("canvas");
+let ctx=canvas.getContext("2d");
+
+canvas.width=window.innerWidth;
+canvas.height=window.innerHeight;
+
+let angle=0;
+let energy=0;
+
+let keys=0;
+let startTime=null;
+
+let keyText=document.getElementById("keyCount");
+let speedText=document.getElementById("speed");
+let styleText=document.getElementById("style");
+let timeText=document.getElementById("time");
+
+let audioCtx=null;
+let isMuted=false;
+
+document.getElementById("startBtn").onclick=()=>{
+if(!audioCtx){
+audioCtx=new(window.AudioContext||window.webkitAudioContext)();
+}
+};
+
+document.getElementById("muteBtn").onclick=()=>{
+isMuted=!isMuted;
+document.getElementById("muteBtn").innerText=isMuted?"Unmute":"Mute";
+};
+
+const scale=[261.63,293.66,329.63,349.23,392.00,440.00,493.88,523.25];
+
+function playTypingSound(key){
+if(!audioCtx || isMuted) return;
+
+let now=audioCtx.currentTime;
+let index=key.charCodeAt(0)%scale.length;
+let freq=scale[index]+Math.min(keys*3,300);
+
+let osc=audioCtx.createOscillator();
+let gain=audioCtx.createGain();
+
+osc.type=["sine","triangle","square"][Math.floor(Math.random()*3)];
+osc.frequency.setValueAtTime(freq,now);
+
+osc.connect(gain);
+gain.connect(audioCtx.destination);
+
+gain.gain.setValueAtTime(0.6,now);
+gain.gain.exponentialRampToValueAtTime(0.001,now+0.25);
+
+osc.start(now);
+osc.stop(now+0.25);
+
+if(keys%5===0){
+let bass=audioCtx.createOscillator();
+let bg=audioCtx.createGain();
+
+bass.frequency.value=100+Math.random()*50;
+bass.type="sawtooth";
+
+bass.connect(bg);
+bg.connect(audioCtx.destination);
+
+bg.gain.setValueAtTime(0.7,now);
+bg.gain.exponentialRampToValueAtTime(0.001,now+0.3);
+
+bass.start(now);
+bass.stop(now+0.3);
+}
+}
+
+document.addEventListener("keydown",(e)=>{
+
+if(e.key.length>1) return;
+
+playTypingSound(e.key.toLowerCase());
+
+if(!startTime){
+startTime=Date.now();
+}
+
+keys++;
+energy+=Math.random()*0.5;
+
+keyText.innerText=keys;
+
+let minutes=(Date.now()-startTime)/60000;
+
+if(minutes>0){
+let wpm=Math.floor((keys/5)/minutes);
+speedText.innerText=wpm;
+
+if(wpm<20){
+styleText.innerText="Calm Thinker";
+}
+else if(wpm<40){
+styleText.innerText="Balanced Typer";
+}
+else{
+styleText.innerText="Speed Typer";
+}
+}
+
+});
+
+setInterval(()=>{
+if(startTime){
+let seconds=Math.floor((Date.now()-startTime)/1000);
+timeText.innerText=seconds;
+}
+},1000);
+
+document.getElementById("resetBtn").onclick=()=>{
+keys=0;
+startTime=null;
+energy=0;
+
+keyText.innerText=0;
+speedText.innerText=0;
+styleText.innerText="Waiting...";
+timeText.innerText=0;
+};
+
+function animate(){
+
+ctx.fillStyle="rgba(0,0,0,0.15)";
+ctx.fillRect(0,0,canvas.width,canvas.height);
+
+let cx=canvas.width/2;
+let cy=canvas.height/2;
+
+for(let i=0;i<100;i++){
+
+let t=i*0.25+angle;
+
+let x1=cx+Math.sin(t)*180;
+let y1=cy+i*5-250;
+
+let x2=cx+Math.sin(t+Math.PI)*180;
+
+let hue=(angle*50+i*3)%360;
+
+ctx.strokeStyle="hsl("+hue+",100%,60%)";
+ctx.shadowBlur=12;
+ctx.shadowColor="hsl("+hue+",100%,60%)";
+
+ctx.beginPath();
+ctx.moveTo(x1,y1);
+ctx.lineTo(x2,y1);
+ctx.stroke();
+}
+
+angle+=0.02+energy;
+energy*=0.93;
+
+requestAnimationFrame(animate);
+}
+
+animate();
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 3b20994..130213c 100644
--- a/style.css
+++ b/style.css
@@ -1,102 +1,103 @@
-body{
-margin:0;
-height:100vh;
-overflow:hidden;
-
-background:#000;
-color:#00ff00;
-font-family: monospace;
-}
-
-/* HEADER */
-header{
-position:absolute;
-top:30px;
-width:100%;
-text-align:center;
-z-index:2;
-}
-
-header h1{
-font-size:42px;
-color:#00ff00;
-text-shadow:0 0 10px #00ff00;
-}
-
-header p{
-font-size:18px;
-opacity:0.85;
-margin-top:8px;
-}
-
-/* LEFT STATS PANEL */
-#stats{
-position:absolute;
-left:20px;
-top:120px;
-
-width:260px;
-
-background:#000;
-border:1px solid #00ff00;
-
-padding:25px;
-border-radius:8px;
-
-font-size:18px;
-line-height:2.2;
-
-z-index:2;
-
-box-shadow:0 0 20px rgba(0,255,0,0.2);
-}
-
-#stats span{
-display:block;
-font-size:22px;
-font-weight:bold;
-color:#00ff00;
-text-shadow:0 0 6px #00ff00;
-}
-
-/* BUTTON */
-#startBtn{
-position:absolute;
-bottom:30px;
-left:50%;
-transform:translateX(-50%);
-
-padding:12px 24px;
-font-size:16px;
-
-background:#000;
-color:#00ff00;
-
-border:1px solid #00ff00;
-border-radius:4px;
-
-cursor:pointer;
-
-z-index:2;
-
-transition:0.2s ease;
-}
-
-#startBtn:hover{
-background:#00ff00;
-color:#000;
-box-shadow:0 0 15px #00ff00;
-}
-
-#startBtn:active{
-transform:translateX(-50%) scale(0.95);
-}
-
-/* CANVAS */
-canvas{
-position:absolute;
-top:0;
-left:0;
-z-index:1;
-background:#000;
-}
+*{
+margin:0;
+padding:0;
+box-sizing:border-box;
+font-family:Segoe UI, sans-serif;
+}
+
+body{
+height:100vh;
+overflow:hidden;
+background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
+color:white;
+}
+
+
+header{
+position:absolute;
+top:20px;
+width:100%;
+text-align:center;
+}
+
+header h1{
+font-size:36px;
+letter-spacing:2px;
+}
+
+header p{
+opacity:0.8;
+margin-top:5px;
+}
+
+
+#stats{
+position:absolute;
+left:30px;
+top:120px;
+background:rgba(255,255,255,0.08);
+border:1px solid rgba(255,255,255,0.15);
+padding:25px;
+border-radius:12px;
+backdrop-filter:blur(10px);
+box-shadow:0 0 20px rgba(0,0,0,0.4);
+font-size:18px;
+line-height:2;
+animation:glow 3s infinite alternate;
+}
+
+#stats span{
+color:#00f7ff;
+font-weight:bold;
+}
+
+@keyframes glow{
+from{
+box-shadow:0 0 10px rgba(0,255,255,0.2);
+}
+to{
+box-shadow:0 0 25px rgba(0,255,255,0.6);
+}
+}
+
+canvas{
+display:block;
+}
+
+button{
+position:absolute;
+padding:10px 20px;
+font-size:15px;
+color:white;
+cursor:pointer;
+background:rgba(255,255,255,0.15);
+border:1px solid rgba(255,255,255,0.4);
+border-radius:8px;
+box-shadow:0 0 10px rgba(0,0,0,0.4);
+transition:all 0.2s ease;
+}
+
+button:hover{
+background:rgba(255,255,255,0.25);
+border-color:#00f7ff;
+}
+
+button:active{
+transform:scale(0.95);
+}
+
+#startBtn{
+bottom:30px;
+left:50%;
+transform:translateX(-50%);
+}
+
+#resetBtn{
+bottom:30px;
+right:30px;
+}
+
+#muteBtn{
+bottom:30px;
+left:30px;
+}
\ No newline at end of file
