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
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
View File

@ -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

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 = {
"0203c152": {
"#header": (element) => {
element.textContent = "Hello, ABC!"
},
"body": (element) => {
element.style.backgroundColor = "#000"
}
}
// Add all of your IDs and content here
}

4
index.html
View File

@ -8,12 +8,12 @@
<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 -->

53
script.js
View File

@ -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
View File

@ -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);
}