Skip to content

Commit 302f409

Browse files
GeorgeGallyGeorgeGally
committed
Basic template setup
0 parents  commit 302f409

9 files changed

+2165
-0
lines changed

‎css/audio.css

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
audio {
2+
position: fixed;
3+
bottom: 10px;
4+
z-index: 10;
5+
width: 100%;
6+
}
7+
8+
#audioplayer {
9+
z-index: 9999;
10+
width: 100%;
11+
position: absolute;
12+
background: #fff;
13+
height: 120px;
14+
padding-top: 10px;
15+
top: -100px;
16+
transition: 1s;
17+
}
18+
19+
#playButton{
20+
height:40px;
21+
width: 40px;
22+
border: none;
23+
background-size: 50% 50%;
24+
background-position: center;
25+
float: left;
26+
cursor: pointer;
27+
margin-top: 5px;
28+
}
29+
30+
.play{ background: url('../img/play.png') no-repeat; }
31+
.pause{ background: url('../img/pause.png') no-repeat; }
32+
33+
34+
35+
#timeline{
36+
width: 82%;
37+
height: 11px;
38+
background: #ddd;
39+
margin-top: 20px;
40+
margin-right: 30px;
41+
border-radius: 3px;
42+
display: inline-block;
43+
cursor: pointer;
44+
}
45+
46+
#playtime{
47+
font-family: helvetica, arial, sans;
48+
float: right;
49+
margin-left: 0px;
50+
font-size: 12px;
51+
color: #aaa;
52+
}
53+
54+
#playhead{
55+
width: 15px;
56+
height: 15px;
57+
border-radius: 50%;
58+
border: 1px solid #fff;
59+
margin-top: -3px;
60+
background: rgba(200, 200, 200, 0.8);
61+
}
62+
63+
#trackImage {
64+
width: 90px;
65+
height: 90px;
66+
float: left;
67+
background: #eee;
68+
margin: 0 10px 0 10px;
69+
display: inline-block;
70+
}
71+
72+
73+
74+
#artistInfo, #artistInfo a, #trackInfo, #trackInfo a {
75+
font-family: helvetica, arial, sans;
76+
text-decoration: none;
77+
color: #000;
78+
margin-left: 10px;
79+
}
80+
81+
#artistInfo {
82+
font-weight: bold;
83+
font-size: 16px;
84+
line-height: 20px;
85+
}
86+
#trackInfo, #trackInfo a {
87+
font-size: 18px;
88+
line-height: 24px;
89+
color: #37adea;
90+
}
91+
92+
93+
#artistInfo a:hover, #trackInfo a:hover {
94+
text-decoration: underline;
95+
color: orange;
96+
}
97+
98+
99+
#soundcloudLogo {
100+
display: block;
101+
margin: 18px 0 0 10px;
102+
}
103+
104+
.wrapper {
105+
position: relative;
106+
overflow: hidden;
107+
width: 100%;
108+
height: 100px;
109+
}
110+
111+
#audioplayer.wrapper:hover {
112+
transition: 1s;
113+
top: 0 !important;
114+
}

‎css/reset.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
html, body, div, span, applet, object, iframe,
2+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3+
a, abbr, acronym, address, big, cite, code,
4+
del, dfn, em, img, ins, kbd, q, s, samp,
5+
small, strike, strong, sub, sup, tt, var,
6+
b, u, i, center,
7+
dl, dt, dd, ol, ul, li,
8+
fieldset, form, label, legend,
9+
table, caption, tbody, tfoot, thead, tr, th, td,
10+
article, aside, canvas, details, embed,
11+
figure, figcaption, footer, header, hgroup,
12+
menu, nav, output, ruby, section, summary,
13+
time, mark, audio, video {
14+
margin: 0;
15+
padding: 0;
16+
border: 0;
17+
font-size: 100%;
18+
font: inherit;
19+
vertical-align: baseline;
20+
}
21+
/* HTML5 display-role reset for older browsers */
22+
article, aside, details, figcaption, figure,
23+
footer, header, hgroup, menu, nav, section {
24+
display: block;
25+
}
26+
body {
27+
line-height: 1;
28+
}
29+
ol, ul {
30+
list-style: none;
31+
}
32+
blockquote, q {
33+
quotes: none;
34+
}
35+
blockquote:before, blockquote:after,
36+
q:before, q:after {
37+
content: '';
38+
content: none;
39+
}
40+
table {
41+
border-collapse: collapse;
42+
border-spacing: 0;
43+
}

