├── README.md
├── USAirportDistanceMap
    ├── LICENSE.txt
    ├── README.md
    ├── index.html
    ├── script.js
    └── style.css
├── _config.yml
├── bell.mp3
├── button.html
├── buttons
    ├── demo.html
    ├── gumroad-etsy.html
    └── socials.html
├── calculator.html
├── calendar.html
├── calendar2.html
├── converter.html
├── converter2.html
├── count-down-days-only.html
├── countDown.html
├── currency_rates.html
├── currency_rates2.html
├── emoji.html
├── financial-goals.html
├── globe
    ├── LICENSE.txt
    ├── README.md
    ├── index.html
    └── style.css
├── greetings-date-clock.html
├── greetings-languages
    └── french.html
├── greetings-people
    ├── greetings-Nightmoers.html
    ├── greetings-diane.html
    ├── greetings-mahmoud.html
    ├── greetings-mark.html
    ├── greetings-rory.html
    └── greetings-sarita.html
├── images
    ├── gallery-with-cover
    │   ├── 1.jpeg
    │   ├── 10.jpeg
    │   ├── 11.jpeg
    │   ├── 12.jpeg
    │   ├── 2.jpeg
    │   ├── 3.jpeg
    │   ├── 4.jpeg
    │   ├── 5.jpeg
    │   ├── 6.jpeg
    │   ├── 7.jpeg
    │   ├── 8.jpeg
    │   ├── 9.jpeg
    │   ├── cover.html
    │   ├── cover.png
    │   └── gallery.html
    ├── gallery
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── 4.png
    │   ├── 5.png
    │   ├── 6.png
    │   ├── 7.png
    │   ├── 8.png
    │   ├── 9.png
    │   └── index.html
    └── slider
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── LICENSE.txt
    │   ├── README.md
    │   └── index.html
├── index.html
├── map2
    ├── LICENSE.txt
    ├── README.md
    ├── index.html
    ├── script.js
    └── style.css
├── minimal
    ├── minimal-calculator-basic.html
    ├── minimal-calculator.html
    ├── minimal-calendar.html
    ├── minimal-greetings.html
    ├── minimal-quote.html
    ├── minimal-time-left-month.html
    ├── minimal-time-left-week-monday.html
    ├── minimal-time-left-week-sunday.html
    └── minimal-unit-converter.html
├── nav-vertical.html
├── nav.html
├── photo-gallery
    ├── LICENSE.txt
    ├── README.md
    ├── austria.jpeg
    ├── bali.jpeg
    ├── budapest.jpg
    ├── cusco.jpeg
    ├── giza.jpg
    ├── index.html
    ├── italy.jpeg
    ├── kyoto.jpeg
    ├── mexico.jpg
    ├── milan.jpeg
    ├── osaka.jpeg
    ├── paris.jpg
    ├── peru.jpeg
    ├── rio.jpeg
    ├── rome.jpeg
    ├── style.css
    └── vienna.jpg
├── pomodoro
    ├── LICENSE.txt
    ├── index.html
    ├── script.js
    └── style.css
├── pomodoro2
    ├── LICENSE.txt
    ├── index.html
    ├── script.js
    └── style.css
├── pomodoro3
    ├── index.html
    ├── script.js
    └── style.css
├── socials
    ├── socials1.html
    ├── socials2.html
    ├── socials3.html
    └── socials4.html
├── time_left_in_2020.html
├── time_left_in_2021.html
├── time_left_in_this_month.html
├── time_left_in_this_week(start monday).html
├── time_left_in_this_week(start sunday).html
├── time_left_today.html
├── timer.html
├── travel.html
├── weather.html
├── weekly-widget-sunday.html
├── wethear-giza-egypt.html
└── world-clock
    ├── index.html
    ├── script.js
    └── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # notion_widgets
