Skip to content

Commit a0bc420

Browse files
Haukur RosinkranzHaukur Rosinkranz
Haukur Rosinkranz
authored and
Haukur Rosinkranz
committed
update
1 parent 968476e commit a0bc420

12 files changed

+821
-0
lines changed

‎cardtables/cardtables.mp4

100 KB
Binary file not shown.

‎cardtables/index.html

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"
8+
/>
9+
<link
10+
rel="icon"
11+
type="image/png"
12+
href="https://kosmi.io/assets/favicon.png"
13+
/>
14+
<link
15+
href="https://fonts.googleapis.com/css?family=Oleo+Script"
16+
rel="stylesheet"
17+
/>
18+
<link
19+
href="https://fonts.googleapis.com/css?family=Lato&display=swap"
20+
rel="stylesheet"
21+
/>
22+
<meta
23+
name="description"
24+
content="Play Cardgames with your friends online using a virtual card table!"
25+
/>
26+
<title>Cardtables Online</title>
27+
28+
<style type="text/css">
29+
html,
30+
body {
31+
display: flex;
32+
height: 100%;
33+
width: 100%;
34+
background-color: #080717;
35+
font-family: Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
36+
margin: 0;
37+
line-height: 24px;
38+
}
39+
40+
a,
41+
a:active,
42+
a:visited,
43+
a:hover {
44+
color: #fff;
45+
text-decoration: none;
46+
}
47+
48+
#container {
49+
margin: auto;
50+
display: flex;
51+
flex-direction: column;
52+
background-color: rgba(0, 0, 0, 0.8);
53+
color: #fff;
54+
padding: 30px;
55+
max-width: 600px;
56+
}
57+
58+
#cardtablesLogo {
59+
color: #ab2828;
60+
font-size: 32px;
61+
font-family: "Oleo Script", cursive;
62+
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff,
63+
-1px 1px 0 #fff, 1px 1px 0 #fff;
64+
margin-bottom: 25px;
65+
text-align: center;
66+
}
67+
68+
#discordLink {
69+
background-color: #7289da;
70+
text-align: center;
71+
margin: 20px;
72+
padding: 5px;
73+
border-radius: 5px;
74+
}
75+
76+
#discordLink a {
77+
margin-top: 10px;
78+
display: block;
79+
}
80+
81+
#createRoomButton {
82+
background: #e0e1e2 none;
83+
padding: 15px;
84+
font-weight: bold;
85+
text-decoration: none;
86+
border-radius: 3px;
87+
background-color: #23195c;
88+
color: #fff;
89+
font-size: 18px;
90+
margin: 0 auto;
91+
max-width: 400px;
92+
display: flex;
93+
text-align: center;
94+
flex-direction: column;
95+
}
96+
97+
#kosmiLogo {
98+
margin: 0 auto;
99+
width: 116px;
100+
height: 37px;
101+
background-image: url("https://kosmi.io/assets/banner.png");
102+
background-size: contain;
103+
background-repeat: no-repeat;
104+
background-position: center center;
105+
margin: 15px auto;
106+
flex-direction: column;
107+
display: flex;
108+
}
109+
110+
#poweredBy {
111+
display: flex;
112+
flex-direction: column;
113+
text-align: center;
114+
margin-top: 20px;
115+
font-size: 12px;
116+
}
117+
video {
118+
margin: auto;
119+
width: 400px;
120+
max-width: 100%;
121+
}
122+
</style>
123+
</head>
124+
125+
<body>
126+
<div id="container">
127+
<div id="cardtablesLogo">Cardtables Online</div>
128+
<p>
129+
Cardtables Online is a way to play any cardgame with your friends using
130+
a virtual cardtable.
131+
</p>
132+
<video
133+
loop="true"
134+
autoplay
135+
playsinline
136+
muted
137+
src="/cardtables/cardtables.mp4"
138+
></video>
139+
This is how it works:
140+
<ol>
141+
<li>You create a room with a shareable link.</li>
142+
<li>
143+
Share the link with your friends and play your favorite cardgame using
144+
a virtual deck!
145+
</li>
146+
<li>
147+
You can even communicate using webcam/microphone with members of the
148+
table.
149+
</li>
150+
</ol>
151+
<a
152+
target="_blank"
153+
id="createRoomButton"
154+
href="https://app.kosmi.io/createRoom?app=CARDTABLE"
155+
>
156+
Click here to create a Virtual Cardtable!
157+
</a>
158+
<span id="poweredBy"
159+
>Powered by <a id="kosmiLogo" href="https://kosmi.io"></a
160+
></span>
161+
</div>
162+
</body>
163+
</html>

