first commit

zaidhuda · Jan 18, 2017 · 3b9bc4c · 3b9bc4c
commit 3b9bc4c
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,131 @@
+<html>
+  <head>
+    <title>Colored</title>
+    <meta name="description" content="Simple colored page">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <style>
+      body {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+      }
+      body * {
+        font-family: serif;
+      }
+      main {
+        margin: auto 100px;
+        flex: 1 0 auto;
+      }
+      .color {
+        text-align: center;
+        padding: 0;
+        border: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: 0;
+        width: 100%;
+      }
+      .color:focus {
+        outline: none;
+      }
+      @media only screen and (min-width: 1100px){
+        .color {
+          font-size: 7rem;
+        }
+      }
+      @media only screen and (max-width: 1100px){
+        .color {
+          font-size: 5rem;
+        }
+      }
+      @media only screen and (max-width: 800px){
+        .color {
+          font-size: 3rem;
+        }
+      }
+      @media only screen and (max-width: 400px){
+        .color {
+          font-size: 1.4rem;
+        }
+      }
+      footer {
+        padding: 10px;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.25);
+      }
+      a {
+        text-decoration: none;
+        color: white !important;
+      }
+      #shareLink {
+        position: absolute;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <input id="colorCode" type="text" class="color" value="#FFFFFF" />
+    </main>
+    <footer>
+      <a href="http://zaidhuda.com" target="_blank">zaidhuda.com</a>&nbsp;
+      <a href="/" id="shareLink">colorlink</a>
+    </footer>
+    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+    <script src='./jqColorPicker.min.js'></script>
+    <script>
+      function getParameterByName(name, url) {
+        if (!url) url = window.location.href;
+        name = name.replace(/[\[\]]/g, "\\$&");
+        var regex = new RegExp("[?&]" + name + "(=([^&]*)|&|$)"),
+          results = regex.exec(url);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, " "));
+      }
+
+      function colorChangedCallback() {
+        var color = $('#colorCode').val();
+        $('#shareLink').prop('href', '?color=' + color.replace(/\s/g,''));
+        $(document).attr("title", color);
+      }
+
+      var defaultColor = '#FFF';
+
+      if (getParameterByName('color')){
+        defaultColor = getParameterByName('color');
+        $('#colorCode').val(defaultColor);
+        // $('body *').css('color', colors. );
+        $('#colorCode').css('background', defaultColor);
+        colorChangedCallback();
+      }
+
+      $('body').on('input', function(){
+        console.log(this.value)
+      })
+
+      $picker = $('.color').colorPicker({
+        color: defaultColor,
+        renderCallback: function() {
+          colorChangedCallback();
+        },
+        positionCallback: function($elm) {
+          var $UI = this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement
+            position = $elm.offset(), // $elm is the current trigger that opened the UI
+            gap = this.color.options.gap, // this.color.options stores all options
+            top = 0,
+            right = 0;
+
+          // $UI.appendTo('#somwhereElse');
+          return {
+            top: top,
+            right: right
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/jqColorPicker.min.js b/jqColorPicker.min.js