diff --git a/Contra.webm b/Contra.webm new file mode 100644 index 0000000..291cd75 Binary files /dev/null and b/Contra.webm differ diff --git a/Ubuntu.zip b/Ubuntu.zip new file mode 100644 index 0000000..f34752f Binary files /dev/null and b/Ubuntu.zip differ diff --git a/facebook.svg b/facebook.svg new file mode 100644 index 0000000..5b33330 --- /dev/null +++ b/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/github.svg b/github.svg new file mode 100644 index 0000000..eb91d6b --- /dev/null +++ b/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 70f6f59..0f176a1 100644 --- a/index.html +++ b/index.html @@ -9,5 +9,10 @@ + \ No newline at end of file diff --git a/instagram.svg b/instagram.svg new file mode 100644 index 0000000..216c29a --- /dev/null +++ b/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/linkedin.svg b/linkedin.svg new file mode 100644 index 0000000..59511a3 --- /dev/null +++ b/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main.js b/main.js index e69de29..b7de52a 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,223 @@ +let style = document.createElement("style"); +document.head.appendChild(style); +style.sheet.insertRule(` + @font-face{ + font-family: ubuntu; + src: url(ubuntu-medium.ttf); + } +`); +style.sheet.insertRule(` + *{ + box-sizing: border-box; + overflow: hidden; + } +`); +style.sheet.insertRule(` + html,body{ + height: 100%; + margin: 0; + font-family: Ubuntu; + } +`); +style.sheet.insertRule(` + .canvas-presentation{ + width: 100%; + height: 100%; + } +`); + +let canvas = document.createElement("canvas"); +document.body.appendChild(canvas); + +let width, height; + +function calculateCanvasRect() +{ + let rect = canvas.getClientRects()[0]; + for (const [name, value] of Object.entries({ + width: (width = rect.width)+"px", + height: (height = rect.height)+"px" + })) canvas.setAttribute(name,value); +} + +document.body.addEventListener("resize", calculateCanvasRect); +window.addEventListener("resize", calculateCanvasRect); + +for (const [name, value] of Object.entries({ + role:"presentation", + class: "canvas-presentation" +})) canvas.setAttribute(name,value); + +calculateCanvasRect(); + +let ctx = canvas.getContext("2d"); + +ctx.fillRect(50,50,50,50); + +const audioCtx = new AudioContext(); +const analyser = audioCtx.createAnalyser(); + +/** + * @type {HTMLAudioElement} + */ +let taudio = document.querySelector("#taudio"); + +const source = audioCtx.createBufferSource(); + +fetch("Contra.webm").then(e => e.arrayBuffer()).then(e => { + audioCtx.decodeAudioData(e).then(e => { + source.buffer = e; + source.loop = true; + }) +}) + +source.connect(analyser); +source.connect(audioCtx.destination); + +canvas.addEventListener("click",async ()=>{ + await audioCtx.resume(); + source.start(); +},{once:true}) + +analyser.fftSize = 2 ** 13; +const bufferLength = analyser.frequencyBinCount; +const dataArray = new Uint8Array(bufferLength); + +let o = 0,k = 0; +document.body.style.transition = `.2s all`; +function RenderWave() +{ + ctx.clearRect(0, 0, width, height); + analyser.getByteTimeDomainData(dataArray); + ctx.fillStyle = `rgba(0, 0, 0, 0)`; + ctx.fillRect(0, 0, width, height); + + let r = (255-((o/k)*5)|0); + let rx = [Math.max(128, r),Math.max(32, r),Math.max(16, r)]; + document.body.style.backgroundColor = `rgba( ${rx[0]}, ${rx[1]}, ${rx[2]},1)`; + + o = 0; + k = 0; + + ctx.lineWidth = 3; + ctx.strokeStyle = "rgb(255,0, 0)"; + ctx.beginPath(); + const sliceWidth = width / bufferLength; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + const v = 128 - dataArray[i]; + let V = (v * 1.5) + (height/2); + + if(x < 256){ + o += v < 0 ? -v : v; + k++; + }; + + if (i === 0) { + ctx.moveTo(x, V); + } else { + ctx.lineTo(x, V); + } + + x += sliceWidth; + } + ctx.lineTo(width, height / 2); + ctx.stroke(); + + requestAnimationFrame(RenderWave) +}; + +requestAnimationFrame(RenderWave); + +let logoContainer = document.createElement("logo"); +style.sheet.insertRule(` + logo{ + position: fixed; + left: 0; + top: 0; + vertical-align: middle; + font-size: 4vw; + text-shadow: 0 0 3px white; + } +`); + + +let image = document.createElement("img"); +image.src = "saQüt.png" +image.classList.add("logo"); +let span = document.createElement("span"); +span.textContent = "saQüt Software"; + +style.sheet.insertRule(` + .logo{ + max-width: 5vw; + vertical-align: middle; + } +`); + +logoContainer.appendChild(image); +logoContainer.appendChild(span); +document.body.appendChild(logoContainer); + + + + +let supportContainer = document.createElement("links"); +style.sheet.insertRule(` + links{ + position: fixed; + bottom: 0; + left: 0; right: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + } +`); +style.sheet.insertRule(` + links > .container { + background-color: white; + border-top-right-radius: 20px; + border-top-left-radius: 20px; + } +`); + +let div = document.createElement("div"); +div.classList.add("container"); + +let facebook = document.createElement("img"); +facebook.src = "facebook.svg" +facebook.classList.add("icon"); +facebook.addEventListener("click",()=> window.open("https://www.facebook.com/saQut/")); + +let linkedin = document.createElement("img"); +linkedin.src = "linkedin.svg" +linkedin.classList.add("icon"); +linkedin.addEventListener("click",()=> window.open("https://www.linkedin.com/in/abdussamed-ulutas")); + +let share2 = document.createElement("img"); +share2.src = "share-2.svg" +share2.classList.add("icon"); +share2.addEventListener("click",()=> window.open("https://www.abdussamedulutas.com.tr")); + +let git = document.createElement("img"); +git.src = "github.svg" +git.classList.add("icon"); +git.addEventListener("click",()=> window.open("https://git.saqut.com")); + + +style.sheet.insertRule(` + .icon{ + max-width: 5vw; + margin: 10px; + cursor: pointer; + } +`); + +div.appendChild(facebook); +div.appendChild(linkedin); +div.appendChild(share2); +div.appendChild(git); +supportContainer.appendChild(div); +document.body.appendChild(supportContainer); \ No newline at end of file diff --git a/saQüt.png b/saQüt.png new file mode 100644 index 0000000..aa54931 Binary files /dev/null and b/saQüt.png differ diff --git a/share-2.svg b/share-2.svg new file mode 100644 index 0000000..96a5e73 --- /dev/null +++ b/share-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ubuntu-medium.ttf b/ubuntu-medium.ttf new file mode 100644 index 0000000..7340a40 Binary files /dev/null and b/ubuntu-medium.ttf differ