diff --git a/src/less/main.less b/src/less/main.less
index abfb894..656eba3 100644
--- a/src/less/main.less
+++ b/src/less/main.less
@@ -1,18 +1,17 @@
@import "fonts.less";
@font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-monospace: Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
@color-bg: #086788;
@color-fg: #07A0C3;
-// @color-btn: #F0C808;
@color-btn: #FFF1D0;
-@color-active: #F0C808;
@icon-size: 48px;
-@color-info: white;
-@color-warning: @color-active;
-@color-error: #FF4400;
+@color-primary: white;
+@color-info: #31EF40;
+@color-warning: #F0C808;
+@color-error: #EE7600;
* {
box-sizing: border-box;
@@ -38,37 +37,60 @@ body.call {
background-repeat: no-repeat;
}
+#github-ribbon {
+ position: absolute;
+ top: 0;
+ right: 0;
+ border: 0;
+}
+
#form {
- padding-top: 3em;
+ padding-top: 50px;
text-align: center;
width: 300px;
margin: 0 auto;
h1 {
margin: 0;
- }
- img {
- margin-bottom: 1em;
+ img {
+ }
}
p {
- margin-bottom: 2em;
+ margin: 50px 0;
+ color: @color-primary;
+ }
+
+ .button(@color-fg, @color-bg) {
+ background-color: @color-bg;
+ border: none;
+ border-bottom: 2px solid darken(@color-bg, 10%);
+ border-radius: 4px;
+ box-sizing: border-box;
+ color: @color-fg;
+ // font-size: 1.2rem;
+ text-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.6);
+ padding: 1rem 1rem;
}
input {
- width: 100%;
- border: 1px solid @color-fg;
- background-color: @color-bg;
- border-radius: 5px;
- padding: 1em 2em;
- margin-bottom: 1em;
- color: @color-active;
+ font-family: @font-monospace;
+ .button(@color-primary, @color-warning);
+ font-size: 1.1rem;
+ }
+
+ input:hover {
+ .button(@color-primary, darken(@color-warning, 5%));
+ }
+
+ input:active {
+ transform: translate(0px, 1px);
+ .button(@color-primary, darken(@color-warning, 10%));
}
input:active,
input:focus {
- border: 1px solid @color-active;
outline: none;
}
@@ -112,7 +134,7 @@ body.call {
.app {
.alert {
- background-color: #000;
+ background-color: black;
background-color: rgba(0, 0, 0, 0.3);
left: 0;
opacity: 1;
@@ -178,18 +200,20 @@ body.call {
right: 0px;
text-align: right;
+ @video-size: 100px;
+
.video-container {
background-color: black;
box-shadow: 0px 0px 5px black;
- border-radius: 50px;
+ border-radius: @video-size / 2;
display: inline-block;
margin-right: 10px;
- width: 100px;
+ width: @video-size;
height: 100%;
z-index: 2;
video {
- border-radius: 50px;
+ border-radius: @video-size / 2;
cursor: pointer;
object-fit: cover;
width: 100%;
diff --git a/src/res/fork.png b/src/res/fork.png
new file mode 100644
index 0000000..7dc1afc
Binary files /dev/null and b/src/res/fork.png differ
diff --git a/src/res/icon.png b/src/res/icon.png
new file mode 100644
index 0000000..f073ba6
Binary files /dev/null and b/src/res/icon.png differ
diff --git a/src/res/peer-calls.svg b/src/res/peer-calls.svg
index 4e7836d..ad65da0 100644
--- a/src/res/peer-calls.svg
+++ b/src/res/peer-calls.svg
@@ -60,53 +60,53 @@
transform="translate(-226.96012,260.79652)">
+ style="fill:#fff;fill-opacity:1" />
diff --git a/src/server/app.js b/src/server/app.js
index d559c52..f291c78 100644
--- a/src/server/app.js
+++ b/src/server/app.js
@@ -27,7 +27,7 @@ if (__dirname.indexOf('/dist/') >= 0 || __dirname.indexOf('\\dist\\') >= 0) {
const tempDir = path.join(os.tmpDir(), 'node-peer-calls-cache');
app.use('/js', browserify(path.join(__dirname, '../client')));
- app.use('/less', less(path.join(__dirname, '../less'), { dest: tempDir}));
+ app.use('/css', less(path.join(__dirname, '../less'), { dest: tempDir}));
app.use('/css', express.static(tempDir));
app.use('/css/fonts', express.static(
path.join(__dirname, '../less/fonts')));
diff --git a/src/views/_fork.jade b/src/views/_fork.jade
index 48d4b60..abeaad5 100644
--- a/src/views/_fork.jade
+++ b/src/views/_fork.jade
@@ -1 +1,2 @@
-
+a#github-ribbon(href="https://github.com/jeremija/peer-calls")
+ img(src="res/fork.png" alt="Fork me on GitHub")
diff --git a/src/views/index.jade b/src/views/index.jade
index 7c23ea0..0b28cc7 100644
--- a/src/views/index.jade
+++ b/src/views/index.jade
@@ -3,7 +3,7 @@ html
head
title Peer Calls - Video calls to anybody in the world with a private direct connection
meta(charset="utf-8")
- meta(name="description" content="Make video calls to anybody in the world with a private connection. Share the conversation by url.")
+ meta(name="description" content="Make video calls to anybody in the world with a private connection. Share the conversation by sharing url.")
meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
meta(name="mobile-web-app-capable" content="yes")
meta(name="apple-mobile-web-app-capable" content="yes")
@@ -16,19 +16,8 @@ html
div#container
- form#form
- img(src="res/peer-calls.svg" width="100%")
+ form#form(method="get" action="call")
+ h1
+ img(src="res/peer-calls.svg" width="100%" alt="Peer Calls")
p Group peer-to-peer calls for everyone. Enter a name & share the video link.
-
- input#callId(name="callId" placeholder="Enter your video link ID")
- input(type="submit" value="Join")
-
- script.
- (function() {
- var form = document.getElementById('form');
- form.onsubmit = function(event) {
- var callId = document.getElementById('callId').value;
- window.location = 'call/' + (callId || '');
- return false;
- }
- }());
+ input(type="submit" value="New Session")