‎nes/404.html

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6+
7+
<style type="text/css">
8+
html,
9+
body {
10+
display: flex;
11+
height: 100%;
12+
width: 100%;
13+
background-color: #080717;
14+
font-family: Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
15+
margin: 0;
16+
line-height: 24px;
17+
}
18+
19+
a,
20+
a:active,
21+
a:visited,
22+
a:hover {
23+
color: #fff;
24+
text-decoration: none;
25+
}
26+
27+
#container {
28+
margin: auto;
29+
display: flex;
30+
flex-direction: column;
31+
background-color: rgba(0, 0, 0, .8);
32+
color: #fff;
33+
padding: 30px;
34+
max-width: 600px;
35+
}
36+
37+
#createRoomButton {
38+
background: #e0e1e2 none;
39+
padding: 15px;
40+
font-weight: bold;
41+
text-decoration: none;
42+
border-radius: 3px;
43+
background-color: #23195c;
44+
color: #fff;
45+
font-size: 18px;
46+
margin: 0 auto;
47+
max-width: 400px;
48+
display: flex;
49+
text-align: center;
50+
flex-direction: column;
51+
}
52+
53+
</style>
54+
</head>
55+
56+
<body>
57+
<div id="container">
58+
<a target="_blank" id="createRoomButton" href="https://app.kosmi.io/room/9mcdje?app=nes_party">
59+
Join room
60+
</a>
61+
</div>
62+
<script>
63+
window.onload = function() {
64+
function randomizeRoomLink() {
65+
var roomid = location.href.substring(location.href.lastIndexOf('/') + 1);
66+
document.getElementById("createRoomButton").href = "https://app.kosmi.io/room/" + roomid + "?app=nes_party";
67+
}
68+
randomizeRoomLink();
69+
}
70+
</script>
71+
72+
</body>
73+
74+
</html>

‎nes/index.html

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
7+
<link rel="icon" type="image/png" href="https://kosmi.io/assets/favicon.png" />
8+
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Pacifico" />
10+
<meta name="description" content="Online Multiplayer NES Emulator using WebRTC!" />
11+
12+
<title>NES Party</title>
13+
14+
<style type="text/css">
15+
html,
16+
body {
17+
display: flex;
18+
height: 100%;
19+
width: 100%;
20+
background-color: #080717;
21+
font-family: Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
22+
margin: 0;
23+
line-height: 24px;
24+
}
25+
26+
a,
27+
a:active,
28+
a:visited,
29+
a:hover {
30+
color: #fff;
31+
text-decoration: none;
32+
}
33+
34+
#container {
35+
margin: auto;
36+
display: flex;
37+
flex-direction: column;
38+
background-color: rgba(0, 0, 0, .8);
39+
color: #fff;
40+
padding: 30px;
41+
max-width: 600px;
42+
}
43+
44+
#nesPartyLogo {
45+
color: #ab2828;
46+
font-size: 32px;
47+
font-family: Pacifico, cursive;
48+
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
49+
margin-bottom: 25px;
50+
text-align: center;
51+
}
52+
53+
#discordLink {
54+
background-color: #7289da;
55+
text-align: center;
56+
margin: 20px;
57+
padding: 5px;
58+
border-radius: 5px;
59+
}
60+
61+
#discordLink a {
62+
margin-top: 10px;
63+
display: block;
64+
}
65+
66+
#createRoomButton {
67+
background: #e0e1e2 none;
68+
padding: 15px;
69+
font-weight: bold;
70+
text-decoration: none;
71+
border-radius: 3px;
72+
background-color: #23195c;
73+
color: #fff;
74+
font-size: 18px;
75+
margin: 0 auto;
76+
max-width: 400px;
77+
display: flex;
78+
text-align: center;
79+
flex-direction: column;
80+
}
81+
82+
#kosmiLogo {
83+
margin: 0 auto;
84+
width: 116px;
85+
height: 37px;
86+
background-image: url('https://kosmi.io/assets/banner.png');
87+
background-size: contain;
88+
background-repeat: no-repeat;
89+
background-position: center center;
90+
margin: 15px auto;
91+
flex-direction: column;
92+
display: flex;
93+
}
94+
95+
#poweredBy {
96+
display: flex;
97+
flex-direction: column;
98+
text-align: center;
99+
margin-top: 20px;
100+
font-size: 12px;
101+
}
102+
video {
103+
max-width: 100%;
104+
margin-bottom: 20px;
105+
}
106+
</style>
107+
</head>
108+
109+
<body>
110+
<div id="container">
111+
<div id="nesPartyLogo">NES Party</div>
112+
<p>
113+
NES Party is a way to play NES games with your friends online all from within your browser.
114+
</p>
115+
<video
116+
loop="true"
117+
autoplay
118+
playsinline
119+
muted
120+
src="/nes/snesparty.mp4"
121+
></video>
122+
This is how it works:
123+
<ol>
124+
<li>You create a room with a shareable link.</li>
125+
<li>
126+
You or a member of the room starts a ROM and becoming a host.
127+
</li>
128+
<li>
129+
Play NES in online multiplayer!
130+
</li>
131+
</ol>
132+
<a target="_blank" id="createRoomButton" href="https://app.kosmi.io/createRoom?app=NES_PARTY">
133+
Click here to create a room and start playing!
134+
</a>
135+
<span id="poweredBy">Powered by
136+
<a
137+
id="kosmiLogo"
138+
href="https://kosmi.io"
139+
></a></span>
140+
</div>
141+
142+
143+
144+
145+
</body>
146+
147+
</html>

‎nes/snesparty.mp4

155 KB
Binary file not shown.

0 commit comments

Comments
 (0)