Skip to content

Commit ec3f682

Browse files
mkaminsky11mkaminsky11
committed
miniview
1 parent b4a5a14 commit ec3f682

15 files changed

Lines changed: 317 additions & 121 deletions

File tree

‎about/css/index.css‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
left: 0;
99
padding: 5px;
1010
z-index: 99;
11+
padding-bottom: 25px;
1112
}
1213

1314
#login{
@@ -73,14 +74,16 @@ body{
7374
left: 10%;
7475
background-color: transparent;
7576
margin-bottom: -4px;
77+
z-index: 1;
7678
}
7779

7880
.dark-part{
7981
width: calc(100% - 60px);
8082
padding: 30px;
81-
background-color: #313131;
82-
color: white;
83+
background-color: #eee;
84+
color: #363636;
8385
font-family: 'Roboto';
86+
z-index: 3;
8487
}
8588
#logos{
8689
margin-top: 10px;
@@ -117,12 +120,11 @@ body{
117120
.dark-part{
118121
width: calc(100% - 60px);
119122
padding: 30px;
120-
background-color: #596B6C;
121123
}
122124
.white-part{
123125
width: calc(100% - 60px);
124126
padding: 30px;
125-
background-color: #F9F7F7;
127+
background-color: white;
126128
}
127129

128130
.small{
@@ -322,3 +324,15 @@ paper-toggle-button::shadow #toggleBar {
322324
border-top-left-radius: 5px;
323325
border-top-right-radius: 5px;
324326
}
327+
328+
.code-light{
329+
font-family: "Roboto";
330+
font-weight: 400;
331+
}
332+
333+
.dark-part{
334+
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
335+
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
336+
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
337+
margin-bottom: 10px;
338+
}

‎about/images/old.gif‎

1.69 MB
Loading

‎about/images/web_record.gif‎

2.33 MB
Loading

‎about/index.html‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<script src="../poly/components/platform/platform.js"></script>
54

65
<meta charset="utf-8">
76
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
@@ -12,29 +11,12 @@
1211
<link rel="shortcut icon" type="image/png" href="../favicon.png"/>
1312

1413
<link rel="stylesheet" href="../fonts/font.css">
14+
<link rel="stylesheet" href="../fonts/material/css/material-design-iconic-font.css">
1515
<link rel="stylesheet" href="css/index.css">
1616
<link rel="stylesheet" href="css/grid.css">
17+
<link rel="stylesheet" href="../css/material.css">
1718

1819
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
19-
20-
<link rel="import" href="../poly/components/core-style/core-style.html">
21-
<link rel="import" href="../poly/components/paper-checkbox/paper-checkbox.html">
22-
<link rel="import" href="../poly/components/core-header-panel/core-header-panel.html">
23-
<link rel="import" href="../poly/components/paper-icon-button/paper-icon-button.html">
24-
<link rel="import" href="../poly/components/paper-toggle-button/paper-toggle-button.html">
25-
<link rel="import" href="../poly/components/paper-input/paper-input.html">
26-
<link rel="import" href="../poly/components/paper-slider/paper-slider.html">
27-
<link rel="import" href="../poly/components/core-toolbar/core-toolbar.html">
28-
<link rel="import" href="../poly/components/core-menu/core-menu.html">
29-
<link rel="import" href="../poly/components/core-icons/core-icons.html">
30-
<link rel="import" href="../poly/components/paper-button/paper-button.html">
31-
<link rel="import" href="../poly/components/paper-fab/paper-fab.html">
32-
<link rel="import" href="../poly/components/paper-ripple/paper-ripple.html">
33-
<link rel="import" href="../poly/components/paper-item/paper-item.html">
34-
<link rel="import" href="../poly/components/paper-shadow/paper-shadow.html">
35-
<link rel="import" href="../poly/components/paper-toast/paper-toast.html">
36-
<link rel="import" href="../poly/components/paper-button/paper-button.html">
37-
<link rel="import" href="../poly/components/paper-spinner/paper-spinner.html">
3820

3921
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
4022
<script src="../lib/velocity/velocity.min.js"></script>
@@ -60,8 +42,17 @@
6042
</svg>
6143
<a id="brand">Code Your Cloud</a>
6244

63-
<a href="https://github.com/mkaminsky11/codeyourcloud"><paper-button id="github" raised label="FORK THIS ON GITHUB"><paper-shadow></paper-shadow></paper-button></a>
64-
<paper-button id="login" onclick="go()" label="LOGIN" raised><paper-shadow></paper-shadow></paper-button>
45+
46+
<div style="width:calc(100%);position: absolute; top: 10px; right: 10px; display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;flex-wrap: wrap;justify-content: flex-end;">
47+
48+
<a href="https://github.com/mkaminsky11/codeyourcloud" class="waves-effect waves-light paper-btn" style="margin-right: 5px;align-self: flex-end;background-color:white;color:black;text-decoration: none;"><i class="fa fa-github" style="margin-right:10px"></i> FORK THIS ON GITHUB</a>
49+
50+
<a onclick="go()" class="waves-effect waves-light paper-btn paper-btn-blue" style="background-color:#3498DB;align-self: flex-end;"><i class="fa fa-google" style="margin-right:10px;"></i> LOGIN</a>
51+
52+
</div>
53+
54+
55+
</a>
6556
</div>
6657

6758
<!--h1>CODE YOUR CLOUD</h1-->
@@ -87,22 +78,16 @@ <h4 id="quote">Your code, set free</h4>
8778

8879
<img id="screen" src="images/web_record.gif">
8980

90-
<!-- div id="switch">
91-
<span id="web">Web</span>
92-
<paper-toggle-button id="switcher"></paper-toggle-button>
93-
<span id="mobile">Mobile</span>
94-
</div-->
9581
</div>
9682

9783
<div class="dark-part">
98-
<paper-shadow></paper-shadow>
9984
<div class="section group">
10085
<div class="col span_1_of_2 border-right-white">
101-
<h6 class="small white code-light uppercase">Code Your Cloud is an in-browser code editor for Google Drive. Packed with awesome editing and collaborative abilities, it's the ideal editor for quick fixes and demonstrations.</h6>
86+
<h6 class="small code-light uppercase">Code Your Cloud is an in-browser code editor for Google Drive. Packed with awesome editing and collaborative abilities, it's the ideal editor for quick fixes and demonstrations.</h6>
10287
</div>
10388

10489
<div class="col span_1_of_2">
105-
<h6 class="small white code-light uppercase">Plus, it's free and open source, so you can check out the inner workings.</h6>
90+
<h6 class="small code-light uppercase">Plus, it's free and open source, so you can check out the inner workings.</h6>
10691
</div>
10792

10893
</div>
@@ -176,14 +161,17 @@ <h6 id="logos">
176161
<span class="devicons devicons-dart dev-icon"></span>
177162
</h6>
178163

179-
<h6 class="btn-h6"><a class="btn" href="https://github.com/mkaminsky11/codeyourcloud" target="_blank"><paper-button class="btn-btn" label="SEE MORE" raised><paper-shadow></paper-shadow></paper-button></a></h6>
164+
<h6 class="btn-h6">
165+
166+
<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>
167+
168+
</h6>
180169

181170

182171
</div>
183172

184173
<div class="dark-part">
185-
<paper-shadow></paper-shadow>
186-
<h4 id="quote">Contact us</h4>
174+
<h4 id="quote" style="color:#4F4F4F">Contact us</h4>
187175

188176
<input class="form-control input" id="comment_name" value="" placeholder="Name"/>
189177
<br/>
@@ -193,8 +181,11 @@ <h4 id="quote">Contact us</h4>
193181
<br/>
194182

195183
<h6 id="send">
196-
<a id="ok" class="btn" onclick="comment()"><paper-button class="btn-btn" raised label="SEND" style="color:white;background-color:#2ECC71"><paper-shadow></paper-shadow></paper-button></a>
197-
<a id="no" class="btn" onclick="resetForm()"><paper-button class="btn-btn" raised label="CANCEL" style="color:white;background-color:#C0392B"><paper-shadow></paper-shadow></paper-button></a>
184+
185+
<a onclick="comment()" class="waves-effect waves-light paper-btn paper-btn-blue" style="background-color:#2ECC71;font-size:16px"><i class="md-send" style="margin-right:10px"></i> SEND</a>
186+
187+
<a onclick="resetForm()" class="waves-effect waves-light paper-btn paper-btn-blue" style="background-color:#E74C3C;font-size:16px"><i class="md-close" style="margin-right:10px"></i> CANCEL</a>
188+
198189
</h6>
199190

200191
<br/>
@@ -241,5 +232,6 @@ <h4 id="chart">A growing number of daily users</h4>
241232
</script>
242233
<script src="../lib/fit/fit.js"></script>
243234
<script src="js/index.js"></script>
235+
<script src="../js/material.js"></script>
244236
</body>
245237
</html>

‎css/style.css‎

Lines changed: 61 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ TOOLBAR
6767
height: 57px;
6868
margin-left: calc(100% - 53px);
6969
top: calc(100% - 67px);
70-
background-color: #34495e;
7170
text-align: center;
7271
padding-top: 10px;
7372
}
@@ -118,7 +117,7 @@ SIDEBAR
118117
}
119118