2 | A set of HTML widgets that could be embedded into [Notion.so](https://www.notion.so/) pages.
3 | [learn more](https://blog.shorouk.dev/notion-widgets-gallery/)
4 | 


--------------------------------------------------------------------------------
/USAirportDistanceMap/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2022 Shaw (https://codepen.io/shshaw/pen/vJNMQY)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/USAirportDistanceMap/README.md:
--------------------------------------------------------------------------------
1 | # Airport Distance Map
2 | 
3 | A Pen created on CodePen.io. Original URL: [https://codepen.io/shshaw/pen/vJNMQY](https://codepen.io/shshaw/pen/vJNMQY).
4 | 
5 | Get the distance between two airports "as the crow flies". 
6 | 
7 | Built with SVG, Vue, D3, GSAP, and love.
8 | 
9 | One of the first pieces I made with Vue in 2016, now presented in an updated & cleaned up format.


--------------------------------------------------------------------------------
/USAirportDistanceMap/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - Airport Distance Map</title>
 6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 7 | <link rel="stylesheet" href="./style.css">
 8 | 
 9 | </head>
10 | <body>
11 | <!-- partial:index.partial.html -->
12 | <div id="app" class="mileage">
13 | 
14 |   <svg class="mileage-map" ref="map" width="1200" height="780" viewBox="-120 -180 1200 780">
15 | 
16 |     <g class="mileage-map__states" ref="states"></g>
17 | 
18 |     <g ref="airports">
19 |       <g class="airport" :class="{ 'airport--current' : airport.current }"
20 |          v-for="airport in airports">
21 |         <circle r="3" :cx="airport.x" :cy="airport.y" class="airport__marker" />
22 |         <circle r="16" :cx="airport.x" :cy="airport.y" class="airport__range"
23 |                 @mousemove="airportSnap($event, airport)"
24 |                 @mouseup="airportClick($event, airport)"
25 |                 @mouseleave.self="airportLeave($event, airport)" />
26 |       </g>
27 |     </g>
28 | 
29 |     <path class="marker-connector" :d="markerConnect()"></path>
30 | 
31 |     <g class="airplane" ref="airplane">
32 |       <path class="airplane__icon" d="M21 15.984l-8.016-2.484v5.484l2.016 1.5v1.5l-3.516-0.984-3.469 0.984v-1.5l1.969-1.5v-5.484l-7.969 2.484v-1.969l7.969-5.016v-5.484c0-0.844 0.656-1.5 1.5-1.5s1.5 0.656 1.5 1.5v5.484l8.016 5.016v1.969z" transform="translate(-8,-15) scale(1.2)"></path>
33 |     </g>
34 | 
35 |     <g v-for="marker in markers" @mousedown="markerSet($event,marker)" class="marker" :class="{ 'marker--current' : marker.current }" :transform="'translate('+marker.x+','+marker.y+')'">
36 |       <path fill="{{marker.fill}}" d="M0 0l28.592-28.592c15.78-15.78 15.908-41.24.128-57.02a40.424 40.424 0 0 0-57.124 57.2z"></path>
37 |       <transition name="marker-fade">
38 |         <text v-if="marker.airport" x="0" y="-42" text-anchor="middle" v-text="marker.airport.LocationID"></text>
39 |       </transition>
40 |     </g>
41 |   </svg>
42 | 
43 |   <h1 class="mileage__calculations" v-show="distance">
44 |     <span>{{ distance | numberWithCommas }}</span><small>mi</small>
45 |   </h1>
46 |   
47 |   <div class="mileage__instructions">Drag the markers around to calculate distance</div>
48 | 
49 | </div>
50 | <!-- partial -->
51 |   <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
52 | <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
53 | <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js'></script>
54 | <script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
55 | <script src='https://codepen.io/shshaw/pen/epmrgO.js'></script><script  src="./script.js"></script>
56 | 
57 | </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/USAirportDistanceMap/style.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: 'Oswald';
  3 |   font-style: normal;
  4 |   font-weight: 400;
  5 |   src: url(https://fonts.gstatic.com/s/oswald/v49/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiYA.ttf) format('truetype');
  6 | }
  7 | html {
  8 |   height: 100%;
  9 |   display: flex;
 10 | }
 11 | body {
 12 |   margin: auto;
 13 | }
 14 | html {
 15 |   background: #D6EADF;
 16 |   text-align: center;
 17 |   color: #000;
 18 |   font-family: 'Oswald', sans-serif;
 19 |   font-weight: 300;
 20 |   font-smooth: auto;
 21 |   -webkit-font-smoothing: antialiased;
 22 | }
 23 | .mileage__calculations {
 24 |   margin: 0;
 25 |   font-size: 3rem;
 26 |   font-weight: inherit;
 27 | }
 28 | .mileage__calculations small {
 29 |   font-size: 0.6em;
 30 |   color: #000;
 31 | }
 32 | .mileage-map {
 33 |   display: block;
 34 |   width: auto;
 35 |   height: auto;
 36 |   max-width: 90%;
 37 |   max-height: 90vh;
 38 |   margin: auto auto 2rem;
 39 |   overflow: visible;
 40 | }
 41 | .mileage-map__states {
 42 |   stroke: #393939;
 43 |   stroke-width: 3;
 44 |   fill: #EAC4D5;
 45 | }
 46 | .marker {
 47 |   fill: #B67793;
 48 |   stroke: #FFF;
 49 |   stroke-width: 5;
 50 |   cursor: pointer;
 51 |   transition: opacity 0.3s linear;
 52 |   -webkit-user-select: none;
 53 |      -moz-user-select: none;
 54 |       -ms-user-select: none;
 55 |           user-select: none;
 56 | }
 57 | .marker > * {
 58 |   transition: transform 0.3s cubic-bezier(0.6, 0, 0.5, 1);
 59 | }
 60 | .marker text {
 61 |   stroke: none;
 62 |   fill: #FFF;
 63 |   font-family: inherit;
 64 |   font-size: 28px;
 65 |   font-weight: 200;
 66 | }
 67 | .marker-fade-leave-active,
 68 | .marker-fade-enter-active {
 69 |   transition: opacity 0.3s linear;
 70 | }
 71 | .marker-fade-enter,
 72 | .marker-fade-leave-to {
 73 |   opacity: 0;
 74 | }
 75 | .marker--current {
 76 |   opacity: 0.8;
 77 |   pointer-events: none;
 78 | }
 79 | .marker--current > * {
 80 |   transform: scale(0.8);
 81 | }
 82 | /* ////////////////////////////////////////////////////////////////////////// */
 83 | .airport {
 84 |   fill: #FFF;
 85 |   stroke-width: 2;
 86 |   stroke: transparent;
 87 |   transition: stroke 0.3s linear;
 88 | }
 89 | .airport:hover {
 90 |   stroke: rgba(255, 255, 255, 0.3);
 91 | }
 92 | .airport--current,
 93 | .airport--current:hover {
 94 |   stroke: #FFF;
 95 |   stroke: rgba(255, 255, 255, 0.8);
 96 | }
 97 | .airport__range {
 98 |   fill: transparent;
 99 |   cursor: pointer;
100 | }
101 | .marker-connector {
102 |   fill: none;
103 |   stroke: #FFF;
104 |   stroke-width: 3;
105 |   stroke-dasharray: 6 6;
106 |   pointer-events: none;
107 |   -webkit-animation: marching-ants 1s linear 0s infinite;
108 |           animation: marching-ants 1s linear 0s infinite;
109 | }
110 | @-webkit-keyframes marching-ants {
111 |   from {
112 |     stroke-dashoffset: 0;
113 |   }
114 |   to {
115 |     stroke-dashoffset: 12;
116 |   }
117 | }
118 | @keyframes marching-ants {
119 |   from {
120 |     stroke-dashoffset: 0;
121 |   }
122 |   to {
123 |     stroke-dashoffset: 12;
124 |   }
125 | }
126 | .airplane {
127 |   pointer-events: none;
128 |   fill: #FFF;
129 |   opacity: 0;
130 | }
131 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-minimal


--------------------------------------------------------------------------------
/bell.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/bell.mp3


--------------------------------------------------------------------------------
/button.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 
  6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  7 | 
  8 |   <style>
  9 |     :root {
 10 |       --my-color:#34495e;
 11 |       --my-color-accent:#2c3e50;
 12 |       --black: #3c3c3c;
 13 |       --black-accent: #2d2d2d;
 14 |       --blue: #809bce;
 15 |       --blue-accent: #5c6f94;
 16 |       --purple: #8a508f;
 17 |       --purple-accent: #5d3661;
 18 |       --mint: #b8e0d4;
 19 |       --mint-accent: #8ba89f;
 20 |       --pink: #eac4d5;
 21 |       --pink-accent: #b495a3;
 22 |       --green: #74a892;
 23 |       --green-accent: #5e8675;
 24 |       --red:#d74a49;
 25 |       --red-accent:#b53f3f;
 26 |       --orange:#d35400;
 27 |       --orange-accent:#9e4102;
 28 |       --yellow:#f1c40f;
 29 |       --yellow-accent:#bd9a0c;
 30 |     }
 31 | 
 32 |     button {
 33 |       background: none;
 34 |       color: inherit;
 35 |       border: none;
 36 |       padding: 0;
 37 |       font: inherit;
 38 |       cursor: pointer;
 39 |       outline: inherit;
 40 |     }
 41 | 
 42 |     i {
 43 |       padding-right: 2px;
 44 |     }
 45 | 
 46 |     .btn {
 47 |       text-align: center;
 48 |       color: #ffffff;
 49 |       font-family: 'Manrope';
 50 |       display: inline-block;
 51 |       margin: 10px;
 52 |     }
 53 | 
 54 |     .my-color {
 55 |       background-color: var(--my-color);
 56 |     }
 57 | 
 58 |     .my-color:hover {
 59 |       background-color: var(--my-color-accent);
 60 |     }
 61 | 
 62 |     .my-color.threeD {
 63 |       box-shadow: 0px 4px 0px var(--my-color-accent);
 64 |     }
 65 | 
 66 |     .my-color.threeD:active {
 67 |       box-shadow: 0 0;
 68 |       background-color: var(--my-color-accent);
 69 |     }
 70 |     .black {
 71 |       background-color: var(--black);
 72 |     }
 73 | 
 74 |     .black:hover {
 75 |       background-color: var(--black-accent);
 76 |     }
 77 | 
 78 |     .black.threeD {
 79 |       box-shadow: 0px 4px 0px var(--black-accent);
 80 |     }
 81 | 
 82 |     .black.threeD:active {
 83 |       box-shadow: 0 0;
 84 |       background-color: var(--black-accent);
 85 |     }
 86 | 
 87 |     .blue {
 88 |       background-color: var(--blue);
 89 |     }
 90 | 
 91 |     .blue:hover {
 92 |       background-color: var(--blue-accent);
 93 |     }
 94 | 
 95 |     .blue.threeD {
 96 |       box-shadow: 0px 4px 0px var(--blue-accent);
 97 |     }
 98 | 
 99 |     .blue.threeD:active {
100 |       box-shadow: 0 0;
101 |       background-color: var(--blue-accent);
102 |     }
103 | 
104 |     .purple {
105 |       background-color: var(--purple);
106 |     }
107 | 
108 |     .purple:hover {
109 |       background-color: var(--purple-accent);
110 |     }
111 | 
112 |     .purple.threeD {
113 |       box-shadow: 0px 4px 0px var(--purple-accent);
114 |     }
115 | 
116 |     .purple.threeD:active {
117 |       box-shadow: 0 0;
118 |       background-color: var(--purple-accent);
119 |     }
120 | 
121 |     .mint {
122 |       background-color: var(--mint);
123 |     }
124 | 
125 |     .mint:hover {
126 |       background-color: var(--mint-accent);
127 |     }
128 | 
129 |     .mint.threeD {
130 |       box-shadow: 0px 4px 0px var(--mint-accent);
131 |     }
132 | 
133 |     .mint.threeD:active {
134 |       box-shadow: 0 0;
135 |       background-color: var(--mint-accent);
136 |     }
137 | 
138 |     .pink {
139 |       background-color: var(--pink);
140 |     }
141 | 
142 |     .pink:hover {
143 |       background-color: var(--pink-accent);
144 |     }
145 | 
146 |     .pink.threeD {
147 |       box-shadow: 0px 4px 0px var(--pink-accent);
148 |     }
149 | 
150 |     .pink.threeD:active {
151 |       box-shadow: 0 0;
152 |       background-color: var(--pink-accent);
153 |     }
154 | 
155 |     .green {
156 |       background-color: var(--green);
157 |     }
158 | 
159 |     .green:hover {
160 |       background-color: var(--green-accent);
161 |     }
162 | 
163 |     .green.threeD {
164 |       box-shadow: 0px 4px 0px var(--green-accent);
165 |     }
166 | 
167 |     .green.threeD:active {
168 |       box-shadow: 0 0;
169 |       background-color: var(--green-accent);
170 |     }
171 | 
172 |     .red {
173 |       background-color: var(--red);
174 |     }
175 | 
176 |     .red:hover {
177 |       background-color: var(--red-accent);
178 |     }
179 | 
180 |     .red.threeD {
181 |       box-shadow: 0px 4px 0px var(--red-accent);
182 |     }
183 | 
184 |     .red.threeD:active {
185 |       box-shadow: 0 0;
186 |       background-color: var(--red-accent);
187 |     }
188 | 
189 |     .orange {
190 |       background-color: var(--orange);
191 |     }
192 | 
193 |     .orange:hover {
194 |       background-color: var(--orange-accent);
195 |     }
196 | 
197 |     .orange.threeD {
198 |       box-shadow: 0px 4px 0px var(--orange-accent);
199 |     }
200 | 
201 |     .orange.threeD:active {
202 |       box-shadow: 0 0;
203 |       background-color: var(--orange-accent);
204 |     }
205 | 
206 |     .yellow {
207 |       background-color: var(--yellow);
208 |     }
209 | 
210 |     .yellow:hover {
211 |       background-color: var(--yellow-accent);
212 |     }
213 | 
214 |     .yellow.threeD {
215 |       box-shadow: 0px 4px 0px var(--yellow-accent);
216 |     }
217 | 
218 |     .yellow.threeD:active {
219 |       box-shadow: 0 0;
220 |       background-color: var(--yellow-accent);
221 |     }
222 | 
223 |     .rounded {
224 |       border-radius: 20px;
225 |     }
226 | 
227 |     .small {
228 |       padding: 5px 20px;
229 |       font-size: 10px;
230 |     }
231 | 
232 |     .mid {
233 |       padding: 10px 40px;
234 |       font-size: 12px;
235 |     }
236 | 
237 |     .large {
238 |       padding: 15px 60px;
239 |       font-size: 18px;
240 |     }
241 |   </style>
242 | 
243 | </head>
244 | 
245 | <body>
246 | 
247 |   <button class="btn large my-color rounded threeD" type="button" onclick="navigate()"> <i class="fa-regular fa-star"></i> My Button</button>
248 |   
249 |   <script>
250 |     function navigate() {
251 |       window.open("https://example.com", '_blank').focus();
252 |     }
253 |   </script>
254 | 
255 | </body>
256 | 
257 | </html>
258 | 


--------------------------------------------------------------------------------
/buttons/demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 
  6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  7 | 
  8 |   <style>
  9 |     :root {
 10 |       --my-color:#34495e;
 11 |       --my-color-accent:#2c3e50;
 12 |       --black: #3c3c3c;
 13 |       --black-accent: #2d2d2d;
 14 |       --blue: #809bce;
 15 |       --blue-accent: #5c6f94;
 16 |       --purple: #8a508f;
 17 |       --purple-accent: #5d3661;
 18 |       --mint: #b8e0d4;
 19 |       --mint-accent: #8ba89f;
 20 |       --pink: #eac4d5;
 21 |       --pink-accent: #b495a3;
 22 |       --green: #74a892;
 23 |       --green-accent: #5e8675;
 24 |       --red:#d74a49;
 25 |       --red-accent:#b53f3f;
 26 |       --orange:#d35400;
 27 |       --orange-accent:#9e4102;
 28 |       --yellow:#f1c40f;
 29 |       --yellow-accent:#bd9a0c;
 30 |     }
 31 | 
 32 |     button {
 33 |       background: none;
 34 |       color: inherit;
 35 |       border: none;
 36 |       padding: 0;
 37 |       font: inherit;
 38 |       cursor: pointer;
 39 |       outline: inherit;
 40 |     }
 41 | 
 42 |     i {
 43 |       padding-right: 2px;
 44 |     }
 45 | 
 46 |     .btn {
 47 |       text-align: center;
 48 |       color: #ffffff;
 49 |       font-family: 'Manrope';
 50 |       display: inline-block;
 51 |       margin: 10px;
 52 |     }
 53 | 
 54 |     .my-color {
 55 |       background-color: var(--my-color);
 56 |     }
 57 | 
 58 |     .my-color:hover {
 59 |       background-color: var(--my-color-accent);
 60 |     }
 61 | 
 62 |     .my-color.threeD {
 63 |       box-shadow: 0px 4px 0px var(--my-color-accent);
 64 |     }
 65 | 
 66 |     .my-color.threeD:active {
 67 |       box-shadow: 0 0;
 68 |       background-color: var(--my-color-accent);
 69 |     }
 70 |     .black {
 71 |       background-color: var(--black);
 72 |     }
 73 | 
 74 |     .black:hover {
 75 |       background-color: var(--black-accent);
 76 |     }
 77 | 
 78 |     .black.threeD {
 79 |       box-shadow: 0px 4px 0px var(--black-accent);
 80 |     }
 81 | 
 82 |     .black.threeD:active {
 83 |       box-shadow: 0 0;
 84 |       background-color: var(--black-accent);
 85 |     }
 86 | 
 87 |     .blue {
 88 |       background-color: var(--blue);
 89 |     }
 90 | 
 91 |     .blue:hover {
 92 |       background-color: var(--blue-accent);
 93 |     }
 94 | 
 95 |     .blue.threeD {
 96 |       box-shadow: 0px 4px 0px var(--blue-accent);
 97 |     }
 98 | 
 99 |     .blue.threeD:active {
100 |       box-shadow: 0 0;
101 |       background-color: var(--blue-accent);
102 |     }
103 | 
104 |     .purple {
105 |       background-color: var(--purple);
106 |     }
107 | 
108 |     .purple:hover {
109 |       background-color: var(--purple-accent);
110 |     }
111 | 
112 |     .purple.threeD {
113 |       box-shadow: 0px 4px 0px var(--purple-accent);
114 |     }
115 | 
116 |     .purple.threeD:active {
117 |       box-shadow: 0 0;
118 |       background-color: var(--purple-accent);
119 |     }
120 | 
121 |     .mint {
122 |       background-color: var(--mint);
123 |     }
124 | 
125 |     .mint:hover {
126 |       background-color: var(--mint-accent);
127 |     }
128 | 
129 |     .mint.threeD {
130 |       box-shadow: 0px 4px 0px var(--mint-accent);
131 |     }
132 | 
133 |     .mint.threeD:active {
134 |       box-shadow: 0 0;
135 |       background-color: var(--mint-accent);
136 |     }
137 | 
138 |     .pink {
139 |       background-color: var(--pink);
140 |     }
141 | 
142 |     .pink:hover {
143 |       background-color: var(--pink-accent);
144 |     }
145 | 
146 |     .pink.threeD {
147 |       box-shadow: 0px 4px 0px var(--pink-accent);
148 |     }
149 | 
150 |     .pink.threeD:active {
151 |       box-shadow: 0 0;
152 |       background-color: var(--pink-accent);
153 |     }
154 | 
155 |     .green {
156 |       background-color: var(--green);
157 |     }
158 | 
159 |     .green:hover {
160 |       background-color: var(--green-accent);
161 |     }
162 | 
163 |     .green.threeD {
164 |       box-shadow: 0px 4px 0px var(--green-accent);
165 |     }
166 | 
167 |     .green.threeD:active {
168 |       box-shadow: 0 0;
169 |       background-color: var(--green-accent);
170 |     }
171 | 
172 |     .red {
173 |       background-color: var(--red);
174 |     }
175 | 
176 |     .red:hover {
177 |       background-color: var(--red-accent);
178 |     }
179 | 
180 |     .red.threeD {
181 |       box-shadow: 0px 4px 0px var(--red-accent);
182 |     }
183 | 
184 |     .red.threeD:active {
185 |       box-shadow: 0 0;
186 |       background-color: var(--red-accent);
187 |     }
188 | 
189 |     .orange {
190 |       background-color: var(--orange);
191 |     }
192 | 
193 |     .orange:hover {
194 |       background-color: var(--orange-accent);
195 |     }
196 | 
197 |     .orange.threeD {
198 |       box-shadow: 0px 4px 0px var(--orange-accent);
199 |     }
200 | 
201 |     .orange.threeD:active {
202 |       box-shadow: 0 0;
203 |       background-color: var(--orange-accent);
204 |     }
205 | 
206 |     .yellow {
207 |       background-color: var(--yellow);
208 |     }
209 | 
210 |     .yellow:hover {
211 |       background-color: var(--yellow-accent);
212 |     }
213 | 
214 |     .yellow.threeD {
215 |       box-shadow: 0px 4px 0px var(--yellow-accent);
216 |     }
217 | 
218 |     .yellow.threeD:active {
219 |       box-shadow: 0 0;
220 |       background-color: var(--yellow-accent);
221 |     }
222 | 
223 |     .rounded {
224 |       border-radius: 20px;
225 |     }
226 | 
227 |     .small {
228 |       padding: 5px 20px;
229 |       font-size: 10px;
230 |     }
231 | 
232 |     .mid {
233 |       padding: 10px 40px;
234 |       font-size: 12px;
235 |     }
236 | 
237 |     .large {
238 |       padding: 15px 60px;
239 |       font-size: 18px;
240 |     }
241 |   </style>
242 | 
243 | </head>
244 | 
245 | <body>
246 | 
247 | 
248 |  
249 | 
250 |       <button class="btn mid mint rounded threeD" type="button" onclick="navigate()"> <i class="fa-regular fa-address-book"></i>
251 |         My Contacts</button>
252 |       <button class="btn mid yellow rounded threeD" type="button" onclick="navigate()"><i class="fa-regular fa-images"></i>
253 |         My Photos</button>
254 |       <button class="btn mid red rounded threeD" type="button" onclick="navigate()"> <i class="fa-regular fa-folder-closed"></i>
255 |         My Files</button>
256 |     <button class="btn mid purple rounded threeD" type="button" onclick="navigate()"> <i class="fa-regular fa-calendar-days"></i> My Calendar</button>
257 | 
258 |   <script>
259 |     function navigate() {
260 |       window.open("https://example.com", '_blank').focus();
261 |     }
262 | 
263 |   </script>
264 | 
265 | </body>
266 | 
267 | </html>
268 | 


--------------------------------------------------------------------------------
/buttons/gumroad-etsy.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | <!DOCTYPE html>
  4 | <html lang="en">
  5 | <head>
  6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  7 | 
  8 |   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap" rel="stylesheet" />
  9 | 
 10 | <style>
 11 |   body {
 12 |   margin: 0;
 13 |   display: flex;
 14 |   justify-content: center;
 15 |   /* flex-direction: column; */
 16 |   align-items: center;
 17 |   font-family: "Roboto Mono", monospace;
 18 | }
 19 | 
 20 | button {
 21 |   display: inline-block;
 22 |   margin: 50px;
 23 |   font-family: inherit;
 24 |   min-width: 200px;
 25 | }
 26 | /* End of Page styling */
 27 | 
 28 | 
 29 | 
 30 | /* Fill button styling */
 31 | .fill {
 32 |   font-size: 20px;
 33 |   font-weight: 200;
 34 |   letter-spacing: 1px;
 35 |   padding: 15px 25px 15px;
 36 |   outline: 0;
 37 |   border: 2px solid black;
 38 |   cursor: pointer;
 39 |   position: relative;
 40 |   background-color: rgba(0, 0, 0, 0);
 41 | }
 42 | 
 43 | .fill::after {
 44 |   content: "";
 45 |   width: 100%;
 46 |   z-index: -1;
 47 |   position: absolute;
 48 |   height: 100%;
 49 |   top: 5px;
 50 |   left: 5px;
 51 |   transition: 0.2s;
 52 | }
 53 | 
 54 | .fill:hover::after {
 55 |   top: 0px;
 56 |   left: 0px;
 57 | }
 58 | 
 59 | .pink::after{
 60 |   background-color: #fe95ba;
 61 | }
 62 | 
 63 | .orange::after{
 64 |   background-color: #fec92d;
 65 | }
 66 | 
 67 |   .black{
 68 |     color: #fff
 69 |   }
 70 | 
 71 |   .black::after{
 72 |   background-color: #000000;
 73 | }
 74 | 
 75 |   
 76 | </style>
 77 | 
 78 | </head>
 79 | <body>
 80 |   <button id="notion" onclick="navigate(this.id)" id="inbox" type="button" class="fill black"><i class="fa-sharp fa-solid fa-n" style="transform: rotate(-20deg);"></i> Notion</button>
 81 |   <button id="gumroad" onclick="navigate(this.id)" id="inbox" type="button" class="fill pink"><i class="fa-solid fa-g" style="transform: rotate(-20deg);"></i> Gumroad</button>
 82 |   <button id="etsy" onclick="navigate(this.id)" id="inbox" type="button" class="fill orange"><i class="fa-sharp fa-solid fa-e" style="transform: rotate(-20deg);"></i> Etsy</button>
 83 | 
 84 | 
 85 | 
 86 |   <script>
 87 |     function navigate(id) {
 88 |       if(id === "gumroad")
 89 |       window.open("https://shorouk.gumroad.com/", '_blank').focus();
 90 |       else if(id === "notion"){
 91 |         window.open("https://www.notion.so/marketplace/creators/shorouk-abdelaziz", '_blank').focus();
 92 |       }
 93 |       else{
 94 |         window.open("https://www.etsy.com/ca/shop/ShorouksStore", '_blank').focus();
 95 | 
 96 |       }
 97 |     }
 98 | 
 99 |   </script>
100 | 
101 | </body>
102 | </html>
103 | 


--------------------------------------------------------------------------------
/buttons/socials.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | <!DOCTYPE html>
  4 | <html lang="en">
  5 | <head>
  6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  7 | 
  8 |   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap" rel="stylesheet" />
  9 | 
 10 |   <!-- Awesome fonts -->
 11 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 12 | 
 13 | <!-- Roboto font -->
 14 | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 15 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 16 | 
 17 | <style>
 18 |   /*
 19 |     Auther: Abdelrhman Said
 20 | */
 21 | 
 22 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 23 | 
 24 | * {
 25 |   margin: 0;
 26 |   padding: 0;
 27 |   box-sizing: border-box;
 28 | }
 29 | 
 30 | *:focus,
 31 | *:active {
 32 |   outline: none !important;
 33 |   -webkit-tap-highlight-color: transparent;
 34 | }
 35 | 
 36 | html,
 37 | body {
 38 |   display: grid;
 39 |   height: 100%;
 40 |   /* width: 100%; */
 41 |   font-family: "Poppins", sans-serif;
 42 |   place-items: center;
 43 | }
 44 | 
 45 | .wrapper {
 46 |   display: inline-flex;
 47 |   list-style: none;
 48 | }
 49 | 
 50 | .wrapper .icon {
 51 |   position: relative;
 52 |   background: #cdcdcd;
 53 |   border-radius: 50%;
 54 |   padding: 15px;
 55 |   margin: 10px;
 56 |   width: 50px;
 57 |   height: 50px;
 58 |   font-size: 18px;
 59 |   display: flex;
 60 |   justify-content: center;
 61 |   align-items: center;
 62 |   flex-direction: column;
 63 |   /* box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); */
 64 |   cursor: pointer;
 65 |   transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 66 | }
 67 | 
 68 | .wrapper .tooltip {
 69 |   position: absolute;
 70 |   top: 0;
 71 |   font-size: 14px;
 72 |   background: #ffffff;
 73 |   color: #ffffff;
 74 |   padding: 5px 8px;
 75 |   border-radius: 5px;
 76 |   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
 77 |   opacity: 0;
 78 |   pointer-events: none;
 79 |   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 80 | }
 81 | 
 82 | .wrapper .tooltip::before {
 83 |   position: absolute;
 84 |   content: "";
 85 |   height: 8px;
 86 |   width: 8px;
 87 |   background: #ffffff;
 88 |   bottom: -3px;
 89 |   left: 50%;
 90 |   transform: translate(-50%) rotate(45deg);
 91 |   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 92 | }
 93 | 
 94 | .wrapper .icon:hover .tooltip {
 95 |   top: -45px;
 96 |   opacity: 1;
 97 |   visibility: visible;
 98 |   pointer-events: auto;
 99 | }
100 | 
101 | .wrapper .icon:hover span,
102 | .wrapper .icon:hover .tooltip {
103 |   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
104 | }
105 | 
106 | .wrapper .blog:hover,
107 | .wrapper .blog:hover .tooltip,
108 | .wrapper .blog:hover .tooltip::before {
109 |   background: #f2c618;
110 |   color: #ffffff;
111 | }
112 | 
113 | .wrapper .twitter:hover,
114 | .wrapper .twitter:hover .tooltip,
115 | .wrapper .twitter:hover .tooltip::before {
116 |   background: #1DA1F2;
117 |   color: #ffffff;
118 | }
119 | 
120 | .wrapper .pinterest:hover,
121 | .wrapper .pinterest:hover .tooltip,
122 | .wrapper .pinterest:hover .tooltip::before {
123 |   background: #E4405F;
124 |   color: #ffffff;
125 | }
126 | 
127 | 
128 | 
129 | .wrapper .youtube:hover,
130 | .wrapper .youtube:hover .tooltip,
131 | .wrapper .youtube:hover .tooltip::before {
132 |   background: #CD201F;
133 |   color: #ffffff;
134 | }
135 | 
136 | </style>
137 | 
138 | </head>
139 | <body>
140 | 
141 |   <ul class="wrapper" >
142 |     <li onclick="navigate(this.id)" id="blog" class="icon blog">
143 |       <span class="tooltip">Blog</span>
144 |       <span><i class="fa-solid fa-blog"></i></span>
145 |     </li>
146 |     <li onclick="navigate(this.id)" id="twitter"  class="icon twitter">
147 |       <span class="tooltip">Twitter</span>
148 |       <span><i class="fab fa-twitter"></i></span>
149 |     </li>
150 | 
151 |     <li onclick="navigate(this.id)" id="youtube"  class="icon youtube">
152 |       <span class="tooltip">Youtube</span>
153 |       <span><i class="fab fa-youtube"></i></span>
154 |     </li>
155 |        
156 |     <li onclick="navigate(this.id)" id="pinterest"  class="icon pinterest">
157 |       <span class="tooltip">Pinterest</span>
158 |       <span><i class="fab fa-pinterest"></i></span>
159 |     </li>
160 |   </ul>
161 |  
162 |   <script>
163 |     function navigate(id) {
164 |       if(id === "blog")
165 |         window.open("https://blog.shorouk.dev/", '_blank').focus();
166 |       else if (id === "twitter"){
167 |         window.open("https://twitter.com/ShoroukSAziz", '_blank').focus();
168 |       }
169 |       else if (id === "youtube"){
170 |         window.open("https://www.youtube.com/@shorouksaziz", '_blank').focus();
171 |       }
172 |       else if (id === "pinterest"){
173 |         window.open("https://www.pinterest.ca/organizing_wonderland/", '_blank').focus();
174 |       }
175 |     }
176 | 
177 |   </script>
178 | 
179 | </body>
180 | </html>
181 | 


--------------------------------------------------------------------------------
/count-down-days-only.html:
--------------------------------------------------------------------------------
  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 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900">
  7 |     <title>Document</title>
  8 |     <style>
  9 | 
 10 | body{
 11 |     background-color: white;
 12 | }
 13 |   
 14 | #timer {
 15 |   color: #eeeeee;
 16 |   text-align: center;
 17 |   text-transform: uppercase;
 18 |   font-family: 'Lato', sans-serif;
 19 |   font-size: .7em;
 20 |   letter-spacing: 5px;
 21 | }
 22 | 
 23 | .days, .hours, .minutes, .seconds {
 24 |   display: inline-block;
 25 |   padding: 20px;
 26 |   width: 100px;
 27 |   border-radius: 5px;
 28 | }
 29 | 
 30 | .days {
 31 |   background: #EF2F3C;
 32 | }
 33 | 
 34 | .hours {
 35 |   background: #eeeeee;
 36 |   color: #183059;
 37 | }
 38 | 
 39 | .minutes {
 40 |   background: #276FBF;
 41 | }
 42 | 
 43 | .seconds {
 44 |   background: #F0A202;
 45 | }
 46 | 
 47 | .numbers {
 48 |   font-family: 'Montserrat', sans-serif;
 49 |   color:  #183059;
 50 |   font-size: 4em;
 51 |   text-align: center;
 52 | }
 53 | 
 54 | .white {
 55 |   position: absolute;
 56 |   background:  #eeeeee;
 57 |   height: 85px;
 58 |   width: 75px;
 59 |   left: 30%;
 60 |   top: 2%;
 61 | }
 62 | 
 63 | .red {
 64 |   position: absolute;
 65 |   background:  #EF2F3C;
 66 |   left: 18%;
 67 |   top: 9%;
 68 |   height: 65px;
 69 |   width: 70px;
 70 |  
 71 | }
 72 | 
 73 | .blue {
 74 |   position: absolute;
 75 |   background:  #276FBF;
 76 |   height: 80px;
 77 |   width: 80px;
 78 |   left: 60%;
 79 |   top: 5%;
 80 | 
 81 | 
 82 | }
 83 | 
 84 | 
 85 |     </style>
 86 | </head>
 87 | <body>
 88 |     
 89 | <div id="timer">
 90 | 
 91 |     <div class="days"> 
 92 |         <div id="days" class="numbers "> </div>days</div>    
 93 |       </div>
 94 | 
 95 | </div>
 96 | 
 97 | </body>
 98 | <script>
 99 |     const year = new Date().getFullYear();
100 | const myDate = new Date('Oct 01, 2020 00:00:00');
101 | console.log(myDate);
102 | 
103 | // countdown
104 | let timer = setInterval(function() {
105 | 
106 |   // get today's date
107 |   const today = new Date().getTime();
108 | 
109 |   // get the difference
110 |   const diff = myDate - today;
111 | 
112 |   // math
113 |   let days = Math.floor(diff / (1000 * 60 * 60 * 24));
114 |   let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
115 |   let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
116 |   let seconds = Math.floor((diff % (1000 * 60)) / 1000);
117 | 
118 |   // display
119 |   document.getElementById("days").innerHTML=days
120 | 
121 | 
122 |     
123 | 
124 | }, 1);
125 | </script>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/countDown.html:
--------------------------------------------------------------------------------
  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 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900">
  7 |     <title>Document</title>
  8 |     <style>
  9 | 
 10 | body{
 11 |     background-color: white;
 12 | }
 13 |   
 14 | #timer {
 15 |   color: #eeeeee;
 16 |   text-align: center;
 17 |   text-transform: uppercase;
 18 |   font-family: 'Lato', sans-serif;
 19 |   font-size: .7em;
 20 |   letter-spacing: 5px;
 21 | }
 22 | 
 23 | .days, .hours, .minutes, .seconds {
 24 |   display: inline-block;
 25 |   padding: 20px;
 26 |   width: 100px;
 27 |   border-radius: 5px;
 28 | }
 29 | 
 30 | .days {
 31 |   background: #EF2F3C;
 32 | }
 33 | 
 34 | .hours {
 35 |   background: #eeeeee;
 36 |   color: #183059;
 37 | }
 38 | 
 39 | .minutes {
 40 |   background: #276FBF;
 41 | }
 42 | 
 43 | .seconds {
 44 |   background: #F0A202;
 45 | }
 46 | 
 47 | .numbers {
 48 |   font-family: 'Montserrat', sans-serif;
 49 |   color:  #183059;
 50 |   font-size: 4em;
 51 |   text-align: center;
 52 | }
 53 | 
 54 | .white {
 55 |   position: absolute;
 56 |   background:  #eeeeee;
 57 |   height: 85px;
 58 |   width: 75px;
 59 |   left: 30%;
 60 |   top: 2%;
 61 | }
 62 | 
 63 | .red {
 64 |   position: absolute;
 65 |   background:  #EF2F3C;
 66 |   left: 18%;
 67 |   top: 9%;
 68 |   height: 65px;
 69 |   width: 70px;
 70 |  
 71 | }
 72 | 
 73 | .blue {
 74 |   position: absolute;
 75 |   background:  #276FBF;
 76 |   height: 80px;
 77 |   width: 80px;
 78 |   left: 60%;
 79 |   top: 5%;
 80 | 
 81 | 
 82 | }
 83 | 
 84 | 
 85 |     </style>
 86 | </head>
 87 | <body>
 88 |     
 89 | <div id="timer">
 90 | 
 91 |     <div class="days"> 
 92 |         <div id="days" class="numbers "> </div>days</div> 
 93 |       <div class="hours"> 
 94 |         <div  id="hours" class="numbers"> </div>hours</div> 
 95 |       <div class="minutes"> 
 96 |         <div  id="minutes" class="numbers"> </div>minutes</div> 
 97 |       <div   class="seconds"> 
 98 |         <div id="seconds" class="numbers"> </div>seconds</div> 
 99 |       </div>
100 | 
101 | </div>
102 | 
103 | </body>
104 | <script>
105 |     const year = new Date().getFullYear();
106 | const myDate = new Date('Oct 15, 2024 00:00:00');
107 | console.log(myDate);
108 | 
109 | // countdown
110 | let timer = setInterval(function() {
111 | 
112 |   // get today's date
113 |   const today = new Date().getTime();
114 | 
115 |   // get the difference
116 |   const diff = myDate - today;
117 | 
118 |   // math
119 |   let days = Math.floor(diff / (1000 * 60 * 60 * 24));
120 |   let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
121 |   let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
122 |   let seconds = Math.floor((diff % (1000 * 60)) / 1000);
123 | 
124 |   // display
125 |   document.getElementById("days").innerHTML=days
126 |   document.getElementById("hours").innerHTML=hours
127 |   document.getElementById("minutes").innerHTML=minutes
128 |   document.getElementById("seconds").innerHTML=seconds
129 | 
130 | 
131 | 
132 | }, 1);
133 | </script>
134 | </html>
135 | 


--------------------------------------------------------------------------------
/currency_rates.html:
--------------------------------------------------------------------------------
1 | <!--Currency Converter widget by FreeCurrencyRates.com -->
2 | 
3 | <div id='gcw_mainF7jyuPtvo' class='gcw_mainF7jyuPtvo'></div>
4 | <a id='gcw_siteF7jyuPtvo' href='https://freecurrencyrates.com/en/'>FreeCurrencyRates.com</a>
5 | <script>function reloadF7jyuPtvo(){ var sc = document.getElementById('scF7jyuPtvo');if (sc) sc.parentNode.removeChild(sc);sc = document.createElement('script');sc.type = 'text/javascript';sc.charset = 'UTF-8';sc.async = true;sc.id='scF7jyuPtvo';sc.src = 'https://freecurrencyrates.com/en/widget-vertical-editable?iso=XUL-USD-EUR&df=1&p=F7jyuPtvo&v=fits&source=fcr&width=270&width_title=0&firstrowvalue=1&thm=dddddd,ffffff,dddddd,dddddd,444444,dddddd,ffffff,0073EA,000000&title=Currency%20Converter&tzo=420';var div = document.getElementById('gcw_mainF7jyuPtvo');div.parentNode.insertBefore(sc, div);} reloadF7jyuPtvo(); </script>
6 | <!-- put custom styles here: .gcw_mainF7jyuPtvo{}, .gcw_headerF7jyuPtvo{}, .gcw_ratesF7jyuPtvo{}, .gcw_sourceF7jyuPtvo{} -->
7 | <!--End of Currency Converter widget by FreeCurrencyRates.com -->
8 | 


--------------------------------------------------------------------------------
/currency_rates2.html:
--------------------------------------------------------------------------------
1 | <!--Currency Converter widget by FreeCurrencyRates.com -->
2 | 
3 | <div id='gcw_mainFBkEezI05' class='gcw_mainFBkEezI05'></div>
4 | <a id='gcw_siteFBkEezI05' href='https://freecurrencyrates.com/en/'>FreeCurrencyRates.com</a>
5 | <script>function reloadFBkEezI05(){ var sc = document.getElementById('scFBkEezI05');if (sc) sc.parentNode.removeChild(sc);sc = document.createElement('script');sc.type = 'text/javascript';sc.charset = 'UTF-8';sc.async = true;sc.id='scFBkEezI05';sc.src = 'https://freecurrencyrates.com/en/widget-horizontal-editable?iso=XUM-USD-EUR&df=1&p=FBkEezI05&v=fits&source=fcr&width=720&width_title=200&firstrowvalue=1&thm=dddddd,ffffff,dddddd,dddddd,444444,dddddd,ffffff,0073EA,000000&title=Currency%20Converter&tzo=420';var div = document.getElementById('gcw_mainFBkEezI05');div.parentNode.insertBefore(sc, div);} reloadFBkEezI05(); </script>
6 | <!-- put custom styles here: .gcw_mainFBkEezI05{}, .gcw_headerFBkEezI05{}, .gcw_ratesFBkEezI05{}, .gcw_sourceFBkEezI05{} -->
7 | <!--End of Currency Converter widget by FreeCurrencyRates.com -->
8 | 


--------------------------------------------------------------------------------
/financial-goals.html:
--------------------------------------------------------------------------------
 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 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
 7 | 
 8 | 
 9 |     <title>Document</title>
10 | 
11 | <style>
12 |     body{
13 |         background-color: white;
14 |     }
15 |     .box{
16 |     background-color: mediumseagreen;
17 |     width: 160px;
18 |     padding: 15px;
19 |     border-radius: 10px;
20 |     text-align: center;
21 |     color: aliceblue;
22 |     font-family: monospace;
23 |     display: inline-block;
24 |     margin: 10px;
25 | 
26 |     }
27 | 
28 |     .box2{
29 |         background-color: chocolate;
30 |         
31 |     }
32 |     .box:hover{
33 |         background-color: #E91E63;
34 |     }
35 | 
36 |     .header{
37 |         font-size: 50px;
38 |     font-family: fantasy;
39 |     }
40 |     .header2{
41 |         font-size: 40px;
42 |     }
43 | </style>
44 | 
45 | </head>
46 | <body>
47 |     <div class="box">
48 |         <div class="header">  <i class="fas fa-coins"></i><br>
49 |              300%    </div>
50 |         of sallary is available as a liqued asset
51 |     </div>
52 |     <div class="box">
53 |         <div class="header">  <i class="fas fa-funnel-dollar"></i><br>
54 |              30%    </div>
55 |         of sallary goes to savings (investment certificate)
56 |     </div>
57 |     <br>
58 |     <div class="box box2">
59 |         <div class="header header2">  <i class="fas fa-coins"></i><br>
60 |              24000 LE    </div>
61 |         Goal
62 |     </div>
63 |     <div class="box box2" >
64 |         <div class="header header2">  <i class="fas fa-funnel-dollar"></i><br>
65 |              5600 LE    </div>
66 |              per month
67 |         
68 |     </div>
69 | </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/globe/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2022 MUHAMMED RIYAS VP (https://codepen.io/muhammedriyas003/pen/qBBvMrV)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/globe/README.md:
--------------------------------------------------------------------------------
1 | # 3D globe
2 | 
3 | A Pen created on CodePen.io. Original URL: [https://codepen.io/muhammedriyas003/pen/qBBvMrV](https://codepen.io/muhammedriyas003/pen/qBBvMrV).
4 | 
5 | a simple 3D globe using html and css only


--------------------------------------------------------------------------------
/globe/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - 3D globe</title>
 6 |   <link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <!DOCTYPE html>
12 | <html lang="en">
13 | <head>
14 |   <meta charset="UTF-8">
15 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
17 |   <title>Document</title>
18 | </head>
19 | <body>
20 |   <div class="globe">
21 |     <div class="go"></div>
22 |     <div class="hand"></div>
23 |      <div class="hand1"></div>
24 |   </div>
25 | </body>
26 | </html>
27 | <!-- partial -->
28 |   
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/globe/style.css:
--------------------------------------------------------------------------------
 1 | .globe{
 2 |   position: relative;
 3 |   height: 200px;
 4 |   width: 200px;
 5 |   
 6 | }
 7 | .go{
 8 |   position: absolute;
 9 |   height: inherit;
10 |   width: inherit;
11 |   background: url("https://maprepublic.com/wp-content/uploads/2017/05/kanawa-world-map-large.jpg");
12 |   border-radius: 50%;
13 |   box-shadow: inset 25px 0px 35px 3px black;
14 |   background-size: 350px;
15 |   animation-name: rotate;
16 |   animation-duration: 5s;
17 |   animation-iteration-count: infinite;
18 |   animation-timing-function: linear;
19 |   transform: rotate(-10deg);
20 | }
21 | 
22 | .hand{
23 |   position: absolute;
24 |   height: 10px;
25 |   width: 120px;
26 |   background: black;
27 |   border-top-right-radius: 50%;
28 |   border-top-left-radius: 50%;
29 |   transform: translatex(41px) translatey(205px)
30 | }
31 | .hand1{
32 |   position: absolute;
33 |   height: 5px;
34 |   width: 10px;
35 |   background: black;
36 |   transform: translatex(95px) translatey(200px)
37 | }
38 | 
39 | @keyframes rotate {
40 |   from{ background-position: 0px;}
41 |   to{ background-position: 350px;}
42 | }
43 | 


--------------------------------------------------------------------------------
/greetings-date-clock.html:
--------------------------------------------------------------------------------
  1 | <!-- original : https://codepen.io/SeanNorton/pen/LWBXQL -->
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Bebas+Neue" rel="stylesheet">
  6 | 
  7 |     <meta charset="UTF-8">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 |     <title>greeting2</title>
 10 | 
 11 |     <style>
 12 | 
 13 |         /*CSS RESETS*/
 14 | 
 15 | body{
 16 |     background-color: #fff;
 17 |     line-height: 1.6;
 18 | 
 19 | }
 20 | 
 21 | h1 {
 22 |     margin-top: 0;
 23 | }
 24 | 
 25 | 
 26 | /*CSS START*/
 27 | 
 28 | .full-table {
 29 |     display: table;
 30 |     height: 100%;
 31 |     width: 100%;
 32 | }
 33 | 
 34 | .table-cell {
 35 |     display: table-cell;
 36 |     vertical-align: middle;
 37 |     text-align: center;
 38 | }
 39 | 
 40 | .card {
 41 |     padding: 10px 25px 10px 25px;
 42 |     border-radius: 10px;
 43 |     background: #553c4e;
 44 |     width: 85vw;
 45 |     color: #fff;
 46 |     display: inline-block;
 47 |     box-shadow: 2px 2px 1px 0px #330835;
 48 | }
 49 | 
 50 | .card:hover {
 51 |     margin-top: 2px;
 52 |     box-shadow: none;
 53 | }
 54 | 
 55 | .clock {
 56 |     display: inline;
 57 |     font-family: 'Bebas Neue', cursive;
 58 |     font-size: 2em;
 59 |    
 60 | }
 61 | 
 62 | .time {
 63 |     display: inline;
 64 |     min-width: 37px;
 65 | }
 66 | 
 67 | .colon {
 68 |     font-size: 1.1em;
 69 |     display: inline-block;
 70 | }
 71 | 
 72 | .date {
 73 |     display: inline;
 74 |     min-width: 162px;
 75 |     font-family: 'Bebas Neue', cursive;
 76 |     font-size: 2em;
 77 |     padding-right: 30px;
 78 | }
 79 | .greet{
 80 |     
 81 |     display:inline;
 82 |     font-family: 'Dancing Script', cursive;
 83 |     font-size: 2rem;
 84 |      padding-right: 30px;
 85 | }
 86 | 
 87 |     </style>
 88 | </head>
 89 | <body>
 90 |     <link href="https://fonts.googleapis.com/css?family=Lobster|Roboto:400,700" rel="stylesheet">
 91 | 
 92 | <div class="full-table">
 93 |   <div class="table-cell">
 94 |     
 95 |     <div class="card">
 96 |         <div class="greet" id="greet"></div>
 97 |       <div class="date" id="date"></div>
 98 |       <div class="clock">
 99 |         <div class="time" id="hour"></div>
100 |         <div class="colon">:</div>
101 |         <div class="time" id="min"></div>
102 |         <div class="colon">:</div>
103 |         <div class="time" id="sec"></div>
104 |       </div>
105 |     </div>
106 |     
107 |   </div>
108 | </div>
109 | 
110 | <script>
111 |     function date() {
112 | var today = new Date();
113 | document.getElementById('date').innerHTML = today.toDateString();
114 | }
115 | 
116 | 
117 | function clock() {
118 | var today = new Date();
119 | var hour = zeros(twelveHour(today.getHours()));
120 | var minutes = zeros(today.getMinutes());
121 | var seconds = zeros(today.getSeconds());
122 | if(today.getHours() >=12){
123 |     seconds+=" pm"
124 | }
125 | else{
126 |     seconds+=" am"
127 | }
128 | hrs = today.getHours();
129 | if (hrs < 12)
130 |         greet = 'Good Morning  ';
131 |     else if (hrs >= 12 && hrs <= 17)
132 |         greet = 'Good Afternoon ';
133 |     else if (hrs >= 17 && hrs <= 24)
134 |         greet = 'Good Evening  ';
135 | // console.log(today.toLocaleTimeString());
136 | document.getElementById('greet').innerHTML = greet;
137 | document.getElementById('hour').innerHTML = hour;
138 | document.getElementById('min').innerHTML = minutes;
139 | document.getElementById('sec').innerHTML = seconds;
140 | }
141 | 
142 | function twelveHour(hour) {
143 | if (hour > 12) {
144 |     return hour -= 12 
145 | } else if (hour === 0) {
146 |     return hour = 12;
147 | } else {
148 |     return hour
149 | }
150 | }
151 |     
152 | // adds zero infront of single digit number
153 | function zeros(num) {
154 | if (num < 10) {
155 |     num = '0' + num
156 | };
157 | return num;
158 | }
159 | 
160 | function dateTime() {
161 | date();
162 | clock();
163 | setTimeout(dateTime, 500);
164 | }
165 | 
166 | dateTime()
167 | // END
168 | </script>
169 | 
170 | </body>
171 | </html>
172 | 


--------------------------------------------------------------------------------
/greetings-languages/french.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Greetings</title>
  8 | 
  9 |     <style>
 10 | 
 11 | 
 12 |         body{
 13 |             font-variant-caps: all-petite-caps;
 14 | 
 15 | 
 16 |         }
 17 | 
 18 |         .widget {
 19 |             padding: 5px 5px ;
 20 |             color: #35459b;
 21 |             display: flex;
 22 |             justify-content:center;
 23 |             align-items:center;
 24 |             flex-direction: column;
 25 |             max-width: 95%;
 26 |             margin: auto;
 27 |             border: 3px solid #35459b;
 28 |             border-radius: 5px;
 29 |             box-shadow: 2px 2px 1px 0px #35459b;
 30 | 
 31 |         }
 32 | 
 33 |            
 34 |         .greet{
 35 |             font-size: 3em;
 36 |         }
 37 | 
 38 |         .date {
 39 |       
 40 |             font-family: monospace;
 41 |             font-size: 2em;
 42 |         }
 43 | 
 44 |         .clock {
 45 |             font-family: monospace;
 46 |             font-size: 2em;
 47 |         }
 48 | 
 49 |         .time {
 50 |             display: inline-block;
 51 |             min-width: 20px;
 52 |         }
 53 | 
 54 |         .colon {
 55 |             font-size: 1em;
 56 |             display: inline-block;
 57 |         }
 58 | 
 59 |      
 60 | 
 61 | 
 62 | 
 63 | 
 64 |     </style>
 65 | </head>
 66 | <body>
 67 | 
 68 | 
 69 | 
 70 | 
 71 | <div class="container>">
 72 |     <div class="widget">
 73 | 
 74 |             <div class="greet" id="greet"></div>
 75 | 
 76 |                 <div class="date" id="date"></div>
 77 |                 <div class="clock">
 78 |                     <div class="time" id="hour"></div>
 79 |                     <div class="colon">:</div>
 80 |                     <div class="time" id="min"></div>
 81 |                     <div class="colon">:</div>
 82 |                     <div class="time" id="sec"></div>
 83 |                 </div>
 84 |            
 85 | 
 86 |         
 87 | 
 88 |     </div>
 89 | </div>
 90 |         
 91 | 
 92 | 
 93 | 
 94 | <script>
 95 | 
 96 | function dispalyGreetings(today){
 97 |         hrs = today.getHours();
 98 |         name=""
 99 |         if (hrs < 12)
100 |             greet = 'Bonjour  '+name;
101 |         else if (hrs >= 12 && hrs <= 17)
102 |             greet = 'Bonne Après-Midi '+name;
103 |         else if (hrs >= 17 && hrs <= 24)
104 |             greet = 'Bonsoir  '+name;
105 |         document.getElementById('greet').innerHTML = greet;
106 | 
107 |     }
108 | 
109 |     function dispalyDate(today) {  
110 |        
111 |         const days = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
112 |         const monthNames = ["Janvier", "février", "marsr", "avrilr", "mair", "juin",
113 |    "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
114 | ];
115 | 
116 |         var dayName = days[today.getDay()];
117 |         var monthName = monthNames[today.getMonth()];
118 |         var date = today.getDate();
119 |         var year = today.getFullYear();
120 |         document.getElementById('date').innerHTML =dayName+", "+monthName+" "+date+" "+year;
121 | 
122 |     }
123 | 
124 | 
125 |     function dispalyClock(today) {
126 | 
127 |         var hour = padZeros(today.getHours());
128 |         var minutes = padZeros(today.getMinutes());
129 |         var seconds = padZeros(today.getSeconds());
130 |        
131 |        
132 |         document.getElementById('hour').innerHTML = hour;
133 |         document.getElementById('min').innerHTML = minutes;
134 |         document.getElementById('sec').innerHTML = seconds;
135 |     }
136 | 
137 | 
138 |     function padZeros(num) {
139 |         if (num < 10) {
140 |             num = '0' + num
141 |         };
142 |         return num;
143 |     }
144 | 
145 |     function dispalyWidget() {
146 |         var today = new Date();
147 |         dispalyGreetings(today);
148 |         dispalyDate(today);
149 |         dispalyClock(today);
150 |         setTimeout(dispalyWidget, 500);
151 |     }
152 | 
153 |     dispalyWidget()
154 | 
155 | </script>
156 | 
157 | </body>
158 | </html>
159 | 


--------------------------------------------------------------------------------
/greetings-people/greetings-Nightmoers.html:
--------------------------------------------------------------------------------
  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>Greetings</title>
  7 | 
  8 |     <style>
  9 | 
 10 | 
 11 |         body{
 12 |             font-variant-caps: all-petite-caps;
 13 | 
 14 | 
 15 |         }
 16 | 
 17 |         .widget {
 18 |             padding: 5px 5px ;
 19 |             color: #000000;
 20 |             display: flex;
 21 |             justify-content:center;
 22 |             align-items:center;
 23 |             flex-direction: column;
 24 |             max-width: 95%;
 25 |             margin: auto;
 26 |             border: 3px solid #000000;
 27 |             border-radius: 5px;
 28 |             box-shadow: 2px 2px 1px 0px #000000;
 29 | 
 30 |         }
 31 | 
 32 |            
 33 |         .greet{
 34 |             font-size: 3em;
 35 |         }
 36 | 
 37 |         .date {
 38 |       
 39 |             font-family: monospace;
 40 |             font-size: 2em;
 41 |         }
 42 | 
 43 |         .clock {
 44 |             font-family: monospace;
 45 |             font-size: 2em;
 46 |         }
 47 | 
 48 |         .time {
 49 |             display: inline-block;
 50 |             min-width: 20px;
 51 |         }
 52 | 
 53 |         .colon {
 54 |             font-size: 1em;
 55 |             display: inline-block;
 56 |         }
 57 | 
 58 |      
 59 | 
 60 | 
 61 | 
 62 | 
 63 |     </style>
 64 | </head>
 65 | <body>
 66 | 
 67 | 
 68 | 
 69 | 
 70 | <div class="container>">
 71 |     <div class="widget">
 72 | 
 73 |             <div class="greet" id="greet"></div>
 74 | 
 75 |                 <div class="date" id="date"></div>
 76 |                 <div class="clock">
 77 |                     <div class="time" id="hour"></div>
 78 |                     <div class="colon">:</div>
 79 |                     <div class="time" id="min"></div>
 80 |                     <div class="colon">:</div>
 81 |                     <div class="time" id="sec"></div>
 82 |                 </div>
 83 |            
 84 | 
 85 |         
 86 | 
 87 |     </div>
 88 | </div>
 89 |         
 90 | 
 91 | 
 92 | 
 93 | <script>
 94 | 
 95 | function dispalyGreetings(today){
 96 |         hrs = today.getHours();
 97 |         name="Nightmoers"
 98 |         if (hrs < 12)
 99 |             greet = 'Good Morning  '+name;
100 |         else if (hrs >= 12 && hrs <= 17)
101 |             greet = 'Good Afternoon '+name;
102 |         else if (hrs >= 17 && hrs <= 24)
103 |             greet = 'Good Evening  '+name;
104 |         document.getElementById('greet').innerHTML = greet;
105 | 
106 |     }
107 | 
108 |     function dispalyDate(today) {  
109 |        
110 |         const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
111 |         const monthNames = ["January", "February", "March", "April", "May", "June",
112 |   "July", "August", "September", "October", "November", "December"
113 | ];
114 | 
115 |         var dayName = days[today.getDay()];
116 |         var monthName = monthNames[today.getMonth()];
117 |         var date = today.getDate();
118 |         var year = today.getFullYear();
119 |         document.getElementById('date').innerHTML =dayName+", "+monthName+" "+date+" "+year;
120 | 
121 |     }
122 | 
123 | 
124 |     function dispalyClock(today) {
125 | 
126 |         var hour = padZeros(twelveHour(today.getHours()));
127 |         var minutes = padZeros(today.getMinutes());
128 |         var seconds = padZeros(today.getSeconds());
129 |        
130 |         if(today.getHours() >=12){
131 |             seconds+=" pm"
132 |         }
133 |         else{
134 |             seconds+=" am"
135 |         }
136 |        
137 |         document.getElementById('hour').innerHTML = hour;
138 |         document.getElementById('min').innerHTML = minutes;
139 |         document.getElementById('sec').innerHTML = seconds;
140 |     }
141 | 
142 |     function twelveHour(hour) {
143 |         if (hour > 12) {
144 |             return hour -= 12
145 |         } else if (hour === 0) {
146 |             return hour = 12;
147 |         } else {
148 |             return hour
149 |         }
150 |     }
151 |     function padZeros(num) {
152 |         if (num < 10) {
153 |             num = '0' + num
154 |         };
155 |         return num;
156 |     }
157 | 
158 |     function dispalyWidget() {
159 |         var today = new Date();
160 |         dispalyGreetings(today);
161 |         dispalyDate(today);
162 |         dispalyClock(today);
163 |         setTimeout(dispalyWidget, 500);
164 |     }
165 | 
166 |     dispalyWidget()
167 | 
168 | </script>
169 | 
170 | </body>
171 | </html>
172 | 


--------------------------------------------------------------------------------
/greetings-people/greetings-diane.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Greetings</title>
  8 | 
  9 |     <style>
 10 | 
 11 | 
 12 |         body{
 13 |             font-variant-caps: all-petite-caps;
 14 | 
 15 | 
 16 |         }
 17 | 
 18 |         .widget {
 19 |             padding: 5px 5px ;
 20 |             color: #000000;
 21 |             display: flex;
 22 |             justify-content:center;
 23 |             align-items:center;
 24 |             flex-direction: column;
 25 |             max-width: 95%;
 26 |             margin: auto;
 27 |             border: 3px solid #000000;
 28 |             border-radius: 5px;
 29 |             box-shadow: 2px 2px 1px 0px #000000;
 30 | 
 31 |         }
 32 | 
 33 |            
 34 |         .greet{
 35 |             font-size: 3em;
 36 |         }
 37 | 
 38 |         .date {
 39 |       
 40 |             font-family: monospace;
 41 |             font-size: 2em;
 42 |         }
 43 | 
 44 |         .clock {
 45 |             font-family: monospace;
 46 |             font-size: 2em;
 47 |         }
 48 | 
 49 |         .time {
 50 |             display: inline-block;
 51 |             min-width: 20px;
 52 |         }
 53 | 
 54 |         .colon {
 55 |             font-size: 1em;
 56 |             display: inline-block;
 57 |         }
 58 | 
 59 |      
 60 | 
 61 | 
 62 | 
 63 | 
 64 |     </style>
 65 | </head>
 66 | <body>
 67 | 
 68 | 
 69 | 
 70 | 
 71 | <div class="container>">
 72 |     <div class="widget">
 73 | 
 74 |             <div class="greet" id="greet"></div>
 75 | 
 76 |                 <div class="date" id="date"></div>
 77 |                 <div class="clock">
 78 |                     <div class="time" id="hour"></div>
 79 |                     <div class="colon">:</div>
 80 |                     <div class="time" id="min"></div>
 81 |                     <div class="colon">:</div>
 82 |                     <div class="time" id="sec"></div>
 83 |                 </div>
 84 |            
 85 | 
 86 |         
 87 | 
 88 |     </div>
 89 | </div>
 90 |         
 91 | 
 92 | 
 93 | 
 94 | <script>
 95 | 
 96 | function dispalyGreetings(today){
 97 |         hrs = today.getHours();
 98 |         name="Diane"
 99 |         if (hrs < 12)
100 |             greet = 'Good Morning  '+name;
101 |         else if (hrs >= 12 && hrs <= 17)
102 |             greet = 'Good Afternoon '+name;
103 |         else if (hrs >= 17 && hrs <= 24)
104 |             greet = 'Good Evening  '+name;
105 |         document.getElementById('greet').innerHTML = greet;
106 | 
107 |     }
108 | 
109 |     function dispalyDate(today) {  
110 |        
111 |         const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
112 |         const monthNames = ["January", "February", "March", "April", "May", "June",
113 |   "July", "August", "September", "October", "November", "December"
114 | ];
115 | 
116 |         var dayName = days[today.getDay()];
117 |         var monthName = monthNames[today.getMonth()];
118 |         var date = today.getDate();
119 |         var year = today.getFullYear();
120 |         document.getElementById('date').innerHTML =dayName+", "+monthName+" "+date+" "+year;
121 | 
122 |     }
123 | 
124 | 
125 |     function dispalyClock(today) {
126 | 
127 |         var hour = padZeros(twelveHour(today.getHours()));
128 |         var minutes = padZeros(today.getMinutes());
129 |         var seconds = padZeros(today.getSeconds());
130 |        
131 |         if(today.getHours() >=12){
132 |             seconds+=" pm"
133 |         }
134 |         else{
135 |             seconds+=" am"
136 |         }
137 |        
138 |         document.getElementById('hour').innerHTML = hour;
139 |         document.getElementById('min').innerHTML = minutes;
140 |         document.getElementById('sec').innerHTML = seconds;
141 |     }
142 | 
143 |     function twelveHour(hour) {
144 |         if (hour > 12) {
145 |             return hour -= 12
146 |         } else if (hour === 0) {
147 |             return hour = 12;
148 |         } else {
149 |             return hour
150 |         }
151 |     }
152 |     function padZeros(num) {
153 |         if (num < 10) {
154 |             num = '0' + num
155 |         };
156 |         return num;
157 |     }
158 | 
159 |     function dispalyWidget() {
160 |         var today = new Date();
161 |         dispalyGreetings(today);
162 |         dispalyDate(today);
163 |         dispalyClock(today);
164 |         setTimeout(dispalyWidget, 500);
165 |     }
166 | 
167 |     dispalyWidget()
168 | 
169 | </script>
170 | 
171 | </body>
172 | </html>
173 | 


--------------------------------------------------------------------------------
/greetings-people/greetings-mahmoud.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Greetings</title>
  8 | 
  9 |     <style>
 10 | 
 11 | 
 12 |         body{
 13 |             font-variant-caps: all-petite-caps;
 14 | 
 15 | 
 16 |         }
 17 | 
 18 |         .widget {
 19 |             padding: 5px 5px ;
 20 |             color: #000000;
 21 |             display: flex;
 22 |             justify-content:center;
 23 |             align-items:center;
 24 |             flex-direction: column;
 25 |             max-width: 95%;
 26 |             margin: auto;
 27 |             border: 3px solid #000000;
 28 |             border-radius: 5px;
 29 |             box-shadow: 2px 2px 1px 0px #000000;
 30 | 
 31 |         }
 32 | 
 33 |            
 34 |         .greet{
 35 |             font-size: 3em;
 36 |         }
 37 | 
 38 |         .date {
 39 |       
 40 |             font-family: monospace;
 41 |             font-size: 2em;
 42 |         }
 43 | 
 44 |         .clock {
 45 |             font-family: monospace;
 46 |             font-size: 2em;
 47 |         }
 48 | 
 49 |         .time {
 50 |             display: inline-block;
 51 |             min-width: 20px;
 52 |         }
 53 | 
 54 |         .colon {
 55 |             font-size: 1em;
 56 |             display: inline-block;
 57 |         }
 58 | 
 59 |      
 60 | 
 61 | 
 62 | 
 63 | 
 64 |     </style>
 65 | </head>
 66 | <body>
 67 | 
 68 | 
 69 | 
 70 | 
 71 | <div class="container>">
 72 |     <div class="widget">
 73 | 
 74 |             <div class="greet" id="greet"></div>
 75 | 
 76 |                 <div class="date" id="date"></div>
 77 |                 <div class="clock">
 78 |                     <div class="time" id="hour"></div>
 79 |                     <div class="colon">:</div>
 80 |                     <div class="time" id="min"></div>
 81 |                     <div class="colon">:</div>
 82 |                     <div class="time" id="sec"></div>
 83 |                 </div>
 84 |            
 85 | 
 86 |         
 87 | 
 88 |     </div>
 89 | </div>
 90 |         
 91 | 
 92 | 
 93 | 
 94 | <script>
 95 | 
 96 | function dispalyGreetings(today){
 97 |         hrs = today.getHours();
 98 |         name="Mahmoud"
 99 |         if (hrs < 12)
100 |             greet = 'Good Morning  '+name;
101 |         else if (hrs >= 12 && hrs <= 17)
102 |             greet = 'Good Afternoon '+name;
103 |         else if (hrs >= 17 && hrs <= 24)
104 |             greet = 'Good Evening  '+name;
105 |         document.getElementById('greet').innerHTML = greet;
106 | 
107 |     }
108 | 
109 |     function dispalyDate(today) {  
110 |        
111 |         const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
112 |         const monthNames = ["January", "February", "March", "April", "May", "June",
113 |   "July", "August", "September", "October", "November", "December"
114 | ];
115 | 
116 |         var dayName = days[today.getDay()];
117 |         var monthName = monthNames[today.getMonth()];
118 |         var date = today.getDate();
119 |         var year = today.getFullYear();
120 |         document.getElementById('date').innerHTML =dayName+", "+monthName+" "+date+" "+year;
121 | 
122 |     }
123 | 
124 | 
125 |     function dispalyClock(today) {
126 | 
127 |         var hour = padZeros(twelveHour(today.getHours()));
128 |         var minutes = padZeros(today.getMinutes());
129 |         var seconds = padZeros(today.getSeconds());
130 |        
131 |         if(today.getHours() >=12){
132 |             seconds+=" pm"
133 |         }
134 |         else{
135 |             seconds+=" am"
136 |         }
137 |        
138 |         document.getElementById('hour').innerHTML = hour;
139 |         document.getElementById('min').innerHTML = minutes;
140 |         document.getElementById('sec').innerHTML = seconds;
141 |     }
142 | 
143 |     function twelveHour(hour) {
144 |         if (hour > 12) {
145 |             return hour -= 12
146 |         } else if (hour === 0) {
147 |             return hour = 12;
148 |         } else {
149 |             return hour
150 |         }
151 |     }
152 |     function padZeros(num) {
153 |         if (num < 10) {
154 |             num = '0' + num
155 |         };
156 |         return num;
157 |     }
158 | 
159 |     function dispalyWidget() {
160 |         var today = new Date();
161 |         dispalyGreetings(today);
162 |         dispalyDate(today);
163 |         dispalyClock(today);
164 |         setTimeout(dispalyWidget, 500);
165 |     }
166 | 
167 |     dispalyWidget()
168 | 
169 | </script>
170 | 
171 | </body>
172 | </html>
173 | 


--------------------------------------------------------------------------------
/greetings-people/greetings-mark.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Greetings</title>
  8 | 
  9 |     <style>
 10 | 
 11 | 
 12 |         body{
 13 |             font-variant-caps: all-petite-caps;
 14 | 
 15 | 
 16 |         }
 17 | 
 18 |         .widget {
 19 |             padding: 5px 5px ;
 20 |             color: #000000;
 21 |             display: flex;
 22 |             justify-content:center;
 23 |             align-items:center;
 24 |             flex-direction: column;
 25 |             max-width: 95%;
 26 |             margin: auto;
 27 |             border: 3px solid #000000;
 28 |             border-radius: 5px;
 29 |             box-shadow: 2px 2px 1px 0px #000000;
 30 | 
 31 |         }
 32 | 
 33 |            
 34 |         .greet{
 35 |             font-size: 3em;
 36 |         }
 37 | 
 38 |         .date {
 39 |       
 40 |             font-family: monospace;
 41 |             font-size: 2em;
 42 |         }
 43 | 
 44 |         .clock {
 45 |             font-family: monospace;
 46 |             font-size: 2em;
 47 |         }
 48 | 
 49 |         .time {
 50 |             display: inline-block;
 51 |             min-width: 20px;
 52 |         }
 53 | 
 54 |         .colon {
 55 |             font-size: 1em;
 56 |             display: inline-block;
 57 |         }
 58 | 
 59 |      
 60 | 
 61 | 
 62 | 
 63 | 
 64 |     </style>
 65 | </head>
 66 | <body>
 67 | 
 68 | 
 69 | 
 70 | 
 71 | <div class="container>">
 72 |     <div class="widget">
 73 | 
 74 |             <div class="greet" id="greet"></div>
 75 | 
 76 |                 <div class="date" id="date"></div>
 77 |                 <div class="clock">
 78 |                     <div class="time" id="hour"></div>
 79 |                     <div class="colon">:</div>
 80 |                     <div class="time" id="min"></div>
 81 |                     <div class="colon">:</div>
 82 |                     <div class="time" id="sec"></div>
 83 |                 </div>
 84 |            
 85 | 
 86 |         
 87 | 
 88 |     </div>
 89 | </div>
 90 |         
 91 | 
 92 | 
 93 | 
 94 | <script>
 95 | 
 96 | function dispalyGreetings(today){
 97 |         hrs = today.getHours();
 98 |         name="Mark"
 99 |         if (hrs < 12)
100 |             greet = 'Good Morning  '+name;
101 |         else if (hrs >= 12 && hrs <= 17)
102 |             greet = 'Good Afternoon '+name;
103 |         else if (hrs >= 17 && hrs <= 24)
104 |             greet = 'Good Evening  '+name;
105 |         document.getElementById('greet').innerHTML = greet;
106 | 
107 |     }
108 | 
109 |     function dispalyDate(today) {  
110 |        
111 |         const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
112 |         const monthNames = ["January", "February", "March", "April", "May", "June",
113 |   "July", "August", "September", "October", "November", "December"
114 | ];
115 | 
116 |         var dayName = days[today.getDay()];
117 |         var monthName = monthNames[today.getMonth()];
118 |         var date = today.getDate();
119 |         var year = today.getFullYear();
120 |         document.getElementById('date').innerHTML =dayName+", "+monthName+" "+date+" "+year;
121 | 
122 |     }
123 | 
124 | 
125 |     function dispalyClock(today) {
126 | 
127 |         var hour = padZeros(twelveHour(today.getHours()));
128 |         var minutes = padZeros(today.getMinutes());
129 |         var seconds = padZeros(today.getSeconds());
130 |        
131 |         if(today.getHours() >=12){
132 |             seconds+=" pm"
133 |         }
134 |         else{
135 |             seconds+=" am"
136 |         }
137 |        
138 |         document.getElementById('hour').innerHTML = hour;
139 |         document.getElementById('min').innerHTML = minutes;
140 |         document.getElementById('sec').innerHTML = seconds;
141 |     }
142 | 
143 |     function twelveHour(hour) {
144 |         if (hour > 12) {
145 |             return hour -= 12
146 |         } else if (hour === 0) {
147 |             return hour = 12;
148 |         } else {
149 |             return hour
150 |         }
151 |     }
152 |     function padZeros(num) {
153 |         if (num < 10) {
154 |             num = '0' + num
155 |         };
156 |         return num;
157 |     }
158 | 
159 |     function dispalyWidget() {
160 |         var today = new Date();
161 |         dispalyGreetings(today);
162 |         dispalyDate(today);
163 |         dispalyClock(today);
164 |         setTimeout(dispalyWidget, 500);
165 |     }
166 | 
167 |     dispalyWidget()
168 | 
169 | </script>
170 | 
171 | </body>
172 | </html>
173 | 


--------------------------------------------------------------------------------
/greetings-people/greetings-rory.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Greetings</title>
  8 | 
  9 |     <style>
 10 | 
 11 | 
 12 |         body{
 13 |             font-variant-caps: all-petite-caps;
 14 | 
 15 | 
 16 |         }
 17 | 
 18 |         .widget {
 19 |             padding: 5px 5px ;
 20 |             color: #000000;
 21 |             display: flex;
 22 |             justify-content:center;
 23 |             align-items:center;
 24 |             flex-direction: column;
 25 |             max-width: 95%;
 26 |             margin: auto;
 27 |             border: 3px solid #000000;
 28 |             border-radius: 5px;
 29 |             box-shadow: 2px 2px 1px 0px #000000;
 30 | 
 31 |         }
 32 | 
 33 |            
 34 |         .greet{
 35 |             font-size: 3em;
 36 |         }
 37 | 
 38 |         .date {
 39 |       
 40 |             font-family: monospace;
 41 |             font-size: 2em;
 42 |         }
 43 | 
 44 |         .clock {
 45 |             font-family: monospace;
 46 |             font-size: 2em;
 47 |         }
 48 | 
 49 |         .time {
 50 |             display: inline-block;
 51 |             min-width: 20px;
 52 |         }
 53 | 
 54 |         .colon {
 55 |             font-size: 1em;
 56 |             display: inline-block;
 57 |         }
 58 | 
 59 |      
 60 | 
 61 | 
 62 | 
 63 | 
 64 |     </style>
 65 | </head>
 66 | <body>
 67 | 
 68 | 
 69 | 
 70 | 
 71 | <div class="container>">
 72 |     <div class="widget">
 73 | 
 74 |             <div class="greet" id="greet"></div>
 75 | 
 76 |                 <div class="date" id="date"></div>
 77 |                 <div class="clock">
 78 |                     <div class="time" id="hour"></div>
 79 |                     <div class="colon">:</div>
 80 |                     <div class="time" id="min"></div>
 81 |                     <div class="colon">:</div>
 82 |                     <div class="time" id="sec"></div>
 83 |                 </div>
 84 |            
 85 | 
 86 |         
 87 | 
 88 |     </div>
 89 | </div>
 90 |         
 91 | 
 92 | 
 93 | 
 94 | <script>
 95 | 
 96 | function dispalyGreetings(today){
 97 |         hrs = today.getHours();
 98 |         name="Rory"
 99 |         if (hrs < 12)
100 |             greet = 'Good Morning  '+name;
101 |         else if (hrs >= 12 && hrs <= 17)
102 |             greet = 'Good Afternoon '+name;
103 |         else if (hrs >= 17 && hrs <= 24)
104 |             greet = 'Good Evening  '+name;
105 |         document.getElementById('greet').innerHTML = greet;
106 | 
107 |     }
108 | 
109 |     function dispalyDate(today) {  
110 |        
111 |         const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
112 |         const monthNames = ["January", "February", "March", "April", "May", "June",
113 |   "July", "August", "September", "October", "November", "December"
114 | ];
115 | 
116 |         var dayName = days[today.getDay()];
117 |         var monthName = monthNames[today.getMonth()];
118 |         var date = today.getDate();
119 |         var year = today.getFullYear();
120 |         document.getElementById('date').innerHTML =dayName+", "+monthName+" "+date+" "+year;
121 | 
122 |     }
123 | 
124 | 
125 |     function dispalyClock(today) {
126 | 
127 |         var hour = padZeros(twelveHour(today.getHours()));
128 |         var minutes = padZeros(today.getMinutes());
129 |         var seconds = padZeros(today.getSeconds());
130 |        
131 |         if(today.getHours() >=12){
132 |             seconds+=" pm"
133 |         }
134 |         else{
135 |             seconds+=" am"
136 |         }
137 |        
138 |         document.getElementById('hour').innerHTML = hour;
139 |         document.getElementById('min').innerHTML = minutes;
140 |         document.getElementById('sec').innerHTML = seconds;
141 |     }
142 | 
143 |     function twelveHour(hour) {
144 |         if (hour > 12) {
145 |             return hour -= 12
146 |         } else if (hour === 0) {
147 |             return hour = 12;
148 |         } else {
149 |             return hour
150 |         }
151 |     }
152 |     function padZeros(num) {
153 |         if (num < 10) {
154 |             num = '0' + num
155 |         };
156 |         return num;
157 |     }
158 | 
159 |     function dispalyWidget() {
160 |         var today = new Date();
161 |         dispalyGreetings(today);
162 |         dispalyDate(today);
163 |         dispalyClock(today);
164 |         setTimeout(dispalyWidget, 500);
165 |     }
166 | 
167 |     dispalyWidget()
168 | 
169 | </script>
170 | 
171 | </body>
172 | </html>
173 | 


--------------------------------------------------------------------------------
/greetings-people/greetings-sarita.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Greetings</title>
  8 | 
  9 |     <style>
 10 | 
 11 | 
 12 |         body{
 13 |             font-variant-caps: all-petite-caps;
 14 | 
 15 | 
 16 |         }
 17 | 
 18 |         .widget {
 19 |             padding: 5px 5px ;
 20 |             color: #000000;
 21 |             display: flex;
 22 |             justify-content:center;
 23 |             align-items:center;
 24 |             flex-direction: column;
 25 |             max-width: 95%;
 26 |             margin: auto;
 27 |             border: 3px solid #000000;
 28 |             border-radius: 5px;
 29 |             box-shadow: 2px 2px 1px 0px #000000;
 30 | 
 31 |         }
 32 | 
 33 |            
 34 |         .greet{
 35 |             font-size: 3em;
 36 |         }
 37 | 
 38 |         .date {
 39 |       
 40 |             font-family: monospace;
 41 |             font-size: 2em;
 42 |         }
 43 | 
 44 |         .clock {
 45 |             font-family: monospace;
 46 |             font-size: 2em;
 47 |         }
 48 | 
 49 |         .time {
 50 |             display: inline-block;
 51 |             min-width: 20px;
 52 |         }
 53 | 
 54 |         .colon {
 55 |             font-size: 1em;
 56 |             display: inline-block;
 57 |         }
 58 | 
 59 |      
 60 | 
 61 | 
 62 | 
 63 | 
 64 |     </style>
 65 | </head>
 66 | <body>
 67 | 
 68 | 
 69 | 
 70 | 
 71 | <div class="container>">
 72 |     <div class="widget">
 73 | 
 74 |             <div class="greet" id="greet"></div>
 75 | 
 76 |                 <div class="date" id="date"></div>
 77 |                 <div class="clock">
 78 |                     <div class="time" id="hour"></div>
 79 |                     <div class="colon">:</div>
 80 |                     <div class="time" id="min"></div>
 81 |                     <div class="colon">:</div>
 82 |                     <div class="time" id="sec"></div>
 83 |                 </div>
 84 |            
 85 | 
 86 |         
 87 | 
 88 |     </div>
 89 | </div>
 90 |         
 91 | 
 92 | 
 93 | 
 94 | <script>
 95 | 
 96 | function dispalyGreetings(today){
 97 |         hrs = today.getHours();
 98 |         name="Sarita"
 99 |         if (hrs < 12)
100 |             greet = 'Good Morning  '+name;
101 |         else if (hrs >= 12 && hrs <= 17)
102 |             greet = 'Good Afternoon '+name;
103 |         else if (hrs >= 17 && hrs <= 24)
104 |             greet = 'Good Evening  '+name;
105 |         document.getElementById('greet').innerHTML = greet;
106 | 
107 |     }
108 | 
109 |     function dispalyDate(today) {  
110 |        
111 |         const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
112 |         const monthNames = ["January", "February", "March", "April", "May", "June",
113 |   "July", "August", "September", "October", "November", "December"
114 | ];
115 | 
116 |         var dayName = days[today.getDay()];
117 |         var monthName = monthNames[today.getMonth()];
118 |         var date = today.getDate();
119 |         var year = today.getFullYear();
120 |         document.getElementById('date').innerHTML =dayName+", "+monthName+" "+date+" "+year;
121 | 
122 |     }
123 | 
124 | 
125 |     function dispalyClock(today) {
126 | 
127 |         var hour = padZeros(twelveHour(today.getHours()));
128 |         var minutes = padZeros(today.getMinutes());
129 |         var seconds = padZeros(today.getSeconds());
130 |        
131 |         if(today.getHours() >=12){
132 |             seconds+=" pm"
133 |         }
134 |         else{
135 |             seconds+=" am"
136 |         }
137 |        
138 |         document.getElementById('hour').innerHTML = hour;
139 |         document.getElementById('min').innerHTML = minutes;
140 |         document.getElementById('sec').innerHTML = seconds;
141 |     }
142 | 
143 |     function twelveHour(hour) {
144 |         if (hour > 12) {
145 |             return hour -= 12
146 |         } else if (hour === 0) {
147 |             return hour = 12;
148 |         } else {
149 |             return hour
150 |         }
151 |     }
152 |     function padZeros(num) {
153 |         if (num < 10) {
154 |             num = '0' + num
155 |         };
156 |         return num;
157 |     }
158 | 
159 |     function dispalyWidget() {
160 |         var today = new Date();
161 |         dispalyGreetings(today);
162 |         dispalyDate(today);
163 |         dispalyClock(today);
164 |         setTimeout(dispalyWidget, 500);
165 |     }
166 | 
167 |     dispalyWidget()
168 | 
169 | </script>
170 | 
171 | </body>
172 | </html>
173 | 


--------------------------------------------------------------------------------
/images/gallery-with-cover/1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/1.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/10.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/10.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/11.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/11.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/12.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/12.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/2.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/3.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/4.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/5.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/6.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/6.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/7.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/7.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/8.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/8.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/9.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/9.jpeg


--------------------------------------------------------------------------------
/images/gallery-with-cover/cover.html:
--------------------------------------------------------------------------------
1 | <img style="cursor: pointer;  width: 100%; height: auto;" onclick="goToGallery()" src="cover.png" alt="">
2 | 
3 | <script>
4 |   function goToGallery(){
5 |     window.open("gallery.html","_blank").focus();
6 |   }
7 | </script>


--------------------------------------------------------------------------------
/images/gallery-with-cover/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery-with-cover/cover.png


--------------------------------------------------------------------------------
/images/gallery/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery/1.png


--------------------------------------------------------------------------------
/images/gallery/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery/2.png


--------------------------------------------------------------------------------
/images/gallery/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery/3.png


--------------------------------------------------------------------------------
/images/gallery/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery/4.png


--------------------------------------------------------------------------------
/images/gallery/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery/5.png


--------------------------------------------------------------------------------
/images/gallery/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery/6.png


--------------------------------------------------------------------------------
/images/gallery/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery/7.png


--------------------------------------------------------------------------------
/images/gallery/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery/8.png


--------------------------------------------------------------------------------
/images/gallery/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/gallery/9.png


--------------------------------------------------------------------------------
/images/gallery/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  6 |     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  7 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
  8 |   <link href="./css/thumbnail-gallery.css" rel="stylesheet" />
  9 | 
 10 |   <style>
 11 |     .tz-gallery {
 12 |       padding: 40px;
 13 |     }
 14 | 
 15 |     .tz-gallery .thumbnail {
 16 |       padding: 0;
 17 |       margin-bottom: 30px;
 18 |       background-color: #fff;
 19 |       border-radius: 4px;
 20 |       border: none;
 21 |       transition: 0.15s ease-in-out;
 22 |       box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
 23 |     }
 24 | 
 25 |     .tz-gallery .thumbnail:hover {
 26 |       transform: translateY(-10px) scale(1.02);
 27 |     }
 28 | 
 29 |     .baguetteBox-button {
 30 |       background-color: transparent !important;
 31 |     }
 32 | 
 33 | 
 34 |     .carousel-inner>.item>a>img,
 35 |     .carousel-inner>.item>img,
 36 |     .img-responsive,
 37 |     .thumbnail a>img,
 38 |     .thumbnail>img {
 39 |       display: block;
 40 |       max-width: 100%;
 41 |       height: auto;
 42 |     }
 43 |   </style>
 44 | 
 45 | </head>
 46 | 
 47 | <body>
 48 | 
 49 | 
 50 |   <main>
 51 | 
 52 | 
 53 |     <section id="gallery">
 54 |       <div class=" gallery-container container">
 55 |         <div class="tz-gallery">
 56 | 
 57 |           <div class="row">
 58 | 
 59 |             <!---------------------------------------------->
 60 |             <div data-aos="flip-up" class="col-sm-6 col-md-4">
 61 |               <div class="thumbnail">
 62 |                 <a class="lightbox" href="1.png">
 63 |                   <img src="1.png">
 64 |                 </a>
 65 |               </div>
 66 |             </div>
 67 | 
 68 |             <!---------------------------------------------->
 69 | 
 70 |             <div data-aos="flip-up" data-aos-delay="20" class="col-sm-6 col-md-4">
 71 |               <div class="thumbnail">
 72 |                 <a class="lightbox" href="2.png">
 73 |                   <img src="2.png">
 74 |                 </a>
 75 |               </div>
 76 |             </div>
 77 |             <!---------------------------------------------->
 78 | 
 79 |             <div data-aos="flip-up" data-aos-delay="40" class="col-sm-6 col-md-4">
 80 |               <div class="thumbnail">
 81 |                 <a class="lightbox" href="3.png">
 82 |                   <img src="3.png">
 83 |                 </a>
 84 | 
 85 |               </div>
 86 |             </div>
 87 |             <!---------------------------------------------->
 88 | 
 89 |             <div data-aos="flip-up" data-aos-delay="60" class="col-sm-6 col-md-4">
 90 |               <div class="thumbnail">
 91 |                 <a class="lightbox" href="4.png">
 92 |                   <img src="4.png">
 93 |                 </a>
 94 |               </div>
 95 |             </div>
 96 |             <!---------------------------------------------->
 97 | 
 98 |             <div data-aos="flip-up" data-aos-delay="80" class="col-sm-6 col-md-4">
 99 |               <div class="thumbnail">
100 |                 <a class="lightbox" href="5.png">
101 |                   <img src="5.png">
102 |                 </a>
103 |               </div>
104 |             </div>
105 |             <!---------------------------------------------->
106 | 
107 |             <div data-aos="flip-up" data-aos-delay="100" class="col-sm-6 col-md-4">
108 |               <div class="thumbnail">
109 |                 <a class="lightbox" href="6.png">
110 |                   <img src="6.png">
111 |                 </a>
112 |               </div>
113 |             </div>
114 |             <!---------------------------------------------->
115 | 
116 |             <div data-aos="flip-up" data-aos-delay="120" class="col-sm-6 col-md-4">
117 |               <div class="thumbnail">
118 |                 <a class="lightbox" href="7.png">
119 |                   <img src="7.png">
120 |                 </a>
121 |               </div>
122 |             </div>
123 |             <!---------------------------------------------->
124 | 
125 |             <div data-aos="flip-up" data-aos-delay="140" class="col-sm-6 col-md-4">
126 |               <div class="thumbnail">
127 |                 <a class="lightbox" href="8.png">
128 |                   <img src="8.png">
129 |                 </a>
130 |               </div>
131 |             </div>
132 |             <!---------------------------------------------->
133 | 
134 |             <div data-aos="flip-up" data-aos-delay="160" class="col-sm-6 col-md-4">
135 |               <div class="thumbnail">
136 |                 <a class="lightbox" href="9.png">
137 |                   <img src="9.png">
138 |                 </a>
139 |               </div>
140 |             </div>
141 | 
142 | 
143 | 
144 | 
145 |           </div>
146 |         </div>
147 |       </div>
148 | 
149 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
150 |       <script>
151 |         baguetteBox.run('.tz-gallery');
152 |       </script>
153 | 
154 |     </section>
155 | 
156 | 
157 |   </main>
158 | 
159 | 
160 | </html>
161 | 


--------------------------------------------------------------------------------
/images/slider/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/slider/1.png


--------------------------------------------------------------------------------
/images/slider/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/slider/2.png


--------------------------------------------------------------------------------
/images/slider/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/images/slider/3.png


--------------------------------------------------------------------------------
/images/slider/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023 Solygambas (https://codepen.io/solygambas/pen/JjEoEdb)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/images/slider/README.md:
--------------------------------------------------------------------------------
 1 | # Full-Screen Responsive Image Slider
 2 | 
 3 | A Pen created on CodePen.io. Original URL: [https://codepen.io/solygambas/pen/JjEoEdb](https://codepen.io/solygambas/pen/JjEoEdb).
 4 | 
 5 | Based on [Full Screen Responsive Image Slider](https://www.youtube.com/watch?v=wWWNrANNO1k) by Brad Traversy (2019).
 6 | 
 7 | ---
 8 | Want to collaborate? [Hire me](http://bit.ly/sg-pro)
 9 | 
10 | [Twitter](https://twitter.com/solygambas) | [GitHub](https://github.com/solygambas) | [Dribbble](https://dribbble.com/solygambas)
11 | 
12 | 


--------------------------------------------------------------------------------
/images/slider/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>CodePen - Full-Screen Responsive Image Slider</title>
  7 |   <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
  8 |   <link rel="stylesheet" href="./style.css">
  9 | <style>
 10 |   @import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap");
 11 | 
 12 | * {
 13 |   box-sizing: border-box;
 14 |   margin: 0;
 15 |   padding: 0;
 16 | }
 17 | 
 18 | body {
 19 |   font-family: "Lexend", sans-serif;
 20 |   background-color: #362a2b;
 21 |   color: #e5ebf3;
 22 | }
 23 | 
 24 | .slider {
 25 |   position: relative;
 26 |   width: 100vw;
 27 |   height: 100vh;
 28 |   overflow: hidden;
 29 | }
 30 | 
 31 | .slide {
 32 |   position: absolute;
 33 |   top: 0;
 34 |   left: 0;
 35 |   width: 100%;
 36 |   height: 100%;
 37 |   opacity: 0;
 38 |   transition: opacity 0.4s ease-in-out;
 39 | }
 40 | 
 41 | .slide.current {
 42 |   opacity: 1;
 43 | }
 44 | 
 45 | 
 46 | .slide:first-child {
 47 |   background: url("1.png") no-repeat
 48 |     center top/cover;
 49 | }
 50 | 
 51 | .slide:nth-child(2) {
 52 |   background: url("2.png") no-repeat
 53 |     center top/cover;
 54 | }
 55 | 
 56 | .slide:nth-child(3) {
 57 |   background: url("3.png") no-repeat
 58 |     center top/cover;
 59 | }
 60 | 
 61 | 
 62 | .buttons button#prev {
 63 |   position: absolute;
 64 |   top: 50%;
 65 |   left: 1rem;
 66 | }
 67 | 
 68 | .buttons button#next {
 69 |   position: absolute;
 70 |   top: 50%;
 71 |   right: 1rem;
 72 | }
 73 | 
 74 | .buttons button {
 75 |   border: 2px solid #e5ebf3;
 76 |   background-color: transparent;
 77 |   color: #e5ebf3;
 78 |   cursor: pointer;
 79 |   padding: 13px 15px;
 80 |   border-radius: 50%;
 81 |   outline: none;
 82 | }
 83 | 
 84 | .buttons button:hover {
 85 |   background-color: #e5ebf3;
 86 |   color: #362a2b;
 87 | }
 88 | 
 89 | @media (min-width: 640px) and (min-height: 640px) {
 90 |   .slide .content {
 91 |     bottom: 70px;
 92 |     left: -600px;
 93 |     width: 600px;
 94 |     padding: 2rem;
 95 |     line-height: 1.6;
 96 |   }
 97 | 
 98 |   .slide .content h1 {
 99 |     font-size: 2rem;
100 |   }
101 | 
102 |   .slide.current .content {
103 |     transform: translateX(600px);
104 |   }
105 | }
106 | </style>
107 | </head>
108 | 
109 | <body>
110 |   <!-- partial:index.partial.html -->
111 |   <div class="slider">
112 |     <div class="slide current"></div>
113 |     <div class="slide"></div>
114 |     <div class="slide"></div>
115 | 
116 |   </div>
117 |   <div class="buttons">
118 |     <button id="prev"><i class="fas fa-arrow-left"></i></button>
119 |     <button id="next"><i class="fas fa-arrow-right"></i></button>
120 |   </div>
121 |   <!-- partial -->
122 |   <script>
123 |     const slides = document.querySelectorAll(".slide");
124 |     const nextButton = document.getElementById("next");
125 |     const prevButton = document.getElementById("prev");
126 |     const auto = true;
127 |     const intervalTime = 5000;
128 |     let slideInterval;
129 | 
130 |     const nextSlide = () => {
131 |       const current = document.querySelector(".current");
132 |       current.classList.remove("current");
133 |       if (current.nextElementSibling) {
134 |         current.nextElementSibling.classList.add("current");
135 |       } else {
136 |         slides[0].classList.add("current");
137 |       }
138 |     };
139 | 
140 |     const prevSlide = () => {
141 |       const current = document.querySelector(".current");
142 |       current.classList.remove("current");
143 |       if (current.previousElementSibling) {
144 |         current.previousElementSibling.classList.add("current");
145 |       } else {
146 |         slides[slides.length - 1].classList.add("current");
147 |       }
148 |     };
149 | 
150 |     nextButton.addEventListener("click", () => {
151 |       nextSlide();
152 |       if (auto) {
153 |         clearInterval(slideInterval);
154 |         slideInterval = setInterval(nextSlide, intervalTime);
155 |       }
156 |     });
157 |     prevButton.addEventListener("click", () => {
158 |       prevSlide();
159 |       if (auto) {
160 |         clearInterval(slideInterval);
161 |         slideInterval = setInterval(nextSlide, intervalTime);
162 |       }
163 |     });
164 | 
165 |     if (auto) {
166 |       slideInterval = setInterval(nextSlide, intervalTime);
167 |     }
168 | 
169 |   </script>
170 | 
171 | </body>
172 | 
173 | </html>
174 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!-- original : https://codepen.io/SeanNorton/pen/LWBXQL -->
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Document</title>
  8 | 
  9 |     <style>
 10 | 
 11 |         /*CSS RESETS*/
 12 | 
 13 | body{
 14 |     background-color: #fff;
 15 |     line-height: 1.6;
 16 | 
 17 | }
 18 | 
 19 | h1 {
 20 |     margin-top: 0;
 21 | }
 22 | 
 23 | 
 24 | /*CSS START*/
 25 | 
 26 | .full-table {
 27 |     display: table;
 28 |     height: 100%;
 29 |     width: 100%;
 30 | }
 31 | 
 32 | .table-cell {
 33 |     display: table-cell;
 34 |     vertical-align: middle;
 35 |     text-align: center;
 36 | }
 37 | 
 38 | .card {
 39 |     padding: 10px 25px 10px 25px;
 40 |     border-radius: 10px;
 41 |     background: #009688;
 42 |     color: #fff;
 43 |     display: inline-block;
 44 |     box-shadow: 2px 2px 1px 0px #295C7B;
 45 | }
 46 | 
 47 | .card:hover {
 48 |     margin-top: 2px;
 49 |     box-shadow: none;
 50 | }
 51 | 
 52 | .clock {
 53 |     display: inline-block;
 54 |     font-family: 'Roboto', sans-serif;
 55 |     font-weight: bold;
 56 |     font-size: 1.2em;
 57 |     /* padding-left: 20px; */
 58 | }
 59 | 
 60 | .time {
 61 |     display: inline-block;
 62 |     min-width: 37px;
 63 | }
 64 | 
 65 | .colon {
 66 |     font-size: 1.1em;
 67 |     display: inline-block;
 68 | }
 69 | 
 70 | .date {
 71 |     display: block;
 72 |     min-width: 162px;
 73 |     /* padding-right: 30px; */
 74 |     /* border-right: 2px solid #295C7B; */
 75 |     font-family: 'Roboto', sans-serif;
 76 |     font-size: 1.2em;
 77 | }
 78 | .greet{
 79 |     
 80 |     min-width: 162px;
 81 |     /* padding-right: 30px; */
 82 |     font-family: 'Roboto', sans-serif;
 83 |     font-size: 1.2em;
 84 | }
 85 | 
 86 |     </style>
 87 | </head>
 88 | <body>
 89 |     <link href="https://fonts.googleapis.com/css?family=Lobster|Roboto:400,700" rel="stylesheet">
 90 | 
 91 | <div class="full-table">
 92 |   <div class="table-cell">
 93 |     
 94 |     <div class="card">
 95 |         <div class="greet" id="greet"></div>
 96 |       <div class="date" id="date"></div>
 97 |       <div class="clock">
 98 |         <div class="time" id="hour"></div>
 99 |         <div class="colon">:</div>
100 |         <div class="time" id="min"></div>
101 |         <div class="colon">:</div>
102 |         <div class="time" id="sec"></div>
103 |       </div>
104 |     </div>
105 |     
106 |   </div>
107 | </div>
108 | 
109 | <script>
110 |     function date() {
111 | var today = new Date();
112 | document.getElementById('date').innerHTML = today.toDateString();
113 | }
114 | 
115 | 
116 | function clock() {
117 | var today = new Date();
118 | var hour = zeros(twelveHour(today.getHours()));
119 | var minutes = zeros(today.getMinutes());
120 | var seconds = zeros(today.getSeconds());
121 | if(today.getHours() >=12){
122 |     seconds+=" pm"
123 | }
124 | else{
125 |     seconds+=" am"
126 | }
127 | hrs = today.getHours();
128 | if (hrs < 12)
129 |         greet = 'Good Morning  ';
130 |     else if (hrs >= 12 && hrs <= 17)
131 |         greet = 'Good Afternoon ';
132 |     else if (hrs >= 17 && hrs <= 24)
133 |         greet = 'Good Evening  ';
134 | // console.log(today.toLocaleTimeString());
135 | document.getElementById('greet').innerHTML = greet;
136 | document.getElementById('hour').innerHTML = hour;
137 | document.getElementById('min').innerHTML = minutes;
138 | document.getElementById('sec').innerHTML = seconds;
139 | }
140 | 
141 | function twelveHour(hour) {
142 | if (hour > 12) {
143 |     return hour -= 12 
144 | } else if (hour === 0) {
145 |     return hour = 12;
146 | } else {
147 |     return hour
148 | }
149 | }
150 | // adds zero infront of single digit number
151 | function zeros(num) {
152 | if (num < 10) {
153 |     num = '0' + num
154 | };
155 | return num;
156 | }
157 | 
158 | function dateTime() {
159 | date();
160 | clock();
161 | setTimeout(dateTime, 500);
162 | }
163 | 
164 | dateTime()
165 | // END
166 | </script>
167 | 
168 | </body>
169 | </html>
170 | 


--------------------------------------------------------------------------------
/map2/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2022 Nathan Perfetti (https://codepen.io/perfettiful/pen/xqeqwm)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/map2/README.md:
--------------------------------------------------------------------------------
1 | # Interactive Map - Angular.js
2 | 
3 | A Pen created on CodePen.io. Original URL: [https://codepen.io/perfettiful/pen/xqeqwm](https://codepen.io/perfettiful/pen/xqeqwm).
4 | 
5 | 


--------------------------------------------------------------------------------
/map2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Interactive Map</title>
 6 |   <link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/leaflet.css'><link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <!--<!DOCTYPE html>-->
12 | <html ng-app="app">
13 |   <head>
14 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
15 |     <title>Interactive Map</title>
16 |     <!--<script src="../bower_components/angular/angular.min.js"></script>
17 |     <script src="../bower_components/leaflet/dist/leaflet.js"></script>
18 |     <script src="../dist/angular-leaflet-directive.min.js"></script>
19 |     <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />-->
20 |     <link rel="stylesheet" type="text/css" href="https://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />
21 |   </head>
22 |   <body ng-controller="GermanMapCtrl">
23 |     <leaflet center="center" events="events" legend="legend" defaults="defaults" geojson="geojson"></leaflet>
24 |     <div class="map-box country-data f32">
25 |       <div class="col flag" ng-class="selectedCountryData.flag"></div>
26 |       <div class="col">
27 |         <span class="row">{{selectedCountryData.en.name || selectedCountry.properties.name || ''}}</span>
28 |       </div>
29 |     </div>
30 |     <div ng-show="showCenterCoords" class="map-box coordinates">center: {lat: {{center.lat | number:4}}, lng: {{center.lng | number:4}}, zoom: {{center.zoom}}}</div>
31 |   </body>
32 | </html>
33 | <!-- partial -->
34 |   <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
35 | <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js'></script>
36 | <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/angular-leaflet-directive.js'></script><script  src="./script.js"></script>
37 | 
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/map2/script.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |   Example: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/0601-mixed-geojson-events-example.html
  3 |   Angular Leaflet Directive: https://github.com/tombatossals/angular-leaflet-directive
  4 |   Leaflet: https://github.com/Leaflet/Leaflet
  5 | */
  6 | 
  7 | // Ää Öö Üü ß
  8 | // Kosovo: CS-KM, Somaliland, Northern Cyprus
  9 | 
 10 | // Title and icon only needed on CodePen
 11 | document.title = 'German Interactive Map';
 12 | var link = document.createElement('link');
 13 | link.type = 'image/x-icon';
 14 | link.rel = 'shortcut icon';
 15 | link.href = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/de-flag.ico';
 16 | document.getElementsByTagName('head')[0].appendChild(link);
 17 | 
 18 | angular.module("app", ["leaflet-directive"])
 19 | .controller('GermanMapCtrl', ["$scope", "$http", function($scope, $http) {
 20 |   $scope.showCenterCoords = false;
 21 |   $scope.countriesGeoJson = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/countries.geo.json?v=11";
 22 |   $scope.countriesJson = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/countries.json?v=11";
 23 |   // Events: https://github.com/tombatossals/angular-leaflet-directive/blob/master/src/services/events/leafletGeoJsonEvents.js
 24 |   $scope.$on("leafletDirectiveMap.geojsonMouseover", function(event, feature, leafletEvent) {
 25 |     countryMouseover(feature, leafletEvent);
 26 |   });
 27 |   $scope.$on("leafletDirectiveMap.geojsonClick", function(event, featureSelected, leafletEvent) {
 28 |     countryClick(featureSelected, leafletEvent);
 29 |   });
 30 |   var continentProperties = {
 31 |     "150": {
 32 |       name: 'Europe',
 33 |       colors: [ '#809bce', '#7291cc', '#6983b3', '#6d90d1', '#506ca1' ]
 34 |     },
 35 |     "019": {
 36 |       name: 'America',
 37 |       colors: [ '#8a508f', '#b771bd', '#9f6fa3', '#865e8a', '#ac69b3' ]
 38 |     },
 39 |     "002": {
 40 |       name: 'Africa',
 41 |       colors: [ '#b8e0d4', '#a3c4ba', '#a3d4c5', '#88bdad', '#91e3ca' ]
 42 |     },
 43 |     "142": {
 44 |       name: 'Asia',
 45 |       colors: [ '#eac4d5', '#eac4d5', '#dea0bc', '#d1a3b8', '#eda6c6' ]
 46 |     },
 47 |     "009": {
 48 |       name: 'Oceania',
 49 |       colors: [ '#d6eadf', '#deffed', '#bae3cd', '#9dc4af', '#cef0de' ]
 50 |     }
 51 |   };
 52 |   angular.extend($scope, {
 53 |     center: {
 54 |       lat: 57.0168, // 40.8471
 55 |       lng: 15.6445, // 14.0625
 56 |       zoom: 1 // 2
 57 |     },
 58 |     legend: {
 59 |       colors: [ '#809bce', '#8a508f', '#b8e0d4', '#eac4d5', '#d6eadf' ],
 60 |       labels: [ 'Europe', 'America', 'Africa', 'Asia', 'Oceania' ]
 61 |     },
 62 |     defaults: {
 63 |       // Unlabeled Map
 64 |       // http://mc.bbbike.org/mc/?num=2&mt0=mapnik&mt1=mapquest-eu
 65 |       tileLayer: "http://{s}.tiles.wmflabs.org/osm-no-labels/{z}/{x}/{y}.png"
 66 |     }
 67 |   });
 68 |   function selectCountry(country, event, color, fillColor) {
 69 |     var layer = event.target;
 70 |     layer.setStyle({
 71 |       weight: 2,
 72 |       color: color,
 73 |       fillColor: fillColor
 74 |     });
 75 |     layer.bringToFront();
 76 |   }
 77 |   // Click function, called from the Leaflet Map Events
 78 |   function countryClick(country, event) {
 79 |     selectCountry(country, event, '#444', '#fff');
 80 |     $scope.selectedCountry = country;
 81 |     $scope.selectedCountryData = $scope.countries[country.id];
 82 |     console.log("click: ", country.properties.name);
 83 |     console.log($scope.selectedCountryData);
 84 |   }
 85 |   // Mouse over function, called from the Leaflet Map Events
 86 |   function countryMouseover(country, event) {
 87 |     selectCountry(country, event, '#666', '#ddd');
 88 |   }
 89 |   // Get a country paint color from the continents array of colors
 90 |   function getColor(country) {
 91 |     if (!country || !country["region-code"]) {
 92 |       return "#FFF";
 93 |     }
 94 |     var colors = continentProperties[country["region-code"]].colors;
 95 |     var index = country["alpha-3"].charCodeAt(0) % colors.length;
 96 |     return colors[index];
 97 |   }
 98 |   function style(country) {
 99 |     return {
100 |       fillColor: getColor($scope.countries[country.id]),
101 |       weight: 1, // 2
102 |       opacity: 1,
103 |       color: 'white',
104 |       //dashArray: '0', // '3'
105 |       fillOpacity: 0.7
106 |     };
107 |   }
108 |   // Get the countries data from a JSON
109 |   //$http.get("json/all.json").success(function(data, status) {
110 |   $http.get($scope.countriesJson).success(function(data, status) {
111 |     // Put the countries on an associative array
112 |     $scope.countries = {};
113 |     for (var i = 0; i < data.length; i++) {
114 |       var country = data[i],
115 |           id = country['alpha-3'];
116 |       country['alpha-3'] = country['alpha-3'].replace('_', '');
117 |       country.flag = (function(name) {
118 |         if (name == null) { return ''; }
119 |         if (name.indexOf('_') != -1) { return name; }
120 |         return name.toLowerCase();
121 |       })(country['alpha-2']);
122 |       $scope.countries[id] = country;
123 |     }
124 |     // Get the countries geojson data from a JSON
125 |     //$http.get("json/countries.geo.json").success(function(data, status) {
126 |     $http.get($scope.countriesGeoJson).success(function(data, status) {
127 |       angular.extend($scope, {
128 |         geojson: {
129 |           data: data,
130 |           style: style,
131 |           resetStyleOnMouseout: true
132 |         },
133 |         selectedCountry: {},
134 |         selectedCountryData: {}
135 |       });
136 |       for (var item in data) {
137 |         if (!$scope.countries[data[item].id]) {
138 |           console.log(data[item]);
139 |         }
140 |       }
141 |     });
142 |   });
143 | }]);
144 | 


--------------------------------------------------------------------------------
/map2/style.css:
--------------------------------------------------------------------------------
 1 | body, html {
 2 |   height: 100%;
 3 |   padding: 0;
 4 |   margin: 0;
 5 | }
 6 | 
 7 | html {
 8 |   font-family: sans-serif;
 9 | }
10 | 
11 | .map-box, .legend {
12 |   padding: 6px 8px;
13 |   background: rgba(255, 255, 255, 0.9);
14 |   border-radius: 5px;
15 |   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
16 |   text-align: center;
17 |   z-index: 100;
18 | }
19 | 
20 | .legend {
21 |   font: 14px/16px Arial, Helvetica, sans-serif;
22 |   font-weight: bold;
23 |   line-height: 18px;
24 |   color: #555;
25 |   width: 100px;
26 | }
27 | .legend i {
28 |   clear: both;
29 |   width: 16px;
30 |   height: 16px;
31 |   float: left;
32 |   opacity: 0.7;
33 |   margin-right: 8px;
34 | }
35 | 
36 | .map-box.coordinates {
37 |   position: absolute;
38 |   top: 10px;
39 |   right: 10px;
40 | }
41 | .map-box.country-data {
42 |   position: absolute;
43 |   bottom: 10px;
44 |   left: 10px;
45 |   padding: 6px 16px;
46 |   line-height: 1.1em;
47 |   font-size: 1.5em;
48 |   font-weight: bold;
49 |   display: flex;
50 | }
51 | .map-box.country-data .col {
52 |   margin: auto;
53 |   padding-right: 16px;
54 |   float: left;
55 | }
56 | .map-box.country-data .col:before, .map-box.country-data .col:after {
57 |   content: " ";
58 |   display: table;
59 | }
60 | .map-box.country-data .col:after {
61 |   clear: both;
62 | }
63 | .map-box.country-data .col:last-child {
64 |   padding-right: 0;
65 | }
66 | .map-box.country-data .col .row {
67 |   display: block;
68 | }
69 | .map-box.country-data .capital {
70 |   font-size: 75%;
71 | }
72 | 
73 | .angular-leaflet-map {
74 |   height: 100%;
75 | }
76 | 
77 | .leaflet-container{
78 | background-color: white;
79 | }
80 | 


--------------------------------------------------------------------------------
/minimal/minimal-greetings.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Greetings</title>
  8 | 
  9 |     <style>
 10 | 
 11 | 
 12 |         body{
 13 |             font-variant-caps: all-petite-caps;
 14 | 
 15 | 
 16 |         }
 17 | 
 18 |         .widget {
 19 |             padding: 5px 5px ;
 20 |             color: #000000;
 21 |             display: flex;
 22 |             justify-content:center;
 23 |             align-items:center;
 24 |             flex-direction: column;
 25 |             max-width: 95%;
 26 |             margin: auto;
 27 |             border: 3px solid #000000;
 28 |             border-radius: 5px;
 29 |             box-shadow: 2px 2px 1px 0px #000000;
 30 | 
 31 |         }
 32 | 
 33 |            
 34 |         .greet{
 35 |             font-size: 3em;
 36 |         }
 37 | 
 38 |         .date {
 39 |       
 40 |             font-family: monospace;
 41 |             font-size: 2em;
 42 |         }
 43 | 
 44 |         .clock {
 45 |             font-family: monospace;
 46 |             font-size: 2em;
 47 |         }
 48 | 
 49 |         .time {
 50 |             display: inline-block;
 51 |             min-width: 20px;
 52 |         }
 53 | 
 54 |         .colon {
 55 |             font-size: 1em;
 56 |             display: inline-block;
 57 |         }
 58 | 
 59 |      
 60 | 
 61 | 
 62 | 
 63 | 
 64 |     </style>
 65 | </head>
 66 | <body>
 67 | 
 68 | 
 69 | 
 70 | 
 71 | <div class="container>">
 72 |     <div class="widget">
 73 | 
 74 |             <div class="greet" id="greet"></div>
 75 | 
 76 |                 <div class="date" id="date"></div>
 77 |                 <div class="clock">
 78 |                     <div class="time" id="hour"></div>
 79 |                     <div class="colon">:</div>
 80 |                     <div class="time" id="min"></div>
 81 |                     <div class="colon">:</div>
 82 |                     <div class="time" id="sec"></div>
 83 |                 </div>
 84 |            
 85 | 
 86 |         
 87 | 
 88 |     </div>
 89 | </div>
 90 |         
 91 | 
 92 | 
 93 | 
 94 | <script>
 95 | 
 96 | function dispalyGreetings(today){
 97 |         hrs = today.getHours();
 98 |         name=""
 99 |         if (hrs < 12)
100 |             greet = 'Good Morning  '+name;
101 |         else if (hrs >= 12 && hrs <= 17)
102 |             greet = 'Good Afternoon '+name;
103 |         else if (hrs >= 17 && hrs <= 24)
104 |             greet = 'Good Evening  '+name;
105 |         document.getElementById('greet').innerHTML = greet;
106 | 
107 |     }
108 | 
109 |     function dispalyDate(today) {  
110 |        
111 |         const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
112 |         const monthNames = ["January", "February", "March", "April", "May", "June",
113 |   "July", "August", "September", "October", "November", "December"
114 | ];
115 | 
116 |         var dayName = days[today.getDay()];
117 |         var monthName = monthNames[today.getMonth()];
118 |         var date = today.getDate();
119 |         var year = today.getFullYear();
120 |         document.getElementById('date').innerHTML =dayName+", "+monthName+" "+date+" "+year;
121 | 
122 |     }
123 | 
124 | 
125 |     function dispalyClock(today) {
126 | 
127 |         var hour = padZeros(twelveHour(today.getHours()));
128 |         var minutes = padZeros(today.getMinutes());
129 |         var seconds = padZeros(today.getSeconds());
130 |        
131 |         if(today.getHours() >=12){
132 |             seconds+=" pm"
133 |         }
134 |         else{
135 |             seconds+=" am"
136 |         }
137 |        
138 |         document.getElementById('hour').innerHTML = hour;
139 |         document.getElementById('min').innerHTML = minutes;
140 |         document.getElementById('sec').innerHTML = seconds;
141 |     }
142 | 
143 |     function twelveHour(hour) {
144 |         if (hour > 12) {
145 |             return hour -= 12
146 |         } else if (hour === 0) {
147 |             return hour = 12;
148 |         } else {
149 |             return hour
150 |         }
151 |     }
152 |     function padZeros(num) {
153 |         if (num < 10) {
154 |             num = '0' + num
155 |         };
156 |         return num;
157 |     }
158 | 
159 |     function dispalyWidget() {
160 |         var today = new Date();
161 |         dispalyGreetings(today);
162 |         dispalyDate(today);
163 |         dispalyClock(today);
164 |         setTimeout(dispalyWidget, 500);
165 |     }
166 | 
167 |     dispalyWidget()
168 | 
169 | </script>
170 | 
171 | </body>
172 | </html>


--------------------------------------------------------------------------------
/minimal/minimal-quote.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Quote</title>
 8 | 
 9 |     <style>
10 | 
11 |         .widget {
12 |             padding: 5px 5px ;
13 |             color: #000000;
14 |             text-align: center;
15 |                 max-width: 95%;
16 |             margin: auto;
17 |             font-variant-caps: petite-caps;
18 |             font-size: 2em;
19 | 
20 |         }
21 | 
22 |         div {
23 |              width: 95%;
24 |              min-height: 100px;
25 | 
26 |             background:
27 |                 linear-gradient(to right, black 4px, transparent 4px) 0 0,
28 |                 linear-gradient(to right, black 4px, transparent 4px) 0 100%,
29 |                 linear-gradient(to left, black 4px, transparent 4px) 100% 0,
30 |                 linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
31 |                 linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
32 |                 linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
33 |                 linear-gradient(to top, black 4px, transparent 4px) 0 100%,
34 |                 linear-gradient(to top, black 4px, transparent 4px) 100% 100%;
35 | 
36 |             background-repeat: no-repeat;
37 |             background-size: 20px 20px;
38 | }
39 | 
40 |      
41 |     </style>
42 | </head>
43 | <body>
44 | 
45 |     <div class="widget" id="widget"></div>
46 | 
47 | 
48 | <script>
49 | 
50 | quotes=[
51 | "Learning, like success, is anything but a linear process",
52 | "I am in competition with no one. I have no desire to play the game of being better than anyone. I am simply trying to be better than the person I was yesterday.",
53 | "If you want to be interesting, you have to be interested.",
54 | "It's supposed to be hard. If it were easy, everyone would do it.",
55 | "Don’t worry if you’re not where you want to be yet. Great things take time. ",
56 | "If it's important you'll find a way. If it's not, you'll find an excuse.",
57 | "Most people overestimate what they can do in one year and underestimate what they can do in ten years.",
58 | "A goal without a plan is just a wish.",
59 | "change your 24 hours and you'll change your life",
60 | "Stop thinking you are not qualified, not fit, or not experienced enough,",
61 | "Growth takes place when you start doing stuff you are not qualified to do.",
62 | "Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.",
63 | "Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover.",
64 | ];
65 | 
66 | const INTERVAL = 86400000;
67 | 
68 | function dispalyQuote(){
69 | 
70 |     document.getElementById('widget').innerHTML =quotes[0];
71 |     quotes.forEach((quote, i) => {
72 |         setTimeout(() => {
73 |             document.getElementById('widget').innerHTML =quote;
74 |         }, i * INTERVAL);  
75 |     });
76 |     }
77 | 
78 |     function dispalyWidget() {
79 |         dispalyQuote();
80 |         setTimeout(dispalyWidget, quotes.length*INTERVAL);
81 |     }
82 |     dispalyWidget()
83 | 
84 | </script>
85 | 
86 | </body>
87 | </html>


--------------------------------------------------------------------------------
/minimal/minimal-time-left-month.html:
--------------------------------------------------------------------------------
 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 |     <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
 7 | 
 8 |     <title>Time Left in this month</title>
 9 |     <style>
10 |         
11 |         body{
12 |             text-align: center;
13 |             font-family: monospace;
14 |             background-color: #fff;
15 |         }
16 |         .box{
17 |             display: inline-block;
18 |             display: inline-block;
19 |             padding: 10px;
20 |             border-radius: 5px;
21 |             min-width: 40px;
22 |             height: 40px;
23 |             border: 3px solid #000000;
24 |             border-radius: 5px;
25 |             box-shadow: 2px 2px 1px 0px #000000;
26 |         }
27 |       
28 |         h2{
29 |             display: inline-block;
30 |             margin-right: 10px;
31 |             margin-block-start: 5px;
32 |         }
33 |         h3{
34 |             text-align: left;
35 |             display: inline-block;
36 |             
37 |         }
38 |         .small{
39 |             font-size: 15px;
40 |             font-weight: lighter;
41 |         }
42 | 
43 |         #days{
44 |             background-color:  #f3fff3; ;
45 |         }
46 | 
47 | 
48 |     </style>
49 | </head>
50 | <body>
51 |     
52 |     <div id="counter">
53 | 
54 |         <h2 class="box" id="days"></h2>
55 |         <h2 class="box" id="hours"></h2>
56 |         <h2 class="box" id="minutes"></h2>
57 |         <h2 class="box" id="seconds"></h2>
58 |         <h3>
59 |             Left in <br>This Month
60 |         </h3>
61 |     </div>
62 | 
63 | 
64 | 
65 | <script>
66 |     function CountDownTimer  () {
67 |     left_days = document.getElementById("days");
68 |     left_hours = document.getElementById("hours");
69 |     left_minutes = document.getElementById("minutes");
70 |     left_seconds = document.getElementById("seconds");
71 |  
72 |     }
73 |     function showRemaining (){
74 |     now = new Date();
75 |     days_in_this_month = new Date( now.getFullYear(), now.getMonth()+1, 0).getDate(); 
76 |     days = days_in_this_month- now.getDate();
77 |     hours = 23 - now.getHours();
78 |     minutes = 59 - now.getMinutes();
79 |     seconds = 59 - now.getSeconds();
80 |     left_days.innerHTML = days + "<br> <span class=\"small\"> days </span>"
81 |     left_hours.innerHTML = hours + "<br> <span class=\"small\"> hours</span>";
82 |     left_minutes.innerHTML = minutes + "<br> <span class=\"small\">mins</span>";
83 |     left_seconds.innerHTML = seconds + "<br> <span class=\"small\">secs</span>";
84 |     }
85 | 
86 | timer = setInterval (showRemaining, 1000) 
87 | CountDownTimer() ;
88 | </script>
89 | </body>
90 | </html>


--------------------------------------------------------------------------------
/minimal/minimal-time-left-week-monday.html:
--------------------------------------------------------------------------------
  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 | 
  7 |     <title>Time Left this week</title>
  8 |     <style>
  9 |         
 10 |         body{
 11 |             text-align: center;
 12 |             font-family: monospace;
 13 |             background-color: #fff;
 14 |         }
 15 |         .box{
 16 |             display: inline-block;
 17 |             display: inline-block;
 18 |             padding: 10px;
 19 |             border-radius: 5px;
 20 |             min-width: 40px;
 21 |             height: 40px;
 22 |             border: 3px solid #000000;
 23 |             border-radius: 5px;
 24 |             box-shadow: 2px 2px 1px 0px #000000;
 25 |         }
 26 |       
 27 |         h2{
 28 |             display: inline-block;
 29 |             margin-right: 10px;
 30 |             margin-block-start: 5px;
 31 |         }
 32 |         h3{
 33 |             text-align: left;
 34 |             display: inline-block;
 35 |             
 36 |         }
 37 |         .small{
 38 |             font-size: 15px;
 39 |             font-weight: lighter;
 40 |         }
 41 | 
 42 |         #days{
 43 |             background-color:  #f3fff3; ;
 44 |         }
 45 | 
 46 | 
 47 |     </style>
 48 | </head>
 49 | <body>
 50 |     
 51 |     <div id="counter">
 52 |    
 53 |     <div>
 54 |         <h2 class="box" id="days"></h2>
 55 |         <h2 class="box" id="hours"></h2>
 56 |         <h2 class="box" id="minutes"></h2>
 57 |         <h2 class="box" id="seconds"></h2>
 58 | 
 59 |         <h3>
 60 |             Left in <br>This Week
 61 |         </h3>
 62 |     </div>
 63 |        
 64 |     </div>
 65 | 
 66 | 
 67 | 
 68 | <script>
 69 |     function CountDownTimer  () {
 70 |     left_days = document.getElementById("days");
 71 |     left_hours = document.getElementById("hours");
 72 |     left_minutes = document.getElementById("minutes");
 73 |     left_seconds = document.getElementById("seconds");
 74 |  
 75 |     }
 76 |     function showRemaining (){
 77 |     now = new Date();
 78 |  
 79 |    
 80 |     if(now.getDay() == 0 ){
 81 |       d = 6
 82 |     }
 83 |     else{
 84 |        d = now.getDay() - 1
 85 |     }
 86 |     days = 6 - d ;
 87 |     hours = 23 - now.getHours();
 88 |     minutes = 59 - now.getMinutes();
 89 |     seconds = 59 - now.getSeconds();
 90 |     left_days.innerHTML = days + "<br> <span class=\"small\"> days </span>"
 91 |     left_hours.innerHTML = hours + "<br> <span class=\"small\"> hours</span>";
 92 |     left_minutes.innerHTML = minutes + "<br> <span class=\"small\">mins</span>";
 93 |     left_seconds.innerHTML = seconds + "<br> <span class=\"small\">secs</span>";
 94 |     }
 95 | 
 96 | timer = setInterval (showRemaining, 1000) 
 97 | CountDownTimer() ;
 98 | </script>
 99 | </body>
100 | </html>


--------------------------------------------------------------------------------
/minimal/minimal-time-left-week-sunday.html:
--------------------------------------------------------------------------------
 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 | 
 7 |     <title>Time Left this week</title>
 8 |     <style>
 9 |         
10 |         body{
11 |             text-align: center;
12 |             font-family: monospace;
13 |             background-color: #fff;
14 |         }
15 |         .box{
16 |             display: inline-block;
17 |             display: inline-block;
18 |             padding: 10px;
19 |             border-radius: 5px;
20 |             min-width: 40px;
21 |             height: 40px;
22 |             border: 3px solid #000000;
23 |             border-radius: 5px;
24 |             box-shadow: 2px 2px 1px 0px #000000;
25 |         }
26 |       
27 |         h2{
28 |             display: inline-block;
29 |             margin-right: 10px;
30 |             margin-block-start: 5px;
31 |         }
32 |         h3{
33 |             text-align: left;
34 |             display: inline-block;
35 |             
36 |         }
37 |         .small{
38 |             font-size: 15px;
39 |             font-weight: lighter;
40 |         }
41 | 
42 |         #days{
43 |             background-color:  #f3fff3; ;
44 |         }
45 | 
46 | 
47 |     </style>
48 | </head>
49 | <body>
50 |     
51 |     <div id="counter">
52 |    
53 |     <div>
54 |         <h2 class="box" id="days"></h2>
55 |         <h2 class="box" id="hours"></h2>
56 |         <h2 class="box" id="minutes"></h2>
57 |         <h2 class="box" id="seconds"></h2>
58 | 
59 |         <h3>
60 |             Left in <br>This Week
61 |         </h3>
62 |     </div>
63 |        
64 |     </div>
65 | 
66 | 
67 | 
68 | <script>
69 |     function CountDownTimer  () {
70 |     left_days = document.getElementById("days");
71 |     left_hours = document.getElementById("hours");
72 |     left_minutes = document.getElementById("minutes");
73 |     left_seconds = document.getElementById("seconds");
74 |  
75 |     }
76 |     function showRemaining (){
77 |     now = new Date();
78 |  
79 |     days = 6 - now.getDay(); ;
80 |     hours = 23 - now.getHours();
81 |     minutes = 59 - now.getMinutes();
82 |     seconds = 59 - now.getSeconds();
83 |     left_days.innerHTML = days + "<br> <span class=\"small\"> days </span>"
84 |     left_hours.innerHTML = hours + "<br> <span class=\"small\"> hours</span>";
85 |     left_minutes.innerHTML = minutes + "<br> <span class=\"small\">mins</span>";
86 |     left_seconds.innerHTML = seconds + "<br> <span class=\"small\">secs</span>";
87 |     }
88 | 
89 | timer = setInterval (showRemaining, 1000) 
90 | CountDownTimer() ;
91 | </script>
92 | </body>
93 | </html>


--------------------------------------------------------------------------------
/nav-vertical.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 
  6 | 	<!-- Font Awesome -->
  7 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  8 | 
  9 | 	<!-- Google Font -->
 10 | 
 11 | 	<link rel="preconnect" href="https://fonts.googleapis.com">
 12 | 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 13 | 	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
 14 | 
 15 | 	<!-------->
 16 | 
 17 | 	<style>
 18 | 		* {
 19 | 			margin: 0;
 20 | 			padding: 0;
 21 | 			-webkit-box-sizing: border-box;
 22 | 			box-sizing: border-box;
 23 | 		}
 24 | 
 25 | 
 26 | 		.navMenu {
 27 | 			font-family: 'Advent Pro', sans-serif;
 28 | 			padding: 8px;
 29 | 			text-align: center;
 30 | 			margin: 7px auto;
 31 | 			width: fit-content;
 32 | 		}
 33 | 
 34 | 		.navMenu a {
 35 | 			color: #272727;
 36 | 			text-decoration: none;
 37 | 			text-transform: uppercase;
 38 | 			display: inline-block;
 39 | 			padding: 6px;
 40 | 		}
 41 | 
 42 | 		.background {
 43 | 			background-color: #ece5f0;
 44 | 		}
 45 | 
 46 | 		.border {
 47 | 			border: 1px solid #cccccc;
 48 | 
 49 | 		}
 50 | 
 51 | 		.navMenu a:hover {
 52 | 
 53 | 			color: #d09c0b;
 54 | 		}
 55 | 	</style>
 56 | </head>
 57 | 
 58 | <body>
 59 | 
 60 | 	<nav class="navMenu  border">
 61 | 		<a id="home" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-house"></i> Home</a>
 62 | 		<a id="inbox" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-inbox"></i> Inbox</a>
 63 | 		<a id="week" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-calendar-week"></i> Planner</a>
 64 | 		<a id="projects" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-briefcase"></i> Projects</a>
 65 | 		<a id="tasks" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-list-check"></i> Tasks</a>
 66 | 		<a id="business" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-money-bill-wave"></i> Business</a>
 67 | 		<a id="knowledge" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-lightbulb"></i> Knowledge</a>
 68 | 		<a id="topics" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-layer-group"></i> Topics</a>
 69 | 		<a id="notes" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-book"></i> Notes</a>
 70 | 		<a id="media" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-bookmark"></i> Media</a>
 71 | 		<a id="resourses" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-wrench"></i> Resourses</a>
 72 | 		<a id="lifewiki" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-heart"></i> Lifewiki</a>
 73 | 
 74 | 
 75 | 
 76 | 	</nav>
 77 | 
 78 | 
 79 | 	<script>
 80 | 
 81 | 		let direction = "vertical";
 82 | 		if (direction === "vertical") {
 83 | 			document.head.insertAdjacentHTML("beforeend", `<style>.navMenu a {display: block; text-align:left; margin:7px} i{width:15px; margin-right:5px} .navMenu{margin:3px}</style>`)
 84 | 		}
 85 | 
 86 | 
 87 | 		function navigate(id) {
 88 | 
 89 | 			if (id == 'home')
 90 | 				window.open("https://www.notion.so/Home-743cb734ac4c41ee90896e039f0dd917", '_blank').focus();
 91 | 			else if (id == "inbox")
 92 | 				window.open("https://www.notion.so/Inbox-91a8ce98118147d384c511c67833bb6d", '_blank').focus();
 93 | 			else if (id == "week")
 94 | 				window.open("https://www.notion.so/shorouk/This-Week-bd3171730a4c4a9097399770acde9882", '_blank').focus();
 95 | 			else if (id == "month")
 96 | 				window.open("https://www.notion.so/shorouk/This-Month-c18ee8ef9c754f088670caa55df0b0e0", '_blank').focus();
 97 | 			else if (id == "projects")
 98 | 				window.open("https://www.notion.so/Projects-e6745abbeaf0418aab7b9f6c57f3aba0", '_blank').focus();
 99 | 			else if (id == "business")
100 | 				window.open("https://www.notion.so/shorouk/Business-Dashboard-75f3e1cb7d0a4895929ec5feed780e55", '_blank').focus();
101 | 			else if (id == "tasks")
102 | 				window.open("https://www.notion.so/Task-Manager-48ea6f04eaf24aa0889a5b5de34ea415", '_blank').focus();
103 | 			else if (id == "knowledge")
104 | 				window.open("https://www.notion.so/My-Knowledge-Base-7b003813544d478b9f61d813cfaefae5", '_blank').focus();
105 | 			else if (id == "topics")
106 | 				window.open("https://www.notion.so/Topics-Browser-bb6d50722de74a0e8cc2e678e76b0a44", '_blank').focus();
107 | 			else if (id == "notes")
108 | 				window.open("https://www.notion.so/The-Notebook-6939d2ac0fa84089a3c83ca657c9cdfb", '_blank').focus();
109 | 			else if (id == "media")
110 | 				window.open("https://www.notion.so/Multimedia-Library-74c4d2eea2fc4f25b3fdebaaea4de2c3", '_blank').focus();
111 | 			else if (id == "resourses")
112 | 				window.open("https://www.notion.so/Resources-Library-766dde1a6f1e4a3499b9d65a8013e5e3", '_blank').focus();
113 | 			else if (id == "lifewiki")
114 | 				window.open("https://www.notion.so/My-Life-wiki-51e257c76f984c2cb58858573a101989", '_blank').focus();
115 | 
116 | 		}
117 | 	</script>
118 | 
119 | 
120 | </body>
121 | 
122 | </html>
123 | 


--------------------------------------------------------------------------------
/nav.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 
  6 | 	<!-- Font Awesome -->
  7 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  8 | 
  9 | 	<!-- Google Font -->
 10 | 
 11 | 	<link rel="preconnect" href="https://fonts.googleapis.com">
 12 | 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 13 | 	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
 14 | 
 15 | 	<!-------->
 16 | 
 17 | 	<style>
 18 | 		* {
 19 | 			margin: 0;
 20 | 			padding: 0;
 21 | 			-webkit-box-sizing: border-box;
 22 | 			box-sizing: border-box;
 23 | 		}
 24 | 
 25 | 
 26 | 		.navMenu {
 27 | 			font-family: 'Advent Pro', sans-serif;
 28 | 			padding: 8px;
 29 | 			text-align: center;
 30 | 			margin: 7px auto;
 31 | 			width: fit-content;
 32 | 		}
 33 | 
 34 | 		.navMenu a {
 35 | 			color: #272727;
 36 | 			text-decoration: none;
 37 | 			text-transform: uppercase;
 38 | 			display: inline-block;
 39 | 			padding: 6px;
 40 | 		}
 41 | 
 42 | 		.background {
 43 | 			background-color: #ece5f0;
 44 | 		}
 45 | 
 46 | 		.border {
 47 | 			border: 1px solid #cccccc;
 48 | 
 49 | 		}
 50 | 
 51 | 		.navMenu a:hover {
 52 | 
 53 | 			color: #d09c0b;
 54 | 		}
 55 | 	</style>
 56 | </head>
 57 | 
 58 | <body>
 59 | 
 60 | 	<nav class="navMenu  border">
 61 | 		<a id="home" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-house"></i> Home</a>
 62 | 		<a id="inbox" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-inbox"></i> Inbox</a>
 63 | 		<a id="week" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-calendar-week"></i> Planner</a>
 64 | 		<a id="projects" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-briefcase"></i> Projects</a>
 65 | 		<a id="tasks" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-list-check"></i> Tasks</a>
 66 | 		<a id="business" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-money-bill-wave"></i> Business</a>
 67 | 		<a id="knowledge" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-lightbulb"></i> Knowledge</a>
 68 | 		<a id="topics" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-layer-group"></i> Topics</a>
 69 | 		<a id="notes" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-book"></i> Notes</a>
 70 | 		<a id="media" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-bookmark"></i> Media</a>
 71 | 		<a id="resourses" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-wrench"></i> Resourses</a>
 72 | 		<a id="lifewiki" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-heart"></i> Lifewiki</a>
 73 | 
 74 | 
 75 | 
 76 | 	</nav>
 77 | 
 78 | 
 79 | 	<script>
 80 | 
 81 | 		let direction = "horizontal";
 82 | 		if (direction === "vertical") {
 83 | 			document.head.insertAdjacentHTML("beforeend", `<style>.navMenu a {display: block; text-align:left; margin:7px} i{width:15px; margin-right:5px} .navMenu{margin:3px}</style>`)
 84 | 		}
 85 | 
 86 | 
 87 | 		function navigate(id) {
 88 | 
 89 | 			if (id == 'home')
 90 | 				window.open("https://example.com", '_blank').focus();
 91 | 			else if (id == "inbox")
 92 | 				window.open("https://example.com", '_blank').focus();
 93 | 			else if (id == "week")
 94 | 				window.open("https://example.com", '_blank').focus();
 95 | 			else if (id == "month")
 96 | 				window.open("https://example.com", '_blank').focus();
 97 | 			else if (id == "projects")
 98 | 				window.open("https://example.com", '_blank').focus();
 99 | 			else if (id == "business")
100 | 				window.open("https://example.com", '_blank').focus();
101 | 			else if (id == "tasks")
102 | 				window.open("https://example.com", '_blank').focus();
103 | 			else if (id == "knowledge")
104 | 				window.open("https://example.com", '_blank').focus();
105 | 			else if (id == "topics")
106 | 				window.open("https://example.com", '_blank').focus();
107 | 			else if (id == "notes")
108 | 				window.open("https://example.com", '_blank').focus();
109 | 			else if (id == "media")
110 | 				window.open("https://example.com", '_blank').focus();
111 | 			else if (id == "resourses")
112 | 				window.open("https://example.com3", '_blank').focus();
113 | 			else if (id == "lifewiki")
114 | 				window.open("https://example.com", '_blank').focus();
115 | 
116 | 		}
117 | 	</script>
118 | 
119 | 
120 | </body>
121 | 
122 | </html>
123 | 


--------------------------------------------------------------------------------
/photo-gallery/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2022 WebSonick (https://codepen.io/WebSonick/pen/DEpXOZ)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/photo-gallery/README.md:
--------------------------------------------------------------------------------
1 | # HTML CSS photo gallery
2 | 
3 | A Pen created on CodePen.io. Original URL: [https://codepen.io/WebSonick/pen/DEpXOZ](https://codepen.io/WebSonick/pen/DEpXOZ).
4 | 
5 | A beautiful photo gallery with HTML and CSS


--------------------------------------------------------------------------------
/photo-gallery/austria.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/austria.jpeg


--------------------------------------------------------------------------------
/photo-gallery/bali.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/bali.jpeg


--------------------------------------------------------------------------------
/photo-gallery/budapest.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/budapest.jpg


--------------------------------------------------------------------------------
/photo-gallery/cusco.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/cusco.jpeg


--------------------------------------------------------------------------------
/photo-gallery/giza.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/giza.jpg


--------------------------------------------------------------------------------
/photo-gallery/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - HTML CSS photo gallery</title>
 6 |   <link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <div class="photo-album">
12 |     
13 | 	<a href="" class="large polaroid img1"><img src="rome.jpeg" >Rome, Italy</a>
14 | 	<a href="" class="polaroid img2"><img src="austria.jpeg" >Halstatt, Austria</a>
15 | 	<a href="" class="small polaroid img3"><img src="peru.jpeg" >Peru</a>
16 | 	<a href="" class="medium polaroid img4"><img src="bali.jpeg" >Bali, Indonesia</a>
17 | 	<a href="" class="polaroid img5"><img src="italy.jpeg" >Italy</a>
18 | 	<a href="" class="polaroid img6"><img src="osaka.jpeg" >Osaka, Japan</a>
19 | 	<a href="" class="polaroid img7"><img src="rio.jpeg" >Rio de Janeiro, Brazil</a>
20 | 	<a href="" class="small polaroid img8"><img src="paris.jpg" >Paris, France</a>
21 | 	<a href="" class="medium polaroid img9"><img src="cusco.jpeg" >Cusco, Peru</a>
22 | 	<a href="" class="polaroid img10"><img src="kyoto.jpeg" >Kyoto, Japan</a>
23 | 	<a href="" class="small polaroid img11"><img src="milan.jpeg" >Milan, Iatly</a>
24 | 	<a href="" class="small polaroid img12"><img src="budapest.jpg" >Budapest, Hungary</a>
25 | 	<a href="" class="small polaroid img13"><img src="vienna.jpg" >Vienna, Austria</a>
26 | 	<a href="" class="small polaroid img14"><img src="mexico.jpg" >Mexico</a>
27 | 	<a href="" class="polaroid img15"><img src="giza.jpg" >Giza, Egypt</a>
28 | 
29 | </div>
30 | <!-- partial -->
31 |   
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/photo-gallery/italy.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/italy.jpeg


--------------------------------------------------------------------------------
/photo-gallery/kyoto.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/kyoto.jpeg


--------------------------------------------------------------------------------
/photo-gallery/mexico.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/mexico.jpg


--------------------------------------------------------------------------------
/photo-gallery/milan.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/milan.jpeg


--------------------------------------------------------------------------------
/photo-gallery/osaka.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/osaka.jpeg


--------------------------------------------------------------------------------
/photo-gallery/paris.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/paris.jpg


--------------------------------------------------------------------------------
/photo-gallery/peru.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/peru.jpeg


--------------------------------------------------------------------------------
/photo-gallery/rio.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/rio.jpeg


--------------------------------------------------------------------------------
/photo-gallery/rome.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/rome.jpeg


--------------------------------------------------------------------------------
/photo-gallery/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     background-color: #ffffff;
  3 |     color: #333;
  4 |     font-family:fantasy,"Lucida handwriting", "Snell Roundhand", "Helvetica Neue", Arial, Helvetica, sans-serif;
  5 |     font-size: 16px;
  6 | }
  7 | 
  8 | a.polaroid {
  9 |     display: block;
 10 |     text-decoration: none;
 11 |     color: #333;
 12 |     padding: 10px 10px 20px 10px;
 13 |     width: 150px;
 14 |     /* border: 1px solid #BFBFBF; */
 15 |     background-color: #f6f6f6;
 16 |     z-index: 2;
 17 |     font-size: 0.7em;
 18 |     -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 19 |     -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 20 |     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 21 |     -webkit-transition: -webkit-transform 0.5s ease-in;
 22 | }
 23 | a.polaroid:hover, a.polaroid:focus, a.polaroid:active {
 24 |     z-index: 999;
 25 |     border-color: #6A6A6A;
 26 |     -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 27 |     -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 28 |     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 29 |     -webkit-transform: rotate(0deg);
 30 |     -moz-transform: rotate(0deg);
 31 |     transform: rotate(0deg);
 32 | }
 33 | .polaroid img {
 34 |     margin: 0 0 15px;
 35 |     width: 150px;
 36 |     height: 150px;
 37 | }
 38 | a img {
 39 |     border: none;
 40 |     display: block;
 41 | }
 42 | .photo-album {
 43 |     position: relative;
 44 |     width: 80%;
 45 |     margin: 0 auto;
 46 |     max-width: 70em;
 47 |     height: 450px;
 48 |     margin-top: 5em;
 49 |     min-width: 800px;
 50 |     max-width: 900px;
 51 | }
 52 | .photo-album .polaroid {
 53 |     position: absolute;
 54 | }
 55 | .photo-album h1 {
 56 |     position: absolute;
 57 |     z-index: 5;
 58 |     top: 150px;
 59 |     text-align: center;
 60 |     width: 100%;
 61 |     line-height: 1.9;
 62 | }
 63 | .photo-album h1 span {
 64 |     background-color: white;
 65 |     font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
 66 |     padding: 0.4em 0.8em 0.3em 0.8em;
 67 |     -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 68 |     -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 69 |     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 70 |     border: 1px solid #6A6A6A;
 71 | }
 72 | .photo-album .small {
 73 |     width: 75px;
 74 |     padding: 6px 6px 12px 6px;
 75 |     font-size: 0.6em;
 76 | }
 77 | .photo-album .small img {
 78 |     width: 75px;
 79 |     height: 75px;
 80 | }
 81 | .photo-album .medium {
 82 |     width: 200px;
 83 |     padding: 13px 13px 26px 13px;
 84 |     font-size: 0.8em;
 85 | }
 86 | .photo-album .medium img {
 87 |     width: 200px;
 88 |     height: 200px;
 89 | }
 90 | .photo-album .large {
 91 |     width: 300px;
 92 |     padding: 20px 20px 30px 20px;
 93 |     font-size: 1em;
 94 | }
 95 | .photo-album .large img {
 96 |     width: 300px;
 97 |     height: 300px;
 98 | }
 99 | .photo-album .img1 {
100 |     bottom: 10px;
101 |     right: 365px;
102 |     -webkit-transform: rotate(10deg);
103 |     -moz-transform: rotate(10deg);
104 |     transform: rotate(10deg);
105 | }
106 | .photo-album .img2 {
107 |     top: 50px;
108 |     right: 20px;
109 |     -webkit-transform: rotate(-4deg);
110 |     -moz-transform: rotate(-4deg);
111 |     transform: rotate(-4deg);
112 | }
113 | .photo-album .img3 {
114 |     left: 400px;
115 |     top: 0;
116 |     -webkit-transform: rotate(-5deg);
117 |     -moz-transform: rotate(-5deg);
118 |     transform: rotate(-5deg);
119 | }
120 | .photo-album .img4 {
121 |     top: 10px;
122 |     left: 495px;
123 |     -webkit-transform: rotate(-20deg);
124 |     -moz-transform: rotate(-20deg);
125 |     transform: rotate(-20deg);
126 | }
127 | .photo-album .img5 {
128 |     bottom: 0;
129 |     right: 0;
130 |     -webkit-transform: rotate(1deg);
131 |     -moz-transform: rotate(1deg);
132 |     transform: rotate(1deg);
133 | }
134 | .photo-album .img6 {
135 |     bottom: 10px;
136 |     right: 156px;
137 |     -webkit-transform: rotate(6deg);
138 |     -moz-transform: rotate(6deg);
139 |     transform: rotate(6deg);
140 | }
141 | .photo-album .img7 {
142 |     bottom:0;
143 |     left:400px;
144 |     -webkit-transform: rotate(-10deg);
145 |     -moz-transform: rotate(-10deg);
146 |     transform: rotate(-10deg);
147 | }
148 | .photo-album .img8 {
149 |     bottom: -20px;
150 |     left: 700px;
151 |     -webkit-transform: rotate(-8deg);
152 |     -moz-transform: rotate(-8deg);
153 |     transform: rotate(-8deg);
154 | }
155 | .photo-album .img9 {
156 |     bottom: 0;
157 |     left: 0;
158 |     -webkit-transform: rotate(-8deg);
159 |     -moz-transform: rotate(-8deg);
160 |     transform: rotate(-8deg);
161 | }
162 | .photo-album .img10 {
163 |     top: 0;
164 |     left: 20px;
165 |     -webkit-transform: rotate(8deg);
166 |     -moz-transform: rotate(8deg);
167 |     transform: rotate(8deg);
168 | }
169 | .photo-album .img11 {
170 |     top: 0;
171 |     right: 0;
172 |     -webkit-transform: rotate(-8deg);
173 |     -moz-transform: rotate(-8deg);
174 |     transform: rotate(-8deg);
175 | }
176 | .photo-album .img12 {
177 |     top: 0;
178 |     left: 680px;
179 |     -webkit-transform: rotate(18deg);
180 |     -moz-transform: rotate(18deg);
181 |     transform: rotate(18deg);
182 | }
183 | .photo-album .img13 {
184 |     bottom: -20px;
185 |     right: 630px;
186 |     -webkit-transform: rotate(4deg);
187 |     -moz-transform: rotate(4deg);
188 |     transform: rotate(4deg);
189 | }
190 | .photo-album .img14 {
191 |     top: 90px;
192 |     left: 430px;
193 |     -webkit-transform: rotate(15deg);
194 |     -moz-transform: rotate(15deg);
195 |     transform: rotate(15deg);
196 | }
197 | .photo-album .img15 {
198 |     left:176px;
199 |     top:20px;
200 |     -webkit-transform: rotate(-8deg);
201 |     -moz-transform: rotate(-8deg);
202 |     transform: rotate(-8deg);
203 | }
204 | a:hover, a:focus {
205 |     z-index: 5;
206 | }


--------------------------------------------------------------------------------
/photo-gallery/vienna.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoroukAziz/notion_widgets/6c27e123df0e35afabca61a246f482597e709ff4/photo-gallery/vienna.jpg


--------------------------------------------------------------------------------
/pomodoro/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2022 Adrianne Sebastian (https://codepen.io/arcsbstn/pen/ExEJvxM)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/pomodoro/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - Pomodoro Timer</title>
 6 |   <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <div id="root"></div>
12 | <!-- partial -->
13 |   <script type="module" src="./script.js"></script>
14 | 
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/pomodoro/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap');
  2 | 
  3 | /* General */
  4 | 
  5 | body {
  6 |   font-family: 'Roboto Mono', monospace;
  7 |  // background-color: #c2e6e8;
  8 | }
  9 | 
 10 | #root {
 11 |   display: flex;
 12 |   align-items: center;
 13 |   justify-content: center;
 14 | }
 15 | 
 16 | button,
 17 | button:active {
 18 |   background-color: rgb(234,178,156);
 19 |   border: none;
 20 |   width: 42px;
 21 |   height: 40px;
 22 |   border-radius: 100%;
 23 |   text-align: center;
 24 |   box-shadow: 0.2em 0.2em rgb(194, 91, 44);
 25 |   -webkit-box-shadow: 0.2em 0.2em rgb(194, 91, 44);
 26 |   -moz-box-shadow: 0.2em 0.2em rgb(194, 91, 44);
 27 | }
 28 | 
 29 | button:focus {
 30 |   translate: 0.2em 0.2em;
 31 |   box-shadow: 0.2em 0.2em rgb(194, 91, 44) inset;
 32 |   -webkit-box-shadow: 0.2em 0.2em rgb(194, 91, 44) inset;
 33 |   -moz-box-shadow: 0.2em 0.2em rgb(194, 91, 44) inset;
 34 | }
 35 | 
 36 | /* Clock Body */
 37 | 
 38 | .clock-container {
 39 |   background-color: rgb(240, 240, 190); 
 40 |   width: 350px;
 41 |   border-radius: 20px;
 42 |   padding: 30px;
 43 |   box-shadow: 10px 10px sienna;
 44 | }
 45 | 
 46 | /* Display + Stop/Start/Reset Controls */
 47 | 
 48 | #time-left {
 49 |   font-size: 70px;
 50 |   text-align: center;
 51 |   background-color: rgb(150,180,175);
 52 |   padding: 20px;
 53 |   border-radius: 20px;
 54 |   box-shadow: 3px 3px rgb(121, 145, 141) inset;
 55 | }
 56 | 
 57 | #display-controls {
 58 |   margin: 10px 0;
 59 |   display: flex;
 60 |   flex-direction: row;
 61 |   align-items: center;
 62 |   justify-content: space-between;
 63 | }
 64 | 
 65 | #timer-label {
 66 |   font-size: 25px;
 67 |   text-align: center;
 68 |   padding-top: 2px;
 69 |   background-color: rgb(150,180,175);
 70 |   border-radius: 10px;
 71 |   height: 40px;
 72 |   flex: 2;
 73 |   box-shadow: 3px 3px rgb(121, 145, 141) inset;
 74 | }
 75 | 
 76 | #timer-ssr {
 77 |   flex: 1;
 78 |   margin-left: 30px;
 79 |   display: flex;
 80 |   justify-content: space-between;
 81 |   flex-start: end;
 82 | }
 83 | 
 84 | /* Timer Length Controls */
 85 | 
 86 | .length-container {
 87 |   margin-top: 20px;
 88 |   display: flex;
 89 |   flex-direction: row;
 90 | }
 91 | 
 92 | .inc-dec-btn-container {
 93 |   margin: 0 auto;
 94 |   display: flex;
 95 |   flex-direction: row;
 96 |   justify-content: center;
 97 |   width: 140px;
 98 |   height:60px;
 99 | }
100 | 
101 | .break-container, 
102 | .session-container {
103 |   text-align: center;
104 | /*   display: inline-block; */
105 |   border: 2px solid rgb(234,178,156);
106 |   padding: 10px;
107 |   border-radius: 10px;
108 |   width: 48%;
109 | }
110 | 
111 | .timer-length {
112 |   font-size: 2em;
113 | }
114 | 
115 | .break-container,
116 | .inc-arrow {
117 |   margin-right: 12px;
118 | }
119 | 


--------------------------------------------------------------------------------
/pomodoro2/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2022 Douglas Luce (https://codepen.io/douglasluce/pen/MmEjrG)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/pomodoro2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - FCC Pomodoro Clock using React</title>
 6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 7 | <link rel="stylesheet" href="./style.css">
 8 | 
 9 | </head>
10 | <body>
11 | <!-- partial:index.partial.html -->
12 | <head>
13 |   <meta name="viewport" content="width=device-width, initial-scale=1"/>
14 | </head>
15 | <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
16 | <div id="root"></div>
17 | <!-- partial -->
18 |   <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
19 | <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script><script  src="./script.js"></script>
20 | 
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/pomodoro2/style.css:
--------------------------------------------------------------------------------
  1 | #root {
  2 |   background: #EEEBD0;
  3 |   width: 350px;
  4 |   height: 170px;
  5 |   margin: auto;
  6 |   border-radius: 1%;
  7 |   box-shadow: 5px 5px 2px #888888;
  8 |   margin-top: 3px;
  9 | }
 10 | 
 11 | body {
 12 |   color: #3A3335;
 13 |   font-family: VT323;
 14 |   font-weight: bold;
 15 | }
 16 | 
 17 | 
 18 | .pomodoro {
 19 |   height: 70px;
 20 |   display: flex;
 21 |   background: #FEDC3D;
 22 |   justify-content: center;
 23 |   box-shadow: 1px 1px 1px #888888;
 24 | }
 25 | 
 26 | 
 27 | .pomodoro button {
 28 |   padding: 5px 10px 5px 10px;
 29 |   margin-top: 100%;
 30 |   border: none;
 31 |   background: #01ABAA;
 32 |   font-size: 15px;
 33 |   font-family: VT323;
 34 |   font-weight: bold;
 35 |   text-align: center;
 36 |   box-shadow: 3px 3px 2px #888888;
 37 | }
 38 | 
 39 | .pomodoro button:active {
 40 |   background: #079fb0; 
 41 |   box-shadow: 0 0 0 transparent;
 42 | }
 43 | 
 44 | .pomodoro button:focus {
 45 |   outline:0;
 46 | }
 47 | 
 48 | .title {
 49 |   text-align: center;
 50 |   font-size: 20px;
 51 | }
 52 | 
 53 | .pomodoro .timer {
 54 |   font-size: 75px;
 55 |   margin: 0 20px;
 56 | }
 57 | 
 58 | .start-pause {
 59 |   display: flex;
 60 |   justify-content: center;
 61 | }
 62 | 
 63 | .start-pause button {
 64 |   border: none;
 65 |   background: #01ABAA;
 66 |   font-family: VT323;
 67 |   font-weight: bold;
 68 |   margin: 15px;
 69 |   box-shadow: 3px 3px 2px #888888;
 70 |   width: 90px;
 71 |   font-size: 25px;
 72 | }
 73 | 
 74 | .start-pause button:active {
 75 |    background: #079fb0; 
 76 |   box-shadow: 0 0 0 transparent;
 77 | }
 78 | 
 79 | .start-pause button:focus {
 80 |   outline: 0;
 81 | }
 82 | 
 83 | .reset {
 84 |   text-align: center;
 85 | }
 86 | 
 87 | .reset button {
 88 |   border: none;
 89 |   background: #DC5754;
 90 |   font-size: 25px;
 91 |   font-family: VT323;
 92 |   font-weight: bold;
 93 |   box-shadow: 3px 3px 2px #888888;
 94 |   margin-left: 115px;
 95 |   width: 90px;
 96 | 
 97 | }
 98 | 
 99 | .reset button:active {
100 |   box-shadow: 0 0 0 transparent;
101 | }
102 | 
103 | .reset button:focus {
104 |   outline: 0;
105 | }
106 | 
107 | .contain-it {
108 |   display: flex;
109 |   justify-content: center;
110 |   align-items: center;
111 | }
112 | 
113 | .break-length {
114 |   margin-left: 30px;
115 | }
116 | 
117 | .break-time {
118 |   display: flex;
119 |   flex-flow: row;
120 |   align-items: center;
121 |   font-size: 15px;
122 | }
123 | 
124 | .break-time button {
125 |   border: none;
126 |   background: #DC5754;
127 |   box-shadow: 1px 1px 1px #888888;
128 | }
129 | 
130 | .break-time button:active {
131 |   box-shadow: 0 0 0 transparent;
132 | }
133 | 
134 | .break-time button:focus {
135 |   outline: 0;
136 | }
137 | 
138 | .break-text {
139 |   font-size: 20px;
140 |   padding: 5px;
141 | }
142 | 


--------------------------------------------------------------------------------
/pomodoro3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - Pomodoro Timer</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 7 | <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
 8 | 
 9 | </head>
10 | <body>
11 | <!-- partial:index.partial.html -->
12 | <div id="root"></div>
13 | <!-- partial -->
14 |   <script type="module" src="./script.js"></script>
15 | 
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/pomodoro3/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap');
  2 | 
  3 | /* General */
  4 | 
  5 | body {
  6 |   font-family: 'Sans serif', ;
  7 |   background-color: #D1C4E9; color: #D1C4E9
  8 | }
  9 | 
 10 | #root {
 11 |   display: flex;
 12 |   align-items: center;
 13 |   justify-content: center;
 14 |   height: 100vh;
 15 | }
 16 | 
 17 | button,
 18 | button:active {
 19 |   background-color: rgb (209, 196, 233);
 20 |   border: none;
 21 |   width: 42px;
 22 |   height: 40px;
 23 |   border-radius: 100%;
 24 |   text-align: center;
 25 |   box-shadow: 0.2em 0.2em rgb(209, 196, 233); 
 26 |   -webkit-box-shadow: 0.2em 0.2em rgb(209, 196, 233); 
 27 |   -moz-box-shadow: 0.2em 0.2em rgb(209, 196, 233);
 28 | }
 29 | 
 30 | button:focus {
 31 |   translate: 0.2em 0.2em;
 32 |   box-shadow: 0.2em 0.2em rgb(209, 196, 233) inset;
 33 |   -webkit-box-shadow: 0.2em 0.2em rgb(209, 196, 233) inset;
 34 |   -moz-box-shadow: 0.2em 0.2em rgb(209, 196, 233) inset;
 35 | }
 36 | 
 37 | /* Clock Body */
 38 | 
 39 | .clock-container {
 40 |   background-color: rgb(255,255,255); 
 41 |   width: 350px;
 42 |   border-radius: 20px;
 43 |   padding: 30px;
 44 |   box-shadow: 10px 10px lilás;
 45 | }
 46 | 
 47 | /* Display + Stop/Start/Reset Controls */
 48 | 
 49 | #time-left {
 50 |   font-size: 70px;
 51 |   text-align: center;
 52 |   background-color: rgb(255,255,255);
 53 |   padding: 20px;
 54 |   border-radius: 20px;
 55 |   box-shadow: 3px 3px rgb(209, 196, 233) inset;
 56 | }
 57 | 
 58 | #display-controls {
 59 |   margin: 10px 0;
 60 |   display: flex;
 61 |   flex-direction: row;
 62 |   align-items: center;
 63 |   justify-content: space-between;
 64 | }
 65 | 
 66 | #timer-label {
 67 |   font-size: 27px; color: #EDECE9;
 68 |   text-align: center;
 69 |   padding-top: 10px;
 70 |   background-color: rgb(209, 196, 233);
 71 |   border-radius: 10px;
 72 |   height: 40px;
 73 |   flex: 2;
 74 |   box-shadow: 3px 3px rgb() inset;
 75 | }
 76 | 
 77 | #timer-ssr {
 78 |   flex: 1;
 79 |   margin-left: 30px;
 80 |   display: flex;
 81 |   justify-content: space-between;
 82 |   flex-start: end;
 83 | }
 84 | 
 85 | /* Timer Length Controls */
 86 | 
 87 | .length-container {
 88 |   margin-top: 20px;
 89 |   display: flex;
 90 |   flex-direction: row;
 91 | }
 92 | 
 93 | .inc-dec-btn-container {
 94 |   margin: 0 auto;
 95 |   display: flex;
 96 |   flex-direction: row;
 97 |   justify-content: center;
 98 |   width: 140px;
 99 |   height: 60px;
100 | }
101 | 
102 | .break-container, 
103 | .session-container {
104 |   text-align: center; 
105 | /*   display: inline-block; */
106 |   border: 2px solid rgb(209, 196, 233);
107 |   padding: 10px;
108 |   border-radius: 10px;
109 |   width: 50%;
110 | }
111 | 
112 | .timer-length {
113 |   font-size: 2em;
114 | }
115 | 
116 | .break-container,
117 | .inc-arrow {
118 |   margin-right: 12px;
119 | }