‎css/style.css

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
html, body, div, span, applet, object, iframe,
2+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3+
a, abbr, acronym, address, big, cite, code,
4+
del, dfn, em, img, ins, kbd, q, s, samp,
5+
small, strike, strong, sub, sup, tt, var,
6+
b, u, i, center,
7+
dl, dt, dd, ol, ul, li,
8+
fieldset, form, label, legend,
9+
table, caption, tbody, tfoot, thead, tr, th, td,
10+
article, aside, canvas, details, embed,
11+
figure, figcaption, footer, header, hgroup,
12+
menu, nav, output, ruby, section, summary,
13+
time, mark, audio, video {
14+
margin: 0;
15+
padding: 0;
16+
border: 0;
17+
font: inherit;
18+
font-size: 100%;
19+
vertical-align: baseline;
20+
}
21+
22+
@font-face {
23+
font-family: 'SquareFont';
24+
src: url('SquareFont.eot');
25+
src: url('../fonts/SquareFont.eot?#iefix') format('embedded-opentype'),
26+
url('../fonts/SquareFont.woff') format('woff'),
27+
url('../fonts/SquareFont.ttf') format('truetype');
28+
font-weight: normal;
29+
font-style: normal;
30+
}
31+
32+
33+
html {
34+
line-height: 1;
35+
}
36+
37+
ol, ul {
38+
list-style: none;
39+
}
40+
41+
table {
42+
border-collapse: collapse;
43+
border-spacing: 0;
44+
}
45+
46+
caption, th, td {
47+
text-align: left;
48+
font-weight: normal;
49+
vertical-align: middle;
50+
}
51+
52+
q, blockquote {
53+
quotes: none;
54+
}
55+
q:before, q:after, blockquote:before, blockquote:after {
56+
content: "";
57+
content: none;
58+
}
59+
60+
a img {
61+
border: none;
62+
}
63+
64+
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
65+
display: block;
66+
}
67+
68+
html, body {
69+
margin: 0;
70+
height: 100%;
71+
background: #f7f7f7;
72+
}
73+
74+
canvas {
75+
position: absolute;
76+
top: 0;
77+
left: 0;
78+
bottom: 0;
79+
right: 0;
80+
background-size: cover;
81+
z-index: 0;
82+
}
83+
84+
#canvas2 {
85+
position: absolute;
86+
top: 0;
87+
left: -10000px;
88+
bottom: 0;
89+
right: 0;
90+
background-size: cover;
91+
z-index: 0;
92+
}
93+
94+
95+
.collection {
96+
position: fixed;
97+
top: 0;
98+
width: 100%;
99+
z-index: 1;
100+
}
101+
.collection a {
102+
display: block;
103+
padding: 5px;
104+
background: rgba(0, 0, 0, 0.6);
105+
color: #fff;
106+
text-decoration: none;
107+
font: 700 12px Consolas, system, monospace;
108+
-webkit-transition: all 250ms linear;
109+
transition: all 250ms linear;
110+
}
111+
.collection a:hover {
112+
background: #fff;
113+
color: #000;
114+
}
115+
.collection .prev {
116+
text-align: left;
117+
float: left;
118+
}
119+
.collection .next {
120+
text-align: right;
121+
float: right;
122+
}
123+
124+
#selekta {
125+
position: absolute;
126+
top: 30px;
127+
left: 50px;
128+
z-index: 999;
129+
}
130+
131+
#warning {
132+
font: 700 12px Consolas, system, monospace;
133+
color: #fff;
134+
background: #c82222;
135+
position: absolute;
136+
bottom: 45%;
137+
left: 0;
138+
right: 0;
139+
z-index: 10001;
140+
text-align: center;
141+
padding: 20px;
142+
display: none;
143+
}
144+
145+
#gui {
146+
position: absolute;
147+
z-index: 999;
148+
}

‎css/video.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#videoOutput {
2+
width: 100%;
3+
height: 100%;
4+
position: absolute;
5+
top: 0;
6+
left: 0;
7+
z-index: 999;
8+
9+
}

‎index.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<!-- <script src='http://connect.soundcloud.com/sdk.js'></script> -->
7+
<script language="javascript" src="js/creative.js"></script>
8+
<script language="javascript" src="js/canvas.js"></script>
9+
10+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
11+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
12+
<!-- <link rel="stylesheet" href="css/audio.css" type="text/css" media="screen" /> -->
13+
14+
</head>
15+
<body>
16+
17+
<script>
18+
19+
// this is a function (from canvas.js) that sets you the canvas
20+
// so you don't need to do any of the heavy lifting and can
21+
// start playing straight away
22+
// the function also lets you access the screen width as "width" or "w"
23+
// and the screen height as "height" or "h"
24+
25+
var ctx = createCanvas("canvas1");
26+
var block_size = 20;
27+
var x = width/2;
28+
var y = height/2;
29+
var speed_x = random(-5, 5);
30+
var speed_y = random(-5, 5);
31+
32+
// much like processing this is the drawing loop that plays repeatedly
33+
// the actual syntax is a shortcut for requestAnimationFrame
34+
35+
function draw(){
36+
37+
// shortcut for clearing the screen,
38+
// takes a rgb value 255,255,255 or a grey value of 0-255
39+
ctx.background(250);
40+
41+
x = x + speed_x;
42+
y = y + speed_y;
43+
44+
if (x > width || x < 0 ) {
45+
speed_x = speed_x *-1;
46+
}
47+
48+
if (y > height || y < 0 ) {
49+
speed_y = speed_y *-1;
50+
}
51+
52+
ctx.fillStyle = "#00aeef";
53+
ctx.fillRect(x, y, block_size, block_size);
54+
55+
} // end draw
56+
57+
58+
</script>
59+
<!-- <script language="javascript" src="js/soundcloud.js"></script> -->
60+
</body>
61+
62+
</html>

0 commit comments

Comments
 (0)