Small changes to the example pages styling

fabianwennink · Nov 5, 2023 · c93c423 · c93c423
1 parent 347b159
commit c93c423
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 58 deletions.
diff --git a/examples/assets/demo.css b/examples/assets/demo.css
@@ -1,6 +1,5 @@
 * {
  -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
 
@@ -20,7 +19,6 @@ body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url(polygon-background.png), -webkit-linear-gradient(20deg, #6D1AF3, #51D0EF);
- background-image: url(polygon-background.png), -moz-linear-gradient(20deg, #6D1AF3, #51D0EF);
  background-image: url(polygon-background.png), linear-gradient(20deg, #6D1AF3, #51D0EF);
 }
 
@@ -35,8 +33,8 @@ p {
 }
 
 h2 {
- font-size: 36px;
- font-size: 2.25rem;
+ font-size: 28px;
+ margin-bottom: 5px;
 }
 
 .container {
@@ -69,51 +67,43 @@ h2 {
  margin-bottom: 20px;
 }
 
+.smaller {
+ font-size: 75%;
+}
+
 .btn {
  letter-spacing: 1px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  display: inline-block;
  cursor: pointer;
- padding: 13px 25px 12px 25px;
- font-size: 18px;
- font-size: 1.125rem;
- -webkit-border-radius: 30px;
- -moz-border-radius: 30px;
- -ms-border-radius: 30px;
- border-radius: 70px;
- -webkit-transition: background 0.15s ease;
- -moz-transition: background 0.15s ease;
- -ms-transition: background 0.15s ease;
- transition: background 0.15s ease;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
+ padding: 12px 15px;
+ font-size: 15px;
+ border-radius: 10px;
  text-transform: uppercase;
+ background: #fff;
+ color: #5396ED;
+ font-weight: 600;
+ transform: translateZ(0);
+ transition: background 0.15s ease, box-shadow 0.15s ease;
+ -webkit-transition: background 0.15s ease, box-shadow 0.15s ease;
+ box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
+ -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
 }
 
 .btn:hover {
- font-weight: bold;
+ transform: translateZ(0);
+ font-weight: 600;
  color: #5396ED;
  background: #fff;
- -webkit-transition: background 0.15s ease, box-shadow 0.15s ease;
- -moz-transition: background 0.15s ease, box-shadow 0.15s ease;
- -ms-transition: background 0.15s ease, box-shadow 0.15s ease;
  transition: background 0.15s ease, box-shadow 0.15s ease;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
- -moz-box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
- box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
+ -webkit-transition: background 0.15s ease, box-shadow 0.15s ease;
+ box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.5);
+ -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.5);
 }
 
 .btn small {
- font-size: 60%;
+ font-size: 65%;
  display: block;
 }
 
@@ -123,14 +113,26 @@ h2 {
  bottom: 30px;
 }
 
+.btn-invert {
+ box-shadow: 0 0 0;
+ background: transparent;
+}
+
+input[type="submit"] {
+ color: #ffffff;
+ background: none;
+ outline: 0;
+ font-family: inherit;
+}
+
 .section {
  display: block;
- margin-bottom: 50px;
+ margin-bottom: 75px;
 }
 
 .section .btn {
  margin: 20px 10px 0;
- min-width: 300px;
+ min-width: 250px;
 }
 
 .copyright p {
@@ -177,17 +179,12 @@ h2 {
  text-transform: uppercase;
 }
 
-input[type="submit"] {
- color: #ffffff;
- background: none;
- outline: 0;
-}
-
 .themes {
  width: 200px;
  margin: 60px auto 0;
  display: block;
  overflow: hidden;
+ font-weight: bold;
 }
 
 .themes .theme {
@@ -222,10 +219,10 @@ input[type="submit"] {
 
 .themes .theme--light span:first-child {
  background: #fafafa;
- border: 1px solid #d8d8d8;
+ border: 3px solid #f1f1f1;
 }
 
 .themes .theme--dark span:first-child {
  background: #4c4c4c;
- border: 1px solid #404040;
+ border: 3px solid #454545;
 }
diff --git a/examples/forms/ajax-form.php b/examples/forms/ajax-form.php
@@ -23,7 +23,7 @@
  <!-- JUST FOR THE DEMO PAGE -->
  <link href="../assets/demo.css" rel="stylesheet" type="text/css">
  <script src="../assets/demo.js" type="text/javascript"></script>
- <link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700" rel="stylesheet">
 
  <!-- Include IconCaptcha stylesheet - REQUIRED -->
  <link href="../../assets/client/css/iconcaptcha.min.css" rel="stylesheet" type="text/css">
@@ -79,15 +79,15 @@
  <div class="iconcaptcha-widget" data-theme="light"></div>
 
  <!-- Submit button to test your IconCaptcha input -->
- <input type="submit" value="Submit demo captcha" class="btn">
+ <input type="submit" value="Submit demo captcha" class="btn btn-invert">
  </form>
 
  <!-- Theme selector - JUST FOR THE DEMO PAGE -->
  <div class="themes">
  <div class="theme theme--light"><span data-theme="light"></span><span>Light Theme</span></div>
  <div class="theme theme--dark"><span data-theme="dark"></span><span>Dark Theme</span></div>
  </div>
- <small>(theme selector only works when the challenge has not been requested yet)</small>
+ <small class="smaller">- The theme selector only works when no challenge has been rendered yet -</small>
  </div>
 
  <div class="copyright">
@@ -113,7 +113,7 @@
 
  <!-- Buy Me A Coffee widget - JUST FOR THE DEMO PAGE -->
  <script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="fabianwennink"
- data-description="Support me on Buy me a coffee!" data-message="If you like IconCaptcha, consider buying me a coffee!"
+ data-description="Support me on Buy me a coffee!" data-message="If you like IconCaptcha, please consider supporting me with a coffee!"
  data-color="#ffffff" data-position="right" data-x_margin="25" data-y_margin="25"></script>
 
  <!-- Include jQuery Library -->

diff --git a/examples/forms/regular-form.php b/examples/forms/regular-form.php
@@ -41,7 +41,7 @@
  <!-- JUST FOR THE DEMO PAGE -->
  <link href="../assets/demo.css" rel="stylesheet" type="text/css">
  <script src="../assets/demo.js" type="text/javascript"></script>
- <link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700" rel="stylesheet">
 
  <!-- Include IconCaptcha stylesheet - REQUIRED -->
  <link href="../../assets/client/css/iconcaptcha.min.css" rel="stylesheet" type="text/css">
@@ -100,15 +100,15 @@
  <div class="iconcaptcha-widget" data-theme="light"></div>
 
  <!-- Submit button to test your IconCaptcha input -->
- <input type="submit" value="Submit demo captcha" class="btn">
+ <input type="submit" value="Submit demo captcha" class="btn btn-invert">
  </form>
 
  <!-- Theme selector - JUST FOR THE DEMO PAGE -->
  <div class="themes">
  <div class="theme theme--light"><span data-theme="light"></span><span>Light Theme</span></div>
  <div class="theme theme--dark"><span data-theme="dark"></span><span>Dark Theme</span></div>
  </div>
- <small>(theme selector only works when the challenge has not been requested yet)</small>
+ <small class="smaller">- The theme selector only works when no challenge has been rendered yet -</small>
  </div>
 
  <div class="copyright">
@@ -134,7 +134,7 @@
 
  <!-- Buy Me A Coffee widget - JUST FOR THE DEMO PAGE -->
  <script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="fabianwennink"
- data-description="Support me on Buy me a coffee!" data-message="If you like IconCaptcha, consider buying me a coffee!"
+ data-description="Support me on Buy me a coffee!" data-message="If you like IconCaptcha, please consider supporting me with a coffee!"
  data-color="#ffffff" data-position="right" data-x_margin="25" data-y_margin="25"></script>
 
  <!-- Include IconCaptcha script - REQUIRED -->

diff --git a/index.php b/index.php
@@ -43,15 +43,15 @@
  </div>
 
  <div class="section">
- <h2>Examples:</h2>
- <a href="examples/forms/regular-form.php"><div class="btn">Regular Form <small>Plain JavaScript</small></div></a>
- <a href="examples/forms/ajax-form.php"><div class="btn">AJAX Form <small>jQuery</small></div></a>
+ <h2>EXAMPLES:</h2>
+ <a href="examples/forms/regular-form.php"><div class="btn">Regular Form <small>With JavaScript</small></div></a>
+ <a href="examples/forms/ajax-form.php"><div class="btn">AJAX Form <small>With jQuery</small></div></a>
  </div>
 
  <div class="section">
- <h2>Links:</h2>
+ <h2>LINKS:</h2>
  <a href="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/fabianwennink/IconCaptcha-PHP/" target="_blank" rel="noopener"><div class="btn">GitHub repository <small>Star the project on GitHub</small></small></div></a>
- <a href="https://buymeacoffee.com/fabianwennink" target="_blank" rel=" noopener"><div class="btn">Buy me a coffee <small>Support the project</small></div></a>
+ <a href="https://buymeacoffee.com/fabianwennink" target="_blank" rel=" noopener"><div class="btn">Support the project <small>Buy me a coffee</small></div></a>
  <a href="https://fabianwennink.nl/en/" target="_blank" rel="noopener"><div class="btn">Fabian Wennink <small>Developer Website</small></div></a>
  </div>
 
@@ -74,10 +74,10 @@
 
  <!-- buy me a coffee -->
  <script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="fabianwennink"
- data-description="Support me on Buy me a coffee!" data-message="If you like IconCaptcha, consider buying me a coffee!"
+ data-description="Support me on Buy me a coffee!" data-message="If you enjoy IconCaptcha, please consider supporting me with a coffee!"
  data-color="#ffffff" data-position="right" data-x_margin="25" data-y_margin="25"></script>
  <!-- /buy me a coffee -->
 
- <link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700" rel="stylesheet">
  </body>
 </html>