--------------------------------------------------------------------------------
/socials/socials1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <!-- Auther: Shorouk Abdelaziz  https://shorouk.dev -->
  4 | 
  5 | <html lang="en">
  6 | 
  7 | <head>
  8 |   <meta charset="UTF-8">
  9 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 10 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 11 |   <title>My Socials</title>
 12 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
 13 | 
 14 |   <style>
 15 |     * {
 16 |       margin: 0;
 17 |       padding: 0;
 18 |       box-sizing: border-box;
 19 |     }
 20 | 
 21 |     body {
 22 |       display: grid;
 23 |       font-family: "Poppins", sans-serif;
 24 |       place-items: center;
 25 |     }
 26 | 
 27 |     .wrapper {
 28 |       padding-top: 10px;
 29 |       display: inline-flex;
 30 | 
 31 |     }
 32 | 
 33 |     .icon {
 34 |       /* Change the icon size here */
 35 |       font-size: 2em;
 36 |       /* Change the icons colours here*/
 37 |       color: #7a7a7a
 38 |     }
 39 | 
 40 | 
 41 |     .blog:hover {
 42 |       color: #ffbd2f;
 43 |     }
 44 | 
 45 |     .email:hover {
 46 |       color: #23c8c8;
 47 |     }
 48 | 
 49 |     .facebook:hover {
 50 |       color: #4267B2;
 51 |     }
 52 | 
 53 |     .instagram:hover {
 54 |       color: rgb(241, 102, 217);
 55 |     }
 56 | 
 57 |     .linkedin:hover {
 58 |       color: #0e76a8;
 59 |     }
 60 | 
 61 |     .twitter:hover {
 62 |       color: #26a7de;
 63 |     }
 64 | 
 65 |     .reddit:hover {
 66 |       color: #ff4500;
 67 |     }
 68 | 
 69 |     .tiktok:hover {
 70 |       color: #ff0050;
 71 |     }
 72 | 
 73 |     .youtube:hover {
 74 |       color: #FF0000;
 75 |     }
 76 | 
 77 |     .pinterest:hover {
 78 |       color: #c8232c;
 79 |     }
 80 | 
 81 |     .telegram:hover {
 82 |       color: #2AABEE;
 83 |     }
 84 | 
 85 |     .social {
 86 |       position: relative;
 87 |       margin: 10px;
 88 |       cursor: pointer;
 89 |     }
 90 |   </style>
 91 | 
 92 | </head>
 93 | 
 94 | <body>
 95 | 
 96 |   <body>
 97 | 
 98 |     <div class="wrapper">
 99 | 
