Главная Обзор Помощь
Вход
rose
/
htmx-learning
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

init

rosenclosed 2 лет назад
Родитель
f6498f075d
Сommit
e11f3e8874
19 измененных файлов с 370 добавлено и 0 удалено
Разделённый вид Показать статистику Diff
  1. 4 0
      content/about.php
  2. 4 0
      content/contact.php
  3. 11 0
      content/home.php
  4. 12 0
      get/index.php
  5. 1 0
      get/time.php
  6. 0 0
      htmx/htmx.min.js
  7. 83 0
      index.php
  8. 9 0
      script/site.js
  9. 14 0
      style/_buttons.scss
  10. 24 0
      style/_colors.scss
  11. 20 0
      style/_footer.scss
  12. 35 0
      style/_header.scss
  13. 4 0
      style/_main.scss
  14. 16 0
      style/_mixins.scss
  15. 98 0
      style/style.css
  16. 1 0
      style/style.css.map
  17. 1 0
      style/style.min.css
  18. 1 0
      style/style.min.css.map
  19. 32 0
      style/style.scss

+ 4 - 0
content/about.php
Просмотреть файл 

@@ -0,0 +1,4 @@
 
+<section>
 
+    <h1>This is the About Page</h1>
 
+    <p>This is some About Text!</p>
 
+</section>

+ 4 - 0
content/contact.php
Просмотреть файл 

@@ -0,0 +1,4 @@
 
+<section>
 
+    <h1>Contact</h1>
 
+    <p>Please Contact Me!</p>
 
+</section>

+ 11 - 0
content/home.php
Просмотреть файл 

@@ -0,0 +1,11 @@
 
+<section>
 
+    <h1>Hello World!</h1>
 
+        <button class="primary" hx-get="/get/?param=If you see this, it's working!" hx-trigger="click" hx-target="#replacebyget" hx-swap="innerHTML">Click Me!</button>
 
+        <div id="replacebyget">
 
+             <p>Response should appear here</p>
 
+        </div>
 
+</section>
 
+<section>
 
+    <h2>Content Rendered At:</h2>
 
+    <div hx-get="/get/time.php" hx-trigger="load"></div>
 
+</section>

+ 12 - 0
get/index.php
Просмотреть файл 

@@ -0,0 +1,12 @@
 
+<?php
 
+
 
+if (isset($_GET['param'])) {
 
+    $requestedparam = $_GET['param'];
 
+} else {
 
+    $requestedparam = "empty request";
 
+}
 
+
 
+?>
 
+
 
+<h2>It's Working:</h2>
 
+<p><?php echo $requestedparam; ?></p>

+ 1 - 0
get/time.php
Просмотреть файл 

@@ -0,0 +1 @@
 
+<p><?php echo (date("d.m.Y, H:i:s")); ?></p>

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
htmx/htmx.min.js


+ 83 - 0
index.php
Просмотреть файл 

@@ -0,0 +1,83 @@
 
+<?php
 
+
 
+if (isset($_GET['p'])) {
 
+    $pageid = $_GET['p'];
 
+} else {
 
+    $pageid = false;
 
+}
 
+
 
+if ($pageid && $pageid == "") {
 
+    $pageid = false;
 
+}
 
+
 
+?>
 
+
 
+<!DOCTYPE html>
 
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 
+<!--[if gt IE 8]>      <html class="no-js"> <!<![endif]-->
 
+<html lang="de">
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <title>Hello World!</title>
 
+    <meta name="description" content="">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <link rel="stylesheet" href="/style/style.min.css">
 
+    <script src="/htmx/htmx.min.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <!--[if lt IE 7]><p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p><![endif]-->
 
+    <header>
 
+        <nav hx-boost="true">
 
+            <ul>
 
+                <li>
 
+                    <a href="/?p=home" id="nav-link-home" hx-get="/content/home.php" hx-target="#main-content" hx-push-url="/?p=home" hx-on="click: navLinkClicked('home')" class="nav-link<?php if (!$pageid || $pageid == "home") {
 
+                        echo (" active");
 
+                    } ?>">Home</a>
 
+                </li>
 
+                <li>
 
+                    <a href="/?p=about" id="nav-link-about" hx-get="/content/about.php" hx-target="#main-content" hx-push-url="/?p=about" hx-on="click: navLinkClicked('about')" class="nav-link<?php if ($pageid == "about") {
 
+                        echo (" active");
 
+                    } ?>">About</a>
 
+                </li>
 
+                <li>
 
+                    <a href="/?p=contact" id="nav-link-contact" hx-get="/content/contact.php" hx-target="#main-content" hx-push-url="/?p=contact" hx-on="click: navLinkClicked('contact')" class="nav-link<?php if ($pageid == "contact") {
 
+                        echo (" active");
 
+                    } ?>">Contact</a>
 
