sadorowo/dcd-legacy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add: applying patches

Browse Source
This commit is contained in:
franek 2024-03-07 14:03:58 +00:00
parent 3e855915e1
commit e15e6374fe
7 changed files with 69 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@ -1,6 +1,6 @@
MIT License MIT License
Copyright (c) 2024 franek Copyright (c) 2024 sador
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

18
README.md
View File

@ -5,6 +5,12 @@ A static website that returns appropriate content to the website user based on t
### ATTENTION! ### 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. 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 ## How to use
Firstly, create template for your webpage. Go to [index.html](index.html) and edit code **only between these lines**: Firstly, create template for your webpage. Go to [index.html](index.html) and edit code **only between these lines**:
```html ```html
@ -12,6 +18,7 @@ Firstly, create template for your webpage. Go to [index.html](index.html) and ed
<!-- TEMPLATE ENDS --> <!-- TEMPLATE ENDS -->
``` ```
This is the **template directory** of the HTML file.
Example: Example:
```html ```html
@ -22,7 +29,16 @@ Example:
Then, using your template, modify your data in [data-source.js](data/data-source.js). Then, using your template, modify your data in [data-source.js](data/data-source.js).
How to do this? 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: Example based on HTML provided above:
```js ```js

1
data/custom-style.css
View File

@ -0,0 +1 @@
/* If rule statements doesn't work, add !important to the end of it. */

8
data/data-source.js
View File

@ -10,13 +10,5 @@ See example in data-source.example.js
*/ */
const DATA = { const DATA = {
"0203c152": {
"#header": (element) => {
element.textContent = "Hello, ABC!"
},
"body": (element) => {
element.style.backgroundColor = "#000"
}
}
// Add all of your IDs and content here // Add all of your IDs and content here
} }

6
index.html
View File

@ -8,14 +8,14 @@
<script defer src="script.js"></script> <script defer src="script.js"></script>
</head> </head>
<body> <body>
<div id="start-page"> <div id="internal__start-page">
<h1>Enter your access code:</h1> <h1>Enter your access code:</h1>
<input type="text"/> <input type="text"/>
<button id="internal__submit">Submit</button> <button id="internal__submit">Submit</button>
</div> </div>
<div id="template"> <div id="internal__template">
<!-- TEMPLATE BEGINS --> <!-- TEMPLATE BEGINS -->
<!-- TEMPLATE ENDS --> <!-- TEMPLATE ENDS -->
</div> </div>
</body> </body>

53
script.js
View File

@ -1,23 +1,40 @@
const startPage = document.getElementById('start-page'); const startPage = document.getElementById('internal__start-page');
const templatePage = document.getElementById('template'); const templatePage = document.getElementById('internal__template');
if (!startPage || !templatePage) if (!startPage || !templatePage) {
return alert("Base website template got corrupted! Can't find either start page or template page.") 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() { async function proceed() {
const input = document.querySelector('#start-page > input'); const input = document.querySelector('#internal__start-page > input');
const patches = DATA?.[input.value]; const patches = DATA?.[input.value];
if (!patches) return alert('Bad access code!') if (!patches) return alert('Bad access code!');
} await fadeBlock()
applyPatches(patches)
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) 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
View File

@ -14,13 +14,16 @@ html, body {
} }
body { body {
background-color: var(--background);
font-family: 'Raleway', sans-serif; font-family: 'Raleway', sans-serif;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#start-page { #internal__start-page, #internal__template {
transition: opacity 0.2s ease-in-out;
}
#internal__start-page {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -28,25 +31,27 @@ body {
display: grid; display: grid;
place-items: center; place-items: center;
align-content: 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); color: var(--text);
} }
#start-page > input { #internal__start-page > input {
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
height: 50px; height: 50px;
border: none; border: none;
} }
#start-page > input:focus { #internal__start-page > input:focus {
border: none; border: none;
outline: none; outline: none;
} }
#start-page > button { #internal__start-page > button {
border: none; border: none;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
@ -58,6 +63,6 @@ body {
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
} }
#start-page > button:hover { #internal__start-page > button:hover {
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
} }