100 |       <!-- Start blog Icon -->
101 |       <div id="blog" onclick="navigate(this.id)" class="social">
102 |         <span class="icon blog"><i class="fa-solid fa-blog"></i></span>
103 |       </div>
104 |       <!-- End blog Icon -->
105 | 
106 |       <!-- Start email Icon -->
107 |       <div id="email" onclick="navigate(this.id)" class="social">
108 |         <span class="icon email"><i class="fa-solid fa-envelope"></i></span>
109 |       </div>
110 |       <!-- End email Icon -->
111 | 
112 |       <!-- Start facebook Icon -->
113 |       <div id="facebook" onclick="navigate(this.id)" class="social">
114 |         <span class="icon facebook"><i class="fab fa-facebook"></i></span>
115 |       </div>
116 |       <!-- End facebook Icon -->
117 | 
118 |       <!-- Start instagram Icon -->
119 |       <div id="instagram" onclick="navigate(this.id)" class="social">
120 |         <span class="icon instagram"><i class="fab fa-instagram"></i></span>
121 |       </div>
122 |       <!-- End instagram Icon -->
123 | 
124 |       <!-- Start linkedin Icon -->
125 |       <div id="linkedin" onclick="navigate(this.id)" class="social">
126 |         <span class="icon linkedin"><i class="fab fa-linkedin"></i></span>
127 |       </div>
128 |       <!-- End linkedin Icon -->
129 | 
130 |       <!-- Start twitter Icon -->
131 |       <div id="twitter" onclick="navigate(this.id)" class="social">
132 |         <span class="icon twitter"><i class="fab fa-twitter"></i></span>
133 |       </div>
134 |       <!-- End twitter Icon -->
135 | 
136 |       <!-- Start reddit Icon -->
137 |       <div id="reddit" onclick="navigate(this.id)" class="social">
138 |         <span class="icon reddit"><i class="fab fa-reddit"></i></span>
139 |       </div>
140 |       <!-- End reddit Icon -->
141 | 
142 |       <!-- Start tiktok Icon -->
143 |       <div id="tiktok" onclick="navigate(this.id)" class="social">
144 |         <span class="icon tiktok"><i class="fab fa-tiktok"></i></span>
145 |       </div>
146 |       <!-- End tiktok Icon -->
147 | 
148 |       <!-- Start youtube Icon -->
149 |       <div id="youtube" onclick="navigate(this.id)" class="social">
150 |         <span class="icon youtube"><i class="fab fa-youtube"></i></span>
151 |       </div>
152 |       <!-- End youtube Icon -->
153 | 
154 |       <!-- Start pinterest Icon -->
155 |       <div id="pinterest" onclick="navigate(this.id)" class="social">
156 |         <span class="icon pinterest"><i class="fab fa-pinterest"></i></span>
157 |       </div>
158 |       <!-- End pinterest Icon -->
159 | 
160 |       <!-- Start telegram Icon -->
161 |       <div id="telegram" onclick="navigate(this.id)" class="social">
162 |         <span class="icon telegram"><i class="fab fa-telegram"></i></span>
163 |       </div>
164 |       <!-- End telegram Icon -->
165 | 
166 | 
167 | 
168 |     </div>
169 | 
170 | 
171 | 
172 | 
173 |     <script>
174 |       function navigate(id) {
175 | 
176 |         //if you want the URL to open in the same window use '_parent'  instead of '_blank'
177 | 
178 |         if (id === "blog")
179 |           window.open("https://blog.shorouk.dev", '_blank').focus(); //Add the url to your blog
180 | 
181 |         else if (id === "email") {
182 |           window.open("mailto:someone@yoursite.com", '_blank').focus(); //Add your email after "mailto:""
183 |         }
184 | 
185 |         else if (id === "facebook") {
186 |           window.open("https://facebook.com/", '_blank').focus(); //Add the url to your facebook page or account
187 |         }
188 |         else if (id === "instagram") {
189 |           window.open("instagram.com", '_blank').focus(); //Add the url to your instagram account
190 |         }
191 |         else if (id === "linkedin") {
192 |           window.open("https://www.linkedin.com/", '_blank').focus(); //Add the url to your pinterest account
193 |         }
194 |         else if (id === "twitter") {
195 |           window.open("https://twitter.com/", '_blank').focus(); //Add the url to your pinterest account
196 |         }
197 |         else if (id === "reddit") {
198 |           window.open("https://www.reddit.com/", '_blank').focus(); //Add the url to your reddit account
199 |         }
200 |         else if (id === "tiktok") {
201 |           window.open("https://www.tiktok.com/", '_blank').focus(); //Add the url to your tiktok account
202 |         }
203 |         else if (id === "youtube") {
204 |           window.open("https://www.youtube.com/", '_blank').focus(); //Add the url to your youtube account
205 |         }
206 |         else if (id === "pinterest") {
207 |           window.open("https://www.pinterest.com/", '_blank').focus(); //Add the url to your pinterest account
208 |         }
209 |         else if (id === "telegram") {
210 |           window.open("https://web.telegram.org/", '_blank').focus(); //Add the url to your telegram account
211 |         }
212 |       }
213 | 
214 |     </script>
215 | 
216 | 
217 | 
218 |   </body>
219 | 
220 | </html>
221 | 


