From ab3f0b2df4b142dec3f222aa521d988d41f7442a Mon Sep 17 00:00:00 2001 From: MrLetsplay Date: Thu, 21 Apr 2022 20:25:56 +0200 Subject: [PATCH] Added Matrix, cheatsheet, Update visitor counter Co-authored-by: The Arrayser; Co-authored-by: Julian; --- .htaccess | 1 + img/console.svg | 5 ++++ index.html | 73 +++++++++++++++++++++++++++++++++------------ lzk-cheatsheet.html | 1 + matrix.html | 53 ++++++++++++++++++++++++++++++++ matrix.js | 67 +++++++++++++++++++++++++++++++++++++++++ visited.php | 6 ++++ visitor_counter.php | 50 ++++++++++++++++++------------- 8 files changed, 216 insertions(+), 40 deletions(-) create mode 100644 img/console.svg create mode 100644 lzk-cheatsheet.html create mode 100644 matrix.html create mode 100644 matrix.js create mode 100644 visited.php diff --git a/.htaccess b/.htaccess index d5fb18b..33d3f86 100644 --- a/.htaccess +++ b/.htaccess @@ -1,6 +1,7 @@ RewriteEngine On RewriteRule ^sus$ sus.html [NC] +RewriteRule ^matrix$ matrix.html [NC] RewriteRule ^／$ sus.html [NC] RewriteRule ^／᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼᲼sus$ sus.html [NC] RewriteRule ^🆘$ sus.html [NC] diff --git a/img/console.svg b/img/console.svg new file mode 100644 index 0000000..99e4c40 --- /dev/null +++ b/img/console.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.html b/index.html index 102c7d5..4afb98f 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,11 @@ text-align: left; font-size: 50%; } + + button { + background-color: pink; + border-radius: 5px; + } .gurke { border: 2px solid black; @@ -68,15 +73,19 @@ /*animation: rickRoll 1s infinite ease;*/ animation: amogus 10s infinite linear; max-width: 100%; + margin-top: 175px; + margin-bottom: 175px; + } + + iframe { + background: url("https://nsfw.cringe-studios.com/wtf.png"), linear-gradient(rgb(255,0,0), rgb(0,255,0)); } .blinking { animation: blink 1s infinite linear; } - iframe { - background: url("https://nsfw.cringe-studios.com/wtf.png"), linear-gradient(rgb(255,0,0), rgb(0,255,0)); - } + @keyframes blink { 50% { @@ -166,7 +175,9 @@ 100% { transform: rotateZ(360deg); } + } + @@ -286,29 +297,26 @@ - -
-
-
-
-
-
-
-
- -
-
+
+
+
+
+ +
+
+
+ This site has been visited times ( times by you)
-
This site has been visited times
- - + + + diff --git a/lzk-cheatsheet.html b/lzk-cheatsheet.html new file mode 100644 index 0000000..6dac6c7 --- /dev/null +++ b/lzk-cheatsheet.html @@ -0,0 +1 @@ +

What is the correct tag for the largest heading in HTML?

<h1>

What are semantic HTML elements?

Elements with meanings which allow a reader of the document to understand the meaning of the element

The class attribute is defined as following:

        class=”name”

The class Attribute is used to devide different elements into logical groups

What is the “alt” - Attribute for?

  • It is used to display information about an element when the content cannot be displayed or loaded by the browser.
  • Disabled people can access the information of an element, which they wouldn’t be able to understand due to their disabilities.

The classname is case sensitive

Link the positions to corresponding persons.

  • Who is W3C CEO? Jeffrey Jaffe
  • Who is W3C director? Tim Berners-Lee

An iframe is an element which is used to display a webpage within a web page. Is this statement true or false?

        True

URLs are used to define the path to a destination site or to a ressource needed in the HTML file.

What is the charset meta declaration used for?

It defines the character encoding of a document so that the browser can interpret it properly.

Choose how ids are referenced in CSS.

#idname

Which of the following statements are true?

  • With Javascript you can create new elements.
  • You can include a Javascript file at the end of the HTML body.
  • With the <noscript> tag you provide alternate content for users who disabled Javascript
  • The code

document.getElementById(“demo”).innterHTML = “Hello JavaScript!”;

selects an element with the name “demo” and changes its text to “Hello Javascript”

  • Javascript can be used to change the css of an element.

In some cases IDs should be used more than once. Is this statement true or false?

False

An inline CSS is used to apply a unique style to a single HTML element.

An internal CSS is used to define a style for a single HTML a page.

An external style sheet is used to define the style for many HTML pages.

Who develops the different standards for the Open Web Platform?

         W3 Consortium (W3C)

Who is responsible for HTML standards?

        W3 Consortium (W3C)

What does the abbreviation CSS mean?

        Cascading Style Sheets

What is the &nbsp; entity for?

        Introduces a non-breaking space.

In HTML each element must have an ID. Is this statement true or false?

        False

What is new in HTML5? Select all corresponding answers.

  • New multimedia element <audio>
  • New semantic elements like <header>, <footer>, <article>, and <section>.
  • New types for form input elements like time and date.
  • New multimedia element <video>
  • New types for form input elements like number.
  • New graphic elements: <svg> and <canvas>.

An HTML page can have one unique id(s) applied to one specific element, while a class name can be applied to multiple elements.

In HTML special entities must be rferenced with “&#entityNumber;”. Is this statement true or false?

        False

Match the tags to the fitting type.

        <ol>, <table>, <ul> block elements

<style> CSS formatting

<i>, <strong>, <b> text formatting

What is the basic syntax of HTML tags that need one attribute?

        <tagName attributeName=”value”>content</tagName>

What does the abbreviation HTML mean?

        Hyper Text Markup Language

What do you need as a preparation for coding HTML?

  • A basic texteditor or an IDE.
  • A computer or a similar input device.
  • A webbrowser to display the results.

What is the latest and recommended HTML5 version number?

        HTML 5.2

The form-handler is typically a server page with a script for processing input data. Is this statement true or false?

        True

Select all valid HTML elements.

  • <a>
  • <abbr>
  • <h4>
  • <em>
  • <del>
  • <bdo>

Which attribute opens the action url in a new browser tab?

        target=”_blank”

The POST Method is used to transfer form input which is sensitive and shouldn’t be displayed open.

The GET Method is used to transfer form input in plaintext over the URL.

What is the correct tag for a line break in HTML?

        <br>

Select all statements which are true about the HTML canvas tag.

  • You must use JavaScript to actually draw the graphics.
  • The HTML <canvas> elements is used to draw graphics
  • The code

var c = document.getElementById(“myCanvas”);

var ctx = c.getContext(“2d”);

ctx.beginPath();

ctx.arc(95,50,30,0,2*Math.PI);

ctx.stroke();

draws a circle

  • The <canvas> element is only a container for graphics.
  • By default, a canvas has no border and no content.

The HTML <body> element is used to store <style> and <link> elements. Is this statement true or false?

        False

Select all elements which should be in the head tag.

  • <title>
  • <meta>
  • <style>
  • <link>

Combine the tags to their purpose.

        <var> various text (probably)

        <pre> preformated text

        <code> used for program code

        <kbd> denotes keyboard input

        <samp> used for sample computer output

Select all contributions which contribute to an elements bounding box (pixel size) in the box model.

  • Height
  • Width
  • Border
  • Padding

The title tag specifies additional information about an element, which is often shown as a tooltip when the mouse moves over an element. Is this statement true or false?

        False

Choose 3 ways to specify a color in HTML or CSS.

  • style=”color:green”
  • style=”color:#ff6347”
  • style=”color:rgb(255, 99, 71)”

By whom Web Standards are made?

  • W3C

oder

  • World Wide Web Consortium

🤷

How does the definition of the doctype of an HTML5 document look like?

        <!DOCTYPE html>

XHTML is a combination of the strength of both XML and HTML to allow browser to interpret the document more efficiently. Is this statement true or false?

        True

Select the right expression to introduce a special character using its entity number in your HTML code.

        &#

How a CSS class may be used?

        .classname

Which input type does not exist?

  • textfield
  • Textarea (wahrscheinlich nicht)
  • key
  • age
  • picture

\ No newline at end of file diff --git a/matrix.html b/matrix.html new file mode 100644 index 0000000..5b12eee --- /dev/null +++ b/matrix.html @@ -0,0 +1,53 @@ + + + + + Matrix + + + + + "sus", + "RedPill" => "giveMe", + "admin" => "admin", + "cringe" => "123" + ); + + + if(empty($username) || empty($password) || empty($allowedUsers[$username]) || $password != $allowedUsers[$username]) { + header("HTTP/1.1 418 I'm a teapot"); + echo "

Your access to the Matrix has been denied

"; + die(); + } + ?> + + + + + + \ No newline at end of file diff --git a/matrix.js b/matrix.js new file mode 100644 index 0000000..a529893 --- /dev/null +++ b/matrix.js @@ -0,0 +1,67 @@ +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +let cw = window.innerWidth; +let ch = window.innerHeight; + +window.onresize = () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + cw = window.innerWidth; + ch = window.innerHeight; + maxColumns = cw/fontSize; +}; + +let charArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '€', '$', '£', 'µ', '§']; +let maxCharCount = 100; +let fallingCharArr = []; +let fontSize = 15; +let maxColumns = cw/fontSize; + +canvas.width = cw; +canvas.height = ch; + +let frames = 0; + +class FallingChar { + + constructor(x, y) { + this.x = x; + this.y = y; + } + + draw(ctx) { + this.value = charArr[Math.floor(Math.random() * (charArr.length - 1))].toUpperCase(); + this.speed = Math.random() * fontSize * 3 /4 + fontSize * 3 /4; + + ctx.fillStyle = "rgba(0, 255, 0)"; + ctx.font = fontSize + "px Courier"; + ctx.fillText(this.value, this.x, this.y); + this.y += this.speed; + + if (this.y > ch) { + this.y = Math.random() * ch/2 - 50; + this.x = Math.floor(Math.random() * maxColumns) * fontSize; + this.speed = - Math.random() * fontSize * 3 /4 + fontSize * 3 /4; + } + } +} + +let update = () => { + if (fallingCharArr.length < maxCharCount) { + let fallingChar = new FallingChar(Math.floor(Math.random() * maxColumns) * fontSize, Math.random() * ch/2 - 50); + fallingCharArr.push(fallingChar); + } + + ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; + ctx.fillRect(0, 0, cw, ch); + + for (let i = 0; i < fallingCharArr.length && frames % 2 == 0; i++){ + fallingCharArr[i].draw(ctx); + } + + requestAnimationFrame(update); + frames++; +} + +update(); \ No newline at end of file diff --git a/visited.php b/visited.php new file mode 100644 index 0000000..6811e93 --- /dev/null +++ b/visited.php @@ -0,0 +1,6 @@ + diff --git a/visitor_counter.php b/visitor_counter.php index 169541e..d16a20e 100644 --- a/visitor_counter.php +++ b/visitor_counter.php @@ -3,31 +3,39 @@ define("COUNTER_START_VALUE", 0); define("COUNTER_LOG", "visit_counter.log"); //name of file you want to use to save the counter value -/*************************************************************************************************/ -function IncrementCounter() -{ - $create_file = !file_exists(COUNTER_LOG); +function getCounter() { + if(!file_exists(COUNTER_LOG)) return str_pad(COUNTER_START_VALUE, 9, '0', STR_PAD_LEFT); - if( !($fh = fopen(COUNTER_LOG, $create_file ? "x+b" : "r+b")) ) - return "Error"; - //do an flock here, maybe, I don't know :-) + if(!($fh = fopen(COUNTER_LOG, $create_file ? "x+b" : "r+b"))) return "Error"; + //do an flock here, maybe, I don't know :-) - //Reading current value of counter: - if($create_file) - $count = COUNTER_START_VALUE; - else - { - $count = (int)fread($fh, 9); //reads 9 digits (supposing max 1 billion count) - rewind($fh); - } + //Reading current value of counter: + $count = (int)fread($fh, 9); //reads 9 digits (supposing max 1 billion count) - //Writing new counter value: - if(!fwrite($fh, ++$count)) - return "Error"; - if(!fclose($fh)) - return "Error"; + if(!fclose($fh)) return "Error"; - return str_pad($count, 9, '0', STR_PAD_LEFT); + return str_pad($count, 9, '0', STR_PAD_LEFT); +} + +function incrementCounter() { + $create_file = !file_exists(COUNTER_LOG); + + if(!($fh = fopen(COUNTER_LOG, $create_file ? "x+b" : "r+b"))) return "Error"; + //do an flock here, maybe, I don't know :-) + + //Reading current value of counter: + if($create_file){ + $count = COUNTER_START_VALUE; + }else{ + $count = (int)fread($fh, 9); //reads 9 digits (supposing max 1 billion count) + rewind($fh); + } + + //Writing new counter value: + if(!fwrite($fh, ++$count)) return "Error"; + if(!fclose($fh)) return "Error"; + + return "Success"; } ?>