Skip to content

Commit 6a06e2d

Browse files
committed
big changes
1 parent e33ed6e commit 6a06e2d

File tree

6 files changed

+55
-24
lines changed

6 files changed

+55
-24
lines changed

index.html

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
gtag('config', 'UA-143837497-1');
1313
</script>
1414
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
15-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
15+
<meta name="viewport" content="width=device-width, initial-scale=1">
1616
<meta charset="UTF-8">
1717
<title>reakcja na dłoń! </title>
1818
<link rel="stylesheet" href="https://unpkg.com/carbon-components@latest/css/carbon-components.css" />
@@ -21,20 +21,21 @@
2121

2222
<link rel="stylesheet" href="style.css">
2323
<link rel="stylesheet" href="mobile.css">
24+
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
2425

2526
</head>
2627

2728
<body class="bx--body p20">
2829
<header class="header">
2930
<p>Prezentuję swój nowy utwór w eksperymentalny sposób! </p>
30-
<p>Używając handtrack.js włączasz utwór swą dłonią. </p>
31+
<p>Używając kamery włączasz utwór swą dłonią. </p>
3132
</header>
3233

3334
<div class="p20">
3435
</div>
3536
<div class="mb10">
3637
<button onclick="toggleVideo()" id="trackbutton" class="bx--btn bx--btn--secondary" type="button">
37-
<span>Włącz kamerę (proszę).</span>
38+
<span>Kliknij tutaj by rozpocząć!</span>
3839

3940
</button>
4041
<div id="updatenote" class="updatenote mt10"> ładuję model...</div>
@@ -61,26 +62,18 @@
6162
</div>
6263

6364

64-
<div class="box a" id="trigger-left" data-aos="fade-up" data-aos-duration="2000" data-aos-easing="ease-in-quad">
65+
<div class="box a" id="trigger-left" data-aos="zoom-in" data-aos-duration="3000" data-aos-easing="ease-in-quad">
6566
<section class="header">
66-
<div id="tx">
67-
<h2>INFO</h2>
67+
<div id="tx" >
68+
6869
<span>Cześć!</span>
69-
<span>Wykorzystałem machine learning w celu prezentacji swojego nowego utworu.</span>
70-
<span>Mam nadzieję, że się podobało.</span>
70+
<p>Wykorzystałem machine learning w celu prezentacji swojego nowego utworu.</p>
71+
<p>Mam nadzieję, że się podobało. Możesz posłuchać całego utworu tutaj.</p>
7172

7273
</div>
7374
</section>
7475
</div>
75-
<div class="box a"
76-
data-aos="fade-right"
77-
data-aos-anchor="#trigger-left"
78-
data-aos-anchor-placement="bottom-top"
79-
data-aos-duration="1000"
80-
data-aos-easing="ease-in-out-back">
81-
<h>POKAŻ SIĘ</h>
82-
<span>TEKST O NICZYM</span>
83-
</div>
76+
8477
<div class="box b" data-aos="zoom-in">
8578
<h2></h2>
8679
</div>

mobile.css

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
}
2323
.header{
2424
position:sticky;
25+
font-family: 'Roboto Condensed', sans-serif;
2526
text-align:center;
2627
color:white;
2728
size: auto;
@@ -83,23 +84,37 @@
8384
font-size: 80%;
8485
}
8586
audio {
86-
display:none;
87-
position: fixed;
88-
87+
position: absolute;
88+
top:187vh;
89+
right:20vw;
90+
91+
max-height: 70%;
92+
max-width:100%;
93+
border-radius: 3px;
94+
overflow: hidden;
8995
}
9096
.box {
9197

9298
width: 70%;
93-
height: 360px;
94-
background: orange;
99+
height: 400px;
100+
95101
border-radius: 2px;
96102
border: 2px solid black;
97103
padding: 10px;
98104
color: white;
99-
text-align: center;
105+
text-align: left;
100106
overflow: scroll;
101107
}
108+
#tx{
109+
font-family: 'Roboto Condensed', sans-serif;
110+
padding:5px;
111+
padding: 10px;
112+
color: yellow;
113+
max-height:55vh;
114+
font-size: 20px;
115+
text-align: left;
102116

117+
}
103118
.a {
104119

105120
margin: 80vh auto auto auto;

neue_machina2.png

-117 KB
Binary file not shown.

olaf.mp3

100755100644
92.1 KB
Binary file not shown.

script.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ function toggleVideo() {
6666
updateNote.innerText = "Zastopowane..."
6767
stopRecording()
6868
play();
69+
6970

7071
}
7172
};
@@ -285,3 +286,24 @@ function download() {
285286
window.URL.revokeObjectURL(url);
286287
}, 100);
287288
}
289+
290+
$.fn.animateRotate = function(angle, duration, easing, complete) {
291+
var args = $.speed(duration, easing, complete);
292+
var step = args.step;
293+
return this.each(function(i, e) {
294+
args.complete = $.proxy(args.complete, e);
295+
args.step = function(now) {
296+
$.style(e, 'transform', 'rotate(' + now + 'deg)');
297+
if (step) return step.apply(e, arguments);
298+
};
299+
300+
$({deg: 0}).animate({deg: angle}, args);
301+
});
302+
};
303+
304+
$("#tx").animateRotate(180, {
305+
duration: 90000,
306+
easing: 'linear',
307+
complete: function () {},
308+
step: function () {}
309+
});

style.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ body {
2121
.header{
2222
position:sticky;
2323
size: auto;
24-
24+
font-family: 'Roboto Condensed', sans-serif;
2525
text-align:left;
2626
margin-left: 40px;
2727
margin-right: 40px;
@@ -131,6 +131,7 @@ audio {
131131
}
132132
#tx{
133133
padding:5px;
134+
font-family: 'Roboto Condensed', sans-serif;
134135

135136
max-height:48vh;
136137
font-size: 20px;

0 commit comments

Comments
 (0)