add: applying patches
This commit is contained in:
franek
parent
3e855915e1
commit
e15e6374fe
2
LICENSE
2
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
|
||||
|
||||
18
README.md
18
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
|
||||
|
||||
<!-- TEMPLATE ENDS -->
|
||||
```
|
||||
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
|
||||
"<id>": {
|
||||
"<selector 1>": () => { ... },
|
||||
"<selector 2>": () => { ... },
|
||||
...
|
||||
}
|
||||
```
|
||||
2. View example [here](data/data-source.example.js).
|
||||
|
||||
Example based on HTML provided above:
|
||||
```js
|
||||
|
||||
@ -0,0 +1 @@
|
||||
/* If rule statements doesn't work, add !important to the end of it. */
|
||||
@ -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
|
||||
}
|
||||
@ -8,14 +8,14 @@
|
||||
<script defer src="script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="start-page">
|
||||
<div id="internal__start-page">
|
||||
<h1>Enter your access code:</h1>
|
||||
<input type="text"/>
|
||||
<button id="internal__submit">Submit</button>
|
||||
</div>
|
||||
<div id="template">
|
||||
<div id="internal__template">
|
||||
<!-- TEMPLATE BEGINS -->
|
||||
|
||||
|
||||
<!-- TEMPLATE ENDS -->
|
||||
</div>
|
||||
</body>
|
||||
|
||||
53
script.js
53
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)
|
||||
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())
|
||||
}
|
||||
19
style.css
19
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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user