120119
#users, #toolbar{
121-
background-color: #2B2B2B;
120+
background-color: #262B30;
122121
z-index: 3;
123122
}
124123
#users{
@@ -190,7 +189,7 @@ SIDEBAR
190189
.hover-1:hover core-icon{color:#e74c3c;}.hover-2:hover core-icon{color:#E74C3C;}.hover-3:hover core-icon{ color:#2ecc71;}.hover-4:hover core-icon{color:#9b59b6;}.hover-5:hover core-icon{color:#e67e22;}.hover-6:hover core-icon{color:#C0392B;}.hover-7:hover core-icon{color:#c0392b;}.hover-8:hover core-icon{color:#f1c40f;}.hover-9:hover core-icon{color:#16a085;}.hover-10:hover core-icon{color:#27ae60;}.hover-11:hover core-icon{color:#e74c3c;}.hover-12:hover core-icon{color:#8e44ad;}.hover-13:hover core-icon{color:#f39c12;}.hover-14:hover core-icon{color:#d35400;}.hover-15:hover core-icon{color:#E74C3C;}.hover-16:hover core-icon{color:#1abc9c;}.hover-17:hover core-icon{color:#7f8c8d;}.hover-18:hover core-icon{color:#8e44ad;}.hover-19:hover core-icon{color:#e74c3c;}
191190

192191
#side{
193-
background-color: #323232;
192+
background-color: #101112;
194193
}
195194

