add privacy policy overlay
This commit is contained in:
theBreadCompany
parent
6dcd5957c9
commit
f28da5782c
2 changed files with 62 additions and 18 deletions
45
index.css
45
index.css
|
|
@ -19,8 +19,8 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
body {
|
||||||
font-family: "Fira sans", Helvetica, sans-serif;
|
font-family: Cantarell, "Fira sans", Helvetica, sans-serif;
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
@ -137,7 +137,7 @@ ul.h-list {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: 18.72px 0
|
margin: 18.72px 0;
|
||||||
}
|
}
|
||||||
.product-placeholder-icon {
|
.product-placeholder-icon {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
@ -155,6 +155,7 @@ ul.h-list {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
.r-flex-h > a { width: 100%; }
|
||||||
|
|
||||||
.separator {
|
.separator {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -207,11 +208,7 @@ ul.h-list {
|
||||||
width: 2em;
|
width: 2em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
}
|
}
|
||||||
.page-bar[bottom="true"] {
|
.product[placeholder="true"] {
|
||||||
border-top: unset;
|
|
||||||
}
|
|
||||||
.product[placeholder="true"],
|
|
||||||
.page-bar[bottom="true"] > * {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -233,6 +230,38 @@ ul.h-list {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
#privacy-notice-switch,
|
||||||
#theme-switch input[type="checkbox"] {
|
#theme-switch input[type="checkbox"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
display: none;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
margin: none;
|
||||||
|
}
|
||||||
|
#privacy-notice-switch:checked ~ .overlay {
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.overlay-bar { width: 100%; }
|
||||||
|
.overlay-bar > label {
|
||||||
|
margin-left: auto;
|
||||||
|
color: var(--text);
|
||||||
|
background-color: currentColor;
|
||||||
|
mask-image: url("https://api.iconify.design/mdi:close.svg");
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
mask-size: 100%;
|
||||||
|
}
|
||||||
|
.overlay-content {
|
||||||
|
background-color: var(--background);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0px 0px 15px var(--primary);
|
||||||
|
padding: 1em;
|
||||||
|
max-width: 60vw;
|
||||||
|
}
|
||||||
|
|
|
||||||
35
index.html
35
index.html
|
|
@ -8,13 +8,6 @@
|
||||||
<title>thebread.dev</title>
|
<title>thebread.dev</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!--
|
|
||||||
<div id="content" class="glass-text">
|
|
||||||
<h2>soon™</h1>
|
|
||||||
<h4>have a look at my <a href="cdn.thebread.dev">cdn</a></h4>
|
|
||||||
<h4>or visit my friends <a href="https://emma.pizza">Emma</a> and <a href="https://henhaa.art">Henrik</a></h4>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
<div class="scroll-container">
|
<div class="scroll-container">
|
||||||
<div class="page-bar" top="true">
|
<div class="page-bar" top="true">
|
||||||
<img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="height: 50%; aspect-ratio: 1; margin-left: 2em">
|
<img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="height: 50%; aspect-ratio: 1; margin-left: 2em">
|
||||||
|
|
@ -161,9 +154,31 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="page-bar" bottom="true">
|
<div class="page-bar" bottom="true">
|
||||||
<div style="margin-left: 2em; margin-right: auto">(c) thebread.dev 2025</div>
|
<div style="margin-left: 2em; margin-right: auto">(c) thebread.dev 2025</div>
|
||||||
<div style="margin-right: 2em;" class="flex-h txt-list">
|
<div style="margin-right: 2em;" class="flex-h">
|
||||||
<div>Impressum</div>
|
<!--<div>Impressum</div>
|
||||||
<div>Datenschutzerklärung</div>
|
<div>Datenschutzerklärung</div>-->
|
||||||
|
<input type="checkbox" id="privacy-notice-switch">
|
||||||
|
<label for="privacy-notice-switch">Privacy Notice</label>
|
||||||
|
<div id="privacy-notice" class="overlay center-v center-h">
|
||||||
|
<div>
|
||||||
|
<div class="overlay-content">
|
||||||
|
<div class="overlay-bar flex-h center-v">
|
||||||
|
<h2>Privacy Notice</h2>
|
||||||
|
<label for="privacy-notice-switch"></label>
|
||||||
|
</div>
|
||||||
|
<p>In order for this page to work, some technical data is collected:</p>
|
||||||
|
<ul>
|
||||||
|
<li>IP address</li>
|
||||||
|
<li>User Agent</li>
|
||||||
|
</ul>
|
||||||
|
<p>This data is also logged on the server this page is running on. Your browser also sends this data to the following remotes to obtain content for this website:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cdn.thebread.dev</li>
|
||||||
|
<li>api.iconify.design</li>
|
||||||
|
</ul>
|
||||||
|
<p>Your browser may cache this content, but no data is explicitly saved by this page. There are currently no cookies.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue