From a5545e30061facb75ae9777c8a187fa62d80cceb Mon Sep 17 00:00:00 2001
From: Welding-Torch <46340124+Welding-Torch@users.noreply.github.com>
Date: Thu, 10 Mar 2022 02:44:32 +0530
Subject: [PATCH] Beautified Crossword

---
 crossword.html | 80 ++++++++++++++++++++++++++++++++++++++++++++++++--
 iFrame.min.css |  1 +
 2 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 iFrame.min.css

diff --git a/crossword.html b/crossword.html
index b440f45..40d0466 100644
--- a/crossword.html
+++ b/crossword.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-  <title>HTML PWA</title>
+  <title>Crossword for Dementia Patients</title>
   <meta name="description" content="HTML Progressive Web App made with zUIx.js">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -54,6 +54,65 @@
   <!-- import zUIx.js in-browser bundler -->
   <script src="js/zuix-bundler.js"></script>
 
+<style>
+  body {
+    background-color:#F8FAFA;
+  }
+
+  h1 {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.button {
+  border-radius: 4px;
+  background-color: #f4511e;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 28px;
+  padding: 20px;
+  width: 200px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 5px;
+  margin-top: 300px;
+}
+
+.button span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.button span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.button:hover span {
+  padding-right: 25px;
+}
+
+.button:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+</style>
+
   <!-- main app script -->
   <script src="index.js" defer></script>
 
@@ -96,7 +155,24 @@
   <div data-ui-include="shared/main_menu"></div>
 </div>
 
-<script type="text/javascript" src="https://MyCrosswordMaker.com/embedjs?puzzle_id=66736"></script>
+<h1 align="center">A fully functional crossword puzzle designed to exercise the memory of dementia patients and increase their memory retention.</h1>
+
+<br>
+<br>
+<br>
+<br>
+
+<div style="">
+<script type="text/javascript" src="https://MyCrosswordMaker.com/embedjs?puzzle_id=502494"></script>
+<link id="ch-stylesheet" rel="stylesheet" href="iFrame.min.css">
+</div>
+
+
+<div class="container">
+  <div class="center">
+    <button align="center" class="button" onclick="document.location='index.html'"><span>Go Back to Home</span></button>
+  </div>
+</div>
 
 </body>
 </html>
diff --git a/iFrame.min.css b/iFrame.min.css
new file mode 100644
index 0000000..8ffca63
--- /dev/null
+++ b/iFrame.min.css
@@ -0,0 +1 @@
+div.ch-container{position:relative;display:flex!important;flex-direction:column!important;width:100%!important;max-width:800px!important;margin:30px auto!important;padding:20px!important;text-align:center!important;border-radius:7px!important;background-image:url(../img/crossword-bg.jpg)!important;background-position:center!important;background-size:cover!important;box-shadow:0 0 10px 0 rgba(0,0,0,.3)!important}div.ch-container.ch-simple{background-image:url(../img/simple-crossword-bg.jpg)!important}div.ch-title{font-family:'Helvetica Neue',Helvetica,Arial,Verdana,Sans-serif!important;font-size:18px!important;font-weight:700!important;margin:0!important;margin-bottom:15px!important;padding:0!important;text-align:center!important}div.ch-link-back-container{font-family:'Helvetica Neue',Helvetica,Arial,Verdana,Sans-serif!important;font-size:10px!important;position:absolute;right:0;bottom:-20px;margin-top:15px;color:#333!important}a.ch-url{font-family:'Helvetica Neue',Helvetica,Arial,Verdana,Sans-serif!important;font-size:10px!important;margin:0!important;padding:0!important;text-decoration:underline!important;color:#333!important;box-shadow:none!important}a.ch-url:hover{color:#000!important}a.ch-launch-button{font-family:'Helvetica Neue',Helvetica,Arial,Verdana,Sans-serif!important;font-size:40px!important;font-weight:600!important;line-height:1!important;display:inline-block!important;margin:auto!important;padding:.75em 1.5em!important;cursor:pointer!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important;transition:background-color 150ms ease!important;text-align:center!important;vertical-align:middle!important;white-space:nowrap!important;text-decoration:none!important;letter-spacing:.05em!important;color:#fff!important;border:0!important;border-radius:80px!important;outline:0!important;background-color:#1174a6!important;box-shadow:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;-webkit-font-smoothing:antialiased!important}a.ch-launch-button:active,a.ch-launch-button:focus,a.ch-launch-button:hover{outline:0!important;background-color:#0c5478!important}body.ch-modal-open{overflow:hidden!important;height:100%!important;pointer-events:none!important}body.ch-modal-open *{box-sizing:border-box!important}div.ch-modal{position:fixed!important;z-index:2147483647;top:0!important;left:0!important;display:none;width:100%!important;height:100%!important;pointer-events:auto!important;background-color:rgba(0,0,0,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}div.ch-modal.open{display:flex!important;flex-direction:column;justify-content:center;align-items:center}div.ch-modal .ch-frame-container{position:relative!important;width:calc(100% - 40px)!important;max-width:700px!important;height:calc(100% - 40px)!important;margin:20px auto 0!important}div.ch-modal iframe.ch-iframe{overflow:hidden!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:0!important}div.ch-modal span.ch-modal-close{position:absolute!important;z-index:2!important;top:-15px!important;right:-15px!important;width:31px!important;height:31px!important;border-radius:50%!important;background-color:#000!important}div.ch-modal span.ch-modal-close:after,div.ch-modal span.ch-modal-close:before{position:absolute!important;top:5px!important;right:14px!important;width:2px!important;height:20px!important;content:''!important;-webkit-transform:rotate(45deg)!important;transform:rotate(45deg)!important;background-color:#fff!important}div.ch-modal span.ch-modal-close:after{-webkit-transform:rotate(-45deg)!important;transform:rotate(-45deg)!important}
\ No newline at end of file