196195
#side-inner hr{
@@ -361,7 +360,7 @@ div#container{
361360
}
362361
.tab-wrapper{
363362
height: 40px;
364-
background-color: #3A3939;
363+
background-color: #262B30;
365364
position: absolute;
366365
top: -30px;
367366
overflow: hidden;
@@ -386,23 +385,21 @@ div#container{
386385
flex-wrap: wrap;
387386
}
388387
.tab-tab{
389-
background-color: #272822;
390-
height: 24px;
388+
background-color: #1E2326;
389+
height: 18px;
391390
position : relative;
392391
width: 116px;
393392
padding: 8px;
393+
border-bottom: solid thick black;
394+
margin-top: 1px;
394395
}
395396
.tab-tab:first-child{
396397
margin-left: 0px;
397398
}
398-
.tab-tab:not(.active){
399-
border-left: solid 1px #3A3939;
400-
border-bottom: solid 1px #3A3939;
401-
}
402399

403400
.tab-tab h4{
404401
margin: 0px;
405-
font-size: 16px;
402+
font-size: 13px;
406403
width: 100px;
407404
overflow: hidden;
408405
word-break: break-all;
@@ -411,11 +408,11 @@ div#container{
411408
word-wrap: break-word;
412409
overflow: hidden;
413410
height: 19px;
414-
font-family: 'Roboto-Thin';
415-
color: #eee;
416-
411+
font-family: 'Roboto';
412+
color: #7f8c8d;
417413
padding-top: 4px;
418414
padding-left: 5px;
415+
font-weight: 300;
419416
}
420417
.tab-tab h6{
421418
margin: 0;
@@ -436,18 +433,20 @@ div#container{
436433
}
437434

438435
.tab-active{
439-
background-color: white;
440-
color: black;
441-
436+
background-color: #101112;
437+
color: white;
442438
border-top: solid 1px #eee;
439+
border-bottom: solid thick #E74C3C;
440+
margin-top: -1px;
441+
height: 19px;
443442
}
444443

445444
.tab-active h6{
446445
color: #f36c60;
447446
}
448447

449448
.tab-active h4{
450-
color: #7f8c8d;
449+
color: white;
451450
}
452451

453452
.CodeMirror{
@@ -657,7 +656,7 @@ div#container{
657656
position: relative;
658657
color: #F4E5E5;
659658
padding: 10px;
660-
background-color: #3A3939;
659+
background-color: transparent;
661660
text-align: center;
662661
font-family: 'Roboto-Thin';
663662
z-index: 11;
@@ -841,7 +840,7 @@ div#container{
841840
outline: none;
842841
border: none;
843842
font-size: 15px;
844-
color: #E9E7E7;
843+
color: #383838;
845844
background-color: white;
846845
border: solid 1px #eee;
847846
font-weight: 400;
@@ -885,20 +884,20 @@ FILE BROWSING TREE
885884
color: #F0EFEF;
886885
font-family: 'Roboto-Thin';
887886
font-weight: 600;
888-
font-size: 15px;
887+
font-size: 13px;
889888
margin-top: 7px;
890889
margin-bottom: 7px;
891890
overflow-wrap: break-word;
892891
}
893892

894893
.tree span {
895894
font-family: "Roboto";
896-
font-weight: 400;
895+
font-weight: 300;
897896
}
898897

899898
.tree i{
900899
margin-right: 10px;
901-
color: #9E9E9E;
900+
color: white;
902901
}
903902

904903
#tree-open{
@@ -1102,4 +1101,43 @@ LOADING ICON
11021101
#keyboard-manager > div > h5 > span{
11031102
float: right;
11041103
color: #A39F9F;
1104+
}
1105+
1106+
/*
1107+
MINI!
1108+
*/
1109+
1110+
#mini{
1111+
position: fixed;
1112+
z-index: 2;
1113+
top: 83px;
1114+
right: 0;
1115+
width: 300px;
1116+
height: calc(100% - 83px);
1117+
background-color: #151718;
1118+
overflow: scroll;
1119+
overflow-x: hidden;
1120+
}
1121+
1122+
.mini-row{
1123+
width: 100%;
1124+
display: flex;
1125+
height: 2px;
1126+
margin-bottom: 2px;
1127+
margin-top: 2px;
1128+
}
1129+
1130+
.mini-block{
1131+
width: 2px;
1132+
background-color: white;
1133+
}
1134+
1135+
.mini-space{
1136+
width: 1px;
1137+
background-color: transparent;
1138+
}
1139+
1140+
.mini-tab{
1141+
width: 3px;
1142+
background-color: transparent;
11051143
}

0 commit comments

Comments
 (0)