Skip to content

Commit

Permalink
vNext (2.4): Walls & Weather
Browse files Browse the repository at this point in the history 
You can now set a website as the backdrop of the page, check out the backdrop section of the control panel to get started.
Additionally, weather has been completely rebuilt from the ground up with a new backend, allowing for automatic location detection, and a fresh design for the weather card including the 'feels like' metric for weather.
  • Loading branch information
@Futur3Sn0w
Futur3Sn0w committed Feb 11, 2024
1 parent 5bc2cdc commit 4597daf
Show file tree
Hide file tree
Showing 38 changed files with 1,628 additions and 197 deletions.
70 changes: 32 additions & 38 deletions css/stock_cards/weatherCard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,27 @@
background: linear-gradient(360deg, #0e63d1, rgb(92, 168, 255));
}

.weatherCard.squareCard .temp {
.weatherCard.squareCard .tempGroup {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 3px;

font-size: 20px;
gap: 0 !important;
}

.weatherCard.squareCard * {
transform: none !important;
}

.weatherCard.squareCard #weatherIcon {
margin-bottom: -20px;
margin-top: -15px;
}

.weatherCard.squareCard .temp {
font-size: 20px;
}

.weatherCard.rectCard #weatherIcon {
z-index: 21;
/* position: absolute !important; */
/* left: 1px; */
}

#weatherIcon {
height: 78px;
height: 48px;
aspect-ratio: 1/1;

transition: .2s;
Expand All @@ -41,43 +34,44 @@
}


.temp {
font-size: 25px;
transform: translateX(-10px);
#temp {
flex-shrink: 0;
transition: .2s;
color: white;
font-weight: 500;
font-weight: 600;
}

.weatherCard.rectCard .temp,
.weatherCard.expanded .temp {
padding: 0;
padding-left: 20px;

font-size: 30px;

box-sizing: border-box;
transform: translateZ(15px);
#temp::after {
content: attr(feel);
position: absolute;
font-weight: 500;

display: flex;
align-items: center;
justify-content: center;
}
top: 100%;
left: 50%;
transform: translateX(-50%);

.weatherCard>i {
color: white;
position: absolute;
top: 14px;
left: 12px;
width: max-content;
opacity: .75;

font-size: 20px;
font-size: 15px;
}

.weatherCard.squareCard>i {
.weatherCard.squareCard #temp::after {
display: none;
}

