add: base files
This commit is contained in:
franek
parent
b00f924944
commit
3e855915e1
40
README.md
Normal file
40
README.md
Normal 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
0
data/custom-style.css
Normal file
18
data/data-source.example.js
Normal file
18
data/data-source.example.js
Normal 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
22
data/data-source.js
Normal 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
22
index.html
Normal 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
23
script.js
Normal 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
63
style.css
Normal 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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user