From b2cb57840da6a0c7ce9c766ce191cd9588b6eb74 Mon Sep 17 00:00:00 2001 From: Klemek Date: Sat, 3 Jun 2023 19:23:12 +0200 Subject: [PATCH] Initial commit --- .gitignore | 1 + index.html | 31 +++++++++++ main.js | 109 ++++++++++++++++++++++++++++++++++++ style.css | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 300 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..44b4c35 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + <!-- TODO -->Change this you moron + + + + + + + + +
+

{{title}}

+
+

+
+ @Klemek - Github Repository - {{currentYear}} +
+ + diff --git a/main.js b/main.js new file mode 100644 index 0000000..5dd8606 --- /dev/null +++ b/main.js @@ -0,0 +1,109 @@ +/* exported app, utils */ + +const utils = { + ajax: { + proxy: 'cors-anywhere.herokuapp.com', + /** + * Define a get HTTP request to be executed with .then/.catch + * @param {string} url + * @param {Object} data + * @param {boolean} proxy - use cors proxy + * @returns {Promise} return JSON parsed data or string + */ + get: (url, data, proxy = false) => { + return new Promise((resolve, reject) => { + if (data && Object.keys(data).length) { + url += '?' + Object.keys(data) + .map(k => k + '=' + encodeURIComponent(data[k])) + .join('&') + .replace(/%20/g, '+'); + } + const xhr = new XMLHttpRequest(); + if (proxy) { + const http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); + url = `${http}//${utils.ajax.proxy}/${url}`; + } + xhr.open('GET', url); + xhr.onload = () => { + try { + resolve(JSON.parse(xhr.responseText)); + } catch (ignored) { + resolve(xhr.responseText); + } + }; + xhr.onerror = () => reject(xhr); + xhr.send(); + }); + }, + }, + cookies: { + /** + * Save a value in a cookie + * @param {string} name + * @param {string} value + * @param {number | undefined} days + */ + set: function (name, value, days = undefined) { + const maxAge = !days ? undefined : days * 864e2; + document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`; + }, + /** + * Get a value from a cookie + * @param {string} name + * @return {string} value from cookie or empty if not found + */ + get: function (name) { + return document.cookie.split('; ').reduce(function (r, v) { + const parts = v.split('='); + return parts[0] === name ? decodeURIComponent(parts[1]) : r; + }, ''); + }, + /** + * Delete a cookie + * @param {string} name + */ + delete: function (name) { + this.set(name, '', -1); + }, + /** + * Clear all cookies + */ + clear: function () { + const cookies = document.cookie.split(';'); + for (let i = 0; i < cookies.length; i++) { + const cookie = cookies[i]; + const eqPos = cookie.indexOf('='); + const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie; + document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`; + } + }, + }, +}; + +let app = { + data() { + return { + title: 'Vue-Boilerplate', + content: 'Fill this page with whatever you\'re going to develop.
Then enjoy!', + }; + }, + computed: { + currentYear() { + return new Date().getFullYear(); + }, + }, + methods: { + showApp() { + document.getElementById('app').setAttribute('style', ''); + }, + }, + mounted: function () { + console.log('app mounted'); + setTimeout(this.showApp); + }, +}; + +window.onload = () => { + app = Vue.createApp(app); + app.mount('#app'); +}; diff --git a/style.css b/style.css new file mode 100644 index 0000000..108a155 --- /dev/null +++ b/style.css @@ -0,0 +1,159 @@ +/* +================================================= +https://www.joshwcomeau.com/css/custom-css-reset/ +================================================= +*/ + +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, +*::before, +*::after { + box-sizing: border-box; +} +/* + 2. Remove default margin + */ +* { + margin: 0; +} +/* + 3. Allow percentage-based heights in the application + */ +html, +body { + height: 100%; +} +/* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering + */ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +/* + 6. Improve media defaults + */ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} +/* + 7. Remove built-in form typography styles + */ +input, +button, +textarea, +select { + font: inherit; +} +/* + 8. Avoid text overflows + */ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} +/* + 9. Create a root stacking context + */ +#root, +#__next { + isolation: isolate; +} + +/* +================================================= +CUSTOM STYLE +================================================= +*/ + +:root { + /* https://materialui.co/colors/ */ + --hue-primary: 65.52; + --sat-primary: 69.96%; + --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%); + --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%); + --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%); + --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%); + --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%); +} + +/* +================================================= +https://blog.koley.in/2019/339-bytes-of-responsive-css +https://www.swyx.io/css-100-bytes +https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41 +================================================= +*/ + +* { + box-sizing: border-box; + font-family: Verdana, serif; + color: var(--text-primary); +} + +html, +body { + padding: 0; + max-width: 100%; +} + +body { + background-color: var(--background); +} + +main { + padding: 1.5rem; + margin: auto; + background-color: var(--background-primary); + min-height: 100%; +} + +h1 { + margin-bottom: 0.5em; +} + +table { + border-collapse: collapse; + width: 100%; + font-size: 0.9em; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 1.5em 0 0.5em; +} + +p, +ul, +ol { + margin-bottom: 2em; + color: var(--text-secondary); + font-family: sans-serif; +} + +@media only screen and (min-width: 768px) { + main { + max-width: 42rem; + } + table { + font-size: inherit; + } +}