.weatherCard.expanded>i,
.weatherCard.rectCard>i {
.weatherCard.rectCard .tempGroup,
.weatherCard.expanded .tempGroup {
font-size: 25px;
gap: 10px;

box-sizing: border-box;
transform: translateZ(15px);

margin-top: -15px;

flex-direction: row-reverse;
display: flex;
align-items: center;
justify-content: center;
}
20 changes: 18 additions & 2 deletions css/structure/css.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@ body:has(.darkModeOn) .backDrop {
background-image: url('../../resc/dark.png');
}

body::before {
body::before,
.siteDrop {
content: '';
width: 100vw;
height: 100%;
Expand All @@ -98,7 +99,7 @@ body::before {
opacity: 0;

position: absolute;
z-index: 0;
z-index: 1;
transition: .4s;
}

Expand All @@ -109,6 +110,21 @@ body:has(.about-modal.visible)::before {
opacity: 1;
}

.siteDrop {
opacity: 1;
display: flex;
z-index: 0;
}

body:has(.timeDate.ccOpen .ccb2.selected) .siteDrop {
z-index: 1;
}

.siteDrop embed {
width: 100%;
height: 100%;
}

.customBackdrop {
opacity: 1;
background-color: #fff;
Expand Down
51 changes: 42 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@
<body>
<div class="loader"></div>

<div class="siteDrop">
</div>

<div class="backDrop" id="backDrop2"></div>

<div class="surface aboutBtn" id="topChromeAboutBtn">
Expand Down Expand Up @@ -94,16 +97,16 @@
</div>
</div>
<div class="group-b">
<div class="dcExpt fullscreenBtn">
<div class="dcExpt button fullscreenBtn">
<i class="fa-solid fa-expand"></i>
</div>
<div class="dcExpt refreshPageBtn">
<div class="dcExpt button refreshPageBtn">
<i class="fa-solid fa-refresh"></i>
</div>
<div class="dcExpt">
<div class="dcExpt button">
<i class="fa-solid fa-question"></i>
</div>
<div class="dcExpt">
<div class="dcExpt button">
<i class="fa-solid fa-question"></i>
</div>
</div>
Expand All @@ -121,17 +124,46 @@
<!-- <div class="prevWall"></div> -->
</div>
<div class="wallBtns">
<div class="dcExpt interactable-hov openWall" data-btnName="Open" id="openWallpaperBtn">
<div class="dcExpt">
<input type="checkbox" name="siteDropToggle" id="siteDropToggle">
<i class="fa-solid fa-tv"></i>
<label for="siteDropToggle">Live display</label>
</div>

<div class="dcExpt button interactable-hov openWall" data-btnName="Open" id="openWallpaperBtn">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</div>

<div class="dcExpt interactable-hov refresh" data-btnName="Refresh" id="refreshWallBtn">
<div class="dcExpt button interactable-hov refresh" data-btnName="Refresh" id="refreshWallBtn">
<i class="fa-solid fa-refresh"></i>
</div>
</div>
<div class="dcExpt keyTBOptGroup solo interactable-hov">
<div class="dcExpt keyTBOptGroup solo interactable-hov unsplashTagsCont">
<input class="keyTB" type="text" placeholder="Unsplash filters" name="" id="unsplashTags">
</div>
<div class="dcExpt keyTBOptGroup solo interactable-hov liveLinkCont">
<input class="keyTB" type="text" placeholder="Site URL" name="" id="liveLinkTB">
</div>
<div class="group-b liveLinkCont">
<div class="dcExpt interactable-hov liveLinkPreset" id="" url="https://flux.sandydoo.me">
<i class="fa-solid fa-f"></i>
<label>Flux</label>
</div>
<div class="dcExpt interactable-hov liveLinkPreset" id="" url="https://1j01.github.io/pipes/">
<i class="fa-solid fa-p"></i>
<label>Pipes</label>
</div>
<div class="dcExpt interactable-hov liveLinkPreset" id=""
url="https://roycurtis.github.io/Flurry-WebGL/">
<i class="fa-solid fa-f"></i>
<label>Flurry</label>
</div>
<div class="dcExpt interactable-hov liveLinkPreset" id=""
url="https://www.logan-cooper.com/starry-night/">
<i class="fa-solid fa-s"></i>
<label>Starry Night</label>
</div>
</div>
</div>
</div>

Expand All @@ -149,7 +181,7 @@
<div class="header">
<img src="favicons/android-chrome-192x192.png" alt="">
<p id="title">(PlusUI)</p>
<p class="siteVer" id="ver">v2.3</p>
<p class="siteVer" id="ver">v2.4</p>
</div>
<div class="aboutText">
A hybrid dashboard and digital display for large-format screens, heavily inspired by TV & VisionOS
Expand Down Expand Up @@ -319,7 +351,7 @@
<div class="weatherCard card expandable labeled rectCard" data-enabled="y" data-resizableCard="y"
data-parallaxCard="y" data-friendlyName="Weather" data-cardDesc="Current temperature in local units"
id="weatherCard">
<div class="tdm temp">
<div class="tdm tempGroup">
<div class="tdm" id="temp"></div>
<img src="" alt="" id="weatherIcon">
</div>
Expand Down Expand Up @@ -406,6 +438,7 @@

<script src="js/app.js"></script>
<script src="js/topchrome.js"></script>
<script src="js/rolodex.js"></script>
<script src="js/shelf.js"></script>

<script src="js/stock_cards.js"></script>
Expand Down
Loading

0 comments on commit 4597daf

Please sign in to comment.