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

add: base files

Browse Source
This commit is contained in:
franek 2024-03-07 13:43:25 +00:00
parent b00f924944
commit 3e855915e1
7 changed files with 188 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
README.md Normal file
View File

@ -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
<!-- TEMPLATE BEGINS -->
<!-- TEMPLATE ENDS -->
```
Example:
```html
<!-- TEMPLATE BEGINS -->
<p id="name">Hi!</p>
<!-- TEMPLATE ENDS -->
```
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.

0
data/custom-style.css Normal file
View File

18
data/data-source.example.js Normal file
View File

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

22
data/data-source.js Normal file
View File

@ -0,0 +1,22 @@
/*
Pattern:
"<id>": {
"<selector 1>": <modifying function 1>,
"<selector 2>": <modifying function 2>,
...
}
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
}

22
index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Delivery Network</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<script defer src="data/data-source.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="start-page">
<h1>Enter your access code:</h1>
<input type="text"/>
<button id="internal__submit">Submit</button>
</div>
<div id="template">
<!-- TEMPLATE BEGINS -->
<!-- TEMPLATE ENDS -->
</div>
</body>
</html>

23
script.js Normal file
View File

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

63
style.css Normal file
View File

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