--------------------------------------------------------------------------------
/socials/socials2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <!-- Auther: Shorouk Abdelaziz  https://shorouk.dev -->
  4 | 
  5 | <html lang="en">
  6 | 
  7 | <head>
  8 |   <meta charset="UTF-8">
  9 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 10 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 11 |   <title>My Socials</title>
 12 | 
 13 |   <!-- Font Awesome -->
 14 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
 15 | 
 16 |   <style>
 17 |     * {
 18 |       margin: 0;
 19 |       padding: 0;
 20 |       box-sizing: border-box;
 21 |     }
 22 | 
 23 |     body {
 24 |       display: grid;
 25 |       place-items: center;
 26 |     }
 27 | 
 28 |     .wrapper {
 29 |       padding-top: 10px;
 30 |       display: inline-flex;
 31 | 
 32 |     }
 33 | 
 34 |     .social {
 35 |       background-color: #eae9e9;
 36 |       width: 55px;
 37 |       height: 55px;
 38 |       border-radius: 50%;
 39 |       display: grid;
 40 |       place-items: center;
 41 |     }
 42 | 
 43 |     .icon {
 44 |       font-size: 1.2em;
 45 |     }
 46 | 
 47 |     .blog:hover {
 48 |       background-color: #ffbd2f;
 49 |     }
 50 | 
 51 |     .email:hover {
 52 |       background-color: #23c8c8;
 53 |     }
 54 | 
 55 |     .facebook:hover {
 56 |       background-color: #4267B2;
 57 |     }
 58 | 
 59 |     .instagram:hover {
 60 |       background: rgb(241, 102, 217);
 61 |       background: radial-gradient(circle, rgba(241, 102, 217, 1) 10%, rgba(252, 176, 69, 1) 76%, rgba(253, 29, 29, 1) 100%);
 62 |     }
 63 | 
 64 |     .linkedin:hover {
 65 |       background-color: #0e76a8;
 66 |     }
 67 | 
 68 |     .twitter:hover {
 69 |       background-color: #26a7de;
 70 |     }
 71 | 
 72 |     .reddit:hover {
 73 |       background-color: #ff4500;
 74 |     }
 75 | 
 76 |     .tiktok:hover {
 77 |       background-color: #ff0050;
 78 |     }
 79 | 
 80 |     .youtube:hover {
 81 |       background-color: #FF0000;
 82 |     }
 83 | 
 84 |     .pinterest:hover {
 85 |       background-color: #c8232c;
 86 |     }
 87 | 
 88 |     .telegram:hover {
 89 |       background-color: #2AABEE;
 90 |     }
 91 | 
 92 |     .social {
 93 |       position: relative;
 94 |       margin: 10px;
 95 |       cursor: pointer;
 96 |     }
 97 | 
 98 |     .social:hover {
 99 |       color: #fff;
100 |     }
101 |   </style>
102 | 
103 | </head>
104 | 
105 | <body>
106 | 
107 |   <body>
108 | 
109 |     <div class="wrapper">
110 | 
111 |       <!-- Start blog Icon -->
112 |       <div id="blog" onclick="navigate(this.id)" class="social blog">
113 |         <span class="icon"><i class="fa-solid fa-blog"></i></span>
114 |       </div>
115 |       <!-- End blog Icon -->
116 | 
117 |       <!-- Start email Icon -->
118 |       <div id="email" onclick="navigate(this.id)" class="social email">
119 |         <span class="icon email"><i class="fa-solid fa-envelope"></i></span>
120 |       </div>
121 |       <!-- End email Icon -->
122 | 
123 |       <!-- Start facebook Icon -->
124 |       <div id="facebook" onclick="navigate(this.id)" class="social facebook">
125 |         <span class="icon"><i class="fab fa-facebook"></i></span>
126 |       </div>
127 |       <!-- End facebook Icon -->
128 | 
129 | 
130 |       <!-- Start instagram Icon -->
131 |       <div id="instagram" onclick="navigate(this.id)" class="social instagram">
132 |         <span class="icon"><i class="fab fa-instagram"></i></span>
133 |       </div>
134 |       <!-- End instagram Icon -->
135 | 
136 |       <!-- Start linkedin Icon -->
137 |       <div id="linkedin" onclick="navigate(this.id)" class="social linkedin">
138 |         <span class="icon"><i class="fab fa-linkedin"></i></span>
139 |       </div>
140 |       <!-- End linkedin Icon -->
141 | 
142 |       <!-- Start twitter Icon -->
143 |       <div id="twitter" onclick="navigate(this.id)" class="social twitter">
144 |         <span class="icon"><i class="fab fa-twitter"></i></span>
145 |       </div>
146 |       <!-- End twitter Icon -->
147 | 
148 | 
149 |       <!-- Start reddit Icon -->
150 |       <div id="reddit" onclick="navigate(this.id)" class="social reddit">
151 |         <span class="icon"><i class="fab fa-reddit"></i></span>
152 |       </div>
153 |       <!-- End reddit Icon -->
154 | 
155 | 
156 |       <!-- Start tiktok Icon -->
157 |       <div id="tiktok" onclick="navigate(this.id)" class="social tiktok">
158 |         <span class="icon"><i class="fab fa-tiktok"></i></span>
159 |       </div>
160 |       <!-- End tiktok Icon -->
161 | 
162 |       <!-- Start youtube Icon -->
163 |       <div id="youtube" onclick="navigate(this.id)" class="social youtube">
164 |         <span class="icon"><i class="fab fa-youtube"></i></span>
165 |       </div>
166 |       <!-- End youtube Icon -->
167 | 
168 |       <!-- Start pinterest Icon -->
169 |       <div id="pinterest" onclick="navigate(this.id)" class="social pinterest">
170 |         <span class="icon"><i class="fab fa-pinterest"></i></span>
171 |       </div>
172 |       <!-- End pinterest Icon -->
173 | 
174 |       <!-- Start telegram Icon -->
175 |       <div id="telegram" onclick="navigate(this.id)" class="social telegram">
176 |         <span class="icon telegram"><i class="fab fa-telegram"></i></span>
177 |       </div>
178 |       <!-- End telegram Icon -->
179 | 
180 |     </div>
181 | 
182 | 
183 | 
184 | 
185 |     <script>
186 |       function navigate(id) {
187 | 
188 |         //if you want the URL to open in the same window use '_parent'  instead of '_blank'
189 | 
190 |         if (id === "blog")
191 |           window.open("https://blog.shorouk.dev", '_blank').focus(); //Add the url to your blog
192 | 
193 |         else if (id === "email") {
194 |           window.open("mailto:someone@yoursite.com", '_blank').focus(); //Add your email after "mailto:""
195 |         }
196 | 
197 |         else if (id === "facebook") {
198 |           window.open("https://facebook.com/", '_blank').focus(); //Add the url to your facebook page or account
199 |         }
200 |         else if (id === "instagram") {
201 |           window.open("instagram.com", '_blank').focus(); //Add the url to your instagram account
202 |         }
203 |         else if (id === "linkedin") {
204 |           window.open("https://www.linkedin.com/", '_blank').focus(); //Add the url to your pinterest account
205 |         }
206 |         else if (id === "twitter") {
207 |           window.open("https://twitter.com/", '_blank').focus(); //Add the url to your pinterest account
208 |         }
209 |         else if (id === "reddit") {
210 |           window.open("https://www.reddit.com/", '_blank').focus(); //Add the url to your reddit account
211 |         }
212 |         else if (id === "tiktok") {
213 |           window.open("https://www.tiktok.com/", '_blank').focus(); //Add the url to your tiktok account
214 |         }
215 |         else if (id === "youtube") {
216 |           window.open("https://www.youtube.com/", '_blank').focus(); //Add the url to your youtube account
217 |         }
218 |         else if (id === "pinterest") {
219 |           window.open("https://www.pinterest.com/", '_blank').focus(); //Add the url to your pinterest account
220 |         }
221 |         else if (id === "telegram") {
222 |           window.open("https://web.telegram.org/", '_blank').focus(); //Add the url to your telegram account
223 |         }
224 |       }
225 | 
226 |     </script>
227 | 
228 | 
229 | 
230 |   </body>
231 | 
232 | </html>
233 | 


