FLOW (Data Stream UI - Concept#1)

flow-data-stream-ui-concept-1.markdown

FLOW (Data Stream UI - Concept#1)

A technique to create an infinitely scrolling background (evolves into the World's most loved technology, one bit at a time).

My name is AK1N NEMESIS FIXX, of the Nu Chwezi Hackers, and I am the creator of Flow. Ask me anything, or, welcome, let's hack for the advancement of mankind!

A Pen by Nemesis Fixx on CodePen.

License.

index.html

<div class="overlay">
  <div class="content" id="app">

    <div class="row col-md-10 col-md-offset-1">
      <div id="banner">
        <h1 class="visible-lg large">{{ app_name }} <small>v{{ version }}</small></h1>
        <h1 class="hidden-lg">{{ app_name }} <small>v{{ version }}</small></h1>
      </div>

      <div class="intro" v-if="show_intro">
        <p class="visible-lg large">your data, working for u, all the time; automated *blogs, interface to AI, interface to DNA, the Internet, universal remote controls, a shell, multi-media, rss-feed, Nu Chwezi People and more, anytime, anywhere, any device! </p>
        <p class="hidden-xs hidden-lg">your data, working for u, all the time...</p>
        <p class="visible-xs hidden-lg">your data, working for u...</p>

        <div class="btn-wrap row">
          <div class="col-md-3">
            <input type="text" id="key1" class="form-control control" placeholder="KEY-1" />
          </div>
          <div class="col-md-3">
            <input type="text" id="key2" class="form-control control" placeholder="KEY-2" />
          </div>
          <div class="btn-group col-md-6 hidden-sm hidden-xs" role="group">
            <button id="login-in" @click="login" class="btn btn-danger sleek">OPEN {{ app_name }}</button>
          </div>
        </div>

        <div class="btn-wrap small row visible-sm visible-xs">
          <div class="btn-group col-xs-10 col-xs-offset-1">
            <button id="login-in" v-on:click="login" class="btn btn-danger btn-block sleek">OPEN {{ app_name }}</button>
          </div>
        </div>

      </div>
      <!-- end intro -->

      <div class="row">
        <p class='col-xs-10 col-xs-offset-1 status' v-bind:class="status_class">{{ status_msg }}</p>
      </div>

    </div>

    <section id="flow-apps" class="flow-apps">

      <div class="clearfix"></div>

      <!-- Nav tabs -->
      <ul id="navigation" class="nav nav-pills" data-toggle="tab" role="tablist">
        <li role="presentation" class="active"><a href="#editor" aria-controls="editor" role="tab" data-toggle="tab">Write</a></li>
        <li role="presentation"><a href="#flow" aria-controls="flow" role="tab" data-toggle="tab">Flow</a></li>
        <li role="presentation"><a href="#network" aria-controls="network" role="tab" data-toggle="tab">Network</a></li>
        <li role="presentation"><a href="#ai" aria-controls="ai" role="tab" data-toggle="tab">AI</a></li>
        <li role="presentation"><a href="#rss" aria-controls="rss" role="tab" data-toggle="tab">RSS</a></li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="editor">

          <div id="container-editor" class="row col-md-10 col-md-offset-1">
            <div class="entry">
              <center>
                <textarea id="flow-in" class="form-control" data-provide="markdown" rows="10" style="width:100%;resize: none;background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0);color:#CDDC39;padding:20px" v-bind:placeholder="hint" v-model="flow_body"></textarea>
                <div class="flow-info">
                  <p><span class="metric">{{ flow_body.length }}</span> c. | <span class="metric">{{ flow_word_count }}</span> w.</p>
                </div>
              </center>
            </div>
            <div class="btn-wrap small row">
              <div class="col-md-10">
                <input type="text" id="flow-title" class="form-control control" v-model="flow_title" placeholder="Title of this Flow" />
              </div>
              <div class="btn-group col-md-2 hidden-xs hidden-sm">
                <button href="#start" id="btn-commit" class="btn btn-default sleek" @click="editor_commit">COMMIT</button>
              </div>
            </div>
            <div class="btn-wrap small row visible-xs visible-sm">
              <div class="btn-group col-xs-10 col-xs-offset-1">
                <button id="btn-commit" @click="editor_commit" class="btn btn-block btn-default sleek">COMMIT</button>
              </div>
            </div>

          </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="flow">

          <div v-for="entry in flow_entries" class="panel flow-entry">
            <div class="panel-heading">
              <h3>{{ entry.title }}</h3>
            </div>
            <div class="panel-body">
              <p>{{ entry.content }}</p>
            </div>
            <div class="panel-footer">
              <p><span class="metric">{{ entry.content.length }}</span> c. | <span class="metric">{{ flow_word_count }}</span> w.</p>
            </div>
          </div>


        </div>
        <div role="tabpanel" class="tab-pane" id="network">
          <p>network content...</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="ai">
          <p>AI content...</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="rss">
          <p>RSS content...</p>
        </div>
      </div>

    </section>

  </div>

</div>

script.js

var MOMENT_TIMESTAMP_FORMAT = "ddd, MMM Do YYYY, h:mm:ss a G\\MTZZ";
var now = moment();
$("#flow-apps").hide();
$("#navigation").tab();

var app = new Vue({
  el: "#app",
  data: {
    app_name: "FLOW",
    version: "0.1-dev",
    hint: "What's on your mind?",
    time: now,
    show_intro: true,
    show_editor: false,
    flow_entries: [],
    status_msg: "Welcome to FLOW.",
    status_class: "text-info",
    key1: "",
    key2: "",
    flow_title: "",
    flow_body: ""
  },
  computed: {
    flow_word_count: function(){
      return this.flow_body.trim().split(" ").length;
    }
  },
  methods: {
    status: function(kind,msg){
      app.status_class = "text-" + kind;
      app.status_msg = msg;
    },
    login: function(event) {
      var key1 = $("#key1")
        .val()
        .trim();
      var key2 = $("#key2")
        .val()
        .trim();

      if (key1.length == 0) {
        this.status("danger","Please set KEY-1");
        $("#key1").focus();
        return;
      }

      if (key2.length == 0) {
        this.status("danger","Please set KEY-2");
        $("#key2").focus();
        return;
      }

      app.key1 = key1;
      app.key2 = key2;

      this.show_intro = false;
      $("#flow-apps").show();
      
      this.status("success","Hi " + app.key1 + ", Welcome to " + app.app_name);
    },
    editor_commit: function(event) {
      var now = moment().format();
      var title = app.flow_title
        .trim();
      var content = app.flow_body;

      if (content.length == 0) {
        app.status = "Please add some content to the entry before posting it.";
        return;
      }

      var flow_entry = {
        now: now,
        title: title,
        content: content
      };

      app.flow_entries.push(flow_entry);
      app.flow_title = app.flow_body = "";
    }
  }
});

setInterval(() => {
  app.hint =
    "It's " +
    moment().format(MOMENT_TIMESTAMP_FORMAT) +
    ", What's on your mind?";
}, 1000);

function bootstrap_flow() {
  $("#flow-in").markdown({
    //savable:true,
    onShow: function(e) {
      console.log(
        "Showing " +
          e.$textarea.prop("tagName").toLowerCase() +
          "#" +
          e.$textarea.attr("id") +
          " as Markdown Editor..."
      );
    },
    onSave: function(e) {
      console.log("Saving '" + e.getContent() + "'...");
    },
    onChange: function(e) {
      console.log("Changed!");
    },
    onFocus: function(e) {
      console.log("Focus triggered!");
    },
    onBlur: function(e) {
      console.log("Blur triggered!");
    },
    additionalButtons: [
      [
        {
          name: "flowControls",
          data: [
            {
              name: "cmdTimeStamp",
              toggle: true, // this param only take effect if you load bootstrap.js
              title: "TIME",
              icon: "glyphicon glyphicon-time",
              callback: function(e) {
                // Replace selection with some drinks
                var chunk,
                  cursor,
                  selected = e.getSelection(),
                  content = e.getContent(),
                  // Grab current timestamp text...
                  chunk = moment().format(MOMENT_TIMESTAMP_FORMAT);

                // transform selection and set the cursor into chunked text
                e.replaceSelection(chunk);
                cursor = selected.start;

                // Set the cursor
                e.setSelection(cursor, cursor + chunk.length);
              }
            }
          ]
        }
      ]
    ]
  });
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/js/bootstrap-markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

.overlay{
  position:fixed;
   background:url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/px_by_Gre3g.png);
  -webkit-animation:100s scroll infinite linear;
  -moz-animation:100s scroll infinite linear;
  -o-animation:100s scroll infinite linear;
  -ms-animation:100s scroll infinite linear;
  animation:100s scroll infinite linear;
  top:0;
  left:0;
  width:100%;
 height:100%;
}

h1.large {
    font:200px Lobster !important;
    margin-top: 2%;
}
p.large {
    font:50px Lobster !important;
}

h1{
  text-align:center;
  color:#FFF !important;
  margin-top:1%;
  font:60px Lobster;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

.status {
  font-family: 'Raleway', sans-serif;
  padding: 5px;
}

.status.text-warning {
  color: #ff9800;
}
.status.text-danger {
  color: #ff9800;
}
.status.text-info {
  color: #00bcd4;
}

.status.text-success {
  color: #ffeb3b;
}

p{
  color:#FFF;
  text-align:center;
  font:15px Lobster;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

.sleek {
  font-family: Lobster;
}

.btn.sleek {
  font-size: large;
}

@-webkit-keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

@-moz-keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

@-o-keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

@-ms-keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

@keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

/* contains input and control widgets */
.btn-wrap{
  margin:0 auto;
  width:80vw;
  padding:30px;
  background-color: rgba(10,10,10,.2);
}

.btn-wrap.small{
  padding:10px;
}

.flow-apps {
  margin: 10px;
}

.control {
  display: inline-block;
}

/* the keys */
input.control {
  padding:15px;
  background-color: rgba(0,0,0,0);
  margin-right: 5px;
  font-size: 20px;
  color: cyan;
}

/* each widget/card section */
.entry {
  margin: 20px;
}

/* override the bootstrap-markdown editor styles for the textarea */
.md-header, .btn-toolbar, .md-editor, .md-editor .md-footer, .md-editor>.md-header {
  background-color: rgba(0,0,0,0);
  border: 0px rgba(0,0,0,0); 
}

textarea {
  font-family: 'Abel', sans-serif !important; 
  font-size: 16px !important;
}

.md-preview p {
    font-family: 'Abel', sans-serif !important;
  font-size: 18px;
}

.md-editor > .md-preview {
    padding: 2px;
    min-height: 10px;
    background: rgba(0, 0, 0,0);
    border-top: 1px dashed rgb(221, 221, 221);
    border-bottom: 1px dashed rgb(221, 221, 221);
    overflow: auto;
    color: white !important;
    padding: 20px;
}

.md-editor.md-fullscreen-mode.active {
  background-color: rgba(10,10,10,.6) !important;
}

.md-editor.md-fullscreen-mode.active textarea {
  background-color: rgba(10,10,10,.9) !important;
  transition: background-color 1s ease-in-out;
}
.md-editor.md-fullscreen-mode.active textarea:hover,.md-editor.md-fullscreen-mode.active textarea:hover  {
  background-color: rgba(10,10,10,.9) !important;
}

.md-editor.md-fullscreen-mode .md-input, .md-editor.md-fullscreen-mode .md-preview {
  background-color: rgba(10,10,10,.9) !important;
  text-align: left;
}

.md-editor.md-fullscreen-mode p, .md-preview p {
  text-align: left !important;
}

.tab-content {
  padding: 10px;
}

#flow * {
  color: #cddc39;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: left;
}

#flow h1, #flow h2, #flow h3 {
  color: #ffc107 !important;
  font-family: font-family: 'Abel', sans-serif !important;
  text-align: left;
}

.panel {
    background-color: rgba(10,10,10,.2);
}

.flow-info {
  margin-top: 5px;  
}
.metric {
  font-size: 15px;
  color: yellow;
}

#flow div.panel-footer {
    background-color: darkslategrey !important;
}

#flow .panel-footer span.metric {
    color: lightcyan;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />