-
- List of all additional data
- -
- (false);
+
+ return(
+
Support / Donate
-
-
+
+
)
diff --git a/src/Pages/About/About_res_1100.scss b/src/Pages/About/About_res_1100.scss
new file mode 100644
index 0000000..c45f12f
--- /dev/null
+++ b/src/Pages/About/About_res_1100.scss
@@ -0,0 +1,69 @@
+@media only screen and (max-width: 1100px) {
+ .About_Container{
+ width: 720px;
+ .FAQ, .Description, .Support, .Join{
+ width: 100%;
+ height: 300px;
+ }
+ .FAQ{
+ margin-left: 0;
+ }
+ .Support{
+ order: -1;
+ .Support_Left{
+ width: 70%;
+ .BG_Dot_2{
+ display: none;
+ }
+ .Support_Left_Content{
+ h2{
+ font-size: 32px;
+ }
+ p{
+ font-size: 12px;
+ }
+ ul{
+ font-size: 12px;
+ }
+ }
+ }
+ .Support_Right{
+ width: 30%;
+ background-color: #3F4650;
+ .Big_Dot_3{
+ display: none;
+ }
+ .Support_Right_Content{
+ position: relative;
+ background-color: #3F4650;
+ margin: 0;
+ left: -30px;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ img{
+ margin:0;
+ margin-top: -60px;
+ width: 80%;
+ }
+ a{
+ margin: 0;
+ width: 180px;
+ height: 30px;
+ font-size: 24px;
+ }
+ }
+ }
+ }
+ .Join{
+ height: fit-content;
+ h2{
+ font-size: 19px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/About/About_res_1480.scss b/src/Pages/About/About_res_1480.scss
new file mode 100644
index 0000000..46b9af7
--- /dev/null
+++ b/src/Pages/About/About_res_1480.scss
@@ -0,0 +1,91 @@
+@media only screen and (min-width: 1100px) and (max-height:900px){
+ .About_Container{
+ transform: scale(0.9);
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-top: -10px;
+ }
+}
+
+@media only screen and (max-width: 1480px) {
+ .About_Container{
+ width: 1080px;
+ .FAQ, .Description, .Support, .Join{
+ width: 100%;
+ }
+ .Description{
+ width: 440px;
+ .Description_Context{
+ .Description_Article{
+ h4{
+ font-size: 18px;
+ }
+ p{
+ font-size: 14px;
+ }
+ }
+ }
+ }
+ h3{
+ font-size: 28px;
+ }
+ .FAQ{
+ width: 620px;
+ .FAQ_container{
+ .FAQ_question{
+ max-height: 35px;
+ h5{
+ font-size: 16px;
+ }
+ .FAQ_question_container{
+ h4{
+ font-size: 18px;
+ height: 33px;
+ word-wrap: break-word;
+ display: flex;
+ align-items: center;
+ }
+ p{
+ font-size: 14px;
+ padding-top: 5px;
+ }
+ }
+ }
+ .FAQ_open{
+ max-height: 300px;
+ }
+ }
+ }
+ .Support{
+ .Support_Left{
+ .Support_Left_Content{
+ h2{
+ font-size: 40px;
+ }
+ p{
+ font-size: 14px;
+ }
+ ul{
+ font-size: 14px;
+ }
+ }
+ }
+ .Support_Right{
+ .Support_Right_Content{
+ img{
+ margin-top: 30px;
+ }
+ a{
+ margin-top: -15px;
+ }
+ }
+ }
+ }
+ .Join{
+ h2{
+ font-size: 19px;
+ }
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/Pages/About/About_res_560.scss b/src/Pages/About/About_res_560.scss
new file mode 100644
index 0000000..d14820c
--- /dev/null
+++ b/src/Pages/About/About_res_560.scss
@@ -0,0 +1,97 @@
+@media only screen and (max-width: 560px) {
+ .About_Container{
+ width: 340px;
+ .Description{
+ // width: 440px;
+ .Description_Context{
+ .Description_Article{
+ h4{
+ font-size: 16px;
+ }
+ p{
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ h3{
+ font-size: 24px;
+ }
+ .FAQ{
+ // width: 620px;
+ .FAQ_container{
+ .FAQ_question{
+ max-height: 72px;
+ margin-top: 5px;
+ h5{
+ font-size: 14px;
+ width: 30px;
+ padding-left: 5px;
+ padding-top: 25px;
+ }
+ .FAQ_question_container{
+ width: calc(100% - 40px);
+ h4{
+ line-height: 14px;
+ font-size: 14px;
+ height: 70px;
+ }
+ p{
+ font-size: 12px;
+ padding-top: 5px;
+ }
+ }
+ }
+ .FAQ_open{
+ max-height: 450px;
+ }
+ }
+ }
+ .Support{
+ flex-direction: column;
+ .Support_Left{
+ width: 100%;
+ .Support_Left_Content{
+ box-sizing: border-box;
+ width: 100%;
+ h2{
+ font-size: 24px;
+ }
+ p{
+ font-size: 14px;
+ width: 100%;
+ padding-top: 5px;
+ }
+ h5{
+ margin-top: 10px;
+ display: none;
+ }
+ ul{
+ font-size: 10px;
+ margin-top: 10px;
+ }
+ }
+ }
+ .Support_Right{
+ width: 100%;
+ .Support_Right_Content{
+ left: 0;
+ margin: 0;
+ top: -1px;
+ img{
+ display: none;
+ }
+ a{
+ // margin-top: -15px;
+ }
+ }
+ }
+ }
+ .Join{
+ h2{
+ font-size: 16px;
+ }
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/Pages/About/About_res_760.scss b/src/Pages/About/About_res_760.scss
new file mode 100644
index 0000000..0a81a70
--- /dev/null
+++ b/src/Pages/About/About_res_760.scss
@@ -0,0 +1,90 @@
+@media only screen and (max-width: 760px) {
+ .About_Container{
+ width: 540px;
+ .Description{
+ // width: 440px;
+ .Description_Context{
+ .Description_Article{
+ h4{
+ font-size: 16px;
+ }
+ p{
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ h3{
+ font-size: 24px;
+ }
+ .FAQ{
+ // width: 620px;
+ .FAQ_container{
+ .FAQ_question{
+ // max-height: 35px;
+ h5{
+ // font-size: 16px;
+ }
+ .FAQ_question_container{
+ h4{
+ line-height: 14px;
+ font-size: 14px;
+ height: 33px;
+ }
+ p{
+ font-size: 12px;
+ padding-top: 5px;
+ }
+ }
+ }
+ .FAQ_open{
+ // max-height: 300px;
+ }
+ }
+ }
+ .Support{
+ flex-direction: column;
+ .Support_Left{
+ width: 100%;
+ .Support_Left_Content{
+ box-sizing: border-box;
+ width: 100%;
+ h2{
+ // font-size: 40px;
+ }
+ p{
+ // font-size: 14px;
+ }
+ h5{
+ margin-top: 10px;
+ }
+ .Support_Left_Donation_Bar{
+ display: none;
+ }
+ ul{
+ margin-top: 10px;
+ }
+ }
+ }
+ .Support_Right{
+ width: 100%;
+ .Support_Right_Content{
+ left: 0;
+ margin: 0;
+ img{
+ display: none;
+ }
+ a{
+ // margin-top: -15px;
+ }
+ }
+ }
+ }
+ .Join{
+ h2{
+ font-size: 16px;
+ }
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/Pages/About/Description/Description.tsx b/src/Pages/About/Description/Description.tsx
new file mode 100644
index 0000000..bcfd9d7
--- /dev/null
+++ b/src/Pages/About/Description/Description.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+
+import Avant_Logo from "../../../Assets/avnt_big.png"
+
+interface Article{
+ title:string,
+ content:string,
+ img?:string
+}
+
+const articles:Article[] = [
+ {
+ title:"The origins of Piano-Blocks-App",
+ content:"The idea of the app started in between years 2019/2020. The idea was to have a free alternative for creation of paino tutorial videos, which were at that time \
+ much popular. The popular apps used in that time - Synthesia and Adobe After Effects - were expensive and took some time to deliver a good results, that's what \
+ started this project. At first, in 2019 the app worked in SDL2 library on Windows, as a C++ software, with no UI, and command line usage. Then, the author decided to \
+ make from it a multifunctional web appliacation, converting it to a user friendly web midi player. In years 2021/2022 the first version of a web app was released \
+ with functions allowing user to alter the visuals, to record it's own playing, and to playback/forward the track. Next updates through 2022/2023 focues mainly on\
+ improving the performance. In the year 2025 the decision was made to renew and refactor the application. The engine was updated to vite, the unit testing was implemented,\
+ the design was renewed all along, new recorder was aded and new functionality as live-play. All the list of changes is very long. And now we are here, somewhere in between\
+ new changes and old version",
+ },{
+ title: "Future of the app",
+ content:"Currently the app is in transition of becoming a project of a start up company 'AVANT'. That may include a donation system to support the app, or, if\
+ the donation system will not cover the costs to host the app, microtransactions may be implemented\
+ in some detailed elements, like special premium presets, or premium effects. All the essential functionalities of the app will always remain free of charge.",
+ img:Avant_Logo
+ },
+ {
+ title: "Author of the App",
+ content:"Author of the app is Tymoteusz Apriasz. A web developer since 2018, currently working as a Data Automatization and Management specialist. Tymoteusz \
+ is a student of BioInformatics at the Jagiellonian University in Kraków, currently pursuing his master's degree. A hobbyst piano player - explains why this app\
+ exists - who knows many programming languages to write web aps as a desktop apps - mainly C++, Typescript, Python. You can always contact him using any of the\
+ information or the links on this website - he answers all of them"
+ },
+];
+
+
+export default function Description() {
+
+ const render_articles = ():React.ReactElement[] | React.ReactElement =>{
+ return articles.map((article, index) =>
+
Want to contribute to the project, or You have any questions? Contact: tymsonekjelonek@gmail.com, IG: @tymsonekjelonek, LinkedIn: Tymoteusz Apriasz .
+ 
}
+
)
+ }
+
+ return (
+ {article.title}
+{article.content}
+ {article.img &&
+
+ )
+}
diff --git a/src/Pages/About/FAQ/FAQ.tsx b/src/Pages/About/FAQ/FAQ.tsx
new file mode 100644
index 0000000..db08ee2
--- /dev/null
+++ b/src/Pages/About/FAQ/FAQ.tsx
@@ -0,0 +1,65 @@
+import React, { ReactElement } from 'react'
+
+interface FAQ_question{
+ title:string,
+ answer: string | React.ReactElement
+}
+
+interface Question_props{
+ title:string,
+ answer: string | React.ReactElement,
+}
+
+const questions:FAQ_question[] = [
+ {
+ title:"Are there any cookies, or following robots on this website? If so why are they like this and not like that",
+ answer: <>No, Piano-Blocks-App does not use any cookies or tracking devices. The only used localizing script is Vercel Analitics
+ , which is used to collect following data: country origin of a request, subpages visited (like /Play, /Docs etc.), and number of requests. No target advertising data is collected
+
+ },
+ {
+ title:"The app lags and performes poorly during playing, what can I do?",
+ answer:<>Easiest way to improve performance is to use "Black-n-White" preset in configurations. If you need your own configuration of visuals, set the Effects to None,
+ Block-Shadow-Radius to 0, and switch off sound. Also, faster speed helps to improve performance. If the app still lags through playthrough, try playing it once,
+ then replaying it, without refreshing the page. The replay should be in a much better performance.
+
+ },
+ {
+ title:"I have some feature requests for the app, how can I propose them?",
+ answer:<>Please go to the Github Repository of this project, and request a feature. If you believe you can implement the feature yourself, you can contact
+ the app developer(s) through instagram, email, or linkedin. Contact data is displayed at the bottom of the About subpage
+ }
+];
+
+function Question({title,answer}:Question_props):ReactElement{
+
+ const [open,setOpen] = React.useStateAbout The App
+
+ {render_articles()}
+
+ {setOpen(curr => !curr)}}>
+
+ );
+}
+
+export default function FAQ():ReactElement {
+
+ const renderQuestions = ():ReactElement[] | ReactElement =>{
+ return questions.map((question,index) =>
+ ★
+
+
+ {title}
+{answer}
+
+
+ )
+}
diff --git a/src/Pages/About/Support/Support.tsx b/src/Pages/About/Support/Support.tsx
new file mode 100644
index 0000000..e933887
--- /dev/null
+++ b/src/Pages/About/Support/Support.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+
+import DonateImg from "../../../Assets/Donate_Img.png"
+
+export default function Support():React.ReactElement {
+ return (
+ FAQ - Frequently Asked Questions
+
+ {renderQuestions()}
+
+
+
+ )
+}
diff --git a/src/Pages/Main/Main.styles.scss b/src/Pages/Main/Main.styles.scss
index 39885ef..4c6c217 100644
--- a/src/Pages/Main/Main.styles.scss
+++ b/src/Pages/Main/Main.styles.scss
@@ -5,6 +5,7 @@
overflow-y: hidden;
box-sizing: border-box;
height: 100vh;
+ position: relative;
.mainHead{
width:100%;
height:100%;
diff --git a/src/Pages/Play/Play.tsx b/src/Pages/Play/Play.tsx
index 2250b81..0d2f12e 100644
--- a/src/Pages/Play/Play.tsx
+++ b/src/Pages/Play/Play.tsx
@@ -69,7 +69,7 @@ export default function Play():React.ReactElement{
//Page Renders the piano, if the width is to small, it renders "Screen Width to small"
//Rendering the components to handle playing management, and component to handle the piano
return (
-
+
+
+
+
+ Support Piano-Blocks-App Project
+Hosting of the app, design, domain, time spent developing a project - these are expensive things. Since the project was always meant to be an alternative to paid tools, every feature it offers is completely free, but it does not mean it is free for the owner :c. If you support the project, it means a lot to me, and it also makes me not lose money :-D.
+This Month donations: 0.8$/20$
+ +-
+
- *If you donate, the money will appear on the bar with a few days delay +
- **The 20$ margin is a approximate cost (with current 09/08 web flow) of operating the app every month, donated money over 20$ helps me (author) to buy a car +
- ***Donation system takes 30% of the Donated money, so donating 5$ means recieving by PBA 3.5$ +
+
+
+
+ 
+ Donate
+
+