Skip to content

Commit

Permalink
push
Browse files Browse the repository at this point in the history
  • Loading branch information
@kiannp44
kiannp44 committed May 17, 2023
1 parent eaba720 commit 4f550ee
Showing 1 changed file with 344 additions and 0 deletions.
344 changes: 344 additions & 0 deletions _notebooks/2023-05-16-jstest.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,350 @@
" </body>\n",
"</html>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"<style>\n",
"body { font-size:62.5%; margin:1em; background:#232425 }\n",
"ul { list-style:none; margin:0; padding:0 }\n",
"#watch { font-size:1em; position:relative }\n",
"#watch .frame-face {\n",
" position:relative;\n",
" width:30em;\n",
" height:30em;\n",
" margin:2em auto;\n",
" border-radius:15em;\n",
" background:-webkit-linear-gradient(top, #f9f9f9,#666);\n",
" background:-moz-linear-gradient(top, #f9f9f9,#666);\n",
" background:linear-gradient(to bottom, #f9f9f9,#666);\n",
" box-shadow:rgba(0,0,0,.8) .5em .5em 4em;\n",
"}\n",
"#watch .frame-face:before {\n",
" content:'';\n",
" width:29.4em;\n",
" height:29.4em;\n",
" border-radius:14.7em;\n",
" position:absolute;\n",
" top:.3em; left:.3em;\n",
" background:\n",
" -webkit-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),\n",
" -webkit-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);\n",
" background:\n",
" -moz-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),\n",
" -moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);\n",
" background:\n",
" linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),\n",
" radial-gradient(ellipse at center, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);\n",
"}\n",
"#watch .frame-face:after {\n",
" content:'';\n",
" width:28em;\n",
" height:28em;\n",
" border-radius:14.2em;\n",
" position:absolute;\n",
" top:.9em; left:.9em;\n",
" box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;\n",
" border:.1em solid rgba(0,0,0,.2);\n",
" background:-webkit-linear-gradient(top, #fff, #ccc);\n",
" background:-moz-linear-gradient(top, #fff, #ccc);\n",
" background:linear-gradient(to bottom, #fff, #ccc);\n",
"}\n",
"#watch .minute-marks li {\n",
" display:block;\n",
" width:.2em;\n",
" height:.6em;\n",
" background:#929394;\n",
" position:absolute;\n",
" top:50%; left:50%;\n",
" margin:-.4em 0 0 -.1em;\n",
"}\n",
"#watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}\n",
"#watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}\n",
"#watch .digits {\n",
" width:30em;\n",
" height:30em;\n",
" border-radius:15em;\n",
" position:absolute;\n",
" top:0; left:50%;\n",
" margin-left:-15em;\n",
"}\n",
"#watch .digits li {\n",
" font-size:1.6em;\n",
" display:block;\n",
" width:1.6em;\n",
" height:1.6em;\n",
" position:absolute;\n",
" top:50%; left:50%;\n",
" line-height:1.6em;\n",
" text-align:center;\n",
" margin:-.8em 0 0 -.8em;\n",
" font-weight:bold;\n",
"}\n",
"#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }\n",
"#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }\n",
"#watch .digits li:nth-child(3) { transform:translate(8em, 0) }\n",
"#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }\n",
"#watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }\n",
"#watch .digits li:nth-child(6) { transform:translate(0, 8em) }\n",
"#watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }\n",
"#watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }\n",
"#watch .digits li:nth-child(9) { transform:translate(-8em, 0) }\n",
"#watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }\n",
"#watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }\n",
"#watch .digits li:nth-child(12) { transform:translate(0, -8em) }\n",
"#watch .digits:before {\n",
" content:'';\n",
" width:1.6em;\n",
" height:1.6em;\n",
" border-radius:.8em;\n",
" position:absolute;\n",
" top:50%; left:50%;\n",
" margin:-.8em 0 0 -.8em;\n",
" background:#121314;\n",
"}\n",
"#watch .digits:after {\n",
" content:'';\n",
" width:4em;\n",
" height:4em;\n",
" border-radius:2.2em;\n",
" position:absolute;\n",
" top:50%; left:50%;\n",
" margin:-2.1em 0 0 -2.1em;\n",
" border:.1em solid #c6c6c6;\n",
" background:-webkit-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);\n",
" background:-moz-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);\n",
" background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);\n",
"}\n",
"@keyframes hours { to {transform:rotate(335deg)} }\n",
"#watch .hours-hand {\n",
" width:.8em;\n",
" height:7em;\n",
" border-radius:0 0 .9em .9em;\n",
" background:#232425;\n",
" position:absolute;\n",
" bottom:50%; left:50%;\n",
" margin:0 0 -.8em -.4em;\n",
" box-shadow:#232425 0 0 2px;\n",
" transform-origin:0.4em 6.2em;\n",
" transform:rotate(-25deg);\n",
" animation:hours 43200s linear 0s infinite;\n",
"}\n",
"#watch .hours-hand:before {\n",
" content:'';\n",
" background:inherit;\n",
" width:1.8em;\n",
" height:.8em;\n",
" border-radius:0 0 .8em .8em;\n",
" box-shadow:#232425 0 0 1px;\n",
" position:absolute;\n",
" top:-.7em; left:-.5em;\n",
"}\n",
"#watch .hours-hand:after {\n",
" content:'';\n",
" width:0; height:0;\n",
" border:.9em solid #232425;\n",
" border-width:0 .9em 2.4em .9em;\n",
" border-left-color:transparent;\n",
" border-right-color:transparent;\n",
" position:absolute;\n",
" top:-3.1em; left:-.5em;\n",
"}\n",
"@keyframes minutes { to {transform:rotate(422deg)} }\n",
"#watch .minutes-hand {\n",
" width:.8em;\n",
" height:12.5em;\n",
" border-radius:.5em;\n",
" background:#343536;\n",
" position:absolute;\n",
" bottom:50%; left:50%;\n",
" margin:0 0 -1.5em -.4em;\n",
" box-shadow:#343536 0 0 2px;\n",
" transform-origin:0.4em 11em;\n",
" transform:rotate(62deg);\n",
" animation:minutes 3600s linear 0s infinite;\n",
"}\n",
"@keyframes seconds { to {transform:rotate(480deg)} }\n",
"#watch .seconds-hand {\n",
" width:.2em;\n",
" height:14em;\n",
" border-radius:.1em .1em 0 0/10em 10em 0 0;\n",
" background:#c00;\n",
" position:absolute;\n",
" bottom:50%; left:50%;\n",
" margin:0 0 -2em -.1em;\n",
" box-shadow:rgba(0,0,0,.8) 0 0 .2em;\n",
" transform-origin:0.1em 12em;\n",
" transform:rotate(120deg);\n",
" animation:seconds 60s steps(60, end) 0s infinite;\n",
"}\n",
"#watch .seconds-hand:after {\n",
" content:'';\n",
" width:1.4em;\n",
" height:1.4em;\n",
" border-radius:.7em;\n",
" background:inherit;\n",
" position:absolute;\n",
" left:-.65em; bottom:1.35em;\n",
"}\n",
"#watch .seconds-hand:before {\n",
" content:'';\n",
" width:.8em;\n",
" height:3em;\n",
" border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;\n",
" box-shadow:rgba(0,0,0,.8) 0 0 .2em;\n",
" background:inherit;\n",
" position:absolute;\n",
" left:-.35em; bottom:-3em;\n",
"}\n",
"#watch .digital-wrap {\n",
" width:9em;\n",
" height:3em;\n",
" border:.1em solid #222;\n",
" border-radius:.2em;\n",
" position:absolute;\n",
" top:50%; left:50%;\n",
" margin:3em 0 0 -4.5em;\n",
" overflow:hidden;\n",
" background:#4c4c4c;\n",
" background:-webkit-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);\n",
" background:-moz-linear-gradient(top, #4c4c4c 0%, #0f0f0f 100%);\n",
" background:-ms-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);\n",
" background:-o-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);\n",
" background:linear-gradient(to bottom, #4c4c4c 0%,#0f0f0f 100%);\n",
"}\n",
"#watch .digital-wrap ul {\n",
" float:left;\n",
" width:2.85em;\n",
" height:3em;\n",
" border-right:.1em solid #000;\n",
" color:#ddd;\n",
" font-family:Consolas, monaco, monospace;\n",
"}\n",
"#watch .digital-wrap ul:last-child { border:none }\n",
"#watch .digital-wrap li {\n",
" font-size:1.5em;\n",
" line-height:2;\n",
" letter-spacing:2px;\n",
" text-align:center;\n",
" position:relative;\n",
" left:1px;\n",
"}\n",
"#watch .digit-minutes li {\n",
" animation:dsm 3600s steps(60, end) 0s infinite;\n",
"}\n",
"#watch .digit-seconds li {\n",
" animation:dsm 60s steps(60, end) 0s infinite;\n",
"}\n",
"@keyframes dsm {\n",
" to { transform:translateY(-120em) }\n",
"}\n",
"</style>\n",
"\n",
"<div id=\"watch\">\n",
" <div class=\"frame-face\"></div>\n",
" <ul class=\"minute-marks\">\n",
" <li></li><li></li><li></li><li></li><li></li><li></li>\n",
" <li></li><li></li><li></li><li></li><li></li><li></li>\n",
" <li></li><li></li><li></li><li></li><li></li><li></li>\n",
" <li></li><li></li><li></li><li></li><li></li><li></li>\n",
" <li></li><li></li><li></li><li></li><li></li><li></li>\n",
" <li></li><li></li><li></li><li></li><li></li><li></li>\n",
" <li></li><li></li><li></li><li></li><li></li><li></li>\n",
" <li></li><li></li><li></li><li></li><li></li><li></li>\n",
" </ul>\n",
" <div class=\"digital-wrap\">\n",
" <ul class=\"digit-hours\">\n",
" <li>23</li>\n",
" <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>\n",
" <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>\n",
" <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>\n",
" <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li>\n",
" </ul>\n",
" <ul class=\"digit-minutes\">\n",
" <li>10</li><li>11</li>\n",
" <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>\n",
" <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li>\n",
" <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>\n",
" <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>\n",
" <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>\n",
" <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>\n",
" <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>\n",
" <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>\n",
" <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>\n",
" <li>06</li><li>07</li><li>08</li><li>09</li>\n",
" </ul>\n",
" <ul class=\"digit-seconds\">\n",
" <li>20</li><li>21</li><li>22</li><li>23</li>\n",
" <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>\n",
" <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>\n",
" <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>\n",
" <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>\n",
" <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>\n",
" <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>\n",
" <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>\n",
" <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>\n",
" <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>\n",
" <li>18</li><li>19</li>\n",
" </ul>\n",
" </div>\n",
" <ul class=\"digits\">\n",
" <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>\n",
" <li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>\n",
" </ul>\n",
" <div class=\"hours-hand\"></div>\n",
" <div class=\"minutes-hand\"></div>\n",
" <div class=\"seconds-hand\"></div>\n",
"</div>"
]
}
],
"metadata": {
Expand Down

0 comments on commit 4f550ee

Please sign in to comment.