complete redesign: use nodejs on server instead of php - documentation to be updated

2016-01-10 23:17:30 +00:00
parent 1c3765955b
commit a56d3118de
1376 changed files with 183732 additions and 1253 deletions
--- a/nodejs/public/stylesheets/jquery.cssemoticons.css
+++ b/nodejs/public/stylesheets/jquery.cssemoticons.css
@@ -0,0 +1,295 @@
+/*
+ * jQuery CSSEmoticons plugin 0.2.9
+ *
+ * Copyright (c) 2010 Steve Schwartz (JangoSteve)
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * Date: Sun Oct 22 1:00:00 2010 -0500
+ */
+ 
+ /* Basic styles for emoticons */
+span.css-emoticon {
+  font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
+  font-size: 0.65em;
+  font-weight: bold;
+  color: #000000;
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: middle;
+  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
+  height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
+  text-align: center;
+  padding: 0;
+  line-height: 1.34em;
+  -moz-border-radius: 1.54em;
+  -webkit-border-radius: 1.54em;
+  border-radius: 1.54em;
+  -moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
+  -webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
+  box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
+  border: 1px solid rgba(0,0,0,0.25);
+  background-color: #ffcc00;
+  background-image: -webkit-gradient(
+    linear,
+    right top,
+    left top,
+    color-stop(0.41, rgb(255,204,0)),
+    color-stop(0.56, rgb(255,221,85)),
+    color-stop(1, rgb(255,238,170))
+  );
+  background-image: -moz-linear-gradient(
+    center right,
+    rgb(255,204,0) 41%,
+    rgb(255,221,85) 56%,
+    rgb(255,238,170) 100%
+  );
+  -webkit-transition-property:color, background, transform;  
+  -webkit-transition-duration: 1s, 1s;  
+  -webkit-transition-timing-function: linear, ease-in;
+}
+
+/* Styles for two-character emoticons that need more letter-spacing for proportionality */
+span.css-emoticon.spaced-emoticon {
+  padding-left: 0.2em;
+  width: 1.34em;
+  letter-spacing: 0.2em;
+}
+
+/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
+   I think the width of the border may be throwing things off, because it's more noticable for small icons */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  span.css-emoticon.spaced-emoticon {
+    width: 1.4em;
+  }
+}
+
+/* Styles for emoticons that need to have smaller characters to fit inside the circle */
+span.css-emoticon.small-emoticon {
+  font-size: 0.55em;
+  width: 1.82em;
+  height: 1.82em;
+  line-height: 1.72em;
+  -moz-border-radius: 1.82em;
+  -webkit-border-radius: 1.82em;
+  border-radius: 1.82em;
+}
+
+span.css-emoticon.small-emoticon.spaced-emoticon {
+  padding-left: 0;
+  width: 1.82em;
+  letter-spacing: 0.1em;
+}
+
+/* Styles for additional colors */
+span.css-emoticon.red-emoticon {
+  background-color: #eb0542;
+  background-image: -webkit-gradient(
+    linear,
+    right top,
+    left top,
+    color-stop(0.41, rgb(235,5,66)),
+    color-stop(0.56, rgb(235,38,90)),
+    color-stop(1, rgb(250,55,110))
+  );
+  background-image: -moz-linear-gradient(
+    center right,
+    rgb(235,5,66) 41%,
+    rgb(235,38,90) 56%,
+    rgb(250,55,110) 100%
+  );
+}
+
+span.css-emoticon.pink-emoticon {
+  background-color: #ff8fd4;
+  background-image: -webkit-gradient(
+    linear,
+    right top,
+    left top,
+    color-stop(0.41, rgb(255,143,212)),
+    color-stop(0.56, rgb(255,153,216)),
+    color-stop(1,    rgb(255,173,225))
+  );
+  background-image: -moz-linear-gradient(
+    center right,
+    rgb(255,143,212) 41%,
+    rgb(255,153,216) 56%,
+    rgb(255,173,225) 100%
+  );
+}
+
+/* styles for emoticons that need no rotation, like O_o */
+span.css-emoticon.no-rotate { 
+  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+  font-size: 0.45em;
+  width: 2.2em;
+  height: 2.2em;
+  line-height: 1.9em;
+  -moz-border-radius: 2.2em;
+  -webkit-border-radius: 2.2em;
+  border-radius: 2.2em;
+  background-image: -webkit-gradient(
+    linear,
+    right bottom,
+    right top,
+    color-stop(0.41, rgb(255,204,0)),
+    color-stop(0.56, rgb(255,221,85)),
+    color-stop(1, rgb(255,238,170))
+  );
+  background-image: -moz-linear-gradient(
+    center bottom,
+    rgb(255,204,0) 41%,
+    rgb(255,221,85) 56%,
+    rgb(255,238,170) 100%
+  );
+}
+
+span.css-emoticon.no-rotate.red-emoticon {
+  background-image: -webkit-gradient(
+    linear,
+    right bottom,
+    right top,
+    color-stop(0.41, rgb(235,5,66)),
+    color-stop(0.56, rgb(235,38,90)),
+    color-stop(1, rgb(250,55,110))
+  );
+  background-image: -moz-linear-gradient(
+    center bottom,
+    rgb(235,5,66) 41%,
+    rgb(235,38,90) 56%,
+    rgb(250,55,110) 100%
+  );
+}
+
+span.css-emoticon.no-rotate.pink-emoticon {
+  background-image: -webkit-gradient(
+    linear,
+    right bottom,
+    right top,
+    color-stop(0.41, rgb(255,143,212)),
+    color-stop(0.56, rgb(255,153,216)),
+    color-stop(1,    rgb(255,173,225))
+  );
+  background-image: -moz-linear-gradient(
+    center bottom,
+    rgb(255,143,212) 41%,
+    rgb(255,153,216) 56%,
+    rgb(255,173,225) 100%
+  );
+}
+
+/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
+span.css-emoticon.counter-rotated { 
+  transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
+  -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
+  box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    color-stop(0.41, rgb(255,204,0)),
+    color-stop(0.56, rgb(255,221,85)),
+    color-stop(1, rgb(255,238,170))
+  );
+  background-image: -moz-linear-gradient(
+    center left,
+    rgb(255,204,0) 41%,
+    rgb(255,221,85) 56%,
+    rgb(255,238,170) 100%
+  );
+}
+
+span.css-emoticon.counter-rotated.red-emoticon {
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    color-stop(0.41, rgb(235,5,66)),
+    color-stop(0.56, rgb(235,38,90)),
+    color-stop(1, rgb(250,55,110))
+  );
+  background-image: -moz-linear-gradient(
+    center left,
+    rgb(235,5,66) 41%,
+    rgb(235,38,90) 56%,
+    rgb(250,55,110) 100%
+  );
+}
+
+span.css-emoticon.counter-rotated.pink-emoticon {
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    color-stop(0.41, rgb(255,143,212)),
+    color-stop(0.56, rgb(255,153,216)),
+    color-stop(1,    rgb(255,173,225))
+  );
+  background-image: -moz-linear-gradient(
+    center left,
+    rgb(255,143,212) 41%,
+    rgb(255,153,216) 56%,
+    rgb(255,173,225) 100%
+  );
+}
+
+/* Styles for animated states */
+span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
+    /* font-size: inherit;
+    font-weight: inherit;
+    vertical-align: inherit;
+    line-height: inherit;
+    font-family: inherit; */
+    letter-spacing: inherit;
+    color: inherit;
+    overflow: visible;
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    background: none;
+    background-image: none;
+    box-shadow: none;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    border-color: transparent;
+}
+
+span.css-emoticon.nintendo-controller {
+  font-size: .8em;
+  height: 1.2em;
+  line-height: 1em;
+  width: 2.7em;
+  vertical-align: bottom;
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  background: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.09, rgb(116,121,140)),
+      color-stop(0.55, rgb(165,170,189))
+  );
+  background: -moz-linear-gradient(
+      center bottom,
+      rgb(116,121,140) 9%,
+      rgb(165,170,189) 55%
+  );
+}
--- a/nodejs/public/stylesheets/safechat.css
+++ b/nodejs/public/stylesheets/safechat.css
@@ -0,0 +1,248 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+@media (min-resolution: 120dpi) {
+  html {
+    font-size: 120%;
+  }
+}
+
+p {
+  padding: .5em 0 1em 0;
+}
+
+form {
+  padding: .5em 0 1em 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+ul li {
+  margin-left: 1em;
+}
+
+@media (max-width: 45em) {
+  form {
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+}
+
+form > * {
+  flex-grow: 1;
+}
+form input[type="submit"] {
+  flex-grow: 0;
+}
+form input#msg {
+  flex-grow: 4;
+}
+
+.buttongroup {
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.buttongroup .toolbutton {
+  flex-grow: 1;
+  flex-basis: 0;
+  text-align: center;
+  text-align: center;
+  cursor: pointer;
+}
+.toolbutton label img {
+  height: 1.5em;
+}
+.toolbutton input {
+  display:none;
+}
+.toolbutton.bad:first-line,
+.toolbutton.good:first-line {
+  font-weight: bold;
+}
+.toolbutton.bad {
+  background-color: #f77;
+  border: 1px solid black;
+}
+.toolbutton.good {
+  background-color: #7f7;
+  border: 1px solid black;
+}
+
+table {
+  width: 100%;
+}
+tr { 
+  display: flex;
+  align-items: stretch;    
+}
+td:last-child {
+  flex:1; /* last td to fill remaining width */
+}
+
+.warning {
+  padding: 1em;
+  margin: 1em;
+  background-color: red;
+  color: yellow;
+  font-size: large;
+  border: 2px inset yellow;
+}
+
+#header {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  margin: 0;
+  padding: 0 1em 0 1em;
+  background-color: green;
+  color: white;
+}
+#header #togglemenu {
+  display: inline;
+  float: right;
+}
+#header h1 {
+  font-weight: bold;
+  font-size: 100%;
+  display: inline;
+}
+
+#status {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0 1em 0 1em;
+  text-align: right;
+}
+@media (max-width: 45em) {
+  #username {
+    display: none;
+  }
+}
+#status.error {
+  background-color: red;
+  color: black;
+}
+#status.notice {
+  background-color: yellow;
+  color: black;
+}
+#status.success {
+  background-color: lightgreen;
+  color: black;
+}
+
+#connectionstatus #good {
+  color: lightgreen;
+}
+#connectionstatus #bad {
+  color: red;
+}
+
+#menuicon {
+  cursor: pointer;
+}
+
+#menu {
+  clear: both;
+  padding: 2em 0em 1em 0em;
+  margin: 0 1em 0 1em;
+  float: right;
+  background-color: lightblue;
+  list-style-type: none;
+  border: 1px solid black;
+}
+#menu li {
+  margin-left: 0;
+}
+#menu a {
+  text-decoration: inherit;
+  color: inherit;
+}
+#menu li {
+  padding: 0 1em 0 1em;
+}
+#menu li, #menu li * {
+  cursor: pointer;
+  text-align: left;
+}
+#menu li + li {
+  border-top: 1px solid black;
+  margin-top: 0.5em;
+  padding-top: 0.5em;
+}
+
+#main {
+  padding: 2em 1em 2em 1em;
+  clear: both;
+}
+
+.clear {
+  clear: both;
+}
+#msgs .msg {
+  border: 1px solid black;
+  margin: 1ex;
+  border-radius: 2ex;
+  -moz-border-radius: 2ex;
+  -webkit-border-radius: 2ex;
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 60%;
+}
+#msgs .me {
+  float: left;
+  background-color: lightgray;
+}
+#msgs .other {
+  float: right;
+  background-color: lightyellow;
+}
+#msgs .msg .header {
+  border: 1px solid black;
+  border-radius: 2ex 2ex 0 0;
+  -moz-border-radius: 2ex 2ex 0 0;
+  -webkit-border-radius: 2ex 2ex 0 0;
+  /*border-radius: 2ex;
+  -moz-border-radius: 2ex;
+  -webkit-border-radius: 2ex;*/
+  margin-bottom: .25ex;
+  padding-bottom: .25ex;
+  position: relative;
+  height: 1em;
+  padding: .5ex 1ex .5ex 1ex;
+}
+#msgs .msg .header {
+  background-color: lightgreen;
+}
+#msgs .msg .header .date {
+  font-size: xx-small;
+  float: left;
+  padding: 0 1ex 0 0;
+}
+#msgs .msg .header .sender {
+  font-size: small;
+  float: right;
+  padding: 0 0 0 1ex;
+}
+#msgs .msg .text {
+  float: left;
+  padding: .5ex 1ex .5ex 1ex;
+}
+#msgs .msg img {
+  display: block;
+  width: 99%;
+}
+
+#preview img {
+  height: 4em;
+}