From 3e855915e1efaf39947c89d01ff7f74da202c6df Mon Sep 17 00:00:00 2001 From: franek <97941280+sadorowo@users.noreply.github.com> Date: Thu, 7 Mar 2024 13:43:25 +0000 Subject: [PATCH] add: base files --- README.md | 40 +++++++++++++++++++++++ data/custom-style.css | 0 data/data-source.example.js | 18 +++++++++++ data/data-source.js | 22 +++++++++++++ index.html | 22 +++++++++++++ script.js | 23 ++++++++++++++ style.css | 63 +++++++++++++++++++++++++++++++++++++ 7 files changed, 188 insertions(+) create mode 100644 README.md create mode 100644 data/custom-style.css create mode 100644 data/data-source.example.js create mode 100644 data/data-source.js create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..dd7f35a --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +## Dynamic Content Delivery + +A static website that returns appropriate content to the website user based on the provided ID. + +### 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. + +## How to use +Firstly, create template for your webpage. Go to [index.html](index.html) and edit code **only between these lines**: +```html + + + +``` + +Example: +```html + +

Hi!

+ +``` + +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). + +Example based on HTML provided above: +```js +const DATA = { + "example-id": { + "#name": (element) => { + element.textContent = "Hi, Lisa! Your ID is example-id." + } + } +} +``` + +## Custom styles +This website supports custom CSS. Just edit [this](data/custom-style.css) file. +If provided style doesn't work, try adding `!important` to the end of CSS rule. \ No newline at end of file diff --git a/data/custom-style.css b/data/custom-style.css new file mode 100644 index 0000000..e69de29 diff --git a/data/data-source.example.js b/data/data-source.example.js new file mode 100644 index 0000000..465e744 --- /dev/null +++ b/data/data-source.example.js @@ -0,0 +1,18 @@ +const DATA = { + "0205c195": { + "#header": (element) => { + element.textContent = "Hello, XYZ!" + }, + "body": (element) => { + element.style.backgroundColor = "#2f3136" + } + }, + "0203c152": { + "#header": (element) => { + element.textContent = "Hello, ABC!" + }, + "body": (element) => { + element.style.backgroundColor = "#000" + } + } +} \ No newline at end of file diff --git a/data/data-source.js b/data/data-source.js new file mode 100644 index 0000000..2ef77c9 --- /dev/null +++ b/data/data-source.js @@ -0,0 +1,22 @@ +/* +Pattern: +"": { + "": , + "": , + ... +} + +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 new file mode 100644 index 0000000..2959ff2 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + Content Delivery Network + + + + + + +
+

Enter your access code:

+ + +
+
+ + + +
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a229fe8 --- /dev/null +++ b/script.js @@ -0,0 +1,23 @@ +const startPage = document.getElementById('start-page'); +const templatePage = document.getElementById('template'); + +if (!startPage || !templatePage) + return alert("Base website template got corrupted! Can't find either start page or template page.") + +function proceed() { + const input = document.querySelector('#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) + } +} + +internal__submit.addEventListener('click', proceed) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9ddf57d --- /dev/null +++ b/style.css @@ -0,0 +1,63 @@ +@import url('data/custom-style.css'); +@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); + +:root { + --text: #fff; + --background: #2f3136; + --button-color: #a8c0ff; + --button-color-hover: #c4d5ff; +} + +html, body { + width: 100%; + height: 100%; +} + +body { + background-color: var(--background); + font-family: 'Raleway', sans-serif; + padding: 0; + margin: 0; +} + +#start-page { + width: 100%; + height: 100%; + + gap: 5px; + display: grid; + place-items: center; + align-content: center; +} + +#start-page > *:is(h1, h2, h3, h4, h5, h6, p, span) { + color: var(--text); +} + +#start-page > input { + border-radius: 10px; + text-align: center; + height: 50px; + border: none; +} + +#start-page > input:focus { + border: none; + outline: none; +} + +#start-page > button { + border: none; + outline: none; + cursor: pointer; + + height: 50px; + min-width: 100px; + border-radius: 10px; + background-color: var(--button-color); + transition: background-color 0.2s ease-in-out; +} + +#start-page > button:hover { + background-color: var(--button-color-hover); +} \ No newline at end of file