Skip to content

Commit

Permalink
feat: add new cookies version
Browse files Browse the repository at this point in the history
  • Loading branch information
oneeyedman committed Jan 18, 2024
1 parent 7ab2b67 commit ab713e1
Show file tree
Hide file tree
Showing 8 changed files with 144 additions and 10 deletions.
5 changes: 4 additions & 1 deletion _src/assets/statics/cookies/account/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ <h2 class="🍪__subtitle">Temas</h2>
</li>
</ul>
</form>

<h2 class="🍪__subtitle">Tú información</h2>

<div class="🍪__your-info js__🍪-your-info"></div>
</div>
</main>
<footer class="🍪__footer">
Expand All @@ -92,7 +96,6 @@ <h2 class="🍪__subtitle">Temas</h2>
</p>
<p class="🍪__code">Ver código en <a href="https://codeberg.org/oneeyedman/basic-cookies-sample">Codeberg</a></p>
</div>
<a href="https://librecounter.org/referer/show" target="_blank" class="accessible-hide"><img src="https://librecounter.org/counter.svg" referrerPolicy="unsafe-url" /></a>
</footer>
</body>
</html>
26 changes: 26 additions & 0 deletions _src/assets/statics/cookies/assets/css/account.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
position: relative;
}

.form-theme__list {
padding: 0;
list-style: none;
}

.form-theme__radio {
position: absolute;
left: 0;
Expand Down Expand Up @@ -54,3 +59,24 @@
.form-theme__radio:checked + .form-theme__label::after {
inset-inline-start: calc(32 / var(--font-size) * 1rem);
}

.🍪__info-table {
border-radius: 8px;
background: var(--theme-info-bg);
border-collapse:separate;
border-spacing: .3em;
}

.🍪__info-table-header {
padding: .25em 1em;
background: var(--theme-info-th-bg);
color: var(--theme-info-th-color);
border-radius: 5px;
text-align: end;
}

.🍪__info-table-value {
color: var(--theme-info-td-color);
padding: .25em 1em;
padding-inline-start: .75em;
}
8 changes: 0 additions & 8 deletions _src/assets/statics/cookies/assets/css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,3 @@
background-color: var(--theme-button-bg-hover);
color: var(--theme-button-text-hover);
}

.accessible-hide {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: 0 !important;
overflow: hidden;
position: absolute;
}
4 changes: 4 additions & 0 deletions _src/assets/statics/cookies/assets/css/core.css
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@
--theme-footer-bg: var(--color-designer-black);
--theme-footer-color: var(--color-designer-white);
--theme-footer-link: var(--color-correct-yellow);
--theme-info-bg: white;
--theme-info-th-bg: #f5f6f7;
--theme-info-th-color: inherit;
--theme-info-td-color: inherit;
}


Expand Down
15 changes: 15 additions & 0 deletions _src/assets/statics/cookies/assets/css/themes.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
--theme-radio-bg: #c4c4c4;
--theme-radio-bg-active: var(--color-correct-yellow);
--theme-radio-bg-handle: var(--color-designer-ultra-black);

--theme-info-bg: var(--color-designer-black);
--theme-info-th-bg: var(--color-designer-ultra-black);
--theme-info-th-color: var(--color-designer-white);
--theme-info-td-color: var(--color-correct-yellow);
}


Expand All @@ -40,6 +45,11 @@
--theme-footer-color: var(--color-white);
--theme-footer-link: black;

--theme-info-bg: var(--color-white);
--theme-info-th-bg: deeppink;
--theme-info-th-color: var(--color-white);
--theme-info-td-color: var(--color-correct-blue);

overflow-x: hidden;
}

Expand Down Expand Up @@ -112,6 +122,11 @@
--theme-footer-color: var(--color-designer-white);
--theme-footer-link: var(--color-cookie);

--theme-info-bg: var(--color-white);
--theme-info-th-bg: var(--color-cookie);
--theme-info-th-color: var(--color-white);
--theme-info-td-color: var(--color-cookie);

overflow-x: hidden;
}

Expand Down
4 changes: 4 additions & 0 deletions _src/assets/statics/cookies/assets/js/app.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { init_cookita } from './cookita.js'
import { init_login } from './login.js';
import { init_themes } from './themes.js';
import { init_info } from './info.js';

console.log('🍪 Ñam!\n---');

Expand All @@ -12,3 +13,6 @@ init_login();

// Themes
init_themes();

// Info
init_info()
91 changes: 91 additions & 0 deletions _src/assets/statics/cookies/assets/js/info.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
function get_ip_data() {
return fetch('https://api.ipify.org?format=json', { cache: 'force-cache' })
.then(res => res.json());
}

function get_info_line(label, value) {
if (!label || !value) return '';
return `
<tr>
<th class="🍪__info-table-header">${label}</th>
<td class="🍪__info-table-value">${value}</td>
</tr>
`
}

function get_browser_version(userAgeng, type) {
const ver_regex = {
firefox: /Firefox\/([0-9\.]*)/,
chromium: /Chrome\/([0-9\.]*)/,
safari: /Version\/([0-9\.]*)/
};

if (!Object.keys(ver_regex).includes(type)) return '';

return userAgeng.match(ver_regex[type])[1];
}

function get_browser_type(userAgent) {
const isChromium = userAgent.indexOf('Chrome') !== -1;
const isFirefox = userAgent.indexOf('Firefox') !== -1;
const isSafari = userAgent.indexOf('Safari') !== -1;

let browser = 'Otro...';
let version = '';

if (isChromium) {
browser = 'Chromium';
} else if (isSafari) {
browser = 'Safari';
} else if (isFirefox) {
browser = 'Firefox';
}

return {
type: browser,
version: get_browser_version(userAgent, browser.toLowerCase())
};
}


async function get_your_info() {
const ip_info = await get_ip_data();
const ip_data = ip_info ? ip_info.ip : '';

const browser = get_browser_type(navigator.userAgent);

return `
<table class="🍪__info-table">
${get_info_line('IP', ip_data)}
${get_info_line('Idioma principal', navigator.language)}
${get_info_line('Idiomas displonibles', navigator.languages.join(', '))}
${get_info_line('Cookies', navigator.cookieEnabled)}
${get_info_line('Equipo', navigator.oscpu)}
${get_info_line('Navegador', browser.type)}
${get_info_line('Versión', browser.version)}
${get_info_line('Ventana navegador', window.innerWidth + 'x'+ window.innerHeight + ' px')}
${get_info_line('Pantalla', window.screen.width + 'x' + window.screen.width + ' px')}
${get_info_line('Pixel ratio', window.devicePixelRatio)}
</table>
`;

}


async function init_info() {
const container = document.querySelector('.js__🍪-your-info');

if (container) {
container.innerHTML = await get_your_info();
}
}




export {
init_info,
}

1 change: 0 additions & 1 deletion _src/assets/statics/cookies/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@ <h2 class="🍪__subtitle">Cookita</h2>
</p>
<p class="🍪__code">Ver código en <a href="https://codeberg.org/oneeyedman/basic-cookies-sample">Codeberg</a></p>
</div>
<a href="https://librecounter.org/referer/show" target="_blank" class="accessible-hide"><img src="https://librecounter.org/counter.svg" referrerPolicy="unsafe-url" /></a>
</footer>
</body>
</html>

0 comments on commit ab713e1

Please sign in to comment.