ok

jcponce · Feb 28, 2024 · 44dcc5d · 44dcc5d
1 parent 9c6ffea
commit 44dcc5d
Show file tree

Hide file tree

Showing 7 changed files with 339 additions and 48 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+**/.DS_Store
diff --git a/velfields/.DS_Store b/velfields/.DS_Store
diff --git a/velfields/Aizawa/index.html b/velfields/Aizawa/index.html
@@ -8,6 +8,7 @@
             <script language="javascript" type="text/javascript" src="../libraries/p5.dom.min.js"></script>
             <script language="javascript" type="text/javascript" src="../libraries/p5.easycam.min.js"></script>
             <script language="javascript" type="text/javascript" src="../libraries/p5patch.js"></script>
+
             <script language="javascript" type="text/javascript" src="aizawa.js"></script>
             <script language="javascript" type="text/javascript" src="../libraries/dat.gui.min.js"></script>
             <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
@@ -35,7 +36,35 @@ <h3>Parameters</h3>
                 <ul id="hud-right" class="two"></ul>
             </div>
         </div>
+
+        <!-- The Modal -->
+  <div id="myModal" class="modal">
+
+    <!-- Modal content -->
+    <div class="modal-content">
+      <div class="modal-header">
+        <span class="close">&times;</span><br />
+        <strong>👋 Hello!</strong>
+      </div>
+      <div class="modal-body">
+
+        <div w3-include-html="../libraries/message.html"></div>
 
+      </div>
+      <div class="modal-footer">
+        Thank you! 🙏 I highly appreciate your support! 🤗
+      </div>
+    </div>
+
+  </div>
+  <!-- The Modal ends -->
+
+        <div class="support">
+            <p>❤️ Support in <a href="https://www.patreon.com/jcponce">Patreon</a></p>
+        </div>
+
+        <script language="javascript" type="text/javascript" src="../libraries/message.js"></script>
     </body>
+
 </html>
 
diff --git a/velfields/Aizawa/style.css b/velfields/Aizawa/style.css
@@ -1,64 +1,65 @@
+@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css);
+
 :root {
-    /*--border_radius:  0px;*/
-    /*--colorA: rgba(210, 110, 0, 0.9);*/
-    /*--colorA_06: rgba(210, 110, 0, 0.5);*/
-    /*--col_ORANGE: rgb(255,130,0);*/
-    /*--box-shadow: 5px 5px 5px rgba(80, 35, 0, 0.5);*/
-    /*--box-shadow-button: 0px 0px 5px rgba(0, 0, 0, 1);*/
+  /*--border_radius:  0px;*/
+  /*--colorA: rgba(210, 110, 0, 0.9);*/
+  /*--colorA_06: rgba(210, 110, 0, 0.5);*/
+  /*--col_ORANGE: rgb(255,130,0);*/
+  /*--box-shadow: 5px 5px 5px rgba(80, 35, 0, 0.5);*/
+  /*--box-shadow-button: 0px 0px 5px rgba(0, 0, 0, 1);*/
 }
 
-.unselectable{
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
 }
 
