alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-15 23:59:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

add google ads to homepage

Browse Source
This commit is contained in:
Evan
2025-03-07 21:27:49 -08:00
parent 7215c218d4
commit 444e1dfbb5
3 changed files with 138 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/index.html
+71 -1
View File
@@ -68,6 +68,60 @@
drop-shadow(1px -1px 0px rgb(255, 255, 255))
drop-shadow(-1px 1px 0px rgb(255, 255, 255));
}
.left-gutter-ad {
position: fixed;
left: 0;
top: 200px; /* Changed from top: 50% */
transform: none; /* Removed translateY(-50%) since we don't need to center anymore */
z-index: 40;
width: 300px;
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
pointer-events: auto;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(2px);
}
.left-gutter-ad google-ad {
width: 100%;
height: 100%;
display: block;
}
.right-gutter-ad {
position: fixed;
right: 0;
top: 200px; /* Changed from top: 50% */
transform: none; /* Removed translateY(-50%) since we don't need to center anymore */
z-index: 40;
width: 300px;
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
pointer-events: auto;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(2px);
}
.right-gutter-ad google-ad {
width: 100%;
height: 100%;
display: block;
}
/* Media query to hide the gutter ad on smaller screens */
@media (max-width: 1280px) {
.left-gutter-ad {
display: none;
}
.right-gutter-ad {
display: none;
}
}
</style>
<!-- Immediate execution to prevent FOUC -->
@@ -159,8 +213,24 @@
<div class="bg-image"></div>
<!-- Left gutter ad placement - full height, no empty space -->
<div class="left-gutter-ad ad">
<google-ad
adSlot="5220834834"
adFormat="vertical"
fullWidthResponsive="false"
></google-ad>
</div>
<div class="right-gutter-ad ad">
<google-ad
adSlot="1814331462"
adFormat="vertical"
fullWidthResponsive="false"
></google-ad>
</div>
<dark-mode-button></dark-mode-button>
<google-ad></google-ad>
<!-- Main container with responsive padding -->
<div class="flex justify-center items-center flex-grow">