Skip to content

Commit

Permalink
add googlepay link
Browse files Browse the repository at this point in the history
  • Loading branch information
tadjik1 committed Jul 2, 2024
1 parent f4e811f commit c2f30dc
Show file tree
Hide file tree
Showing 7 changed files with 7 additions and 385 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ life with your Sonic Ink! It's a new and exciting way to make your memories last
<img src="./src/assets/img/app-store-badge.svg" alt="InkStory on AppStore" width="200"/>
</a>
<br/>
<a href="#!">
<a href="https://play.google.com/store/apps/details?id=com.sergey.zelenov.inkstory">
<img src="./src/assets/img/google-play-badge.svg" alt="InkStory on Google Play" width="200"/>
</a>

Expand Down
2 changes: 1 addition & 1 deletion dist/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
<div class="container px-5">
<h2 class="text-center text-white font-alt mb-4">Get the app now!</h2>
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-center">
<a class="me-lg-3 mb-4 mb-lg-0" href="#"><img class="app-badge" src="/assets/img/google-play-badge.svg" alt="InkStory Google Play" /></a>
<a class="me-lg-3 mb-4 mb-lg-0" href="https://play.google.com/store/apps/details?id=com.sergey.zelenov.inkstory"><img class="app-badge" src="/assets/img/google-play-badge.svg" alt="InkStory Google Play" /></a>
<a href="https://apps.apple.com/app/inkstory/id6478854889"><img class="app-badge" src="/assets/img/app-store-badge.svg" alt="InkStory App Store" /></a>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
<h1 class="display-1 lh-1 mb-3">Unleash the Sound of Your Tattoo</h1>
<p class="lead fw-normal text-muted mb-5">Welcome to InkStory, the mobile app that lets you upload sounds you want to memorize and brings them to life with your Sonic Ink! It's a new and exciting way to make your memories last forever.</p>
<div class="d-flex flex-column flex-lg-row align-items-center">
<a class="me-lg-3 mb-4 mb-lg-0" href="#"><img class="app-badge" src="/assets/img/google-play-badge.svg" alt="InkStory Google Play" /></a>
<a class="me-lg-3 mb-4 mb-lg-0" href="https://play.google.com/store/apps/details?id=com.sergey.zelenov.inkstory"><img class="app-badge" src="/assets/img/google-play-badge.svg" alt="InkStory Google Play" /></a>
<a href="https://apps.apple.com/app/inkstory/id6478854889"><img class="app-badge" src="/assets/img/app-store-badge.svg" alt="InkStory App Store" /></a>
</div>
</div>
Expand Down Expand Up @@ -206,7 +206,7 @@ <h2 class="display-4 lh-1 mb-4">Where Tattoos Sing and Memories Resonate</h2>
<div class="container px-5">
<h2 class="text-center text-white font-alt mb-4">Get the app now!</h2>
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-center">
<a class="me-lg-3 mb-4 mb-lg-0" href="#"><img class="app-badge" src="/assets/img/google-play-badge.svg" alt="InkStory Google Play" /></a>
<a class="me-lg-3 mb-4 mb-lg-0" href="https://play.google.com/store/apps/details?id=com.sergey.zelenov.inkstory"><img class="app-badge" src="/assets/img/google-play-badge.svg" alt="InkStory Google Play" /></a>
<a href="https://apps.apple.com/app/inkstory/id6478854889"><img class="app-badge" src="/assets/img/app-store-badge.svg" alt="InkStory App Store" /></a>
</div>
</div>
Expand Down
189 changes: 0 additions & 189 deletions dist/js/scripts.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,7 @@
// Scripts
//

const samples = 70;
const startColor = [41, 55, 240];
const endColor = [159, 26, 226];

// let player;
// function onYouTubeIframeAPIReady() {
// player = new YT.Player("ytvideo", {
// height: "390",
// width: "640",
// videoId: "3fZAoBecLpU",
// playerVars: {},
// });
// }

window.addEventListener("DOMContentLoaded", (event) => {
// Activate YouTube embeded iframe
const tag = document.createElement("script");

tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Activate Bootstrap scrollspy on the main nav element
const mainNav = document.body.querySelector("#mainNav");
if (mainNav) {
Expand All @@ -50,172 +29,4 @@ window.addEventListener("DOMContentLoaded", (event) => {
}
});
});

