Skip to content

Commit 31d8dd6

Browse files
NSTechBytesNSTechBytes
authored
Merge pull request #4 from NSTechBytes/working2
Working2
2 parents 6ef07f8 + e0fffc8 commit 31d8dd6

18 files changed

Lines changed: 1010 additions & 64 deletions

File tree

‎Build-CPP.ps1‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#usage -----> powershell -ExecutionPolicy Bypass -Command "& {. .\Build-CPP.ps1; Dist -major 0 -minor 0 -patch 3}"
1+
#usage -----> powershell -ExecutionPolicy Bypass -Command "& {. .\Build-CPP.ps1; Dist -major 0 -minor 0 -patch 5}"
22
$msbuild = "C:\Program Files\Microsoft Visual Studio\2022\Community\Msbuild\Current\Bin\MSBuild.exe"
33

44
function Add-RMSkinFooter {

‎Resources/Skins/WebView2/@Resources/Calendar/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@
1414
<body>
1515
<div class="widget-container">
1616
<!-- Background Elements -->
17-
<div class="bg-shape shape-1"></div>
18-
<div class="bg-shape shape-2"></div>
17+
<div class="shape-container">
18+
<div class="bg-shape shape-1"></div>
19+
<div class="bg-shape shape-2"></div>
20+
</div>
1921

2022
<div class="calendar-card">
2123
<div class="calendar-header">

‎Resources/Skins/WebView2/@Resources/Calendar/style.css‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,27 @@ body {
2929
.widget-container {
3030
position: relative;
3131
width: 280px;
32-
height: 320px; /* Reduced from 380px */
32+
height: 295px; /* Match Weather height */
3333
display: flex;
3434
justify-content: center;
3535
align-items: center;
36+
border-radius: 20px; /* Force rounded corners for entire widget */
37+
overflow: hidden; /* Clip everything to rounded shape */
3638
}
3739

3840
/* Abstract Background Shapes */
41+
.shape-container {
42+
position: absolute;
43+
top: 50%;
44+
left: 50%;
45+
transform: translate(-50%, -50%);
46+
width: 90%; /* Match card width */
47+
height: 85%; /* Match card height */
48+
border-radius: 14px; /* Match card border-radius */
49+
overflow: hidden;
50+
z-index: 0;
51+
}
52+
3953
.bg-shape {
4054
position: absolute;
4155
border-radius: 50%;
@@ -45,40 +59,40 @@ body {
4559
}
4660

4761
.shape-1 {
48-
width: 160px; /* Reduced from 200px */
49-
height: 160px;
62+
width: 120px; /* Further reduced for compact size */
63+
height: 120px;
5064
background: #764ba2;
51-
top: -15px;
52-
left: -15px;
65+
top: -10px;
66+
left: -10px;
5367
animation: float 10s infinite ease-in-out;
5468
}
5569

5670
.shape-2 {
57-
width: 140px; /* Reduced from 180px */
58-
height: 140px;
71+
width: 105px; /* Further reduced for compact size */
72+
height: 105px;
5973
background: #4facfe;
60-
bottom: -15px;
61-
right: -15px;
74+
bottom: -10px;
75+
right: -10px;
6276
animation: float 12s infinite ease-in-out reverse;
6377
}
6478

6579
@keyframes float {
6680
0%, 100% { transform: translate(0, 0); }
67-
50% { transform: translate(15px, 15px); } /* Reduced movement */
81+
50% { transform: translate(10px, 10px); } /* Further reduced movement */
6882
}
6983

7084
/* Glass Card */
7185
.calendar-card {
7286
position: relative;
7387
z-index: 1;
7488
width: 90%;
75-
height: 90%;
89+
height: 85%; /* Reduced to match Weather and prevent clipping */
7690
background: var(--glass-bg);
7791
backdrop-filter: blur(20px);
7892
-webkit-backdrop-filter: blur(20px);
7993
border: 1px solid var(--glass-border);
80-
border-radius: 18px; /* Reduced from 24px */
81-
padding: 15px; /* Reduced from 20px */
94+
border-radius: 14px; /* Further reduced */
95+
padding: 10px; /* Further reduced */
8296
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
8397
display: flex;
8498
flex-direction: column;
@@ -89,16 +103,16 @@ body {
89103
display: flex;
90104
justify-content: space-between;
91105
align-items: center;
92-
margin-bottom: 12px; /* Reduced from 20px */
106+
margin-bottom: 8px; /* Further reduced */
93107
color: var(--text-primary);
94108
}
95109

96110
.month-year {
97-
font-size: 0.95rem; /* Reduced from 1.2rem */
111+
font-size: 0.8rem; /* Further reduced */
98112
font-weight: 600;
99113
text-transform: capitalize;
100114
display: flex;
101-
gap: 4px; /* Reduced from 5px */
115+
gap: 3px; /* Further reduced */
102116
}
103117

104118
#current-year {
@@ -110,9 +124,9 @@ body {
110124
background: transparent;
111125
border: none;
112126
color: var(--text-secondary);
113-
font-size: 1rem; /* Reduced from 1.2rem */
127+
font-size: 0.85rem; /* Further reduced */
114128
cursor: pointer;
115-
padding: 4px; /* Reduced from 5px */
129+
padding: 3px; /* Further reduced */
116130
border-radius: 50%;
117131
transition: all 0.2s ease;
118132
display: flex;
@@ -136,11 +150,11 @@ body {
136150
display: grid;
137151
grid-template-columns: repeat(7, 1fr);
138152
text-align: center;
139-
margin-bottom: 6px; /* Reduced from 10px */
153+
margin-bottom: 4px; /* Further reduced */
140154
}
141155

142156
.weekdays span {
143-
font-size: 0.7rem; /* Reduced from 0.85rem */
157+
font-size: 0.6rem; /* Further reduced */
144158
font-weight: 500;
145159
color: var(--text-secondary);
146160
text-transform: uppercase;
@@ -149,12 +163,12 @@ body {
149163
.days {
150164
display: grid;
151165
grid-template-columns: repeat(7, 1fr);
152-
gap: 3px; /* Reduced from 5px */
166+
gap: 2px; /* Further reduced */
153167
text-align: center;
154168
}
155169

156170
.days div {
157-
font-size: 0.8rem; /* Reduced from 0.95rem */
171+
font-size: 0.7rem; /* Further reduced */
158172
color: var(--text-primary);
159173
width: 100%;
160174
aspect-ratio: 1; /* Make them square */

‎Resources/Skins/WebView2/@Resources/Clock/style.css‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ body {
2727

2828
.widget-container {
2929
position: relative;
30-
width: 350px;
31-
height: 200px;
30+
width: 280px;
31+
height: 160px;
3232
display: flex;
3333
justify-content: center;
3434
align-items: center;
@@ -53,29 +53,29 @@ body {
5353
}
5454

5555
.blob-1 {
56-
width: 120px;
57-
height: 120px;
56+
width: 95px;
57+
height: 95px;
5858
background: var(--blob-color-1);
59-
top: 20px;
60-
left: 40px;
59+
top: 15px;
60+
left: 30px;
6161
animation-delay: 0s;
6262
}
6363

6464
.blob-2 {
65-
width: 150px;
66-
height: 150px;
65+
width: 120px;
66+
height: 120px;
6767
background: var(--blob-color-2);
68-
bottom: 20px;
69-
right: 40px;
68+
bottom: 15px;
69+
right: 30px;
7070
animation-delay: -2s;
7171
}
7272

7373
.blob-3 {
74-
width: 100px;
75-
height: 100px;
74+
width: 80px;
75+
height: 80px;
7676
background: var(--blob-color-3);
77-
bottom: 40px;
78-
left: 80px;
77+
bottom: 30px;
78+
left: 65px;
7979
animation-delay: -4s;
8080
}
8181

@@ -84,10 +84,10 @@ body {
8484
transform: translate(0, 0) scale(1);
8585
}
8686
33% {
87-
transform: translate(30px, -50px) scale(1.1);
87+
transform: translate(25px, -40px) scale(1.1);
8888
}
8989
66% {
90-
transform: translate(-20px, 20px) scale(0.9);
90+
transform: translate(-15px, 15px) scale(0.9);
9191
}
9292
100% {
9393
transform: translate(0, 0) scale(1);
@@ -104,7 +104,7 @@ body {
104104
backdrop-filter: blur(15px);
105105
-webkit-backdrop-filter: blur(15px);
106106
border: 1px solid var(--glass-border);
107-
border-radius: 20px;
107+
border-radius: 16px;
108108
display: flex;
109109
justify-content: center;
110110
align-items: center;
@@ -121,45 +121,45 @@ body {
121121
align-items: baseline;
122122
justify-content: center;
123123
line-height: 1;
124-
margin-bottom: 5px;
124+
margin-bottom: 4px;
125125
}
126126

127127
#hours, #minutes {
128-
font-size: 4rem;
128+
font-size: 3.2rem;
129129
font-weight: 700;
130130
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
131131
}
132132

133133
.colon {
134-
font-size: 3rem;
134+
font-size: 2.4rem;
135135
font-weight: 300;
136-
margin: 0 5px;
136+
margin: 0 4px;
137137
animation: blink 1s infinite;
138138
}
139139

140140
.seconds-wrapper {
141141
display: flex;
142142
flex-direction: column;
143143
align-items: flex-start;
144-
margin-left: 10px;
145-
font-size: 1rem;
144+
margin-left: 8px;
145+
font-size: 0.85rem;
146146
font-weight: 500;
147147
}
148148

149149
#seconds {
150150
color: var(--text-secondary);
151-
font-size: 1.2rem;
151+
font-size: 1rem;
152152
}
153153

154154
#ampm {
155-
font-size: 0.8rem;
155+
font-size: 0.7rem;
156156
color: var(--text-secondary);
157157
text-transform: uppercase;
158158
margin-top: 2px;
159159
}
160160

161161
.date {
162-
font-size: 1rem;
162+
font-size: 0.85rem;
163163
font-weight: 300;
164164
color: var(--text-secondary);
165165
letter-spacing: 1px;

‎Resources/Skins/WebView2/@Resources/IslamicDate/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Islamic Date Widget</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11+
<!-- Phosphor Icons -->
12+
<script src="https://unpkg.com/@phosphor-icons/web"></script>
13+
</head>
14+
<body>
15+
<div class="widget-container">
16+
<!-- Background Elements -->
17+
<div class="shape-container">
18+
<div class="bg-shape shape-1"></div>
19+
<div class="bg-shape shape-2"></div>
20+
<div class="bg-shape shape-3"></div>
21+
</div>
22+
23+
<div class="islamic-card">
24+
<div class="content-wrapper">
25+
<!-- Icon and Day Row -->
26+
<div class="top-row">
27+
<div class="icon-container">
28+
<i class="ph ph-moon-stars"></i>
29+
</div>
30+
<div class="hijri-day" id="hijri-day">1</div>
31+
</div>
32+
33+
<!-- Month and Year -->
34+
<div class="hijri-month" id="hijri-month">Muharram</div>
35+
<div class="hijri-year" id="hijri-year">1446 AH</div>
36+
</div>
37+
</div>
38+
</div>
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

0 commit comments

Comments
 (0)