-.selectable-text{
-    -moz-user-select: text;
-    -webkit-user-select: text;
-    -ms-user-select: text;
-    -o-user-select: text;
-    user-select: text;
+.selectable-text {
+  -moz-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+  -o-user-select: text;
+  user-select: text;
 }
 
 
-*{
-    margin: 0px;
-    padding: 0px;
+* {
+  margin: 0px;
+  padding: 0px;
 }
 
 
 
-html{
-    width:100%;
-    height:100%;
+html {
+  width: 100%;
+  height: 100%;
 }
 
-body{
-    width:100%;
-    height:100%;
-    background-color: rgba(0,0,0,1);
-    font-family: FontAwesome, Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
-    font-style: normal;
-    font-variant: normal;
-    font-weight: 400;
-    letter-spacing: 1px;
-    font-size: small;
-    color: rgb(200, 200, 200);
+body {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 1);
+  font-family:Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif !important;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  letter-spacing: 1px;
+  font-size: small;
+  color: rgb(200, 200, 200);
 }
 
 
 .hud {
   position: fixed;
   top: 10px;
   left: 10px;
-	background-color: rgba(0,0,0,0.9);
-	color: #FFFFFF;
-	font-size: 12pt;
-	padding: 10px;
-
+  background-color: rgba(0, 0, 0, 0.9);
+  color: #FFFFFF;
+  font-size: 12pt;
+  padding: 10px;
   border: 1px solid #000;
   border-radius: 5px;
   box-shadow: 0px 0px 10px 1px #000;
@@ -72,29 +73,160 @@ ul {
   color: 0xFFFFFF;
 }
 
-ul.two{
-    display: inline-block;
-     vertical-align:top;
+ul.two {
+  display: inline-block;
+  vertical-align: top;
   /* float:left; */
 }
 
-li[gap]{
+li[gap] {
   margin-top: 10px;
 }
 
-ul .green{
-  color: rgb(100,200,0);
+ul .green {
+  color: rgb(100, 200, 0);
+}
+
+ul .orange {
+  color: rgb(255, 128, 0);
+}
+
+
+.support {
+  position: fixed;
+  font-size: 1.2em;
+  left: 10;
+  bottom: 25;
+}
+
+.support a {
+  color: aqua;
+}
+
+.support a:hover {
+  color:rgba(4, 112, 162, .976);
+}
+
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 9998;
+  padding-top: 70px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, .4)
+}
+
+.modal-content {
+  position: relative;
+  background-color: #f2f2f2;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
+  -webkit-animation-name: animatetop;
+  -webkit-animation-duration: .4s;
+  animation-name: animatetop;
+  animation-duration: .4s;
+  font-size: 18px;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  line-height: 1.6em;
+  color: #262626
+}
+
+.button-container {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center
+}
+
+.button-container button {
+  margin-top: 10;
+  margin-left: 7px;
+  margin-right: 7px;
+  margin-bottom: 10px
+}
+
+#modal-link {
+  padding: 9px;
+  background-color: #d8d8d8;
+  border: 1px #d8d8d8;
+  border-radius: 8px;
+  font-weight: 700;
+  text-decoration: none !important
 }
-ul .orange{
-  color: rgb(255,128,0);
+
+#modal-link a {
+  text-decoration: none !important;
+  color: #000 !important
 }
 
+#modal-link a:hover {
+  color: rgba(4, 112, 162, .976) !important
+}
 
+@-webkit-keyframes animatetop {
+  from {
+    top: -300px;
+    opacity: 0
+  }
 
+  to {
+    top: 0;
+    opacity: 1
+  }
+}
 
+@keyframes animatetop {
+  from {
+    top: -300px;
+    opacity: 0
+  }
 
+  to {
+    top: 0;
+    opacity: 1
+  }
+}
 
+.close {
+  color: #fff;
+  float: right;
+  font-size: 48px;
+  font-weight: 700
+}
 
+.close:focus,
+.close:hover {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer
+}
 
+.modal-header {
+  padding: 2px 16px;
+  background-color: #595959;
+  color: #f7f7f7f3;
+  text-align: center;
+  font-size: 1.5em
+}
 
+.modal-body {
+  padding: 2px 16px
+}
 
+.modal-footer {
+  padding: 20px 20px 20px 20px;
+  background-color: #595959;
+  color: #f7f7f7f3;
+  text-align: center !important;
+  font-weight: 700
+}
diff --git a/velfields/libraries/message.html b/velfields/libraries/message.html
@@ -0,0 +1,48 @@
+<p>
+    If you found this interactive textbook helpful, consider becoming a member in:
+  </p>
+
+  <div class="button-container">
+    <button id="modal-link" >
+      <a href="https://www.patreon.com/jcponce"><i class="fa-brands fa-patreon"></i>
+        <strong>Patreon</strong></a>
+    </button>
+  </div>
+
+
+  <p>
+    This project is made possible by the kindness of supporters like you.
+    Your contributions enable me to maintain the site, uphold the applets,
+    and, crucially, <strong>ensure it remains freely accessible</strong> to anyone eager to
+    explore this captivating field of mathematics <strong>—without any distracting ads</strong>.
+  </p>
+
+  <p>If you prefer to donate just once,
+    not monthly, you can use these links:
+  </p>
+
+  <div class="button-container">
+    <button id="modal-link" >
+      <a  target="_blank"
+      href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=WTMTR7D8RYZ26&item_name=Your+support+will+help+me+to+improve+and+keep+up+to+date+the+applets+of+this+book.+Sincerely+appreciate+it%21&currency_code=AUD&source=url">
+      <strong>❤️ <i class="fa-brands fa-paypal"></i> PayPal Me</strong>
+    </a>
+    </button>
+    <button id="modal-link" >
+      <a  target="_blank" href="https://jcponcemath.secure-decoration.com/">
+        <strong>❤️ Buy a T-shirt</strong>
+      </a>
+    </button>
+  </div>
+
+  <p>
+    You can't contribute this time, no worries! Maybe you just want to:
+  </p>
+  <div class="button-container">
+    <button id="modal-link" >
+      <a href="mailto:[email protected]"><strong>Send a
+        comment</strong></a>
+    </button>
+
+  </div>
+  <br />