mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-31 18:50:14 +02:00
Code Issues Releases Wiki Activity

add help modal.

Browse Source
This commit is contained in:
Kushagra Gour
2016-05-04 03:19:08 +05:30
parent 7e4b21c1e6
commit 89d0b15bc2
2 changed files with 87 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@@ -14,6 +14,8 @@
min-height: 100vh;
font-family: Helvetica, arial;
}
a { text-decoration: none; color: crimson; }
/*a:hover { text-decoration: underline; }*/
.flex {
display: flex;
}
@@ -115,6 +117,7 @@
padding: 5px 10px;
background-color: #111;
color: rgba(255, 255, 255, 0.45);
border-top: 1px solid rgba(255,255,255,0.14);
line-height: 20px;
}
.footer__right {
@@ -144,6 +147,55 @@
.gutter-vertical {
cursor: ns-resize;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
backface-visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}
.modal__content {
/*color: #fff;*/
background: #fdfdfd;
position: relative;
border-radius: 3px;
margin: 0 auto;
opacity: 0;
padding: 2em;
font-size: 1.5em;
transition: all 0.3s;
transform: scale(0.7);
}
.is-modal-visible {
visibility: visible;
}
.is-modal-visible .modal__content {
transform: scale(1);
opacity: 1;
}
.modal-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(0,0,0,0.6);
transition: all 0.3s;
}
.is-modal-visible ~ .modal-overlay {
opacity: 1;
visibility: visible;
}
</style>
</head>
@@ -177,8 +229,8 @@
</svg>
</a>
</div>
&copy; Web-Maker
<a>
&copy; Web-Maker &nbsp;&nbsp;
<a id="js-help-btn">
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
<path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" />
</svg>
@@ -194,6 +246,18 @@
</div>
</div>
<div class="modal" id="js-help-modal">
<div class="modal__content">
<h3>Web-Maker</h3>
<div>
<p>Made by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
<p>If you like this extension, support it by <a href="">writing a review</a>.</p>
</div>
</div>
</div>
<div class="modal-overlay"></div>
<svg width="30" height="30" viewBox="0 0 100 100" fill="rgba(255, 255, 255, 0.09)">
<defs>