feat: add screenshots 📷

shubhwebkul · Jul 19, 2017 · b7b8f31 · b7b8f31
1 parent b9f484d
commit b7b8f31
Show file tree

Hide file tree

Showing 16 changed files with 119 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 > Source for [https://runmycode.online](https://runmycode.online) website
 
-[![RunMyCode Online Introduction](https://img.youtube.com/vi/iwz8n3v7QVY/maxresdefault.jpg)](https://www.youtube.com/watch?v=iwz8n3v7QVY "RunMyCode Online Introduction")
+[![RunMyCode Online Introduction](https://github.com/shatgupt/runmycode-ext/raw/master/screenshot.png?raw=true)](https://www.youtube.com/watch?v=iwz8n3v7QVY "RunMyCode Online Introduction")
 
 ## Browsers Supported
 Latest versions of Chrome, Firefox, Opera.  

diff --git a/css/style.css b/css/style.css
@@ -100,6 +100,43 @@ footer {
   flex: none!important;
 }
 
+.screens {
+  max-width: 800px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: stretch;
+  padding: 0;
+}
+
+.screens a {
+  display: block;
+  float: left;
+  flex: 0 0 auto;
+  margin-bottom: 15px;
+}
+
+.screens img {
+  max-width: 98%;
+  height: auto;
+  width: auto;
+}
+
+@media screen and (min-width: 800px) {
+  .screens a {
+    width: calc(100%/3);
+    height: calc(100%/3);
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .screens a {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .menu {
   width: 100%;
 }

diff --git a/index.html b/index.html
@@ -33,10 +33,13 @@ <h2><a href="/">RunMyCode</a></h2>
       </header>
 
       <main class="text-center">
-        <p>RunMyCode Online is an open source service to run code online from browsers</p>
+        <p>RunMyCode Online is an open source service to run code from browsers</p>
+
         <iframe style="border: 1px solid; width: 99%;" height="445" src="https://www.youtube.com/embed/iwz8n3v7QVY?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
 
-        <h4 id="action-msg">Get a key by authenticating below. <a href="faq.html#auth">Why?</a></h4>
+        <p><a href="faq.html#supported-lang">Supported code</a> can be run in <a href="codesheet.html">CodeSheet</a> or directly from <a href="faq.html#supported-sites">supported sites</a> using browser extensions:<br><a href="https://chrome.google.com/webstore/detail/runmycode-online/iidcnkpdmnopbbkdmneglbelcefgfohf">Chrome</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/runmycode-online">Firefox</a></p>
+
+        <h4 id="action-msg">Get started by authenticating below. <a href="faq.html#auth">Why?</a></h4>
         <div class="menu" id="auth-buttons">
           <ul>
             <li><input class="btn auth" type="button" value="Google"></li>
@@ -46,7 +49,12 @@ <h4 id="action-msg">Get a key by authenticating below. <a href="faq.html#auth">W
         </div>
         <a href="dashboard.html" class="btn btn-dashboard hide-if-no-user">Go to Dashboard</a>
 
-        <p><a href="faq.html#supported-lang">Supported code</a> can be run in <a href="codesheet.html">CodeSheet</a> or directly from <a href="faq.html#supported-sites">supported sites</a> using browser extensions:<br><a href="https://chrome.google.com/webstore/detail/runmycode-online/iidcnkpdmnopbbkdmneglbelcefgfohf">Chrome</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/runmycode-online">Firefox</a></p>
+        <h3 class="text-center"><a href="screenshots.html" title="More Screenshots">Screenshots</a></h3>
+        <div class="screens">
+          <a href="screenshots/github.png"><img src="screenshots/github.png" title="Github"></a>
+          <a href="screenshots/github-gist.png"><img src="screenshots/github-gist.png" title="Github Gist"></a>
+          <a href="screenshots/gobyexample.png"><img src="screenshots/gobyexample.png" title="GoByExample"></a>
+        </div>
       </main>
 
       <footer>

diff --git a/screenshots.html b/screenshots.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>CodeSheet</title>
+    <meta name="description" content="Run code online from the browser">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" type="text/css" href="codemirror/lib/codemirror.css">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/runmycode-panel.css">
+    <script>
+      window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date
+      ga('create', 'UA-100606537-1', 'auto')
+      ga('send', 'pageview')
+    </script>
+    <script async src='https://www.google-analytics.com/analytics.js'></script>
+  </head>
+  <body>
+    <div class="container">
+      <header class="grid grid--center">
+        <div class="grid-cell u-1of4">
+          <h2><a href="/">RunMyCode</a></h2>
+        </div>
+        <div class="grid-cell">
+          <div class="menu">
+            <ul id="top-menu" class="right">
+              <li><a href="dashboard.html" class="hide-if-no-user" id="user-name">Dashboard</a></li>
+              <li><a href="codesheet.html" class="hide-if-no-user">CodeSheet</a></li>
+              <li><a href="faq.html">FAQ</a></li>
+            </ul>
+          </div>
+        </div>
+      </header>
+
+      <main>
+        <h3 class="text-center">Screenshots</h3>
+        <div class="screens">
+          <a href="screenshots/github.png"><img src="screenshots/github.png" title="Github"></a>
+          <a href="screenshots/gitlab.png"><img src="screenshots/gitlab.png" title="Gitlab"></a>
+          <a href="screenshots/bitbucket.png"><img src="screenshots/bitbucket.png" title="Bitbucket"></a>
+          <a href="screenshots/gobyexample.png"><img src="screenshots/gobyexample.png" title="GoByExample"></a>
+          <a href="screenshots/github-edit.png"><img src="screenshots/github-edit.png" title="Github Edit"></a>
+          <a href="screenshots/gitlab-edit.png"><img src="screenshots/gitlab-edit.png" title="Gitlab Edit"></a>
+          <a href="screenshots/github-gist.png"><img src="screenshots/github-gist.png" title="Github Gist"></a>
+          <a href="screenshots/gitlab-snippets.png"><img src="screenshots/gitlab-snippets.png" title="Gitlab Snippets"></a>
+          <a href="screenshots/bitbucket-snippets.png"><img src="screenshots/bitbucket-snippets.png" title="Bitbucket Snippets"></a>
+          <a href="screenshots/github-gist-edit.png"><img src="screenshots/github-gist-edit.png" title="Github Gist Edit"></a>
+          <a href="screenshots/bitbucket-snippets-edit.png"><img src="screenshots/bitbucket-snippets-edit.png" title="Bitbucket Snippets Edit"></a>
+          <a href="screenshots/codesheet.png"><img src="screenshots/codesheet.png" title="CodeSheet"></a>
+        </div>
+      </main>
+
+      <footer>
+        <p>&copy; <a target="_blank" href="https://github.com/shatgupt">Shatrughn Gupta</a></p>
+      </footer>
+    </div>
+
+    <script>
+      const $ = s => document.querySelector(s)
+      const $$ = s => document.querySelectorAll(s)
+      let user = localStorage.getItem('runmycode')
+      if (user) {
+        $('#user-name').textContent = JSON.parse(user).name || 'Dashboard'
+        Array.from($$('.hide-if-no-user')).forEach(el => el.classList.remove('hide-if-no-user'))
+      }
+    </script>
+  </body>
+</html>
diff --git a/screenshots/bitbucket-snippets-edit.png b/screenshots/bitbucket-snippets-edit.png
diff --git a/screenshots/bitbucket-snippets.png b/screenshots/bitbucket-snippets.png
diff --git a/screenshots/bitbucket.png b/screenshots/bitbucket.png
diff --git a/screenshots/codesheet.png b/screenshots/codesheet.png
diff --git a/screenshots/github-edit.png b/screenshots/github-edit.png
diff --git a/screenshots/github-gist-edit.png b/screenshots/github-gist-edit.png
diff --git a/screenshots/github-gist.png b/screenshots/github-gist.png
diff --git a/screenshots/github.png b/screenshots/github.png
diff --git a/screenshots/gitlab-edit.png b/screenshots/gitlab-edit.png
diff --git a/screenshots/gitlab-snippets.png b/screenshots/gitlab-snippets.png
diff --git a/screenshots/gitlab.png b/screenshots/gitlab.png
diff --git a/screenshots/gobyexample.png b/screenshots/gobyexample.png