const createTattooButton = document.getElementById("create-tattoo");
const saveTattooButton = document.getElementById("save-tattoo");
const soundFileInput = document.getElementById("sound");

soundFileInput.addEventListener("change", (e) => {
const file = soundFileInput.files[0];
const reader = new FileReader();

reader.onerror = (error) => console.error(error);
reader.onload = async () => {
const audioContext = new AudioContext();
const audioBuffer = await audioContext
.decodeAudioData(reader.result)
.catch((_) => null);

if (!audioBuffer) {
alert("Unable to read the file, please try another one");
return;
}

if (audioBuffer.duration > 60) {
alert("Selected audio file is too long, max. 60s");
return;
}

const filteredData = filterData(audioBuffer);
const normalizedData = normalizeData(filteredData);

console.log(normalizedData);

draw(normalizedData);

createTattooButton.style.display = "none";
saveTattooButton.style.display = "block";
};

reader.readAsArrayBuffer(file);
});

saveTattooButton.addEventListener("click", () => {
const svgNode = document
.getElementById("tattoo-canvas")
.querySelector("svg");
const svgString = new XMLSerializer().serializeToString(svgNode);
const svgBlob = new Blob([svgString], {
type: "image/svg+xml;charset=utf-8",
});

const url = URL.createObjectURL(svgBlob);

const image = new Image();
image.width = svgNode.width.baseVal.value;
image.height = svgNode.height.baseVal.value;
image.src = url;
image.onload = function () {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;

const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
URL.revokeObjectURL(url);

const imgURI = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");

const a = document.createElement("a");
a.download = "tattoo.png";
a.target = "_blank";
a.href = imgURI;
a.click();
};
});

document
.getElementById("tattooModal")
.addEventListener("hide.bs.modal", () => {
soundFileInput.value = null;
createTattooButton.style.display = "block";
saveTattooButton.style.display = "none";
});

// document
// .getElementById("collapseTwo")
// .addEventListener("hide.bs.collapse", () => {
// player.stopVideo();
// });

// document
// .getElementById("faqModal")
// .addEventListener("hide.bs.modal", () => {
// player.stopVideo();
// });

createTattooButton.addEventListener("click", () => {
soundFileInput.click();
});
});

// divide 1st channel of the buffer in {samples} amount of bins and take avg. from each
function filterData(audioBuffer) {
const rawData = audioBuffer.getChannelData(0);
const blockSize = Math.floor(rawData.length / samples);
const filteredData = [];
for (let i = 0; i < samples; i++) {
let blockStart = blockSize * i;
let sum = 0;
for (let j = 0; j < blockSize; j++) {
sum = sum + Math.abs(rawData[blockStart + j]);
}
filteredData.push(sum / blockSize);
}
return filteredData;
}

function normalizeData(filteredData) {
const multiplier = Math.pow(Math.max(...filteredData), -1);
return filteredData.map((n) => n * multiplier);
}

function interpolate(color1, color2, factor = 0.5) {
let result = color1.slice();
for (let i = 0; i < 3; i++) {
result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
}
return result;
}

function draw(normalizedData) {
// make them dynamic?
const barWidth = 2;
const gap = 0;

const audioSvg = document.createElementNS(
"http://www.w3.org/2000/svg",
"svg"
);

// width - number of samples * (width of the bar + gap)
audioSvg.setAttribute("viewBox", "0 0 560 200");

for (let i = 0; i < normalizedData.length; i++) {
const data = normalizedData[i];
const height = Math.abs(data * 200);
const factor = i / samples;

const rect = document.createElementNS(
"http://www.w3.org/2000/svg",
"rect"
);

rect.setAttribute(
"transform",
`translate(${i * (barWidth + gap)},${100 - height / 2})`
);
rect.setAttribute("width", barWidth.toString());
rect.setAttribute("height", height.toString());
rect.setAttribute(
"fill",
`rgb(${interpolate(startColor, endColor, factor).join(",")})`
);

audioSvg.appendChild(rect);
}

document.getElementById("tattoo-canvas").appendChild(audioSvg);
}
Loading

0 comments on commit c2f30dc

Please sign in to comment.