+                </li>
 
+            </ul>
 
+        </nav>
 
+    </header>
 
+    <main id="main-content" <?php if ($pageid && $pageid != 'home') {
 
+        echo ("hx-get=\"/content/" . $pageid . ".php\" hx-trigger=\"load\"");
 
+    } ?>>
 
+        <section>
 
+            <h1>Hello World!</h1>
 
+            <button class="primary" hx-get="/get/?param=If you see this, it's working!" hx-trigger="click" hx-target="#replacebyget" hx-swap="innerHTML">Click Me!</button>
 
+            <div id="replacebyget">
 
+                <p>Response should appear here</p>
 
+            </div>
 
+        </section>
 
+        <section>
 
+            <h2>Content Rendered At:</h2>
 
+            <div hx-get="/get/time.php" hx-trigger="load"></div>
 
+        </section>
 
+    </main>
 
+
 
+    <footer>
 
+        <div>
 
+            <a href="/">Datenschutz</a>
 
+            <p>&copy; 2023 Rose Reed</p>
 
+            <a href="/">Impressum</a>
 
+        </div>
 
+    </footer>
 
+
 
+    <script src="/script/site.js"></script>
 
+
 
+</body>
 
+
 
+</html>

+ 9 - 0
script/site.js
Просмотреть файл 

@@ -0,0 +1,9 @@
 
+let navLinks = document.querySelectorAll('.nav-link');
 
+
 
+const navLinkClicked = (linkId) => {
 
+    let clickedLink = document.getElementById("nav-link-" + linkId);
 
+    navLinks.forEach((element, key) => {
 
+        element.classList.remove("active");
 
+    })
 
+    clickedLink.classList.add("active");
 
+}

+ 14 - 0
style/_buttons.scss
Просмотреть файл 

@@ -0,0 +1,14 @@
 
+button {
 
+    &.primary {
 
+        @include set-button-style;
 
+        @include bg-primary;
 
+        &:focus,
 
+        &:hover {
 
+            box-shadow: 7px 5px 56px -14px $accent-color;
 
+        }
 
+        &:active {
 
+            transform: scale(0.97);
 
+            box-shadow: 7px 5px 56px -10px $accent-color;
 
+        }
 
+    }
 
+}

+ 24 - 0
style/_colors.scss
Просмотреть файл 

@@ -0,0 +1,24 @@
 
+$primary-color: #7fb7be;
 
+
 
+$secondary-color: #17172c;
 
+
 
+$accent-color: #61aeae;
 
+
 
+$text-color: #dedede;
 
+
 
+$background-color: #232323;
 
+
 
+@mixin bg-primary {
 
+    background-color: $primary-color;
 
+    color: $background-color;
 
+}
 
+
 
+@mixin bg-secondary {
 
+    background-color: $secondary-color;
 
+    color: $text-color;
 
+}
 
+
 
+@mixin bg-accent {
 
+    background-color: $accent-color;
 
+    color: $background-color;
 
+}

+ 20 - 0
style/_footer.scss
Просмотреть файл 

@@ -0,0 +1,20 @@
 
+footer {
 
+    text-align: center;
 
+    @include bg-secondary;
 
+    height: 4em;
 
+    div {
 
+        width: 80%;
 
+        margin-left: auto;
 
+        margin-right: auto;
 
+        display: flex;
 
+        flex-direction: row;
 
+        flex-wrap: nowrap;
 
+        justify-content: space-around;
 
+        align-items: center;
 
+        align-content: center;
 
+
 
+        a {
 
+            color: inherit;
 
+        }
 
+    }
 
+}

+ 35 - 0
style/_header.scss
Просмотреть файл 

@@ -0,0 +1,35 @@
 
