various

Author: mkaminsky11

README.md

@@ -13,9 +13,11 @@ This is only the **FRONTEND**. There is also a backend component which is not op
 If you simply `git clone` this and open `index.html`, **it will not work**. With some simple modifications, though, such as replacing the API keys with your own, you should be able to get it functional. This is mainly intended as a teaching tool.
 
 ### The Good Parts
-If you want to see the places where all of the __magic__ happens, take a look at `js/drive.js`, `js/sky.js`, and `js/tabs.js`. Enjoy!
+If you want to see the places where all of the _magic_ happens, take a look at `js/drive.js`, `js/sky.js`, and `js/tabs.js`. Enjoy!
 
 ### Recent Updates
++ Added ability to copy snippets to clipboard
++ Added a snippet manager (located in siderbar) which replaces the Javascript REPL
 + Updated to [CodeMirror](http://codemirror.net/) version 5.9 ([release notes](http://codemirror.net/doc/releases.html))
 + Now supports [OneDrive](https://onedrive.live.com/)
 + Persistant preferences via backend
@@ -28,11 +30,18 @@ If you want to see the places where all of the __magic__ happens, take a look at
 + Context menu in sidebar
 + Minimize and beautify
 + ~~Warning when closing without saving changes~~ **DONE!**
-+ Snippets (coming soon)
++ ~~Snippets (coming soon)~~ **DONE**
++ Fix running Javascript + Coffeescript
++ Import and export snippets (WIP)
++ Store open tabs and reload on open (WIP)
++ Custom-made color picker (WIP)
++ Chat and collaboration using our backend, so that Onedrive users can chat and collaborate as well
++ Better publishing
 
 =====
 
 ### Features
++ Snippet manager
 + Syntax highlighting
 + Collaboration
 + Built-in color picker

about/images/briefcase.svg

@@ -88,37 +88,37 @@ <h4 id="quote">A free, open-source code editor for Google Drive and oneDrive</h4
 			<div class="section group">
 				<div class="col span_1_of_4 text-center">
 
-					<img class="icon" src="images/eye-black.png">
+					<img class="icon" src="images/eye.svg" width="64">
 
 					<h6 class="med black">Preview Your Work</h6>
-					<h6 class="small gray">Preview and publish HTML, Markdown, and LaTex files and run Javascript and Coffeescript files.</h6>
+					<h6 class="small gray">Preview and publish HTML, Markdown, and LaTex files and run Javascript and Coffeescript files</h6>
 
 				</div>
 
 				<div class="col span_1_of_4 text-center">
 
-					<img class="icon" src="images/code-black.png">
+					<img class="icon" src="images/briefcase.svg" width="64">
 
-					<h6 class="med black">Your Files Are Everywhere</h6>
-					<h6 class="small gray">With Google Drive and Code Your Cloud, you can edit your code on any computer or mobile device.</h6>
+					<h6 class="med black">Stay Organized</h6>
+					<h6 class="small gray">Use the built-in snippet manager to keep handy code nearby</h6>
 
 				</div>
 
 				<div class="col span_1_of_4 text-center">
 
-					<img class="icon" src="images/cloud-black.png">
+					<img class="icon" src="images/cloud-check.svg" width="64">
 
 					<h6 class="med black">Google Drive</h6>
-					<h6 class="small gray">Your files are secure and accessible. It's just like Google Docs, just for your code.</h6>	
+					<h6 class="small gray">Your files are secure and accessible. It's just like Google Docs, just for your code</h6>
 
 				</div>
 
 				<div class="col span_1_of_4 text-center">
 
-					<img class="icon" src="images/thumb-black.png">
+					<img class="icon" src="images/thumbs-up.svg" width="64">
 
 					<h6 class="med black">Be Social</h6>
-					<h6 class="small gray">Collaborate, chat, share, and edit with your friends and colleagues in real time.</h6>
+					<h6 class="small gray">Collaborate, chat, share, and edit with your friends and colleagues in real time</h6>
 
 				</div>
 			</div>
@@ -171,7 +171,7 @@ <h6 id="logos">
 
 			<h6 class="btn-h6">
 
-				<a href="https://github.com/mkaminsky11/codeyourcloud" class="waves-effect waves-light paper-btn" style="background-color:white;color:black;text-decoration: none;font-size:16px;">SEE MORE</a>
+				<a href="https://github.com/mkaminsky11/codeyourcloud" class="waves-effect waves-light paper-btn" style="background-color:#E2E2E2;color:black;text-decoration: none;font-size:16px;">SEE ALL SUPPORTED LANGUAGES</a>
 
 			</h6>
 

about/images/cloud-check.svg

@@ -264,24 +264,93 @@ body, html{
 	margin-left: 0px;
 	z-index: 2;
 }
-
-
 .snippet-main{
 	padding-left: 5px;
-    padding-right: 5px;
-    width: calc(100% - 10px);
-    height: calc(100% - 33px);
-    overflow-y: auto;
-    position: absolute;
-    bottom: 0;
-    left: 0;
+  padding-right: 5px;
+  width: calc(100% - 10px);
+  height: calc(100% - 33px);
+  overflow-y: auto;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
-
 .snippet-item{
 	position: relative;
-    width: 100%;
-    height: 200px;
-    margin-bottom: 5px;
+	margin-bottom: 10px;
+}
+.snippet-title{
+  width: calc(100% - 10px);
+  padding: 5px;
+  position: relative;
+  background-color: #131313;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom: solid 2px #131313;
+  color: white;
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+}
+.snippet-edit{
+  width: calc(100% - 10px);
+  padding: 5px;
+  position: relative;
+  background-color: #2F2E2E;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom: solid 2px #131313;
+  color: white;
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+}
+.snippet-title h4{
+  margin: 0;
+  font-size: 12px;
+  font-family: "Roboto";
+  font-weight: normal;
+  width: calc(100% - 45px);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.snippet-title i, .snippet-edit i{
+  margin-left: 3px;
+  margin-right: 3px;
+  font-size: 13px;
+  color: #D0D0D0;
+  display: inline-block;
+}
+.snippet-edit input{
+  font-size: 12px;
+  border: none;
+  padding: 3px;
+  border-radius: 3px;
+  width: calc(100% - 38px);
+  margin-bottom: 3px;
+  border: 1px solid #555;
+  background-color: white;
+  color: #606060;
+}
+.snippet-edit select{
+  font-size: 12px;
+  border: none;
+  padding: 3px;
+  border-radius: 3px;
+  width: calc(100% - 28px);
+  margin-bottom: 3px;
+  border: 1px solid #555;
+  background-color: white;
+  color: #606060;
+}
+.snippet-editor{
+  width: 100%;
+  position: relative;
+  height: 200px;
+  overflow: hidden;
 }
 
 .nav-bottom-buttons{
@@ -564,6 +633,7 @@ body, html{
 	padding-top: 7px;
 	padding-bottom: 3px;
 	margin-top: 1px;
+	position: relative;
 }
 #navigate .active{
 	border-top-left-radius: 6px;
@@ -574,17 +644,6 @@ body, html{
 .side-item a{
 	text-decoration: none;
 }
-.nav-terminal{
-	display: block;
-	width: 100%;
-	background-color: white;
-	margin-top: 0px;
-	border: none;
-	height: calc(100% - 42px);
-}
-.nav-terminal > * {
-	height: 100%;
-}
 #opt{
 	display: block;
 	position: absolute;