firts commit

2026-04-27 08:48:03 +01:00
commit 05f24c50a8
18 changed files with 420 additions and 0 deletions
--- a/assets/css/animations.css
+++ b/assets/css/animations.css
@@ -0,0 +1,20 @@
+@keyframes example {
+  0%   {background-color: red;}
+  25%  {background-color: yellow;}
+  50%  {background-color: blue;}
+  100% {background-color: green;}
+}
+
+/* ### EXAMPLE SETTING CODE ###  
+  animation-name: example;
+  animation-duration: 4s;
+  animation-iteration-count: 2;
+  animation-direction: alternate-reverse;
+  animation-delay: -2s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;}
+	
+  ### SAME ABOVE ANIMATION IN ONE LINE CODE ###
+  animation: example 5s linear 2s infinite alternate;
+*/
+
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -0,0 +1,18 @@
+html { scroll-behavior: smooth; }
+*{ box-sizing: border-box; margin:0; padding:0;}
+
+
+.main-nav{
+  display:flex;
+  width:100%;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-start;
+  list-style-type: none;
+  padding:1rem;
+}
+
+.main-nav a {
+  text-decoration: none;
+}
+
--- a/assets/css/variables.css
+++ b/assets/css/variables.css
@@ -0,0 +1,86 @@
+:root {
+  /*### PrimaryColor ###*/
+  --demo1:hsl(98, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
+  --pri:98; /*Change only this from the color that you need! Don't Touch the code below!*/
+  /*The color below is automaticaly created 20 levels of lightness*/
+  --priCol20:hsl(var(--pri), 100%, 100%);
+  --priCol19:hsl(var(--pri), 100%, 95%);
+  --priCol18:hsl(var(--pri), 100%, 90%);
+  --priCol17:hsl(var(--pri), 100%, 85%);
+  --priCol16:hsl(var(--pri), 100%, 80%);
+  --priCol15:hsl(var(--pri), 100%, 75%);
+  --priCol14:hsl(var(--pri), 100%, 70%);
+  --priCol13:hsl(var(--pri), 100%, 65%);
+  --priCol12:hsl(var(--pri), 100%, 60%);
+  --priCol11:hsl(var(--pri), 100%, 55%);
+  --priCol10:hsl(var(--pri), 100%, 50%);
+  --priCol9:hsl(var(--pri), 100%, 45%);
+  --priCol8:hsl(var(--pri), 100%, 40%);
+  --priCol7:hsl(var(--pri), 100%, 35%);
+  --priCol6:hsl(var(--pri), 100%, 30%);
+  --priCol5:hsl(var(--pri), 100%, 25%);
+  --priCol4:hsl(var(--pri), 100%, 20%);
+  --priCol3:hsl(var(--pri), 100%, 15%);
+  --priCol2:hsl(var(--pri), 100%, 10%);
+  --priCol1:hsl(var(--pri), 100%, 5%);
+
+  /*### SecondColor ###*/
+  --demo2:hsl(207, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
+  --sec:207; /*Change only this from the color that you need! Don't Touch the code below!*/
+  /*The color below is automaticaly created 20 levels of lightness*/
+  --secCol20:hsl(var(--sec), 100%, 100%);
+  --secCol19:hsl(var(--sec), 100%, 95%);
+  --secCol18:hsl(var(--sec), 100%, 90%);
+  --secCol17:hsl(var(--sec), 100%, 85%);
+  --secCol16:hsl(var(--sec), 100%, 80%);
+  --secCol15:hsl(var(--sec), 100%, 75%);
+  --secCol14:hsl(var(--sec), 100%, 70%);
+  --secCol13:hsl(var(--sec), 100%, 65%);
+  --secCol12:hsl(var(--sec), 100%, 60%);
+  --secCol11:hsl(var(--sec), 100%, 55%);
+  --secCol10:hsl(var(--sec), 100%, 50%);
+  --secCol9:hsl(var(--sec), 100%, 45%);
+  --secCol8:hsl(var(--sec), 100%, 40%);
+  --secCol7:hsl(var(--sec), 100%, 35%);
+  --secCol6:hsl(var(--sec), 100%, 30%);
+  --secCol5:hsl(var(--sec), 100%, 25%);
+  --secCol4:hsl(var(--sec), 100%, 20%);
+  --secCol3:hsl(var(--sec), 100%, 15%);
+  --secCol2:hsl(var(--sec), 100%, 10%);
+  --secCol1:hsl(var(--sec), 100%, 5%);
+
+    /*### ThirdColor ###*/
+    --demo3:hsl(280, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
+    --thi:280; /*Change only this from the color that you need! Don't Touch the code below!*/
+    /*The color below is automaticaly created 20 levels of lightness*/
+    --thiCol20:hsl(var(--thi), 100%, 100%);
+    --thiCol19:hsl(var(--thi), 100%, 95%);
+    --thiCol18:hsl(var(--thi), 100%, 90%);
+    --thiCol17:hsl(var(--thi), 100%, 85%);
+    --thiCol16:hsl(var(--thi), 100%, 80%);
+    --thiCol15:hsl(var(--thi), 100%, 75%);
+    --thiCol14:hsl(var(--thi), 100%, 70%);
+    --thiCol13:hsl(var(--thi), 100%, 65%);
+    --thiCol12:hsl(var(--thi), 100%, 60%);
+    --thiCol11:hsl(var(--thi), 100%, 55%);
+    --thiCol10:hsl(var(--thi), 100%, 50%);
+    --thiCol9:hsl(var(--thi), 100%, 45%);
+    --thiCol8:hsl(var(--thi), 100%, 40%);
+    --thiCol7:hsl(var(--thi), 100%, 35%);
+    --thiCol6:hsl(var(--thi), 100%, 30%);
+    --thiCol5:hsl(var(--thi), 100%, 25%);
+    --thiCol4:hsl(var(--thi), 100%, 20%);
+    --thiCol3:hsl(var(--thi), 100%, 15%);
+    --thiCol2:hsl(var(--thi), 100%, 10%);
+    --thiCol1:hsl(var(--thi), 100%, 5%);
+
+  /*######################################*/
+
+  /*##### Default Variable #####*/
+  --padsidepage:0 25px; /*Padding side for page*/
+}
+
+/* ### Use Example ### 
+background-color:var(--main-bg-color)
+*/
+
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -0,0 +1,9 @@
+/* @ default js*/
+function yearNow(textlocation) {
+  //This is a function to substitutes a value into the current year.
+  //Usually good for the footer.
+  var data = new Date();
+  var year;
+  year = data.getFullYear();
+  document.querySelector(textlocation).replaceWith(year);
+}
--- a/config/constants.php
+++ b/config/constants.php
@@ -0,0 +1,36 @@
+<?php
+    // --- ROOT DIR --- //
+    define("ASSETS_FOLD",  ROOT_DIR . "assets/");
+    define("ADMIN_FOLD",  ROOT_DIR . "admin/");
+    define("BLOCKNOTES_FOLD",  ROOT_DIR . "blocknotes/");
+    define("CONFIG_FOLD",  ROOT_DIR . "config/");
+    define("PAGES_FOLD",  ROOT_DIR . "pages/");
+    define("PUBLIC_FOLD",  ROOT_DIR . "public/");
+    define("TEMPLATES_FOLD",  ROOT_DIR . "templates/");
+    define("THEMES_FOLD",  ROOT_DIR . "themes/");
+    define("FUNCTIONS_FOLD",  ROOT_DIR . "functions/");
+    define("INCLUDES_FOLD",  ROOT_DIR . "includes/");
+
+    // - ASSETS
+    define("CSS_FOLD", ASSETS_FOLD . " css/");
+    define("IMG_FOLD", ASSETS_FOLD . "img/");
+    define("JS_FOLD", ASSETS_FOLD . "js/");
+    define("FONTS_FOLD", CSS_FOLD . "fonts/");
+
+    // --------------- //
+
+
+    // --- ROOT URL --- //
+    // - CSS
+    define("CSS_STYLE", ROOT_URL . "/assets/css/style.css");
+    define("CSS_VAR", ROOT_URL . "/assets/css/variables.css");
+    define("CSS_ANIM", ROOT_URL . "/assets/css/animations.css");
+    define("CSS_FONTS", ROOT_URL . "/assets/css/fonts.css");
+
+    // - JS
+    define("JS_MAIN", ROOT_URL . "/assets/js/main.js");
+    // --------------- //
+
+
+
+?>
--- a/config/db.php
+++ b/config/db.php
@@ -0,0 +1,20 @@
+<?php
+// Exceptions PHP-MSQLI
+mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
+
+try {
+    // Create Connection
+    $conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
+
+    // Connections Successfully
+    if(DB_DEBUG == "yes"){ 
+        echo "Connected successfully";
+    }
+} catch (mysqli_sql_exception $e) {
+    // Access Deny
+    include(PAGES_FOLD . "db-error.php");
+    
+
+    die(); 
+}
+?>
--- a/config/functions_init.php
+++ b/config/functions_init.php
@@ -0,0 +1,22 @@
+<?php
+  function error_env($option){
+  global $env;
+  if (empty($env)){
+    $result="<p class='err_env_result'><span>ERROR:</span> Variable '<u>\$env</u>' is empty!</p>";
+    $help="<p class='err_env_help'>Please insert the correct value in the file 'config/init.php' or leave it to 'generic'</p>";
+  }else{
+    $result="<p class='err_env_result'><span>ERROR:</span> The environment '<u>{$env}</u>' not exists!</p>";
+    $help="<p class='err_env_help'>Please insert the correct value in the file 'config/init.php or leave it to 'generic'</p>";
+  }
+
+  if($option == "result"){
+    echo $result;
+  }elseif($option == "help"){
+    echo $help;
+  }else{
+    echo "ERROR: Wrong attribute in declared in the function!";
+    die;
+  }
+  
+  }
+?>
--- a/config/init.php
+++ b/config/init.php
@@ -0,0 +1,24 @@
+<?php
+  $env="";
+
+  switch($env){
+    /*------ DON'T TOUCH THIS PART ------ */
+    case "generic":
+      define('WEB_ROOT', $_SERVER['DOCUMENT_ROOT']);
+      define('DOMAIN', $_SERVER['HTTP_HOST']);
+      $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https://' : 'http://';
+      define('FULL_DOMAIN', $protocol . $_SERVER['HTTP_HOST']);
+      define("ROOT_URL", "http://" . DOMAIN );
+      define("ROOT_DIR", WEB_ROOT . "/");
+      break;
+    /* ----------------------------------- */
+    default:
+      include("config/functions_init.php");
+      include("pages/env-error.php");
+      die;
+
+  }
+  require_once(ROOT_DIR . "config/constants.php");
+  require_once(CONFIG_FOLD . "settings.php");
+
+?>
--- a/config/settings.php
+++ b/config/settings.php
@@ -0,0 +1,22 @@
+<?php
+// --- DB SETTINGS  ---
+$db_needed="no";
+$db_debug="yes";
+$db_host="localhost";
+$db_name="database-name";
+$db_user="database-user";
+$db_pass="database-user-password";
+
+
+
+// --- DON'T CHANGE ALL THE CODE BELOW ---
+if ($db_needed == "yes"){
+  define("DB_HOST", $db_host);
+  define("DB_USER", $db_user);
+  define("DB_PASS", $db_pass);
+  define("DB_NAME", $db_name);
+  define("DB_DEBUG", $db_debug); 
+  require_once(CONFIG_FOLD . "db.php");
+  
+}
+?>
--- a/functions/blocknotes_func.php
+++ b/functions/blocknotes_func.php
--- a/includes/head_links.php
+++ b/includes/head_links.php
@@ -0,0 +1,7 @@
+<link rel="stylesheet" href="<?= CSS_VAR ?>">
+<link rel="stylesheet" href="<?= CSS_ANIM ?>">
+<link rel="stylesheet" href="<?= CSS_STYLE ?>">
+<script src="<?= JS_MAIN ?>"></script>
+
+
+
--- a/includes/js_footer.php
+++ b/includes/js_footer.php
@@ -0,0 +1,3 @@
+<script>
+  yearNow("year");
+</script>
--- a/index.php
+++ b/index.php
@@ -0,0 +1,6 @@
+<?php
+  include("./config/init.php");
+  include(ROOT_DIR . "/templates/header.php");
+  include("./pages/home.php");
+  include("./templates/footer.php");
+?>
--- a/pages/db-error.php
+++ b/pages/db-error.php
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Error Environment</title>
+  <style>
+    html{font-size: 20px; font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif}
+    *{ margin:0; padding:0;}
+    body{ 
+      width:100vw; 
+      height:100vh; display:flex; 
+      flex-direction: column; 
+      justify-content: center; 
+      align-items: center; 
+      background-color: #f8d5d5;
+    }
+    .container{
+      text-align: center;
+      background-color: #e6e6e6;
+      padding:100pt;
+      border: 4px solid #2b2b2b;
+      border-radius: 10px;
+    }
+
+    .err_env_result{
+      color:red;
+      margin:6px;
+      font-size: 30px;
+    }
+
+    .err_env_result > span{
+      font-weight: 600;
+    }
+
+    .err_env_help{
+      color: #880000;
+    }
+
+    .details{
+      font-style: italic;
+      margin-top:10px;
+      color: #272727;
+      font-size:17px;
+    }
+
+    .details > span{
+      color: #f30000;
+      font-weight: 600;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="container">
+    <p class="err_env_result"><span>ERROR:</span> Can't establish a db connection!</p>
+    <p class='err_env_help'>Please check the db.php configurations.</p>
+    <?php
+      if (DB_DEBUG == "yes"){
+        echo "<p class=' details err_env_help'><span>Error Details: </span>" . $e->getMessage() . "</p>";
+    
+      }
+    ?>
+  </div>
+</body>
+</html>
+
+
+
+
+
+  
--- a/pages/env-error.php
+++ b/pages/env-error.php
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Error Environment</title>
+  <style>
+    html{font-size: 20px; font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif}
+    *{ margin:0; padding:0;}
+    body{ 
+      width:100vw; 
+      height:100vh; display:flex; 
+      flex-direction: column; 
+      justify-content: center; 
+      align-items: center; 
+      background-color: #f8d5d5;
+    }
+    .container{
+      text-align: center;
+      background-color: #e6e6e6;
+      padding:100pt;
+      border: 4px solid #2b2b2b;
+      border-radius: 10px;
+    }
+
+    .err_env_result{
+      color:red;
+      margin:6px;
+      font-size: 30px;
+    }
+
+    .err_env_result > span{
+      font-weight: 600;
+    }
+
+    .err_env_help{
+      color: #880000;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="container">
+      <?php 
+        error_env('result');
+        error_env('help');
+      ?>
+  </div>
+</body>
+</html>
--- a/pages/home.php
+++ b/pages/home.php
--- a/templates/footer.php
+++ b/templates/footer.php
@@ -0,0 +1,7 @@
+<footer class="main-footer">
+  <div class="footer-credit">&copy; <year>year</year> - Company Name. All right reserved.</div>
+  <div class="webmaster_footer">Website designed by Simone Cusano - SimoLinuxDesign.org</div>
+</footer>
+<?php include(INCLUDES_FOLD . "js_footer.php"); ?>
+</body>
+</html>
--- a/templates/header.php
+++ b/templates/header.php
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <?php include(INCLUDES_FOLD . "head_links.php"); ?>
+  <title>Document</title>
+</head>
+<body>
+  <header>
+    <ul class="main-nav">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Page1</a></li>
+      <li><a href="#">Page2</a></li>
+      <li><a href="#">Page3</a></li>
+      <li><a href="#">Page4</a></li>
+    </ul>
+  </header>