--------------------------------------------------------------------------------
/socials/socials4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <!-- Auther: Shorouk Abdelaziz  https://shorouk.dev -->
  4 | 
  5 | <html lang="en">
  6 | 
  7 | <head>
  8 |   <meta charset="UTF-8">
  9 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 10 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 11 |   <title>My Socials</title>
 12 | 
 13 |   <!-- Font Awesome -->
 14 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
 15 | 
 16 |   <style>
 17 |     * {
 18 |       margin: 0;
 19 |       padding: 0;
 20 |       box-sizing: border-box;
 21 |     }
 22 | 
 23 |     body {
 24 |       display: grid;
 25 |       place-items: center;
 26 |     }
 27 | 
 28 |     .wrapper {
 29 |       padding-top: 10px;
 30 |       display: inline-flex;
 31 | 
 32 |     }
 33 | 
 34 |     .fill {
 35 |       display: flex;
 36 |       align-items: center;
 37 |       justify-content: center;
 38 |       width: 40px;
 39 |       height: 40px;
 40 |       color: #fff;
 41 |       outline: 0;
 42 |       cursor: pointer;
 43 |       position: relative;
 44 |       margin: 5px;
 45 |       background-color: #4b4b4b;
 46 |     }
 47 | 
 48 |     .icon {
 49 |       font-size: 1em;
 50 |     }
 51 | 
 52 |     .blog:hover{
 53 |       background-color: #ffbd2f;
 54 |     }
 55 | 
 56 |     .email:hover{
 57 |       background-color: #23c8c8;
 58 |     }
 59 | 
 60 |     .facebook:hover{
 61 |       background-color: #4267B2;
 62 |     }
 63 | 
 64 |     .instagram:hover{
 65 |       background: #f86ee1;
 66 |     }
 67 | 
 68 |     .linkedin:hover{
 69 |       background-color: #0e76a8;
 70 |     }
 71 | 
 72 |     .twitter:hover{
 73 |       background-color: #26a7de;
 74 |     }
 75 | 
 76 |     .reddit:hover{
 77 |       background-color: #ff4500;
 78 |     }
 79 | 
 80 |     .tiktok:hover{
 81 |       background-color: #ff0050;
 82 |     }
 83 | 
 84 |     .youtube:hover{
 85 |       background-color: #FF0000;
 86 |     }
 87 | 
 88 |     .pinterest:hover{
 89 |       background-color: #c8232c;
 90 |     }
 91 | 
 92 |     .telegram:hover{
 93 |       background-color: #2AABEE;
 94 |     }
 95 | 
 96 |     .social {
 97 |       position: relative;
 98 |       margin: 10px;
 99 |       cursor: pointer;
100 |     }
101 | 
102 |     .social:hover {
103 |       color: #fff;
104 |     }
105 |   </style>
106 | 
107 | </head>
108 | 
109 | <body>
110 | 
111 |   <body>
112 | 
113 |     <div class="wrapper">
114 | 
115 |       <!-- Start blog Icon -->
116 |       <div id="blog" onclick="navigate(this.id)" class="fill  blog">
117 |         <span class="icon"><i class="fa-solid fa-blog"></i></span>
118 |       </div>
119 |       <!-- End blog Icon -->
120 | 
121 | 
122 |       <!-- Start email Icon -->
123 |       <div id="email" onclick="navigate(this.id)" class="fill email">
124 |         <span class="icon email"><i class="fa-solid fa-envelope"></i></span>
125 |       </div>
126 |       <!-- End email Icon -->
127 | 
128 | 
129 |       <!-- Start facebook Icon -->
130 |       <div id="facebook" onclick="navigate(this.id)" class="fill facebook">
131 |         <span class="icon"><i class="fab fa-facebook"></i></span>
132 |       </div>
133 |       <!-- End facebook Icon -->
134 | 
135 | 
136 |       <!-- Start instagram Icon -->
137 |       <div id="instagram" onclick="navigate(this.id)" class="fill instagram">
138 |         <span class="icon"><i class="fab fa-instagram"></i></span>
139 |       </div>
140 |       <!-- End instagram Icon -->
141 | 
142 | 
143 |       <!-- Start linkedin Icon -->
144 |       <div id="linkedin" onclick="navigate(this.id)" class="fill linkedin">
145 |         <span class="icon"><i class="fab fa-linkedin"></i></span>
146 |       </div>
147 |       <!-- End linkedin Icon -->
148 | 
149 | 
150 |       <!-- Start twitter Icon -->
151 |       <div id="twitter" onclick="navigate(this.id)" class="fill twitter">
152 |         <span class="icon"><i class="fab fa-twitter"></i></span>
153 |       </div>
154 |       <!-- End twitter Icon -->
155 | 
156 | 
157 |       <!-- Start reddit Icon -->
158 |       <div id="reddit" onclick="navigate(this.id)" class="fill reddit">
159 |         <span class="icon"><i class="fab fa-reddit"></i></span>
160 |       </div>
161 |       <!-- End reddit Icon -->
162 | 
163 | 
164 |       <!-- Start tiktok Icon -->
165 |       <div id="tiktok" onclick="navigate(this.id)" class="fill tiktok">
166 |         <span class="icon"><i class="fab fa-tiktok"></i></span>
167 |       </div>
168 |       <!-- End tiktok Icon -->
169 | 
170 |       <!-- Start youtube Icon -->
171 |       <div id="youtube" onclick="navigate(this.id)" class="fill youtube">
172 |         <span class="icon"><i class="fab fa-youtube"></i></span>
173 |       </div>
174 |       <!-- End youtube Icon -->
175 | 
176 |       <!-- Start pinterest Icon -->
177 |       <div id="pinterest" onclick="navigate(this.id)" class="fill pinterest">
178 |         <span class="icon"><i class="fab fa-pinterest"></i></span>
179 |       </div>
180 |       <!-- End pinterest Icon -->
181 | 
182 | 
183 |       <!-- Start telegram Icon -->
184 |       <div id="telegram" onclick="navigate(this.id)" class="fill telegram">
185 |         <span class="icon"><i class="fab fa-telegram"></i></span>
186 |       </div>
187 |       <!-- End telegram Icon -->
188 | 
189 | 
190 |     </div>
191 | 
192 | 
193 | 
194 | 
195 |     <script>
196 |       function navigate(id) {
197 | 
198 |         //if you want the URL to open in the same window use '_parent'  instead of '_blank'
199 | 
200 |         if (id === "blog")
201 |           window.open("https://blog.shorouk.dev", '_blank').focus(); //Add the url to your blog
202 | 
203 |         else if (id === "email") {
204 |           window.open("mailto:someone@yoursite.com", '_blank').focus(); //Add your email after "mailto:""
205 |         }
206 |         else if (id === "facebook") {
207 |           window.open("https://facebook.com/", '_blank').focus(); //Add the url to your facebook page or account
208 |         }
209 |         else if (id === "instagram") {
210 |           window.open("instagram.com", '_blank').focus(); //Add the url to your instagram account
211 |         }
212 |         else if (id === "linkedin") {
213 |           window.open("https://www.linkedin.com/", '_blank').focus(); //Add the url to your pinterest account
214 |         }
215 |         else if (id === "twitter") {
216 |           window.open("https://twitter.com/", '_blank').focus(); //Add the url to your pinterest account
217 |         }
218 |         else if (id === "reddit") {
219 |           window.open("https://www.reddit.com/", '_blank').focus(); //Add the url to your reddit account
220 |         }
221 |         else if (id === "tiktok") {
222 |           window.open("https://www.tiktok.com/", '_blank').focus(); //Add the url to your tiktok account
223 |         }
224 |         else if (id === "youtube") {
225 |           window.open("https://www.youtube.com/", '_blank').focus(); //Add the url to your youtube account
226 |         }
227 |         else if (id === "pinterest") {
228 |           window.open("https://www.pinterest.com/", '_blank').focus(); //Add the url to your pinterest account
229 |         }
230 |         else if (id === "telegram") {
231 |           window.open("https://web.telegram.org/", '_blank').focus(); //Add the url to your telegram account
232 |         }
233 |       }
234 | 
235 |     </script>
236 | 
237 | 
238 | 
239 |   </body>
240 | 
241 | </html>
242 | 


