Merge from downloadables (#12)

phentos · Jul 1, 2023 · 10d3113 · 10d3113
2 parents 1afeec5 + bb4c5e8
commit 10d3113
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 57 deletions.
diff --git a/images/floppy.svg b/images/floppy.svg
diff --git a/index.html b/index.html
@@ -5,13 +5,13 @@
         <script src="touch.js" type="module"></script>
     </head>
     <body>
+        <div id="screencover"></div>
         <canvas id="canvas"></canvas>
         <input class="ui" id="penSizeSlider" type="range" value="4" min="1" max="200" step="2">
 
         <form class="ui" id="penStyles">
             <fieldset>
                 <div>
-                    <!-- <img class="block" id="floppy" src="images/floppy.svg" width="75px" height="50px"> -->
                     <img class="block" id="invert" src="images/yin-yang.svg" width="75px" height="50px">
 
                     <br>
@@ -41,6 +41,10 @@
                     <div class="block" id="clearButton">
                         <button id="clear">Clear</button>
                     </div>
+
+                    <div class="block" id="saveButton">
+                        <a id="download" download="output.png" href="">Save</a>
+                    </div>
                 </div>
             </fieldset>
         </form>

diff --git a/styles.css b/styles.css
@@ -9,6 +9,19 @@ body {
 
 }
 
+#screencover {
+	z-index: 999;
+	display:none;
+	position:fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0,0,0,.8);
+}
+
 .ui {
 	z-index: 2;
 	position: absolute;
@@ -34,7 +47,7 @@ body {
   display:block;
 }
 
-#clearButton {
+button {
     background-color: #595959;
     border: none;
     color: white;
@@ -49,7 +62,22 @@ body {
     transition-duration: 0.4s;
 }
 
-#clearButton:hover {
+button:hover {
     background-color: #3D3D3D;
     color: #663300;
+}
+
+a {
+    background-color: #595959;
+    border: none;
+    color: white;
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 2px;
+    transition-duration: 0.4s;	
 }