+header {
 
+    @include bg-secondary;
 
+    nav {
 
+        ul {
 
+            list-style-type: none;
 
+            list-style: none;
 
+            margin: 0;
 
+            padding: 0;
 
+
 
+            li {
 
+                float: left;
 
+
 
+                a {
 
+                    display: block;
 
+                    text-decoration: none;
 
+                    color: inherit;
 
+                    text-align: center;
 
+                    padding: 0.8em 1em;
 
+                    transition: 0.4s;
 
+                    cursor: pointer;
 
+                    @include disable-select;
 
+
 
+                    &.active {
 
+                        @include bg-primary;
 
+                    }
 
+
 
+                    &:hover,
 
+                    &:focus {
 
+                        @include bg-accent;
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+}

+ 4 - 0
style/_main.scss
Просмотреть файл 

@@ -0,0 +1,4 @@
 
+main {
 
+    padding-top: 2em;
 
+    padding-left: 2.5em;
 
+}

+ 16 - 0
style/_mixins.scss
Просмотреть файл 

@@ -0,0 +1,16 @@
 
+@mixin set-button-style {
 
+    cursor: pointer;
 
+    border: none;
 
+    outline: none;
 
+    font: inherit;
 
+    border-radius: 0.5em;
 
+    padding: 0.6em 1.2em;
 
+    transition: 0.4s;
 
+}
 
+
 
+@mixin disable-select {
 
+    -webkit-user-select: none;
 
+    -moz-user-select: none;
 
+    -ms-user-select: none;
 
+    user-select: none;
 
+}

+ 98 - 0
style/style.css
Просмотреть файл 

@@ -0,0 +1,98 @@
 
+html,
 
+body {
 
+  margin: 0 0 0 0;
 
+  padding: 0 0 0 0;
 
+  background-color: #232323;
 
+  color: #dedede;
 
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
 
+  font-size: large;
 
+}
 
+
 
+body {
 
+  display: flex;
 
+  min-height: 100vh;
 
+  flex-direction: column;
 
+  justify-content: flex-start;
 
+}
 
+body footer {
 
+  margin-top: auto;
 
+}
 
+
 
+button.primary {
 
+  cursor: pointer;
 
+  border: none;
 
+  outline: none;
 
+  font: inherit;
 
+  border-radius: 0.5em;
 
+  padding: 0.6em 1.2em;
 
+  transition: 0.4s;
 
+  background-color: #7fb7be;
 
+  color: #232323;
 
+}
 
+button.primary:focus, button.primary:hover {
 
+  box-shadow: 7px 5px 56px -14px #61aeae;
 
+}
 
+button.primary:active {
 
+  transform: scale(0.97);
 
+  box-shadow: 7px 5px 56px -10px #61aeae;
 
+}
 
+
 
+header {
 
+  background-color: #17172c;
 
+  color: #dedede;
 
+}
 
+header nav ul {
 
+  list-style-type: none;
 
+  list-style: none;
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+header nav ul li {
 
+  float: left;
 
+}
 
+header nav ul li a {
 
+  display: block;
 
+  text-decoration: none;
 
+  color: inherit;
 
+  text-align: center;
 
+  padding: 0.8em 1em;
 
+  transition: 0.4s;
 
+  cursor: pointer;
 
+  -webkit-user-select: none;
 
+  -moz-user-select: none;
 
+  user-select: none;
 
+}
 
+header nav ul li a.active {
 
+  background-color: #7fb7be;
 
+  color: #232323;
 
+}
 
+header nav ul li a:hover, header nav ul li a:focus {
 
+  background-color: #61aeae;
 
+  color: #232323;
 
+}
 
+
 
+main {
 
+  padding-top: 2em;
 
+  padding-left: 2.5em;
 
+}
 
+
 
+footer {
 
+  text-align: center;
 
+  background-color: #17172c;
 
+  color: #dedede;
 
+  height: 4em;
 
+}
 
+footer div {
 
+  width: 80%;
 
+  margin-left: auto;
 
+  margin-right: auto;
 
+  display: flex;
 
+  flex-direction: row;
 
+  flex-wrap: nowrap;
 
+  justify-content: space-around;
 
+  align-items: center;
 
+  align-content: center;
 
+}
 
+footer div a {
 
+  color: inherit;
 
+}/*# sourceMappingURL=style.css.map */

+ 1 - 0
style/style.css.map
Просмотреть файл 

@@ -0,0 +1 @@
 
+{"version":3,"sources":["style.scss","_colors.scss","style.css","_buttons.scss","_mixins.scss","_header.scss","_main.scss","_footer.scss"],"names":[],"mappings":"AAIA;;EAEI,eAAA;EACA,gBAAA;EACA,yBAAA;EACA,cCHS;EDIT,6EAAA;EACA,gBAAA;AEHJ;;AFMA;EACI,aAAA;EACA,iBAAA;EACA,sBAAA;EACA,2BAAA;AEHJ;AFKI;EACI,gBAAA;AEHR;;ACjBI;ECAA,eAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,oBAAA;EACA,oBAAA;EACA,gBAAA;EHIA,yBAXY;EAYZ,cAJe;ACsBnB;AC1BQ;EAEI,sCAAA;AD2BZ;ACzBQ;EACI,sBAAA;EACA,sCAAA;AD2BZ;;AGrCA;EJgBI,yBAdc;EAed,cAXS;ACoCb;AGvCQ;EACI,qBAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;AHyCZ;AGvCY;EACI,WAAA;AHyChB;AGvCgB;EACI,cAAA;EACA,qBAAA;EACA,cAAA;EACA,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EDRhB,yBAAA;EACA,sBAAA;EAEA,iBAAA;AFkDJ;AG1CoB;EJXhB,yBAXY;EAYZ,cAJe;AC4DnB;AG1CoB;EJLhB,yBAjBW;EAkBX,cAde;ACgEnB;;AIxEA;EACI,gBAAA;EACA,mBAAA;AJ2EJ;;AK7EA;EACI,kBAAA;ENeA,yBAdc;EAed,cAXS;EMHT,WAAA;ALiFJ;AKhFI;EACI,UAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,6BAAA;EACA,mBAAA;EACA,qBAAA;ALkFR;AKhFQ;EACI,cAAA;ALkFZ","file":"style.css"}

+ 1 - 0
style/style.min.css
Просмотреть файл 

@@ -0,0 +1 @@
 
+html,body{margin:0 0 0 0;padding:0 0 0 0;background-color:#232323;color:#dedede;font-family:"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif;font-size:large}body{display:flex;min-height:100vh;flex-direction:column;justify-content:flex-start}body footer{margin-top:auto}button.primary{cursor:pointer;border:none;outline:none;font:inherit;border-radius:.5em;padding:.6em 1.2em;transition:.4s;background-color:#7fb7be;color:#232323}button.primary:focus,button.primary:hover{box-shadow:7px 5px 56px -14px #61aeae}button.primary:active{transform:scale(0.97);box-shadow:7px 5px 56px -10px #61aeae}header{background-color:#17172c;color:#dedede}header nav ul{list-style-type:none;list-style:none;margin:0;padding:0}header nav ul li{float:left}header nav ul li a{display:block;text-decoration:none;color:inherit;text-align:center;padding:.8em 1em;transition:.4s;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}header nav ul li a.active{background-color:#7fb7be;color:#232323}header nav ul li a:hover,header nav ul li a:focus{background-color:#61aeae;color:#232323}main{padding-top:2em;padding-left:2.5em}footer{text-align:center;background-color:#17172c;color:#dedede;height:4em}footer div{width:80%;margin-left:auto;margin-right:auto;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-items:center;align-content:center}footer div a{color:inherit}/*# sourceMappingURL=style.min.css.map */

+ 1 - 0
style/style.min.css.map
Просмотреть файл 

@@ -0,0 +1 @@
 
+{"version":3,"sources":["style.scss","_colors.scss","_buttons.scss","_mixins.scss","_header.scss","_main.scss","_footer.scss"],"names":[],"mappings":"AAIA,UAEI,cAAA,CACA,eAAA,CACA,wBAAA,CACA,aCHS,CDIT,wEAAA,CACA,eAAA,CAGJ,KACI,YAAA,CACA,gBAAA,CACA,qBAAA,CACA,0BAAA,CAEA,YACI,eAAA,CEpBJ,eAAA,cAAA,CCCA,WAAA,CACA,YAAA,CACA,YAAA,CACA,kBAAA,CACA,kBAAA,CACA,cAAA,CFIA,wBAXY,CAYZ,aAJe,CCJX,0CAEI,qCAAA,CAEJ,sBACI,qBAAA,CACA,qCAAA,CEVZ,OHgBI,wBAdc,CAed,aAXS,CGHL,cACI,oBAAA,CACA,eAAA,CACA,QAAA,CACA,SAAA,CAEA,iBACI,UAAA,CAEA,mBACI,aAAA,CACA,oBAAA,CACA,aAAA,CACA,iBAAA,CACA,gBAAA,CACA,cAAA,CACA,cAAA,CDRhB,wBAAA,CACA,qBAAA,CAEA,gBAAA,CCQgB,0BHXhB,wBAXY,CAYZ,aAJe,CGkBC,kDHLhB,wBAjBW,CAkBX,aAde,CIRnB,KACI,eAAA,CACA,kBAAA,CCFJ,OACI,iBAAA,CLeA,wBAdc,CAed,aAXS,CKHT,UAAA,CACA,WACI,SAAA,CACA,gBAAA,CACA,iBAAA,CACA,YAAA,CACA,kBAAA,CACA,gBAAA,CACA,4BAAA,CACA,kBAAA,CACA,oBAAA,CAEA,aACI,aAAA","file":"style.min.css"}

+ 32 - 0
style/style.scss
Просмотреть файл 

@@ -0,0 +1,32 @@
 
+@import "colors";
 
+
 
+@import "mixins";
 
+
 
+html,
 
+body {
 
+    margin: 0 0 0 0;
 
+    padding: 0 0 0 0;
 
+    background-color: $background-color;
 
+    color: $text-color;
 
+    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
 
+    font-size: large;
 
+}
 
+
 
+body {
 
+    display: flex;
 
+    min-height: 100vh;
 
+    flex-direction: column;
 
+    justify-content: flex-start;
 
+
 
+    footer {
 
+        margin-top: auto;
 
+    }
 
+}
 
+
 
+@import "buttons";
 
+
 
+@import "header";
 
+
 
+@import "main";
 
+
 
+@import "footer";

Некоторые файлы не были показаны из-за большого количества измененных файлов