--------------------------------------------------------------------------------
/time_left_in_2020.html:
--------------------------------------------------------------------------------
 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 |     <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
 7 | 
 8 |     <title>Time Left in 2020</title>
 9 |     <style>
10 |         
11 |         body{
12 |             text-align: center;
13 |             font-family: 'Fjalla One', sans-serif;
14 |             background-color: #fff;
15 |         }
16 |         .box{
17 |             display: inline-block;
18 |             display: inline-block;
19 |             color: #fff;
20 |             padding: 10px;
21 |             border-radius: 5px;
22 |         }
23 |         #days{
24 |             background-color:#0f4d4f;
25 |         }
26 |         #hours{
27 |             background-color:#4CAF50;
28 |         }
29 |         #minutes{
30 |             background-color:#76250b;
31 |         }
32 |         h2{
33 |             display: inline-block;
34 |             margin-right: 10px;
35 |         }
36 | 
37 | 
38 |     </style>
39 | </head>
40 | <body>
41 |     
42 |     <div id="counter">
43 |     <h2>
44 |         Time left in 2020
45 |     </h2>
46 |     
47 |         <h2 class="box" id="days"></h2>
48 |         <h2 class="box" id="hours"></h2>
49 |         <h2 class="box" id="minutes"></h2>
50 |     </div>
51 | 
52 | 
53 | 
54 | <script>
55 |     function CountDownTimer  (date) {
56 |     left_days = document.getElementById("days");
57 |     left_hours = document.getElementById("hours");
58 |     left_minutes = document.getElementById("minutes");
59 | 
60 |     end = new Date(date);
61 |     _second = 1000;
62 |     _minute = _second * 60;
63 |     _hour = _minute * 60;
64 |     _day = _hour * 24;
65 |     }
66 |     function showRemaining (){
67 |     now = new Date();
68 |     distance = end - now;
69 |     if (distance <= 0){
70 |       clearInterval (timer)
71 |       document.getElementById("counter").innerHTML = "<h2>Nothing! It's Over</h2>";
72 |       return
73 |     } 
74 |     days = Math.floor(distance / _day)
75 |     hours = Math.floor((distance % _day) / _hour)
76 |     minutes = Math.floor((distance % _hour) / _minute)
77 |     left_days.innerHTML = days + " days "
78 |     left_hours.innerHTML = hours + " hours "
79 |     left_minutes.innerHTML = minutes + " mins "
80 |     }
81 |     
82 | 
83 | timer = setInterval (showRemaining, 10) 
84 | CountDownTimer( "01/01/2021 00:00 AM")
85 | </script>
86 | </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/time_left_in_2021.html:
--------------------------------------------------------------------------------
 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 |     <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
 7 | 
 8 |     <title>Time Left in 2020</title>
 9 |     <style>
10 |         
11 |         body{
12 |             text-align: center;
13 |             font-family: 'Fjalla One', sans-serif;
14 |             background-color: #fff;
15 |         }
16 |         .box{
17 |             display: inline-block;
18 |             display: inline-block;
19 |             color: #fff;
20 |             padding: 10px;
21 |             border-radius: 5px;
22 |         }
23 |         #days{
24 |             background-color:#0f4d4f;
25 |         }
26 |         #hours{
27 |             background-color:#4CAF50;
28 |         }
29 |         #minutes{
30 |             background-color:#76250b;
31 |         }
32 |         h2{
33 |             display: inline-block;
34 |             margin-right: 10px;
35 |         }
36 | 
37 | 
38 |     </style>
39 | </head>
40 | <body>
41 |     <div id="counter">
42 |         <h2>
43 |             Time left in 2021
44 |         </h2>    
45 |         
46 |             <h2 class="box" id="days"></h2>
47 |             <h2 class="box" id="hours"></h2>
48 |             <h2 class="box" id="minutes"></h2>
49 | 
50 |     </div>
51 |     
52 | 
53 | 
54 | 
55 | 
56 | <script>
57 |     function CountDownTimer  (date) {
58 |     left_days = document.getElementById("days");
59 |     left_hours = document.getElementById("hours");
60 |     left_minutes = document.getElementById("minutes");
61 | 
62 |     end = new Date(date);
63 |     _second = 1000;
64 |     _minute = _second * 60;
65 |     _hour = _minute * 60;
66 |     _day = _hour * 24;
67 |     }
68 |     function showRemaining (){
69 |     now = new Date();
70 |     distance = end - now;
71 |     distance2 = new Date("01/01/2021 00:00 AM") - now
72 |     if (distance <= 0 ){
73 |       clearInterval (timer)
74 |       document.getElementById("counter").innerHTML = "<h2>Nothing! It's Over<h2>";
75 |       return
76 |     }
77 |     else if (distance2 > 0  ){
78 |       clearInterval (timer)
79 |       document.getElementById("counter").innerHTML =  "<h2>2021 Didn't Start yet!</h2>";
80 |       return
81 |     } 
82 |     days = Math.floor(distance / _day)
83 |     hours = Math.floor((distance % _day) / _hour)
84 |     minutes = Math.floor((distance % _hour) / _minute)
85 |     left_days.innerHTML = days + " days "
86 |     left_hours.innerHTML = hours + " hours "
87 |     left_minutes.innerHTML = minutes + " mins "
88 |     }
89 |     
90 | 
91 | timer = setInterval (showRemaining, 1) 
92 | CountDownTimer( "01/01/2022 00:00 AM")
93 | </script>
94 | </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------
/time_left_in_this_month.html:
--------------------------------------------------------------------------------
 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 |     <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
 7 | 
 8 |     <title>Time Left in this month</title>
 9 |     <style>
10 |         
11 |         body{
12 |             text-align: center;
13 |             font-family: 'Fjalla One', sans-serif;
14 |             background-color: #fff;
15 |         }
16 |         .box{
17 |             display: inline-block;
18 |             display: inline-block;
19 |             color: #fff;
20 |             padding: 10px;
21 |             border-radius: 5px;
22 |         }
23 |         #days{
24 |             background-color:#0f4d4f;
25 |         }
26 |         #hours{
27 |             background-color:#4CAF50;
28 |         }
29 |         #minutes{
30 |             background-color:#76250b;
31 |         }
32 |         h2{
33 |             display: inline-block;
34 |             margin-right: 10px;
35 |         }
36 | 
37 | 
38 |     </style>
39 | </head>
40 | <body>
41 |     
42 |     <div id="counter">
43 |     <h2>
44 |         Time left in This Month
45 |     </h2>
46 |     
47 |         <h2 class="box" id="days"></h2>
48 |         <h2 class="box" id="hours"></h2>
49 |         <h2 class="box" id="minutes"></h2>
50 |     </div>
51 | 
52 | 
53 | 
54 | <script>
55 |     function CountDownTimer  () {
56 |     left_days = document.getElementById("days");
57 |     left_hours = document.getElementById("hours");
58 |     left_minutes = document.getElementById("minutes");
59 |  
60 |     }
61 |     function showRemaining (){
62 |     now = new Date();
63 |     days_in_this_month = new Date( now.getFullYear(), now.getMonth()+1, 0).getDate(); 
64 |     days = days_in_this_month- now.getDate();
65 |     hours = 23 - now.getHours();
66 |     minutes = 59 - now.getMinutes();
67 |     left_days.innerHTML = days + " days "
68 |     left_hours.innerHTML = hours + " hours "
69 |     left_minutes.innerHTML = minutes + " mins "
70 |     }
71 | 
72 | timer = setInterval (showRemaining, 1000) 
73 | CountDownTimer() ;
74 | </script>
75 | </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/time_left_in_this_week(start monday).html:
--------------------------------------------------------------------------------
 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 |     <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
 7 | 
 8 |     <title>Time Left this week</title>
 9 |     <style>
