diff --git a/LICENSE b/LICENSE index 15ed9db..4101bfa 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2024 franek +Copyright (c) 2024 sador Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index dd7f35a..ea600dd 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,12 @@ A static website that returns appropriate content to the website user based on t ### ATTENTION! This site is not secure at all! If you want to store private information, do not use this repository, because anyone can access **all available IDs**! This is mainly a hobby project. +## Which files am I allowed to edit? +- [template section of index.html](index.html) +- all files in `data` directory: + - [data-source.js](data/data-source.js) + - [custom-style.css](data/custom-style.css) + ## How to use Firstly, create template for your webpage. Go to [index.html](index.html) and edit code **only between these lines**: ```html @@ -12,6 +18,7 @@ Firstly, create template for your webpage. Go to [index.html](index.html) and ed ``` +This is the **template directory** of the HTML file. Example: ```html @@ -22,7 +29,16 @@ Example: Then, using your template, modify your data in [data-source.js](data/data-source.js). How to do this? -View examples [here](data/data-source.example.js). + +1. This is base template of the `DATA` object: +```js +"": { + "": () => { ... }, + "": () => { ... }, + ... +} +``` +2. View example [here](data/data-source.example.js). Example based on HTML provided above: ```js diff --git a/data/custom-style.css b/data/custom-style.css index e69de29..8021321 100644 --- a/data/custom-style.css +++ b/data/custom-style.css @@ -0,0 +1 @@ +/* If rule statements doesn't work, add !important to the end of it. */ \ No newline at end of file diff --git a/data/data-source.js b/data/data-source.js index 2ef77c9..aec619a 100644 --- a/data/data-source.js +++ b/data/data-source.js @@ -10,13 +10,5 @@ See example in data-source.example.js */ const DATA = { - "0203c152": { - "#header": (element) => { - element.textContent = "Hello, ABC!" - }, - "body": (element) => { - element.style.backgroundColor = "#000" - } - } // Add all of your IDs and content here } \ No newline at end of file diff --git a/index.html b/index.html index 2959ff2..c722b2b 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,14 @@ -
+

Enter your access code:

-
+
- +
diff --git a/script.js b/script.js index a229fe8..3164bd4 100644 --- a/script.js +++ b/script.js @@ -1,23 +1,40 @@ -const startPage = document.getElementById('start-page'); -const templatePage = document.getElementById('template'); +const startPage = document.getElementById('internal__start-page'); +const templatePage = document.getElementById('internal__template'); -if (!startPage || !templatePage) - return alert("Base website template got corrupted! Can't find either start page or template page.") +if (!startPage || !templatePage) { + alert("Base website template got corrupted! Can't find either start page or template page. Closing the window."); + window.close(); +} else { + const wait = (time) => new Promise(resolve => setTimeout(resolve, time * 1000)) -function proceed() { - const input = document.querySelector('#start-page > input'); - const patches = DATA?.[input.value]; + async function proceed() { + const input = document.querySelector('#internal__start-page > input'); + const patches = DATA?.[input.value]; - if (!patches) return alert('Bad access code!') -} - -function applyPatches(patches) { - for (const [key, func] of Object.entries(patches)) { - const element = document.querySelector(key); - if (!element) return alert(`Bad data source template! No HTML element found for selector '${key}'.`) - - func(element) + if (!patches) return alert('Bad access code!'); + await fadeBlock() + applyPatches(patches) } -} -internal__submit.addEventListener('click', proceed) \ No newline at end of file + function applyPatches(patches) { + for (const [key, func] of Object.entries(patches)) { + const element = document.querySelector(key); + if (!element) { + alert(`Bad data source template! No HTML element found for selector '${key}'.`); + continue; + } + + func(element) + } + } + + async function fadeBlock() { + startPage.style.opacity = 0; + await wait(0.2); + startPage.style.display = 'none'; + await wait(0.2); + templatePage.style.opacity = 1; + } + + internal__submit.addEventListener('click', async () => await proceed()) +} \ No newline at end of file diff --git a/style.css b/style.css index 9ddf57d..529f4b1 100644 --- a/style.css +++ b/style.css @@ -14,13 +14,16 @@ html, body { } body { - background-color: var(--background); font-family: 'Raleway', sans-serif; padding: 0; margin: 0; } -#start-page { +#internal__start-page, #internal__template { + transition: opacity 0.2s ease-in-out; +} + +#internal__start-page { width: 100%; height: 100%; @@ -28,25 +31,27 @@ body { display: grid; place-items: center; align-content: center; + + background-color: var(--background) !important; } -#start-page > *:is(h1, h2, h3, h4, h5, h6, p, span) { +#internal__start-page > *:is(h1, h2, h3, h4, h5, h6, p, span) { color: var(--text); } -#start-page > input { +#internal__start-page > input { border-radius: 10px; text-align: center; height: 50px; border: none; } -#start-page > input:focus { +#internal__start-page > input:focus { border: none; outline: none; } -#start-page > button { +#internal__start-page > button { border: none; outline: none; cursor: pointer; @@ -58,6 +63,6 @@ body { transition: background-color 0.2s ease-in-out; } -#start-page > button:hover { +#internal__start-page > button:hover { background-color: var(--button-color-hover); } \ No newline at end of file