10 |         
11 |         body{
12 |             text-align: center;
13 |             font-family: 'Fjalla One', sans-serif;
14 |             background-color: #fff;
15 |         }
16 |         .box{
17 |             display: inline-block;
18 |             display: inline-block;
19 |             color: #fff;
20 |             padding: 10px;
21 |             border-radius: 5px;
22 |             min-width: 40px;
23 |         }
24 |         #days{
25 |             background-color:#0f4d4f;
26 |         }
27 |         #hours{
28 |             background-color:#4CAF50;
29 |         }
30 |         #minutes{
31 |             background-color:#76250b;
32 |         }
33 |         h2{
34 |             display: inline-block;
35 |             margin-right: 10px;
36 |             margin-block-start: 5px;
37 |         }
38 |         h3{
39 |             text-align: center;
40 |             
41 |         }
42 |         .small{
43 |             font-size: 15px;
44 |             font-weight: lighter;
45 |         }
46 | 
47 | 
48 |     </style>
49 | </head>
50 | <body>
51 |     
52 |     <div id="counter">
53 |     <h3>
54 |         Time left in This Week
55 |     </h3>
56 |     
57 |         <h2 class="box" id="days"></h2>
58 |         <h2 class="box" id="hours"></h2>
59 |         <h2 class="box" id="minutes"></h2>
60 |     </div>
61 | 
62 | 
63 | 
64 | <script>
65 |     function CountDownTimer  () {
66 |     left_days = document.getElementById("days");
67 |     left_hours = document.getElementById("hours");
68 |     left_minutes = document.getElementById("minutes");
69 |  
70 |     }
71 |     function showRemaining (){
72 |     now = new Date();
73 |     // days_in_this_month = new Date( now.getFullYear(), now.getMonth()+1, 0).getDate(); 
74 |     // week starts on Monday
75 |    
76 |     if(now.getDay() == 0 ){
77 |       d = 6
78 |     }
79 |     else{
80 |        d = now.getDay() - 1
81 |     }
82 |     days = 6 - d ;
83 |     hours = 23 - now.getHours();
84 |     minutes = 59 - now.getMinutes();
85 |     left_days.innerHTML = days + "<br> <span class=\"small\"> days </span>"
86 |     left_hours.innerHTML = hours + "<br> <span class=\"small\"> hours</span>";
87 |     left_minutes.innerHTML = minutes + "<br> <span class=\"small\">mins</span>";
88 |     }
89 | 
90 | timer = setInterval (showRemaining, 1000) 
91 | CountDownTimer() ;
92 | </script>
93 | </body>
94 | </html>
95 | 


--------------------------------------------------------------------------------
/time_left_in_this_week(start sunday).html:
--------------------------------------------------------------------------------
 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 |     <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
 7 | 
 8 |     <title>Time Left this week</title>
 9 |     <style>
10 |         
11 |         body{
12 |             text-align: center;
13 |             font-family: 'Fjalla One', sans-serif;
14 |             background-color: #fff;
15 |         }
16 |         .box{
17 |             display: inline-block;
18 |             display: inline-block;
19 |             color: #fff;
20 |             padding: 10px;
21 |             border-radius: 5px;
22 |             min-width: 40px;
23 |         }
24 |         #days{
25 |             background-color:#0f4d4f;
26 |         }
27 |         #hours{
28 |             background-color:#4CAF50;
29 |         }
30 |         #minutes{
31 |             background-color:#76250b;
32 |         }
33 |         h2{
34 |             display: inline-block;
35 |             margin-right: 10px;
36 |             margin-block-start: 5px;
37 |         }
38 |         h3{
39 |             text-align: center;
40 |             
41 |         }
42 |         .small{
43 |             font-size: 15px;
44 |             font-weight: lighter;
45 |         }
46 | 
47 | 
48 |     </style>
49 | </head>
50 | <body>
51 |     
52 |     <div id="counter">
53 |     <h3>
54 |         Time left in This Week
55 |     </h3>
56 |     
57 |         <h2 class="box" id="days"></h2>
58 |         <h2 class="box" id="hours"></h2>
59 |         <h2 class="box" id="minutes"></h2>
60 |     </div>
61 | 
62 | 
63 | 
64 | <script>
65 |     function CountDownTimer  () {
66 |     left_days = document.getElementById("days");
67 |     left_hours = document.getElementById("hours");
68 |     left_minutes = document.getElementById("minutes");
69 |  
70 |     }
71 |     function showRemaining (){
72 |     now = new Date();
73 |     // days_in_this_month = new Date( now.getFullYear(), now.getMonth()+1, 0).getDate(); 
74 |     // week starts on sunday
75 |     days = 6 - now.getDay();
76 |     hours = 23 - now.getHours();
77 |     minutes = 59 - now.getMinutes();
78 |     left_days.innerHTML = days + "<br> <span class=\"small\"> days </span>"
79 |     left_hours.innerHTML = hours + "<br> <span class=\"small\"> hours</span>";
80 |     left_minutes.innerHTML = minutes + "<br> <span class=\"small\">mins</span>";
81 |     }
82 | 
83 | timer = setInterval (showRemaining, 1000) 
84 | CountDownTimer() ;
85 | </script>
86 | </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/time_left_today.html:
--------------------------------------------------------------------------------
 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 |     <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
 7 | 
 8 |     <title>Time Left Today</title>
 9 |     <style>
10 |         
11 |         body{
12 |             text-align: center;
13 |             font-family: 'Fjalla One', sans-serif;
14 |             background-color: #fff;
15 |         }
16 |         .box{
17 |             display: inline-block;
18 |             display: inline-block;
19 |             color: #fff;
20 |             padding: 10px;
21 |             border-radius: 5px;
22 |             min-width: 40px;
23 |         }
24 |         #days{
25 |             background-color:#0f4d4f;
26 |         }
27 |         #hours{
28 |             background-color:#4CAF50;
29 |         }
30 |         #minutes{
31 |             background-color:#76250b;
32 |         }
33 |         h2{
34 |             display: inline-block;
35 |             margin-right: 10px;
36 |             margin-block-start:5px;
37 |         }
38 |         .small{
39 |             font-size: 15px;
40 |             font-weight: lighter;
41 |         }
42 | 
43 | 
44 |     </style>
45 | </head>
46 | <body>
47 |     
48 |     <!-- <div id="counter"> -->
49 |     <!-- <h2>
50 |         Time left today
51 |     </h2> -->
52 |     
53 |         <!-- <h2 class="box" id="days"></h2> -->
54 |         <h2 class="box" id="hours"></h2>
55 |         <h2 class="box" id="minutes"></h2>
56 |     <!-- </div> -->
57 | 
58 | 
59 | 
60 | <script>
61 |     function CountDownTimer  () {
62 |     // left_days = document.getElementById("days");
63 |     left_hours = document.getElementById("hours");
64 |     left_minutes = document.getElementById("minutes");
65 |  
66 |     }
67 |     function showRemaining (){
68 |     now = new Date();
69 |     days_in_this_month = new Date( now.getFullYear(), now.getMonth()+1, 0).getDate(); 
70 |     // days = days_in_this_month- now.getDate();
71 |     hours = 23 - now.getHours();
72 |     minutes = 59 - now.getMinutes();
73 |     // left_days.innerHTML = days + " days "
74 |     left_hours.innerHTML = hours + "<br> <span class=\"small\"> hours</span>";
75 |     left_minutes.innerHTML = minutes + "<br> <span class=\"small\">mins</span>";
76 |     }
77 | 
78 | timer = setInterval (showRemaining, 1000) 
79 | CountDownTimer() ;
80 | </script>
81 | </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/timer.html:
--------------------------------------------------------------------------------
  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>Document</title>
  7 | 
  8 | 
  9 |   <style>
 10 |     body{
 11 |       background-color: aliceblue;
 12 |     }
 13 |     .section {
 14 |       background-color: aliceblue;
 15 |       padding: 10px;
 16 |       width: fit-content;
 17 | 
 18 |     }
 19 | #display{
 20 |   margin-bottom: 5px;
 21 |     font-size: 30px;
 22 |     font-family: monospace;
 23 |     color: darkturquoise;
 24 | }
 25 |     .section input {
 26 |       font-size: 8px;
 27 |         color: #2D2D32;
 28 |         text-align: center;
 29 |         border: 1px solid gray;
 30 |         width: 30px;
 31 |         padding: 5px 1px;
 32 |         margin-right: 4px;
 33 |        display: inline-block;
 34 |     }
 35 | 
 36 |     .buttons {
 37 |         display: flex;
 38 |         flex-direction: row;
 39 |     }
 40 | 
 41 |         .buttons button {
 42 |             margin-right: 4px;
 43 | 
 44 |             padding: 5px 10px;
 45 | 
 46 |             background-color: #d8d8d8;
 47 |             border: none;
 48 | 
 49 |             color: white;
 50 |             font-size: 15px;
 51 | 
 52 |             cursor: pointer;
 53 |             outline: none;
 54 | 
 55 |             transition: 0.1s;
 56 |         }
 57 | 
 58 |             .buttons button:active {
 59 |                 box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
 60 |             }
 61 | 
 62 |             .buttons button:last-child {
 63 |                 margin-right: 0;
 64 |             }
 65 | 
 66 |             .buttons button:nth-child(3){
 67 |                 background-color: #8bc34a;
 68 |             }
 69 | 
 70 |             .buttons button:nth-child(4){
 71 |                 background-color: rgb(201, 89, 69);
 72 |             }
 73 | 
 74 |   </style>
 75 | 
 76 | </head>
 77 | <body>
 78 |   <section class="section">
 79 |     <div id="display">0:00</div>
 80 |   
 81 |     <div class="buttons">
 82 |       <input type="text" id="input" name="input" placeholder="minutes">
 83 |       <input type="text" id="input2" name="input2" placeholder="seconds">
 84 | 
 85 |       <button onclick="start()">▶</button>
 86 |       <button onclick="cancel()">∎</button>
 87 |     </div>
 88 |     
 89 |   </section>
 90 | </body>
 91 | 
 92 | 
 93 | <script>
 94 |   function beep() {
 95 |     var snd = new Audio("bell.mp3");  
 96 |     snd.play();
 97 | }
 98 |   var timer;
 99 | 
100 | 
101 | function start(){
102 |   var input = document.getElementById("input").value;
103 |   var input2 = document.getElementById("input2").value;
104 | 
105 | 
106 | minute = parseInt(input)
107 | seconds1 = parseInt(input2)
108 | if( isNaN(seconds1)){
109 |   seconds1 = 0
110 | }
111 | if( isNaN(minute)){
112 |   minute = 0
113 | }
114 | seconds = minute*60+seconds1
115 | 
116 | if(seconds==0){
117 |  
118 |   return;
119 | }
120 | 
121 | var textSec = "00"
122 | textSec = seconds1
123 | 
124 | var display = document.getElementById("display");
125 | display.innerHTML = minute + ':' + textSec
126 |     var statSec = seconds1
127 |     timer = setInterval(function(){
128 |         seconds--;
129 | 
130 |         if(statSec != 0)
131 |             statSec--
132 |         else
133 |             statSec = 59
134 | 
135 |         if(statSec < 10)
136 |             textSec = '0' + statSec
137 |         else 
138 |             textSec = statSec
139 | 
140 |         display.innerHTML = Math.floor(seconds/60) + ':' + textSec
141 | 
142 |         if(seconds == 0){
143 |           console.log('d')
144 |           beep();
145 |         clearInterval(timer)
146 |         }
147 |                 
148 |     }, 1000)
149 | 
150 | }
151 | 
152 | 
153 | function cancel(){
154 |     clearInterval(timer)
155 |     display.innerHTML ='00:00'
156 |     seconds = minute * 60
157 | }
158 | 
159 | 
160 | 
161 | </script>
162 | 
163 | 
164 | 
165 | </html>
166 | 


--------------------------------------------------------------------------------
/travel.html:
--------------------------------------------------------------------------------
  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 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" >
  7 |     <script  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="  crossorigin="anonymous"></script>
  8 |     <script>
  9 |         (function ($) {
 10 | 	$.fn.countTo = function (options) {
 11 | 		options = options || {};
 12 | 		
 13 | 		return $(this).each(function () {
 14 | 			// set options for current element
 15 | 			var settings = $.extend({}, $.fn.countTo.defaults, {
 16 | 				from:            $(this).data('from'),
 17 | 				to:              $(this).data('to'),
 18 | 				speed:           $(this).data('speed'),
 19 | 				refreshInterval: $(this).data('refresh-interval'),
 20 | 				decimals:        $(this).data('decimals')
 21 | 			}, options);
 22 | 			
 23 | 			// how many times to update the value, and how much to increment the value on each update
 24 | 			var loops = Math.ceil(settings.speed / settings.refreshInterval),
 25 | 				increment = (settings.to - settings.from) / loops;
 26 | 			
 27 | 			// references & variables that will change with each update
 28 | 			var self = this,
 29 | 				$self = $(this),
 30 | 				loopCount = 0,
 31 | 				value = settings.from,
 32 | 				data = $self.data('countTo') || {};
 33 | 			
 34 | 			$self.data('countTo', data);
 35 | 			
 36 | 			// if an existing interval can be found, clear it first
 37 | 			if (data.interval) {
 38 | 				clearInterval(data.interval);
 39 | 			}
 40 | 			data.interval = setInterval(updateTimer, settings.refreshInterval);
 41 | 			
 42 | 			// initialize the element with the starting value
 43 | 			render(value);
 44 | 			
 45 | 			function updateTimer() {
 46 | 				value += increment;
 47 | 				loopCount++;
 48 | 				
 49 | 				render(value);
 50 | 				
 51 | 				if (typeof(settings.onUpdate) == 'function') {
 52 | 					settings.onUpdate.call(self, value);
 53 | 				}
 54 | 				
 55 | 				if (loopCount >= loops) {
 56 | 					// remove the interval
 57 | 					$self.removeData('countTo');
 58 | 					clearInterval(data.interval);
 59 | 					value = settings.to;
 60 | 					
 61 | 					if (typeof(settings.onComplete) == 'function') {
 62 | 						settings.onComplete.call(self, value);
 63 | 					}
 64 | 				}
 65 | 			}
 66 | 			
 67 | 			function render(value) {
 68 | 				var formattedValue = settings.formatter.call(self, value, settings);
 69 | 				$self.html(formattedValue);
 70 | 			}
 71 | 		});
 72 | 	};
 73 | 	
 74 | 	$.fn.countTo.defaults = {
 75 | 		from: 0,               // the number the element should start at
 76 | 		to: 0,                 // the number the element should end at
 77 | 		speed: 1000,           // how long it should take to count between the target numbers
 78 | 		refreshInterval: 100,  // how often the element should be updated
 79 | 		decimals: 0,           // the number of decimal places to show
 80 | 		formatter: formatter,  // handler for formatting the value before rendering
 81 | 		onUpdate: null,        // callback method for every time the element is updated
 82 | 		onComplete: null       // callback method for when the element finishes updating
 83 | 	};
 84 | 	
 85 | 	function formatter(value, settings) {
 86 | 		return value.toFixed(settings.decimals);
 87 | 	}
 88 | }(jQuery));
 89 | 
 90 | jQuery(function ($) {
 91 |   // custom formatting example
 92 |   $('.count-number').data('countToOptions', {
 93 | 	formatter: function (value, options) {
 94 | 	  return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
 95 | 	}
 96 |   });
 97 |   
 98 |   // start all the timers
 99 |   $('.timer').each(count);  
100 |   
101 |   function count(options) {
102 | 	var $this = $(this);
103 | 	options = $.extend({}, options || {}, $this.data('countToOptions') || {});
104 | 	$this.countTo(options);
105 |   }
106 | });
107 |     </script>
108 | <style>
109 | 
110 | body {
111 |   font-family: Arial;
112 |   padding: 25px;
113 |   background-color: #fff;
114 |   color: #808080;
115 |   	text-align: center;	
116 | }
117 | 
118 | /*-=-=-=-=-=-=-=-=-=-=-=- */
119 | /* Column Grids */
120 | /*-=-=-=-=-=-=-=-=-=-=-=- */
121 | 
122 | .col_half { width: 49%; }
123 | .col_third { width: 29%; }
124 | .col_fourth { width: 23.5%; }
125 | .col_fifth { width: 18.4%; }
126 | .col_sixth { width: 15%; }
127 | .col_three_fourth { width: 74.5%;}
128 | .col_twothird{ width: 66%;}
129 | .col_half,
130 | .col_third,
131 | .col_twothird,
132 | .col_fourth,
133 | .col_three_fourth,
134 | .col_fifth{
135 | 	position: relative;
136 | 	display:inline;
137 | 	display: inline-block;
138 | 	float: left;
139 | 	margin: 2%;
140 | 	margin-bottom: 20px;
141 | }
142 | .end { margin-right: 0 !important; }
143 | /* Column Grids End */
144 | 
145 | .wrapper { width: 980px; margin: 30px auto; position: relative;}
146 | .counter { background-color: #e8e8e8; padding: 20px 0; border-radius: 5px;}
147 | .count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
148 | .count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
149 | .fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }
150 | 
151 | </style>
152 | </head>
153 | <body>
154 |     
155 |    
156 | 
157 | <div class="wrapper">
158 | 
159 | 
160 |     <div class="counter col_third">
161 |       <i class="fas fa-route fa-2x"></i>
162 |       <h2 class="timer count-title count-number" data-to="18" data-speed="1500"></h2>
163 |       <p class="count-text ">Cities</p>
164 |     </div>
165 | 
166 |     <div class="counter col_third">
167 |       <i class="fas fa-flag fa-2x"></i>
168 |       <h2 class="timer count-title count-number" data-to="6" data-speed="1500"></h2>
169 |       <p class="count-text ">Countries</p>
170 |     </div>
171 | 
172 |     <div class="counter col_third">
173 |         <i class="fas fa-globe-africa fa-2x"></i>
174 |         <h2 class="timer count-title count-number" data-to="3" data-speed="1500"></h2>
175 |          <p class="count-text ">Continents</p>
176 |       </div>
177 | 
178 | 
179 | </div>
180 | </body>
181 | </html>
182 | 


--------------------------------------------------------------------------------
/weather.html:
--------------------------------------------------------------------------------
 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>weather</title>
 7 | 
 8 |     <style>
 9 |         body{
10 |             background-color: aliceblue;
11 |         }
12 |     </style>
13 | </head>
14 | <body>
15 |     <a class="weatherwidget-io" href="https://forecast7.com/en/31d2029d92/alexandria/" data-label_1="ALEXANDRIA" data-label_2="WEATHER" data-days="3" data-theme="gray" >ALEXANDRIA WEATHER</a>
16 |     <script>
17 |     !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/weekly-widget-sunday.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Bebas+Neue" rel="stylesheet">
  5 |     <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
  6 |     <link href="https://fonts.googleapis.com/css?family=Lobster|Roboto:400,700" rel="stylesheet">
  7 | 
  8 |     <meta charset="UTF-8">
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 |     <title>weekly widget</title>
 11 | 
 12 | 
 13 |     <!-- clock style -->
 14 | 
 15 |  <style>
 16 | body{
 17 |     background-color: #fff;
 18 |     line-height: 1.6;
 19 |     text-align: center;
 20 |     font-family: 'Fjalla One', sans-serif;
 21 | 
 22 | }
 23 | 
 24 | h1 {
 25 |     margin-top: 0;
 26 | }
 27 | 
 28 | .full-table {
 29 |     display: flex;
 30 |     height: 100%;
 31 |     width: 100%;
 32 | }
 33 | 
 34 | .table-cell {
 35 |     display: flex;
 36 |     vertical-align: middle;
 37 |     text-align: center;
 38 | }
 39 | 
 40 | .card {
 41 |     padding: 10px 25px 10px 25px;
 42 |     
 43 |     background: rgba(235, 236, 237, 0.3);
 44 |     width: 100%;
 45 |     color: #000;
 46 |    
 47 | }
 48 | 
 49 | 
 50 | .clock {
 51 |     display: inline;
 52 |     font-family: 'Bebas Neue', cursive;
 53 |     font-size: 2em;
 54 |    
 55 | }
 56 | 
 57 | .time {
 58 |     display: inline;
 59 |     min-width: 37px;
 60 | }
 61 | 
 62 | .colon {
 63 |     font-size: 1.1em;
 64 |     display: inline-block;
 65 | }
 66 | 
 67 | .date {
 68 |     display: inline;
 69 |     min-width: 162px;
 70 |     font-family: 'Bebas Neue', cursive;
 71 |     font-size: 2em;
 72 |     padding-right: 30px;
 73 | }
 74 | .greet{
 75 |     
 76 |     display:inline;
 77 |     font-family: 'Dancing Script', cursive;
 78 |     font-size: 2rem;
 79 |      padding-right: 30px;
 80 | }
 81 | 
 82 |    /* Time left style   */
 83 | 
 84 |    .h3{
 85 |     margin: 0 ;
 86 |     font-family: 'Bebas Neue';
 87 |     font-size: 2em;
 88 |     font-weight: 100;
 89 |    }
 90 | 
 91 |         .box{
 92 |             display: inline-block;
 93 |             display: inline-block;
 94 |             color: #fff;
 95 |             padding: 10px;
 96 |             min-width: 60px;
 97 |         }
 98 |         #days{
 99 |             background-color:#3e4545;
100 |         }
101 |         #hours{
102 |             background-color:#556363;
103 |         }
104 |         #minutes{
105 |             background-color:#6d7c7c;
106 |         }
107 |         h2{
108 |             display: inline-block;
109 |             margin-right: 10px;
110 |             margin-block-start: 5px;
111 |         }
112 |         h3{
113 |             text-align: center;
114 |             
115 |         }
116 |         .small{
117 |             font-size: 15px;
118 |             font-weight: 100;
119 |         }
120 | 
121 | 
122 |     </style>
123 | </head>
124 | <body>
125 | 
126 |    
127 | <div class="content">
128 | 
129 |     <div class="full-table">
130 |         <div class="table-cell" style="width: 70%;">
131 |           
132 |           <div class="card">
133 |               <div class="greet" id="greet"></div>
134 |             <div class="date" id="date"></div>
135 |             <div class="clock">
136 |               <div class="time" id="hour"></div>
137 |               <div class="colon">:</div>
138 |               <div class="time" id="min"></div>
139 |               <div class="colon">:</div>
140 |               <div class="time" id="sec"></div>
141 |             </div>
142 |             <a class="weatherwidget-io" href="https://forecast7.com/en/31d2029d92/alexandria/" data-label_1="ALEXANDRIA" data-label_2="WEATHER" data-days="3" data-theme="gray" >ALEXANDRIA WEATHER</a>
143 | 
144 |           </div>
145 |           
146 |         </div>
147 |         <div class="table-cell" style="width: 30%;">
148 |           
149 |             <div class="card">
150 | 
151 |                 <div class="counter" id="counter">
152 |       
153 |                     <h3 class="h3">
154 |                         Time left in This Week
155 |                    </h3>
156 |                     <h2 class="box" id="days"></h2>
157 |                     <h2 class="box" id="hours"></h2>
158 |                     <h2 class="box" id="minutes"></h2>
159 | 
160 |                 </div>
161 |           
162 |             </div>
163 |             
164 |           </div>
165 |       </div>
166 |       
167 |       
168 |       <!-- ------------------------------- -->
169 |       
170 | 
171 | </div>
172 | 
173 | 
174 | <!-- --------------------------------- Scripts----------------------------- -->
175 | 
176 | <!-- Greetings and date -->
177 | <script>
178 |     function date() {
179 | var today = new Date();
180 | document.getElementById('date').innerHTML = today.toDateString();
181 | }
182 | 
183 | 
184 | function clock() {
185 | var today = new Date();
186 | var hour = zeros(twelveHour(today.getHours()));
187 | var minutes = zeros(today.getMinutes());
188 | var seconds = zeros(today.getSeconds());
189 | if(today.getHours() >=12){
190 |     seconds+=" pm"
191 | }
192 | else{
193 |     seconds+=" am"
194 | }
195 | hrs = today.getHours();
196 | if (hrs < 12)
197 |         greet = 'Good Morning  ';
198 |     else if (hrs >= 12 && hrs <= 17)
199 |         greet = 'Good Afternoon ';
200 |     else if (hrs >= 17 && hrs <= 24)
201 |         greet = 'Good Evening  ';
202 | // console.log(today.toLocaleTimeString());
203 | document.getElementById('greet').innerHTML = greet;
204 | document.getElementById('hour').innerHTML = hour;
205 | document.getElementById('min').innerHTML = minutes;
206 | document.getElementById('sec').innerHTML = seconds;
207 | }
208 | 
209 | function twelveHour(hour) {
210 | if (hour > 12) {
211 |     return hour -= 12 
212 | } else if (hour === 0) {
213 |     return hour = 12;
214 | } else {
215 |     return hour
216 | }
217 | }
218 |     
219 | // adds zero infront of single digit number
220 | function zeros(num) {
221 | if (num < 10) {
222 |     num = '0' + num
223 | };
224 | return num;
225 | }
226 | 
227 | function dateTime() {
228 | date();
229 | clock();
230 | setTimeout(dateTime, 500);
231 | }
232 | 
233 | dateTime()
234 | // END
235 | </script>
236 | 
237 | <!------------ Time Left ------------------>
238 | 
239 | <script>
240 |     function CountDownTimer  () {
241 |     left_days = document.getElementById("days");
242 |     left_hours = document.getElementById("hours");
243 |     left_minutes = document.getElementById("minutes");
244 |  
245 |     }
246 |     function showRemaining (){
247 |     now = new Date();
248 |     // days_in_this_month = new Date( now.getFullYear(), now.getMonth()+1, 0).getDate(); 
249 |     // week starts on sunday
250 |     days = 6 - now.getDay();
251 |     hours = 23 - now.getHours();
252 |     minutes = 59 - now.getMinutes();
253 |     left_days.innerHTML = days + "<br> <span style=\"color:#f58f70\" class=\"small\"> days </span>"
254 |     left_hours.innerHTML = hours + "<br> <span style=\"color:#5ebcfc\" class=\"small\"> hours</span>";
255 |     left_minutes.innerHTML = minutes + "<br> <span style=\"color:##dcdcdc\" class=\"small\">mins</span>";
256 |     }
257 | 
258 | timer = setInterval (showRemaining, 1000) 
259 | CountDownTimer() ;
260 | </script>
261 | 
262 | <!-- forcast -->
263 | <script>
264 |     !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
265 |     </script>
266 | </body>
267 | </html>
268 | 


--------------------------------------------------------------------------------
/wethear-giza-egypt.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>weather</title>
 8 | 
 9 |     <style>
10 |         body{
11 |             background-color: aliceblue;
12 |         }
13 |     </style>
14 | </head>
15 | <body>
16 |   <a class="weatherwidget-io" href="https://forecast7.com/en/28d7729d23/giza-governorate/" data-label_1="GIZA" data-label_2="WEATHER" data-theme="original" >Giza WEATHER</a>
17 | <script>
18 |   
19 | !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
20 | </script>
21 | 
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/world-clock/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - D3 World Clock</title>
 6 |   <link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <div class="viz"></div>
12 | <!-- partial -->
13 |   <script src='https://unpkg.com/topojson@3.0.2/dist/topojson.min.js'></script>
14 | <script src='https://unpkg.com/d3@5.9.7/dist/d3.min.js'></script><script  src="./script.js"></script>
15 | 
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/world-clock/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css?family=Mali:700&display=swap");
 2 | 
 3 | * {
 4 |   box-sizing: border-box;
 5 |   padding: 0;
 6 |   margin: 0;
 7 | }
 8 | body {
 9 |   min-height: 100vh;
10 |   background: #faf1f5;
11 |   color: #3a3a3a;
12 |   display: flex;
13 |   font-family: "Mali", sans-serif;
14 | }
15 | /* center the visualization in the viewport */
16 | .viz {
17 |   margin: auto;
18 | }
19 | /* size the svg to cover a considerable portion of the viewport */
20 | .viz svg {
21 |   width: 80vmin;
22 |   height: auto;
23 |   text-transform: uppercase;
24 | }
25 | 


--------------------------------------------------------------------------------