├── .github
    └── pull_request_template.md
├── .gitignore
├── CNAME
├── README.md
├── entries.js
├── entries
    ├── A-tribute-page.html
    ├── BabyWantsMilk.html
    ├── Base64toTXT.html
    ├── Calculator.html
    ├── Interval.html
    ├── PiXELCONVERTOR.html
    ├── RandomColourGenerator.html
    ├── Sattyam.html
    ├── Sidhumoosewala-tribute-page.html
    ├── Snakegame.html
    ├── Technical-Doc.html
    ├── Tips-Calculator.html
    ├── UdhavSudoku.html
    ├── adjustable-fireworks.html
    ├── aim-click-challenge.html
    ├── ant_colony.html
    ├── ascii-cam.html
    ├── avoid-the-bikes.html
    ├── backgroundlight.html
    ├── birthday-cake.html
    ├── bits-rain.html
    ├── blockoverit.html
    ├── blur-loading-page.html
    ├── bronchalia.htm
    ├── building.html
    ├── button-hover.html
    ├── calculate_hours_worked.html
    ├── clock.html
    ├── color-change-on-hover-objects.html
    ├── color-grid.html
    ├── color-quiz.html
    ├── colorclock.html
    ├── contact_list.html
    ├── corona-party.html
    ├── css-calc.html
    ├── cupWaterWave.html
    ├── dancing_man.html
    ├── date_me_form.html
    ├── draw-rgb.html
    ├── fall_game.html
    ├── fireworks.html
    ├── fishies.html
    ├── fools-mate.html
    ├── fortune-cookie-generator.html
    ├── game_of_life.html
    ├── guess_my_number.html
    ├── hangman.html
    ├── hilbert-curve.html
    ├── ip.html
    ├── just_html.html
    ├── knfl.html
    ├── ladner_british_columbia.html
    ├── magicWand.html
    ├── mandelbrot.html
    ├── marching-squares.html
    ├── meat-on-the-move.html
    ├── memory-game.html
    ├── mini_car_game.html
    ├── movie-list.html
    ├── my-screen-resolution.html
    ├── openai-generated-entry.html
    ├── organs-for-debt.html
    ├── out_on_a_limb.html
    ├── ping-pong.html
    ├── pink-vs-unknowns.html
    ├── platform.html
    ├── pure-css-still-life-water-lemon.html
    ├── quasimono.html
    ├── randomPassword.html
    ├── ring-loader.html
    ├── ripples.html
    ├── signup_page.html
    ├── simon-game.html
    ├── simple-counter.html
    ├── stopWatch.html
    ├── strange_insults.html
    ├── taskListApp.html
    ├── tic-tac-toe.html
    ├── tiles.html
    ├── todo_list.html
    ├── wargames.html
    ├── watermelon-pixel.html
    ├── webmine.html
    └── whack-a-mole.html
├── index.html
└── meta
    ├── android-icon-144x144.png
    ├── android-icon-192x192.png
    ├── android-icon-36x36.png
    ├── android-icon-48x48.png
    ├── android-icon-72x72.png
    ├── android-icon-96x96.png
    ├── apple-icon-114x114.png
    ├── apple-icon-120x120.png
    ├── apple-icon-144x144.png
    ├── apple-icon-152x152.png
    ├── apple-icon-180x180.png
    ├── apple-icon-57x57.png
    ├── apple-icon-60x60.png
    ├── apple-icon-72x72.png
    ├── apple-icon-76x76.png
    ├── apple-icon-precomposed.png
    ├── apple-icon.png
    ├── browserconfig.config
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon-96x96.png
    ├── favicon.ico
    ├── ms-icon-144x144.png
    ├── ms-icon-150x150.png
    ├── ms-icon-310x150.png
    ├── ms-icon-310x310.png
    ├── ms-icon-70x70.png
    ├── one-html-page-icon.png
    ├── one-html-page-logo.png
    ├── promotion-image.png
    ├── safari-pinned-tab.svg
    └── site.webmanifest


/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 | **Please confirm that your submission follows all the [rules](https://github.com/Metroxe/one-html-page-challenge/blob/master/README.md#rules)...**
2 | - [ ] You wrote all of your code in 1 single HTML file.
3 | - [ ] Your file is less than 1mb.
4 | - [ ] You didn't import any external files (e.g. images, stylesheets or js files).
5 | - [ ] There are no incoming or outgoing network requests.


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .vscode
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | onehtmlpagechallenge.com


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![One HTML Page Challenge](./meta/one-html-page-logo.png?raw=true "One HTML Page Challenge")](https://onehtmlpagechallenge.com/)
 2 | 
 3 | The goal is to create anything you want within 1 single html file. Practice your skills with the barebones of web development. **How creative can you be with such restrictions?**
 4 | 
 5 | ### [View Submissions](https://onehtmlpagechallenge.com)
 6 | 
 7 | ## Rules
 8 |  - You must write all of your code in 1 single HTML file.
 9 |  - Your file must be less than 1mb (measured by the file size on github).
10 |  - You cannot import any external files (this means you cannot import images, stylesheets or js files from external sources). 
11 |  - Due to the nature of hiding lots of functionality behind APIs, you cannot have any incoming or outgoing network requests.
12 |  - You are allowed to use libraries, however the library must be hard coded into a script tag and still must fit under the 1MB file size. (I suggest using a cdn and replacing with hardcoding the minified library at the end, or use [JSCompress](https://jscompress.com/)).
13 |  
14 | ## How to Submit
15 |  1. Fork the repository.
16 |  2. Add your html file to the `/entries` directory.
17 |  3. Edit the `entries.js` file in the root, with your information for the entry.
18 |  4. Commit to your forked repo.
19 |  5. Make a pull request to master from your forked repo.
20 |  
21 |  _* You may submit as many entries as you'd like._
22 |  
23 |  ## Publicity
24 |  - [**Boing Boing** - The "One HTML Page Challenge", a great example of view-source culture](https://boingboing.net/2019/08/23/the-one-html-page-challenge.html)
25 |  - [**Medium** - How Having No-Internet Lead Me to Building a Worldwide Viral Website.](https://medium.com/@metroxe/one-html-page-challenge-d0e6e6d23e16)
26 |  - [**10BestDesign** - Coders Try a Single-page HTML Coding Challenge to Boost Skills](https://www.10bestdesign.com/blog/coders-try-a-single-page-html-coding-challenge-to-boost-skills/)
27 |  - [**University of Maryland** - INST377 Resource](https://ischool.umd.edu/sites/default/files/syllabi/inst377_-_dynamic_web_applications_-_syllabus_-_fall_2019.pdf)
28 |  - [**What's Going On?** -  Ep #5 (Worst Traffic Bottleneck In North America, IOS vs Android, What's 5g?)](https://www.stitcher.com/show/gronzo/episode/whats-going-on-ep-5-worst-traffic-bottleneck-in-north-america-ios-vs-android-whats-5g-63569131)
29 |  - [**JPEGZILLA** - findings](https://jpegzilla.com/blog/posts/20190724.html)
30 |  - [**chenhuijing.com** - Recreating the Fool's Mate chess move with CSS Grid](https://chenhuijing.com/blog/recreating-the-fools-mate-chess-move-with-css-grid/#%F0%9F%92%BB)
31 |  - [**Advent One** - ansible-challenge](https://github.com/AdventOne/ansible-challenge)
32 |  - [**Hello Github** - Volume 70](https://hellogithub.com/periodical/volume/70/)
33 |  - [**Dev Awesome** - Issue #14](https://devawesome.io/archive/14)
34 |  - [**Tympanus** - Collective #531](https://tympanus.net/codrops/collective/collective-531/)
35 |  - [**Phoenix Code Editor** - Default Project for HTML Games](https://phcode.dev/)
36 |  - [**Community Classroom** - Frontend Development Course](https://www.commclassroom.org/frontend-roadmap)
37 |  - [**aiyoubucuo.com** - July 3rd 2022 Post](https://aiyoubucuo.com/202207.html)
38 |  - [**Anas Khan** - Open Source is overrated 🤔](https://anaskhan28.hashnode.dev/open-source-is-overrated)
39 | 
40 | _If you write a blog or post about the challenge, feel free to add to the list_
41 |  
42 | [![Stargazers over time](https://starchart.cc/Metroxe/one-html-page-challenge.svg)](https://starchart.cc/Metroxe/one-html-page-challenge)
43 |  
44 |  
45 |  ## Useful Links
46 |  - [Fun Times with CSS Pixel Art](https://css-tricks.com/fun-times-css-pixel-art/)
47 |  - [Pixel Art to CSS](https://www.pixelartcss.com/)
48 |  - [How to make a simple HTML5 Canvas Game](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/)
49 |  - [JSCompress: Compile Multiple JS Files Into a Single Script Tag](https://jscompress.com/)
50 |  - [Cookie Clicker](https://orteil.dashnet.org/cookieclicker/)
51 |  - [List of Javascript Game Frameworks](https://github.com/collections/javascript-game-engines)
52 |  - [How to render images in HTML with base64 strings](https://stackoverflow.com/a/41057998)
53 |  - [Convert images to base64](https://www.browserling.com/tools/image-to-base64)
54 | 
55 | ## Contributors
56 | <a href="https://github.com/Metroxe/one-html-page-challenge/graphs/contributors">
57 |   <img src="https://contrib.rocks/image?repo=Metroxe/one-html-page-challenge" />
58 | </a>
59 | 


--------------------------------------------------------------------------------
/entries/A-tribute-page.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>A tribute page</title>
 7 | </head>
 8 | <body>
 9 | 
10 | 
11 | 	<style type="text/css">
12 | 		body {
13 | 			background-color: #ebd8b7; 
14 | 			border: dashed red;
15 | 			text-align: center;
16 | 			letter-spacing: .2rem;
17 | 			margin: 10px 30px 20px;
18 | 			position: relative;
19 | 			top: 10px;
20 | 			padding: 2em;
21 | 			font-family: sans-serif;
22 | 		}
23 | 		h1 {
24 | 			color: green;
25 | 		}
26 | 
27 | 		.warning {
28 | 			font-weight: bold;
29 | 			letter-spacing: 10px;
30 | 		}
31 | 
32 | 	</style>
33 | 
34 | 	<h1 class="Profile">Jakob Sam (with no pfp)</h1>
35 | 	<h4 class="Profile">Place: Born in Amrica, lives in a restaurant <br> <br> Postives: Cool kid, Smart, stupid but kinda Smart <br> <br> Age: One hundred and fifty six??? <br> <br> Negetives: Stupid, a baldi-looking, has white teeth!!!</h4>
36 | 	<p class="warning">[RANDOM PARAGRAPH BTW DON'T TAKE THIS SERIOUSLY]</p> <br>
37 | 	<p class="Profile"><strong> Someone I admire is my cousin Laura. She’s five years older than me, so she’s 19 now and she lives in Bristol. She’s very friendly and confident and she’s got long, wavy, brown hair and greeny-brown eyes. She’s medium height, slim and very fit because she’s a dancer. <br>
38 | 
39 | She’s been dancing since she was six years old and trains every day at her dance school. She wants to be a professional dancer, but it’s a very difficult profession because it’s so competitive. She often dances in shows and I’ve been to watch her several times. Her favourite type of dance is modern, which is sometimes a bit strange, but I love watching her dance. <br> <br>
40 | 
41 | Laura is very busy because she also studies photography at university. She’s a really good photographer and has taken lots of amazing photos of me and my family. Her photos have won a few prizes and last year one of her photos was in an exhibition at an art gallery in London. <br> <br>
42 | 
43 | Laura doesn’t have a lot of free time and she’s also trying to learn German because she wants to go to Germany next year to do a photography course. I think Laura is very hard-working and she deserves to become a professional dancer one day.</p></strong>
44 | <h2>Final words from the one whose writing this right now!!</h2>
45 | <p class="Profile"> <strong>I wish you a good happy birdday Jakob!</strong></p>
46 | 		
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/entries/Calculator.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Calculator Made By @Abhay557</title>
  8 | </head>
  9 | <style>
 10 | *{
 11 |     font-family: 'Poppins', sans-serif;
 12 |     margin: 0;
 13 |     padding: 0;
 14 |     box-sizing: border-box;
 15 | }
 16 | 
 17 | body{
 18 |     display:flex;
 19 |     justify-content:center;
 20 |     align-items:center;
 21 |     min-height: 100vh;
 22 |     background-color: #233342;
 23 | }
 24 | .calculator{
 25 |     border-radius: 35px;
 26 |     background: #233342;
 27 |     box-shadow:  26px 26px 35px #1c2834,
 28 |              -26px -26px 35px #2a3e50;
 29 |     position: relative;
 30 |     display:grid;
 31 | }
 32 | 
 33 | .calculator .value{
 34 |     grid-column: span 4;
 35 |     height: 70px;
 36 |     text-align: right;
 37 |     border: none;
 38 |     outline:none;
 39 |     padding: 10px;
 40 |     font-size: 18px;
 41 |     border-radius:30px;
 42 |     margin: 10px;
 43 | }
 44 | 
 45 | .calculator span{
 46 |     margin: 10px;
 47 |     border-radius:50px;
 48 |     display:grid;
 49 |     width: 60px;
 50 |     height: 60px;
 51 |     color: #fff;
 52 |     background-color: #0c2835;
 53 |     place-items: center;
 54 |     border: 1px solid rgba(0,0,0,.1);
 55 |     cursor: pointer;
 56 | }
 57 | 
 58 | .calculator span:active{
 59 |     background: #74ff3b;
 60 |     color:#111;
 61 | }
 62 | 
 63 | .calculator span.clear{
 64 |     grid-column: span 2;
 65 |     width: 140px;
 66 |     background: #e25057;
 67 | }
 68 | 
 69 | .calculator span.plus{
 70 |     grid-row: span 2;
 71 |     height: 140px;
 72 | }
 73 | 
 74 | .calculator span.equal{
 75 |     background: #7c4dbe;
 76 | }
 77 | </style
 78 | <body>
 79 |     <form class="calculator" name="cal">
 80 |         <input class="value" type="text" name="txt" readonly="">
 81 |         <span class="num clear" onclick="document.cal.txt.value = ''">C</span>
 82 |         <span class="num" onclick="document.cal.txt.value += '/'">/</span>
 83 |         <span class="num" onclick="document.cal.txt.value += '*'">*</span>
 84 |         <span class="num" onclick="document.cal.txt.value += '7'">7</span>
 85 |         <span class="num" onclick="document.cal.txt.value += '8'">8</span>
 86 |         <span class="num" onclick="document.cal.txt.value += '9'">9</span>
 87 |         <span class="num" onclick="document.cal.txt.value += '-'">-</span>
 88 |         <span class="num" onclick="document.cal.txt.value += '4'">4</span>
 89 |         <span class="num" onclick="document.cal.txt.value += '5'">5</span>
 90 |         <span class="num" onclick="document.cal.txt.value += '6'">6</span>
 91 |         <span class="num plus" onclick="document.cal.txt.value += '+'">+</span>
 92 |         <span class="num" onclick="document.cal.txt.value += '1'">1</span>
 93 |         <span class="num" onclick="document.cal.txt.value += '2'">2</span>
 94 |         <span class="num" onclick="document.cal.txt.value += '3'">3</span>
 95 |         <span class="num" onclick="document.cal.txt.value += '0'">0</span>
 96 |         <span class="num" onclick="document.cal.txt.value += '00'">00</span>
 97 |         <span class="num" onclick="document.cal.txt.value += '.'">.</span>
 98 |         <span class="num equal" onclick="document.cal.txt.value = eval(document.cal.txt.value)">=</span>
 99 |     </form>
100 |     
101 | </body>
102 | </html>
103 | 


--------------------------------------------------------------------------------
/entries/Interval.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 | 
  6 | 
  7 | <style>
  8 | 
  9 | html {
 10 |     /*	background:url('background.jpg') no-repeat center center; */
 11 |     background: blue;
 12 | 	background-size:cover;
 13 | }
 14 | 
 15 | /* HTML5 display-role reset for older browsers */
 16 | 
 17 | body{
 18 |   padding-top:10px;
 19 | }
 20 | 
 21 | 
 22 | #buffer {
 23 |   margin-top: 30px;
 24 |   background:blue; 
 25 | }
 26 | 
 27 | pre {
 28 |    
 29 |     white-space: normal;
 30 |     word-wrap: break-word;
 31 |     color: white;
 32 |     background:blue;
 33 | }
 34 | 
 35 | .myHeader {
 36 |     border-bottom:1px solid #eb7429; 
 37 |     background:blue; 
 38 |     color: white;
 39 |     padding:10px 20px; 
 40 |     position:fixed; 
 41 |     top:0; 
 42 |     left:0; 
 43 |     z-index:2000; 
 44 |     width:100%;	
 45 |     height: 220px;
 46 |     
 47 | }
 48 | 
 49 | 
 50 | #goesontop {
 51 |   width: 100%;
 52 | }
 53 | 
 54 | #goesinmiddle {
 55 |   width: 100%;
 56 |   vertical-align: middle;
 57 |   text-align: center;
 58 | 
 59 | }
 60 | 
 61 | #goesunderneath {
 62 |   color: white;
 63 |   vertical-align: middle;
 64 |   text-align: center;
 65 |   margin-bottom: 20px;
 66 | }
 67 | 
 68 | 
 69 | #containpre {
 70 | 
 71 | }
 72 | 
 73 | .big-button {
 74 |   width: 230px;
 75 |   height: 50px;
 76 |   margin: 20px;
 77 |   font-size: 22px;
 78 |   text-align: center;
 79 |   vertical-align: middle;
 80 |   top:80%;
 81 |   color: white;
 82 |   background-color: blue;
 83 |   border: 0;
 84 | }
 85 | 
 86 | .mid-button {
 87 |   width: 230px;
 88 |   height: 25px;
 89 |   margin: 10px;
 90 |   font-size: 18px;
 91 |   text-align: center;
 92 |   vertical-align: middle;
 93 |   top:80%;
 94 |   color: white;
 95 |   background-color: blue;
 96 |   border: 0;
 97 | }
 98 | 
 99 | #marker {
100 |   color: white;
101 |   background-color: blue;
102 |   border: 0;
103 | }
104 | 
105 | #goal {
106 |   color: black;
107 |   background-color: blue;
108 |   border: 0;
109 | }
110 | 
111 | #output {
112 |   font-size: 40px;
113 |   margin-bottom: 20px;
114 | }
115 | 
116 | 
117 | footer {
118 |    background-color: blue;
119 |    width: 100%;
120 |    bottom: 0;
121 | 	 font-size: 8;
122 | 	 color: #f4a460;
123 |    position: fixed;
124 | 	 height: 10%;
125 |  }
126 | 
127 | #manageSpeed {
128 |   color: white;
129 | }
130 | 
131 | #manageSpeedLeft {
132 | float: left;
133 | width: 35%;
134 | text-align: center;
135 |   vertical-align: middle;
136 | }
137 | 
138 | #manageSpeedCenter {
139 | display: inline-block;
140 | margin: 0 auto;
141 | padding-top: 10px;
142 | width: 30%;
143 | text-align: center;
144 | vertical-align: middle;
145 | }
146 | 
147 | #manageSpeedRight {
148 | float: right;
149 | width: 35%;
150 | text-align: center;
151 |   vertical-align: middle;
152 | }
153 | 
154 | #message {
155 |  text-align: center;
156 |  color: grey;
157 |  vertical-align: middle;
158 |  height: 5%;
159 | }
160 | </style>
161 | 
162 | 
163 | 
164 | </head>
165 | 
166 | 
167 | <header class = "myHeader">
168 | 
169 |  	 	<div id="goesontop">
170 | 			  <div><button onclick="showDirections()">Directions</button></div>
171 | 			  <div id="buffer"><div>
172 | 			  <div><input type="file" id="filechoice" ></input></div>
173 |   		</div>
174 | 
175 |   		<div id="goesinmiddle">
176 | 		    <input onclick="doStuff()" type="button" value="Start Scrolling" id="button1" class="big-button"></input>
177 | 			  <input id = "marker" name = "marker" value = "0"></input>
178 | 			  <input id = "goal" name = "goal" value = ""></input>
179 |   		</div>
180 | 
181 |   		<div id="goesunderneath" >
182 |  			  <label id = "output" >Welcome to Interval</label> 
183 |   		</div> 
184 | 
185 | </header>
186 | 
187 | <body>
188 | 
189 | 	<div id="buffer"><div>
190 | 
191 | 	<div  id="containpre"><pre id="contents"  ></pre>
192 | 	</div>
193 | 	</div> 
194 |     
195 | <footer>
196 | 	<div id="manageSpeed">
197 | 	  <div id="manageSpeedLeft" class="btn" ><button type="button" onclick="decreaseSpeed()" class = "mid-button" value = "Decrease Speed" id = "DecreaseSpeed">Decrease Speed</button>
198 |         </div>
199 | 	  <div id="manageSpeedCenter">
200 |         </div>
201 | 	  <div id="manageSpeedRight" class="btn"><button type="button" onclick="increaseSpeed()" class = "mid-button" value = "Increase Speed" id = "IncreaseSpeed">Increase Speed</button>
202 |         </div> 
203 | 	</div>
204 | 	<div id="message">
205 |     <p>Made for readers by John Gillespie</p>
206 |   </div>
207 | </footer>
208 | 
209 | <script>
210 | 
211 | 	var readSpeed = 500;
212 | 
213 | 	var stringPosition = document.getElementById('marker').value;
214 | 
215 | 	function showDirections() {
216 | 		alert("Choose text (.txt) files only when using Interval! Train in short bursts of 750 - 1000 words to increase your natural reading-speed. Start Scrolling to  speed-read. Increase Speed to make yourself read faster. Decrease Speed to slow down. Stop Scrolling if you need to stop and just read the text. Start Scrolling again, or change the word index any time.");
217 | 	}
218 | 
219 | 
220 | 	function doStuff() {
221 | 	
222 | 		var scrollbutton = document.getElementById("button1").value;
223 | 		if(scrollbutton === "Start Scrolling"){
224 | 			document.getElementById("button1").value= "Stop Scrolling";
225 | 			stringPosition = document.getElementById('marker').value;
226 | 			pageScroll();
227 | 			delayedLoop();
228 | 		}
229 | 		else{
230 | 			document.getElementById("button1").value= "Start Scrolling";
231 | 			cancelTimeoutOnClick();
232 | 	    	}
233 | 	}
234 | 
235 | 	function pageScroll() {
236 |        	 	window.scrollBy(0,50); // horizontal vertical scroll increments
237 |        	 	scrolldelay = setTimeout('pageScroll()',readSpeed*60); // scroll every n milliseconds	
238 | 	}
239 | 
240 | 	function decreaseSpeed() {										// decreasing speed
241 | 		readSpeed = readSpeed + 50;
242 | 	}
243 | 
244 | 	function increaseSpeed() {										// increasing speed
245 | 		readSpeed = readSpeed - 50;
246 | 	}
247 | 
248 | 	function cancelTimeoutOnClick() {
249 |     		if (scrolldelay) {
250 |         		clearTimeout(scrolldelay); //connects to pageScroll()
251 | 			clearTimeout(JohnsVar); //connects to delayedLoop()
252 |         		timerHandle = 0;
253 |     		}
254 | 	}
255 |  
256 | 	var data_array=[];
257 | 
258 | 	function readSingleFile(evt) 
259 | 	{
260 | 		var f = evt.target.files[0];   	
261 | 		if (f) { 
262 |       			var r = new FileReader();  
263 |       			r.onload = function(e) { 
264 | 	    			  var contents = e.target.result;
265 | 				document.getElementById('contents').textContent = this.result;
266 | 				var tempstring = this.result;
267 | 				data_array = tempstring.split(' ');
268 |         			alert( "Import successful!" );
269 | 				document.getElementById('goal').value = "/ " +data_array.length;  
270 |       				}
271 | 			r.readAsText(f);
272 | 
273 | 			}
274 | 		else 
275 | 		{ 
276 |       			alert("Failed to load file");
277 |     		}
278 |   	}
279 | 
280 | 	document.getElementById('filechoice').addEventListener('change', readSingleFile, false);
281 | 
282 | 	var JohnsVar;
283 | 
284 | 	function delayedLoop()
285 | 		{	
286 | 					
287 | 			document.getElementById('output').innerHTML = "";
288 | 			document.getElementById('output').innerHTML = data_array[stringPosition];
289 | 			document.getElementById('marker').value = stringPosition;
290 | 			if(++stringPosition == data_array.length)
291 | 				{
292 | 					return;
293 | 				}
294 | 			JohnsVar = setTimeout('delayedLoop()',readSpeed);	
295 | 		}
296 | 
297 | </script>
298 | 	
299 | </body>


--------------------------------------------------------------------------------
/entries/RandomColourGenerator.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Random colour generator</title>
  8 |     <style>
  9 |       :root {
 10 |         /* dark shades of primary color*/
 11 |         --clr-primary-1: hsl(205, 86%, 17%);
 12 |         --clr-primary-2: hsl(205, 77%, 27%);
 13 |         --clr-primary-3: hsl(205, 72%, 37%);
 14 |         --clr-primary-4: hsl(205, 63%, 48%);
 15 |         /* primary/main color */
 16 |         --clr-primary-5: hsl(205, 78%, 60%);
 17 |         /* lighter shades of primary color */
 18 |         --clr-primary-6: hsl(205, 89%, 70%);
 19 |         --clr-primary-7: hsl(205, 90%, 76%);
 20 |         --clr-primary-8: hsl(205, 86%, 81%);
 21 |         --clr-primary-9: hsl(205, 90%, 88%);
 22 |         --clr-primary-10: hsl(205, 100%, 96%);
 23 |         /* darkest grey - used for headings */
 24 |         --clr-grey-1: hsl(209, 61%, 16%);
 25 |         --clr-grey-2: hsl(211, 39%, 23%);
 26 |         --clr-grey-3: hsl(209, 34%, 30%);
 27 |         --clr-grey-4: hsl(209, 28%, 39%);
 28 |         /* grey used for paragraphs */
 29 |         --clr-grey-5: hsl(210, 22%, 49%);
 30 |         --clr-grey-6: hsl(209, 23%, 60%);
 31 |         --clr-grey-7: hsl(211, 27%, 70%);
 32 |         --clr-grey-8: hsl(210, 31%, 80%);
 33 |         --clr-grey-9: hsl(212, 33%, 89%);
 34 |         --clr-grey-10: hsl(210, 36%, 96%);
 35 |         --clr-white: #fff;
 36 |         --clr-red-dark: hsl(360, 67%, 44%);
 37 |         --clr-red-light: hsl(360, 71%, 66%);
 38 |         --clr-green-dark: hsl(125, 67%, 44%);
 39 |         --clr-green-light: hsl(125, 71%, 66%);
 40 |         --clr-black: #222;
 41 |         --ff-primary: "Roboto", sans-serif;
 42 |         --ff-secondary: "Open Sans", sans-serif;
 43 |         --transition: all 0.3s linear;
 44 |         --spacing: 0.1rem;
 45 |         --radius: 0.25rem;
 46 |         --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 47 |         --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 48 |         --max-width: 1170px;
 49 |         --fixed-width: 620px;
 50 |       }
 51 |       /*
 52 | =============== 
 53 | Global Styles
 54 | ===============
 55 | */
 56 | 
 57 |       *,
 58 |       ::after,
 59 |       ::before {
 60 |         margin: 0;
 61 |         padding: 0;
 62 |         box-sizing: border-box;
 63 |       }
 64 |       body {
 65 |         font-family: var(--ff-secondary);
 66 |         background: var(--clr-grey-10);
 67 |         color: var(--clr-grey-1);
 68 |         line-height: 1.5;
 69 |         font-size: 0.875rem;
 70 |       }
 71 |       ul {
 72 |         list-style-type: none;
 73 |       }
 74 |       a {
 75 |         text-decoration: none;
 76 |       }
 77 |       h1,
 78 |       h2,
 79 |       h3,
 80 |       h4 {
 81 |         letter-spacing: var(--spacing);
 82 |         text-transform: capitalize;
 83 |         line-height: 1.25;
 84 |         margin-bottom: 0.75rem;
 85 |         font-family: var(--ff-primary);
 86 |       }
 87 |       h1 {
 88 |         font-size: 3rem;
 89 |       }
 90 |       h2 {
 91 |         font-size: 2rem;
 92 |       }
 93 |       h3 {
 94 |         font-size: 1.25rem;
 95 |       }
 96 |       h4 {
 97 |         font-size: 0.875rem;
 98 |       }
 99 |       p {
100 |         margin-bottom: 1.25rem;
101 |         color: var(--clr-grey-5);
102 |       }
103 |       @media screen and (min-width: 800px) {
104 |         h1 {
105 |           font-size: 4rem;
106 |         }
107 |         h2 {
108 |           font-size: 2.5rem;
109 |         }
110 |         h3 {
111 |           font-size: 1.75rem;
112 |         }
113 |         h4 {
114 |           font-size: 1rem;
115 |         }
116 |         body {
117 |           font-size: 1rem;
118 |         }
119 |         h1,
120 |         h2,
121 |         h3,
122 |         h4 {
123 |           line-height: 1;
124 |         }
125 |       }
126 |       /*  global classes */
127 | 
128 |       /* section */
129 |       .section {
130 |         padding: 5rem 0;
131 |       }
132 | 
133 |       .section-center {
134 |         width: 90vw;
135 |         margin: 0 auto;
136 |         max-width: 1170px;
137 |       }
138 |       @media screen and (min-width: 992px) {
139 |         .section-center {
140 |           width: 95vw;
141 |         }
142 |       }
143 |       main {
144 |         min-height: 100vh;
145 |         display: grid;
146 |         place-items: center;
147 |       }
148 | 
149 |       /*
150 | =============== 
151 | Nav
152 | ===============
153 | */
154 |       nav {
155 |         background: var(--clr-white);
156 |         height: 3rem;
157 |         display: grid;
158 |         align-items: center;
159 |         box-shadow: var(--dark-shadow);
160 |       }
161 |       .nav-center {
162 |         width: 90vw;
163 |         max-width: var(--fixed-width);
164 |         margin: 0 auto;
165 |         display: flex;
166 |         align-items: center;
167 |         justify-content: space-between;
168 |       }
169 |       .nav-center h4 {
170 |         margin-bottom: 0;
171 |         color: var(--clr-primary-5);
172 |       }
173 |       .nav-links {
174 |         display: flex;
175 |       }
176 |       nav a {
177 |         text-transform: capitalize;
178 |         font-weight: 700;
179 |         font-size: 1rem;
180 |         color: var(--clr-primary-1);
181 |         letter-spacing: var(--spacing);
182 |         margin-right: 1rem;
183 |       }
184 |       nav a:hover {
185 |         color: var(--clr-primary-5);
186 |       }
187 |       /*
188 | =============== 
189 | Container
190 | ===============
191 | */
192 |       main {
193 |         min-height: calc(100vh - 3rem);
194 |         display: grid;
195 |         place-items: center;
196 |       }
197 |       .container {
198 |         text-align: center;
199 |       }
200 |       .container h2 {
201 |         background: var(--clr-black);
202 |         color: var(--clr-white);
203 |         padding: 1rem;
204 |         border-radius: var(--radius);
205 |         margin-bottom: 2.5rem;
206 |       }
207 |       .color {
208 |         color: var(--clr-primary-5);
209 |       }
210 |       .btn-hero {
211 |         font-family: var(--ff-primary);
212 |         text-transform: uppercase;
213 |         background: transparent;
214 |         color: var(--clr-black);
215 |         letter-spacing: var(--spacing);
216 |         display: inline-block;
217 |         font-weight: 700;
218 |         transition: var(--transition);
219 |         border: 2px solid var(--clr-black);
220 |         cursor: pointer;
221 |         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
222 |         border-radius: var(--radius);
223 |         font-size: 1rem;
224 |         padding: 0.75rem 1.25rem;
225 |       }
226 |       .btn-hero:hover {
227 |         color: var(--clr-white);
228 |         background: var(--clr-black);
229 |       }
230 |     </style>
231 |   </head>
232 |   <body>
233 |     <nav>
234 |       <div class="nav-center">
235 |         <h4>Color flipper</h4>
236 |         <ul class="nav-links">
237 |           <li>
238 |             <a href="#">Hex</a>
239 |           </li>
240 |         </ul>
241 |       </div>
242 |     </nav>
243 |     <main>
244 |       <div class="container">
245 |         <h2>Background color : <span class="color">#f1f5f8</span></h2>
246 |         <button class="btn btn-hero" id="btn">Click me</button>
247 |       </div>
248 |     </main>
249 |     <script>
250 |       const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
251 |       const btn = document.getElementById("btn");
252 |       const color = document.querySelector(".color");
253 | 
254 |       btn.addEventListener("click", function () {
255 |         let hexColour = "#";
256 |         for (let i = 0; i < 6; i++) {
257 |           randomNumber = hex[Math.floor(Math.random() * hex.length)];
258 |           hexColour += randomNumber;
259 |         }
260 |         document.body.style.backgroundColor = hexColour;
261 |         color.textContent = hexColour;
262 |       });
263 |     </script>
264 |   </body>
265 | </html>
266 | 


--------------------------------------------------------------------------------
/entries/Sattyam.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Registration form</title>
 8 |    
 9 | </head>
10 | <body>
11 |     
12 |     <h1>Registration Form</h1>
13 | <label for="name1"> First name:</label>
14 |   <input type="text" placeholder="First name" value="" id="name1">
15 |   
16 |   <br>
17 |   
18 | <label for="name2"> Last name:</label>
19 |    <input type="text" placeholder="Last  name" value="" id="name2">
20 |   
21 |   <br>
22 |   <label for="email"> Email id:</label>
23 |    <input type="text" placeholder="email" value="" id="email">
24 |   
25 |   <br>
26 |   <label for="number">Mobile Number:</label>
27 |  <input type="text" placeholder="Mobile No." value="" id="number">
28 | 
29 | <br>
30 |   <div>
31 |       <form><br>
32 | 
33 |        <label>Gender</label>  
34 |          
35 |        <label> male</label>   <input type="radio"  name="gender" value="male">
36 |          
37 |          
38 |        <label> female</label>   <input type="radio"  name="gender" value="female">
39 |          
40 |       <label> other</label>  <input type="radio"  name="gender" value="other">
41 |       </form>
42 |   </div>
43 |   <br>
44 | 
45 |  <label>Date of Birth(DOB)</label> 
46 |   <div>
47 |      <input type="date" id="birthday" name="birthday">
48 |      
49 | 
50 |   </div>
51 | <br>
52 |   
53 | <label>Address:</label><br>
54 | 
55 | <textarea name="address" ></textarea>
56 | <br>
57 | 
58 | <label></label>Hobbies:<br>
59 | <div>
60 | <label></label> 1.Cricket<input type="checkbox" name="cricket" value=""><br>
61 |  <label></label>2.Vollyball<input type="checkbox" name="Vollyball" value=""><br>
62 |  <label></label>3.Football<input type="checkbox" name="Football" value=""><br>
63 | </div>
64 | <br>
65 |  
66 |  <div>
67 |    <label>Interests:</label>  
68 | 
69 | <select id="programming" >
70 |     <option value="C language">C language</option>
71 |     <option value="java">java language</option>
72 |     <option value="Javascript">Javascript language</option>
73 |     <option value="Python">Python language</option>
74 | 
75 | 
76 | </select>
77 |  </div>
78 | <br>
79 | 
80 | 
81 |  <div>
82 |      <br>
83 |      <input type="submit" id="submit" value="Submit">
84 |      <input type="reset" id="reset" value="Reset">
85 |  </div>
86 | </body>
87 | </html>


--------------------------------------------------------------------------------
/entries/Sidhumoosewala-tribute-page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Rip Moose</title>
 9 | </head>
10 | 
11 | <body style="background-color:rgb(155, 155, 233);color: rgb(0, 0, 0); padding: 20px; text-align: center; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;">
12 |     <div style="padding:10px 200px; border: 5px solid gold;border-radius: 20px;">
13 |         <h1 style="color: azure; text-decoration:underline gold ;">R.I.P - Sidhu a.k.a Moosewala</h1>
14 |             <img src="" alt="Moose" style="height: 140px; width: 240px; border-radius: 50%;">
15 |         <h4 style="text-decoration:line-through gold;;">(1993-2022)</h4>
16 |         <p style="">Shubhdeep Singh Sidhu (11 June 1993 – 29 May 2022), better known by his stage name Sidhu Moose Wala, was an
17 |             Indian singer, rapper, songwriter and actor associated with Punjabi music and Punjabi cinema. His career as
18 |             a songwriter began with the song "License" by Ninja, and his singing career started with a duet song, "G
19 |             Wagon". Following his debut, he collaborated with Brown Boyz for various tracks. Sidhu is generally regarded
20 |             to have been one of the greatest Punjabi artists of his generation.Moreover, he was considered as a key
21 |             figure in opening the door for Punjabi artists into mainstream music. </p>
22 |         <p>Moose Wala was shot dead by unidentified assailants on 29 May 2022; a Canada-based gangster, active in
23 |             Punjab, claimed responsibility for the killing, which the police said was a culmination of inter-gang
24 |             rivalry.On 23 June 2022, his first posthumous single, <a href="https://www.youtube.com/watch?v=R4c0UoJnBrk"
25 |                 style="text-decoration:none; color: azure;">SYL</a>, was released.</p>
26 |         <h3>Lets keep on listening to him and spread his message (Few of his gold work).</h3>
27 |         <ol style="text-align:center ; ">
28 |             <div>
29 | 
30 |                 <a  href="https://www.youtube.com/watch?v=n_FCrCQ6-bA"style="color: azure;  text-decoration:none;">295</a>
31 |             </div>
32 |             <div>
33 | 
34 |                 <a href="https://www.youtube.com/watch?v=hBlO1i_WTiY" style="color: azure; text-decoration:none;">Old Skool</a>
35 |             </div>
36 |             <div>
37 | 
38 |                 <a href="https://www.youtube.com/watch?v=qk2WMmiiVFE" style="color: azure; text-decoration:none;">SAME BEEF</a>
39 |             </div>
40 |         </ol>
41 |     </div>
42 | </body>
43 | 
44 | </html>
45 | 


--------------------------------------------------------------------------------
/entries/Snakegame.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title></title>
  5 |   <style>
  6 |   html, body {
  7 |     height: 100%;
  8 |     margin: 0;
  9 |   }
 10 | 
 11 |   body {
 12 |     background: black;
 13 |     display: flex;
 14 |     align-items: center;
 15 |     justify-content: center;
 16 |   }
 17 |   canvas {
 18 |     border: 1px solid white;
 19 |   }
 20 |   </style>
 21 | </head>
 22 | <body>
 23 | <canvas width="400" height="400" id="game"></canvas>
 24 | <script>
 25 | var canvas = document.getElementById('game');
 26 | var context = canvas.getContext('2d');
 27 | 
 28 | var grid = 16;
 29 | var count = 0;
 30 |   
 31 | var snake = {
 32 |   x: 160,
 33 |   y: 160,
 34 |   
 35 |   // snake velocity. moves one grid length every frame in either the x or y direction
 36 |   dx: grid,
 37 |   dy: 0,
 38 |   
 39 |   // keep track of all grids the snake body occupies
 40 |   cells: [],
 41 |   
 42 |   maxCells: 4
 43 | };
 44 | var apple = {
 45 |   x: 320,
 46 |   y: 320
 47 | };
 48 | 
 49 | function getRandomInt(min, max) {
 50 |   return Math.floor(Math.random() * (max - min)) + min;
 51 | }
 52 | 
 53 | function loop() {
 54 |   requestAnimationFrame(loop);
 55 | 
 56 |   if (++count < 4) {
 57 |     return;
 58 |   }
 59 | 
 60 |   count = 0;
 61 |   context.clearRect(0,0,canvas.width,canvas.height);
 62 | 
 63 |   snake.x += snake.dx;
 64 |   snake.y += snake.dy;
 65 | 
 66 |   if (snake.x < 0) {
 67 |     snake.x = canvas.width - grid;
 68 |   }
 69 |   else if (snake.x >= canvas.width) {
 70 |     snake.x = 0;
 71 |   }
 72 |   
 73 |   if (snake.y < 0) {
 74 |     snake.y = canvas.height - grid;
 75 |   }
 76 |   else if (snake.y >= canvas.height) {
 77 |     snake.y = 0;
 78 |   }
 79 | 
 80 |   snake.cells.unshift({x: snake.x, y: snake.y});
 81 | 
 82 |   if (snake.cells.length > snake.maxCells) {
 83 |     snake.cells.pop();
 84 |   }
 85 | 
 86 |   // draw apple
 87 |   context.fillStyle = 'red';
 88 |   context.fillRect(apple.x, apple.y, grid-1, grid-1);
 89 | 
 90 |   context.fillStyle = 'green';
 91 |   snake.cells.forEach(function(cell, index) {
 92 |     
 93 |     context.fillRect(cell.x, cell.y, grid-1, grid-1);  
 94 | 
 95 |     if (cell.x === apple.x && cell.y === apple.y) {
 96 |       snake.maxCells++;
 97 |  
 98 |       apple.x = getRandomInt(0, 25) * grid;
 99 |       apple.y = getRandomInt(0, 25) * grid;
100 |     }
101 | 
102 |     for (var i = index + 1; i < snake.cells.length; i++) {
103 |       
104 |       if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
105 |         snake.x = 160;
106 |         snake.y = 160;
107 |         snake.cells = [];
108 |         snake.maxCells = 4;
109 |         snake.dx = grid;
110 |         snake.dy = 0;
111 | 
112 |         apple.x = getRandomInt(0, 25) * grid;
113 |         apple.y = getRandomInt(0, 25) * grid;
114 |       }
115 |     }
116 |   });
117 | }
118 | 
119 | // listen to keyboard events to move the snake
120 | document.addEventListener('keydown', function(e) {
121 |   // prevent snake from backtracking on itself by checking that it's 
122 |   // not already moving on the same axis (pressing left while moving
123 |   // left won't do anything, and pressing right while moving left
124 |   // shouldn't let you collide with your own body)
125 |   
126 |   // left arrow key
127 |   if (e.which === 37 && snake.dx === 0) {
128 |     snake.dx = -grid;
129 |     snake.dy = 0;
130 |   }
131 |   // up arrow key
132 |   else if (e.which === 38 && snake.dy === 0) {
133 |     snake.dy = -grid;
134 |     snake.dx = 0;
135 |   }
136 |   // right arrow key
137 |   else if (e.which === 39 && snake.dx === 0) {
138 |     snake.dx = grid;
139 |     snake.dy = 0;
140 |   }
141 |   // down arrow key
142 |   else if (e.which === 40 && snake.dy === 0) {
143 |     snake.dy = grid;
144 |     snake.dx = 0;
145 |   }
146 | });
147 | 
148 | // start the game
149 | requestAnimationFrame(loop);
150 | </script>
151 | </body>
152 | </html>


--------------------------------------------------------------------------------
/entries/Tips-Calculator.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Tip-Calculator</title>
  8 | 
  9 |     <style>
 10 |         * {
 11 |   margin: 0;
 12 |   padding: 0;
 13 | }
 14 | 
 15 | body {
 16 |   height: 100vh;
 17 |   width: 100%;
 18 |   background-color: hsl(0, 0%, 0%);
 19 |   font-family: "Space Mono", monospace;
 20 | }
 21 | 
 22 | .logo {
 23 |   text-align: center;
 24 |   margin-top: 1.7rem;
 25 |   margin-bottom: 2.3rem;
 26 | }
 27 | 
 28 | .tip-calculator {
 29 |   margin-top: 5%;
 30 |   background-color: #150050;
 31 |   display: flex;
 32 |   flex-direction: column;
 33 |   padding: 2rem;
 34 |   border-radius: 1.4rem 1.4rem 0 0;
 35 | }
 36 | 
 37 | label {
 38 |   color: hsl(180, 100%, 99%);
 39 |   font-weight: 700;
 40 |   margin-bottom: 0.3rem;
 41 | }
 42 | 
 43 | input {
 44 |   border: none;
 45 |   outline: none;
 46 |   padding: 5px;
 47 |   padding-right: 18px;
 48 |   background-position: 17px 15px;
 49 |   background-repeat: no-repeat;
 50 |   background-color: hsl(189, 41%, 97%);
 51 |   text-align: right;
 52 |   font-size: 24px;
 53 |   color: hsl(73, 100%, 15%);
 54 |   font-weight: bolder;
 55 |   font-family: "Space Mono", monospace;
 56 | }
 57 | 
 58 | .bill-input {
 59 |   background-image: url("images/icon-dollar.svg");
 60 | }
 61 | 
 62 | .bill-input {
 63 |   margin-bottom: 36px;
 64 | }
 65 | 
 66 | .tip {
 67 |   margin-top: 0.7rem;
 68 |   display: grid;
 69 |   grid-template-columns: 144px 144px;
 70 |   row-gap: 2em;
 71 |   column-gap: 18px;
 72 |   margin-bottom: 2rem;
 73 | }
 74 | 
 75 | .tips {
 76 |   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
 77 |     rgba(0, 0, 0, 0.22) 0px 10px 10px;
 78 |   background-color: #ff4c29;
 79 |   color: white;
 80 |   height: 48px;
 81 |   display: flex;
 82 |   justify-content: center;
 83 |   align-items: center;
 84 |   font-size: 24px;
 85 |   border-radius: 4px;
 86 |   cursor: pointer;
 87 | }
 88 | 
 89 | .active-tip {
 90 |   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
 91 |     rgba(0, 0, 0, 0.22) 0px 10px 10px;
 92 |   color: hsl(0, 0%, 100%);
 93 |   background-color: #fa937e;
 94 |   font-weight: bolder;
 95 | }
 96 | 
 97 | .people-input {
 98 |   background-image: url("images/icon-person.svg");
 99 |   margin-bottom: 2.4rem;
100 | }
101 | 
102 | .result {
103 |   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
104 |     rgba(0, 0, 0, 0.22) 0px 10px 10px;
105 |   background-color: #2c394b;
106 |   color: white;
107 |   padding: 39px 21px;
108 |   border-radius: 12px;
109 | }
110 | 
111 | .tip-amount,
112 | .total {
113 |   display: flex;
114 |   align-items: center;
115 |   justify-content: space-between;
116 |   margin-bottom: 1.7rem;
117 | }
118 | 
119 | .person {
120 |   font-size: 12px;
121 |   color: hsl(184, 14%, 56%);
122 |   font-weight: 700;
123 | }
124 | 
125 | .amount {
126 |   font-size: 28px;
127 |   color: hsl(172, 67%, 45%);
128 |   font-weight: 700;
129 | }
130 | 
131 | .reset {
132 |   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
133 |     rgba(0, 0, 0, 0.22) 0px 10px 10px;
134 |   text-align: center;
135 |   font-size: 20px;
136 |   font-weight: 700;
137 |   color: hsl(0, 0%, 100%);
138 |   background-color: hsl(358, 100%, 50%);
139 |   padding: 9px 0 9px 0;
140 |   border-radius: 5px;
141 |   cursor: pointer;
142 | }
143 | 
144 | #tip-custom input {
145 |   box-sizing: border-box;
146 |   width: 100%;
147 | }
148 | 
149 | .peopleLabel {
150 |   display: flex;
151 |   justify-content: space-between;
152 | }
153 | 
154 | .error {
155 |   color: red;
156 |   display: none;
157 | }
158 | 
159 | @media only screen and (min-width: 1000px) {
160 |   body {
161 |     display: flex;
162 |     flex-direction: column;
163 |     align-items: center;
164 |   }
165 | 
166 |   input {
167 |     width: 415px;
168 |     padding: 9px;
169 |     background-position: 17px 18px;
170 |   }
171 | 
172 |   .tip-calculator {
173 |     width: 990px;
174 |     flex-direction: row;
175 |     border-radius: 1.4rem;
176 |     padding: 2.3rem;
177 |     height: 479px;
178 |   }
179 | 
180 |   .partOne {
181 |     margin-top: 1rem;
182 |     margin-left: 1.2rem;
183 |   }
184 | 
185 |   .bill-input {
186 |     margin-bottom: 3.4rem;
187 |   }
188 | 
189 |   .tip {
190 |     grid-template-columns: 135px 135px 135px;
191 |     row-gap: 1.2em;
192 |     column-gap: 17px;
193 |     margin-bottom: 3.2rem;
194 |   }
195 | 
196 |   .tips {
197 |     height: 55px;
198 |   }
199 | 
200 |   .partOne {
201 |     display: flex;
202 |     flex-direction: column;
203 |   }
204 | 
205 |   .result {
206 |     margin-left: auto;
207 |     width: 400px;
208 |     display: flex;
209 |     flex-direction: column;
210 |     align-content: space-between;
211 |     padding: 48px 38px;
212 |   }
213 | 
214 |   .amount {
215 |     font-size: 55px;
216 |   }
217 | 
218 |   .reset {
219 |     padding: 13px 0 13px 0;
220 |     margin-top: auto;
221 |   }
222 | }
223 |     </style>
224 |   </head>
225 |   <body>
226 |     
227 |     <div class="tip-calculator">
228 |         <div class="partOne">
229 |           <label for="">Bill</label>
230 |           <input type="number" class="input bill-input" id="bill-input">
231 |           <label for="">Select Tip %</label>
232 |           <div class="tip">
233 |             <div class="tips tip-5">5%</div>
234 |             <div class="tips tip-10">10%</div>
235 |             <div class="tips active-tip tip-15">15%</div>
236 |             <div class="tips tip-25">25%</div>
237 |             <div class="tips tip-50">50%</div>
238 |             <div  id="tip-custom"><input class="tip-custom" type="number" placeholder="CUSTOM"></div>
239 |           </div>
240 |           <div class="peopleLabel">
241 |             <label for="">Number of People</label>
242 |             <label for="" class="error">Can't be Zero</label>
243 |           </div>
244 |           <input type="number" class="input people-input">
245 |         </div>
246 |         
247 |   
248 |         <div class="result">
249 |           <div class="tip-amount">
250 |             <div class="text">
251 |               <p>Tip Amount</p>
252 |               <p class="person">per person</p>
253 |             </div>
254 |             <div class="amount" id="tip-amount">$4.27</div>
255 |           </div>
256 |           <div class="total">
257 |             <div class="text">
258 |               <p>Total</p>
259 |               <p class="person">per person</p>
260 |             </div>
261 |             <div class="amount" id="total-amount">$32.79</div>
262 |           </div>
263 |           <div class="reset">RESET</div>
264 |         </div>
265 |       <div>
266 |   </body>
267 |   <script >
268 |     const billInput = document.querySelector(".bill-input");
269 | const peopleInput = document.querySelector(".people-input");
270 | const tips = document.querySelectorAll(".tips");
271 | const tipPerPerson = document.getElementById("tip-amount");
272 | const totalPerPerson = document.getElementById("total-amount");
273 | const resetBtn = document.querySelector(".reset");
274 | const tipCustom = document.querySelector(".tip-custom");
275 | const error = document.querySelector(".error");
276 | 
277 | billInput.addEventListener("input", billInputFun);
278 | peopleInput.addEventListener("input", peopleInputFun);
279 | tips.forEach(function (val) {
280 |   val.addEventListener("click", handleClick);
281 | });
282 | resetBtn.addEventListener("click", reset);
283 | tipCustom.addEventListener("input", tipInputFun);
284 | 
285 | billInput.value = "0.0";
286 | peopleInput.value = "1";
287 | tipPerPerson.innerHTML = "$" + (0.0).toFixed(2);
288 | totalPerPerson.innerHTML = "$" + (0.0).toFixed(2);
289 | 
290 | let billValue = 0.0;
291 | let peopleValue = 1;
292 | let tipValue = 0.15;
293 | 
294 | function billInputFun() {
295 |   billValue = parseFloat(billInput.value);
296 |   calculateTip();
297 | }
298 | 
299 | function tipInputFun() {
300 |   tipValue = parseFloat(tipCustom.value / 100);
301 | 
302 |   tips.forEach(function (val) {
303 |     val.classList.remove("active-tip");
304 |   });
305 |   calculateTip();
306 | }
307 | 
308 | function peopleInputFun() {
309 |   peopleValue = parseFloat(peopleInput.value);
310 | 
311 |   if (peopleValue < 1) {
312 |     error.style.display = "flex";
313 |     peopleInput.style.border = "thick solid red";
314 |   } else {
315 |     error.style.display = "none";
316 |     peopleInput.style.border = "none";
317 |     calculateTip();
318 |   }
319 | }
320 | 
321 | function handleClick(event) {
322 |   tips.forEach(function (val) {
323 |     val.classList.remove("active-tip");
324 |     if (event.target.innerHTML == val.innerHTML) {
325 |       val.classList.add("active-tip");
326 |       tipValue = parseFloat(val.innerHTML) / 100;
327 |     }
328 |   });
329 |   calculateTip();
330 | }
331 | 
332 | function calculateTip() {
333 |   if (peopleValue >= 1) {
334 |     let tipAmount = (billValue * tipValue) / peopleValue;
335 |     let total = (billValue + tipAmount) / peopleValue;
336 |     tipPerPerson.innerHTML = "$" + tipAmount.toFixed(2);
337 |     totalPerPerson.innerHTML = "$" + total.toFixed(2);
338 |   }
339 | }
340 | 
341 | function reset() {
342 |   billInput.value = "0.0";
343 |   billInputFun();
344 |   peopleInput.value = "1";
345 |   peopleInputFun();
346 |   tipCustom.value = "";
347 | }
348 |   </script>
349 | </html>


--------------------------------------------------------------------------------
/entries/aim-click-challenge.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Click Game</title>
 5 |     <style>
 6 |       #target {
 7 |         position: absolute;
 8 |         width: 50px;
 9 |         height: 50px;
10 |         background-color: red;
11 |       }
12 |     </style>
13 |   </head>
14 |   <body>
15 |     <h1>Click the moving target as many times as you can!</h1>
16 |     <div id="target"></div>
17 |     <p>Score: <span id="score">0</span></p>
18 |     <p>Time Left: <span id="time-left">30</span> seconds</p>
19 |     <p>
20 |       Move Interval: <input type="range" id="move-interval" min="100" max="2000" value="1000" step="100">
21 |     </p>
22 |     <p>
23 |       Target Width: <input type="range" id="target-width" min="10" max="100" value="50" step="10">
24 |     </p>
25 |     <p>
26 |       Target Height: <input type="range" id="target-height" min="10" max="100" value="50" step="10">
27 |     </p>
28 |     <p>
29 |       Time Limit: <input type="range" id="time-limit" min="10" max="60" value="30" step="5">
30 |     </p>
31 |     <button id="start-button" onclick="startGame()">Start</button>
32 |     <script>
33 |       var target = document.getElementById("target");
34 |       var score = document.getElementById("score");
35 |       var timeLeft = document.getElementById("time-left");
36 |       var moveInterval = document.getElementById("move-interval");
37 |       var targetWidth = document.getElementById("target-width");
38 |       var targetHeight = document.getElementById("target-height");
39 |       var timeLimit = document.getElementById("time-limit");
40 |       var scoreCount = 0;
41 |       var intervalId;
42 |       var timeId;
43 | 
44 |       target.addEventListener("click", function() {
45 |         scoreCount++;
46 |         score.innerHTML = scoreCount;
47 |       });
48 | 
49 |       function startGame() {
50 |         timeLeft.innerHTML = timeLimit.value;
51 |         target.style.width = targetWidth.value + "px";
52 |         target.style.height = targetHeight.value + "px";
53 |         intervalId = setInterval(function() {
54 |           var x = Math.floor(Math.random() * window.innerWidth);
55 |           var y = Math.floor(Math.random() * window.innerHeight);
56 |           target.style.left = x + "px";
57 |           target.style.top = y + "px";
58 |         }, moveInterval.value);
59 | 
60 |         timeId = setInterval(function() {
61 |           timeLeft.innerHTML = --timeLeft.innerHTML;
62 |           if (timeLeft.innerHTML == 0) {
63 |             clearInterval(intervalId);
64 |             clearInterval(timeId);
65 |             alert("Time's up! Your final score is: " + scoreCount);        
66 |           }
67 |         }, 1000);
68 |         document.getElementById("start-button").disabled = true;
69 |       }
70 |     </script>
71 |   </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/entries/backgroundlight.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>Backgroundlights</title>
 7 |     <style>
 8 |         *{
 9 |             margin: 0;
10 |             padding: 0;
11 |             box-sizing: border-box;
12 |         }
13 |         body{
14 |             background-color: rgb(2, 250, 147);
15 |             animation: change 10s 2s infinite;
16 |         }
17 |         .container{
18 |             width: 100%;
19 |             height: 80vh;
20 |             display: flex;
21 |             justify-content: center;
22 |             align-items: center;
23 |             border: 2px solid black;
24 |         }
25 |         .box{
26 |             display: flex;
27 |             align-items: center;
28 |             justify-content: center;
29 |             width: 250px;
30 |             height: 150px;
31 |             border: 2px solid black;
32 |             margin: 1%;
33 |         }
34 |         .box1{
35 |             background-color: red;
36 |         }
37 |         .box1:hover{
38 |             transform: scale(2);
39 |         }
40 |         .box2{
41 |             background-color: yellow;
42 |         }
43 |         .box2:hover{
44 |             transform: skew(30deg);
45 |         }
46 |         .box3{
47 |             background-color: lawngreen;
48 |         }
49 |         .box3:hover{
50 |             transform: rotate(260deg);
51 |         }
52 |         .box4{
53 |             background-color: orange;
54 |         }
55 |         .box4:hover{
56 |             transform: translate(40px);
57 |         }
58 | 
59 |         h1{
60 |             font-size: 2rem;
61 |             font-weight: bold;
62 |             font-family: cursive;
63 |             text-decoration: underline;
64 |             text-align: center;
65 |             margin: 2%;
66 |         }
67 |         @keyframes change{
68 |             0%{
69 |                 background-color: lightslategray;
70 |             }
71 |             20%{
72 |                 background-color: crimson;
73 |             }
74 |             40%{
75 |                 background-color: lawngreen;
76 |             }
77 |             60%{
78 |                 background-color: purple;
79 |             }
80 |             80%{
81 |                 background-color: yellow;
82 |             }
83 |             100{
84 |                 background-color: orange;
85 |             }
86 |         }
87 |     </style>
88 | </head>
89 | <body>
90 |     <h1>Play Ground</h1>
91 |     <div class="container">
92 |         <div class="box box1">Hover ME</div>
93 |         <div class="box box2">Hover ME</div>
94 |         <div class="box box3">Hover ME</div>
95 |         <div class="box box4">Hover ME</div>
96 |     </div>
97 | </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------
/entries/bits-rain.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <title>bits rain</title>
  7 |   <style>
  8 | 
  9 |     body {
 10 |       display: flex;
 11 |       flex-direction: column;
 12 |       align-items: center;
 13 |       font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 14 |     }
 15 | 
 16 |     #scene {
 17 |       width: 100%;
 18 |       height: 500px;
 19 |       display: flex;
 20 |       border: 1px solid black;
 21 |       overflow: hidden;
 22 |       color: #FF0000;
 23 |       background-color: #000000;
 24 |     }
 25 | 
 26 |     #toolbox {
 27 |       display: flex;
 28 |       flex-direction: column;
 29 |       margin-top: 3rem;
 30 |       padding: 1rem;
 31 |       border-radius: 4px;
 32 |       background-color: #F1F1F1;
 33 |     }
 34 | 
 35 |     .tool {
 36 |       display: flex;
 37 |       align-items: center;
 38 |       margin-bottom: 0.5rem;
 39 |     }
 40 | 
 41 |     .tool:last-of-type {
 42 |       margin-bottom: 0;
 43 |     }
 44 | 
 45 |     .tool > span {
 46 |       margin: 0 1rem 0 0;
 47 |       padding: 0;
 48 |       flex: 1;
 49 |     }
 50 | 
 51 |     .tool > input {
 52 |       width: 60px;
 53 |       border-radius: 3px;
 54 |     }
 55 | 
 56 |     .tool > input[type="color"]{
 57 |       border: none;
 58 |       border-color: transparent;
 59 |       -webkit-appearance: none;
 60 |     }
 61 |     
 62 |     input::-webkit-color-swatch {
 63 |       border: none;
 64 |     }
 65 | 
 66 |     .column {
 67 |       display: flex;
 68 |       flex-direction: column;
 69 |       align-items: center;
 70 |       flex: 1;
 71 |     }
 72 |   </style>
 73 | </head>
 74 | 
 75 | <body>
 76 |   <div id="scene"></div>
 77 |   <div id="toolbox">
 78 |     <div class="tool">
 79 |       <span>bit color</span>
 80 |       <input id="text-color-input" type="color" value="#FF0000" />
 81 |     </div>
 82 |     <div class="tool">
 83 |       <span>background color</span>
 84 |       <input id="background-color-input" type="color" value="#000000" />
 85 |     </div>
 86 |     <div class="tool">
 87 |       <span>update interval (ms)</span>
 88 |       <input id="speed-input" type="number" min="0" max="1000" value="50" size="1" />
 89 |     </div>
 90 |     <div class="tool">
 91 |       <span>column count</span>
 92 |       <input id="column-count-input" type="number" min="0" max="100" value="50" size="4" />
 93 |     </div>
 94 |     <div class="tool">
 95 |       <span>p0</span>
 96 |       <input id="p0-input" type="range" min="0" max="1" step="0.05" value="0.3" />
 97 |     </div>
 98 |     <div class="tool">
 99 |       <span>p1</span>
100 |       <input id="p1-input" type="range" min="0" max="1" step="0.05" value="0.3" />
101 |     </div>
102 |   </div>
103 |   <script>
104 |     const isElementOutside = (parent, child) => {
105 |       const parentRect = parent.getBoundingClientRect();
106 |       const childRect = child.getBoundingClientRect();
107 |       return parentRect.top >= childRect.bottom || parentRect.bottom <= childRect.top;
108 |     }
109 | 
110 |     const getBit = (p0, p1) => {
111 |       const seed = Math.random()
112 |       if (seed <= p0) return '0'
113 |       if (seed <= p1 + p0) return '1'
114 |       return ' '
115 |     }
116 | 
117 |     const insertColumn = container => {
118 |       const column = document.createElement('div')
119 |       column.classList.add('column')
120 |       container.appendChild(column)
121 |       return column
122 |     }
123 | 
124 |     const removeColumn = (container, column) => {
125 |       container.removeChild(column)
126 |     }
127 | 
128 |     const disposeColumns = (container, count) =>
129 |       Array.from(Array(count)).map(() => insertColumn(container))
130 | 
131 |     const patchColumnCount = (columns, container, nextCount) => {
132 |       const lastCount = columns.length
133 |       if (lastCount === nextCount) return columns
134 |       const countDelta = nextCount - lastCount
135 |       if (countDelta < 0) {
136 |         return columns.filter((column, index) => {
137 |           if (index < lastCount + countDelta) return true
138 |           removeColumn(container, columns[index])
139 |           return false
140 |         })
141 |       }
142 |       const newColumns = disposeColumns(container, countDelta)
143 |       return [
144 |         ...columns,
145 |         ...newColumns
146 |       ]
147 |     }
148 | 
149 |     const runScene = (scene) => {
150 |       const { container, columns, intervalDuration } = scene
151 |       scene.interval = setInterval(() => {
152 |         columns.forEach((column) => {
153 |           const firstBit = column.firstChild
154 |           const lastBit = column.lastChild
155 |           const bit = document.createElement('div')
156 |           bit.innerText = getBit(scene.p0, scene.p1)
157 |           if (!firstBit) {
158 |             return column.appendChild(bit)
159 |           }
160 |           column.insertBefore(bit, firstBit)
161 |           if (isElementOutside(container, lastBit)) {
162 |             column.removeChild(lastBit)
163 |           }
164 |         })
165 |       }, intervalDuration)
166 |     }
167 |   </script>
168 | 
169 |   <script>
170 |     const scene = {
171 |       interval: null,
172 |       container: null,
173 |       intervalDuration: 50,
174 |       columns: [],
175 |       columnCount: 50,
176 |       p0: 0.3,
177 |       p1: 0.3
178 |     }
179 | 
180 |     document.querySelector('#text-color-input').addEventListener('change', event => {
181 |       const { value } = event.target
182 |       scene.container.style.color = value
183 |     })
184 | 
185 |     document.querySelector('#background-color-input').addEventListener('change', event => {
186 |       const { value } = event.target
187 |       scene.container.style.backgroundColor = value
188 |     })
189 | 
190 |     document.querySelector('#speed-input').addEventListener('change', event => {
191 |       const { value } = event.target
192 |       clearInterval(scene.interval)
193 |       scene.intervalDuration = value
194 |       runScene(scene)
195 |     })
196 | 
197 |     document.querySelector('#column-count-input').addEventListener('change', event => {
198 |       const value = Math.abs(event.target.value) > 100 ? 100 : event.target.value
199 |       event.target.value = Math.abs(value)
200 |       clearInterval(scene.interval)
201 |       setTimeout(() => {
202 |         scene.columns = patchColumnCount(scene.columns, scene.container, parseInt(value, 10))
203 |         runScene(scene)
204 |       }, 0)
205 |     })
206 | 
207 |     const p0Input = document.querySelector('#p0-input')
208 |     const p1Input = document.querySelector('#p1-input')
209 |     const makeUpdateP = (targetName, siblingName, targetInput, siblingInput) => event => {
210 |       const value = Math.abs(event.target.value) > 1 ? 1 : event.target.value
211 |       const pTarget = Math.abs(value)
212 |       targetInput.value = pTarget
213 |       scene[targetName] = pTarget
214 |       const pTargetDelta = 1 - pTarget 
215 |       if (pTarget + scene[siblingName] > 1) {
216 |         scene[siblingName] = pTargetDelta
217 |         siblingInput.value = pTargetDelta
218 |       }
219 |       clearInterval(scene.interval)
220 |       runScene(scene)
221 |     }
222 | 
223 |     p0Input.addEventListener('change', makeUpdateP('p0', 'p1', p0Input, p1Input))
224 |     p1Input.addEventListener('change', makeUpdateP('p1', 'p0', p1Input, p0Input))
225 | 
226 |     scene.container = document.querySelector('#scene')
227 |     scene.columns = disposeColumns(scene.container, scene.columnCount)
228 |     runScene(scene)
229 | 
230 |   </script>
231 | </body>
232 | 
233 | </html>


--------------------------------------------------------------------------------
/entries/blur-loading-page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Blur loading page</title>
 9 | </head>
10 | 
11 | <style>
12 |     * {
13 |         box-sizing: border-box;
14 |     }
15 | 
16 |     body {
17 |         display: flex;
18 |         flex-direction: column;
19 |         align-items: center;
20 |         justify-content: center;
21 |         height: 100vh;
22 |         overflow: hidden;
23 |         margin: 0;
24 |     }
25 | 
26 |     .bg {
27 |         background-color: royalblue;
28 |         position: absolute;
29 |         top: -30px;
30 |         left: -30px;
31 |         width: calc(100vw + 60px);
32 |         height: calc(100vh + 60px);
33 |         z-index: -1;
34 |         filter: blur(0px);
35 |     }
36 | 
37 |     .text {
38 |         font-size: 4rem;
39 |         color: #fff;
40 |     }
41 | 
42 |     .intro {
43 |         text-align: center;
44 |     }
45 | 
46 |     .intro,
47 |     .like {
48 |         color: #fff;
49 |     }
50 | </style>
51 | 
52 | <body>
53 |     <section class="bg"></section>
54 |     <div class="text">0%</div>
55 | 
56 |     <div class="intro">
57 |         <h1>Hello there</h1>
58 |         <p>
59 |             <strong>Have a nice day</strong>.
60 |         </p>
61 |     </div>
62 | 
63 |     <div class="like">
64 |         <p>
65 |             Refresh the page to see the transition again.
66 |         </p>
67 |     </div>
68 | 
69 |     <script>
70 |         const background = document.querySelector('.bg');
71 |         const text = document.querySelector('.text');
72 |         const intro = document.querySelector('.intro');
73 |         const like = document.querySelector('.like');
74 | 
75 |         let i = 0;
76 | 
77 |         let time = setInterval(() => {
78 | 
79 |             i++;
80 |             if (i > 99) {
81 |                 clearInterval(time)
82 |             }
83 |             text.innerHTML = `${i}%`;
84 |             text.style.opacity = scale(i, 0, 100, 1, 0);
85 |             intro.style.opacity = scale(i, 0, 100, 0, 1);
86 |             like.style.opacity = scale(i, 0, 100, 0, 1);
87 |             background.style.filter = `blur(${scale(i, 0, 30, 60, 50)}px)`;
88 | 
89 |         }, 30);
90 | 
91 |         function scale(number, inMin, inMax, outMin, outMax) {
92 |             return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
93 |         }
94 |     </script>
95 | 
96 | </body>
97 | 
98 | </html>


--------------------------------------------------------------------------------
/entries/button-hover.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Button Hover</title>
 8 |     <style type="text/css">
 9 |         .button-hover{
10 |             position: absolute;
11 |             top: 50%;
12 |             left: 50%;
13 |             transform: translate(-50%, -50%);
14 |             width: 120px;
15 |             height: 40px;
16 |             border:none;
17 |             cursor: pointer;
18 |             background-color: rgb(65, 143, 207);
19 |             color: white;
20 |             transition: all 0.5s ease-in-out;
21 |             border-radius: 10px;
22 |             margin-bottom: 10px;
23 |         }
24 |         .button-hover:hover{
25 |             background-color: rgb(48, 116, 172);
26 |             color: white;
27 |             transform: translate(-50%, -50%) scale(1.5);
28 |         }
29 |         
30 |     </style>
31 | </head>
32 | <body>
33 |     
34 |         <button class="button-hover">Hover Me</button>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/entries/clock.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Clock</title>
  9 |     <style>
 10 |         * {
 11 |             margin: 0;
 12 |             padding: 0;
 13 |             box-sizing: border-box;
 14 |         }
 15 | 
 16 |         body {
 17 |             display: flex;
 18 |             justify-content: center;
 19 |             align-items: center;
 20 |             min-height: 100vh;
 21 |             background: #091921;
 22 |         }
 23 | 
 24 |         body.light {
 25 |             background: #d1dae3;
 26 |         }
 27 | 
 28 |         .clock {
 29 |             width: 350px;
 30 |             height: 350px;
 31 |             display: flex;
 32 |             justify-content: center;
 33 |             align-items: center;
 34 |             background: #091921;
 35 |             border: 20px solid #091921;
 36 |             border-radius: 50%;
 37 |             box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.05),
 38 |                 20px 20px 20px rgba(0, 0, 0, 0.3),
 39 |                 inset -8px -8px 15px rgba(255, 255, 255, 0.05),
 40 |                 inset 20px 20px 20px rgba(0, 0, 0, 0.3);
 41 |         }
 42 | 
 43 |         body.light .clock {
 44 |             background: #d1dae3;
 45 |             border: 20px solid #cad3dc;
 46 |             box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.5),
 47 |                 10px 10px 10px rgba(0, 0, 0, 0.3),
 48 |                 inset -8px -8px 15px rgba(255, 255, 255, 0.5),
 49 |                 inset 10px 10px 10px rgba(0, 0, 0, 0.3);
 50 |         }
 51 | 
 52 |         .clock::before {
 53 |             content: '';
 54 |             position: absolute;
 55 |             height: 15px;
 56 |             width: 15px;
 57 |             background: #fff;
 58 |             border-radius: 50%;
 59 |             z-index: 100000;
 60 |         }
 61 | 
 62 |         body.light .clock::before {
 63 |             background: #008eff;
 64 |         }
 65 | 
 66 |         .indicators div {
 67 |             position: absolute;
 68 |             width: 2px;
 69 |             height: 15px;
 70 |             background: #404040;
 71 |         }
 72 | 
 73 |         .indicators div:nth-child(1) {
 74 |             transform: rotate(30deg) translateY(-130px) translateX(-3px);
 75 |         }
 76 | 
 77 |         .indicators div:nth-child(2) {
 78 |             transform: rotate(60deg) translateY(-130px) translateX(-5px);
 79 |         }
 80 | 
 81 |         .indicators div:nth-child(3) {
 82 |             transform: rotate(120deg) translateY(-130px) translateX(-5px);
 83 |         }
 84 | 
 85 |         .indicators div:nth-child(4) {
 86 |             transform: rotate(150deg) translateY(-130px) translateX(-2px);
 87 |         }
 88 | 
 89 |         .indicators div:nth-child(5) {
 90 |             transform: rotate(210deg) translateY(-130px) translateX(4px);
 91 |         }
 92 | 
 93 |         .indicators div:nth-child(6) {
 94 |             transform: rotate(240deg) translateY(-130px) translateX(6px);
 95 |         }
 96 | 
 97 |         .indicators div:nth-child(7) {
 98 |             transform: rotate(300deg) translateY(-130px) translateX(5px);
 99 |         }
100 | 
101 |         .indicators div:nth-child(8) {
102 |             transform: rotate(330deg) translateY(-130px) translateX(2px);
103 |         }
104 | 
105 |         body.light .indicators div {
106 |             background: #808080;
107 |         }
108 | 
109 |         .nums {
110 |             position: absolute;
111 |             font-size: 30px;
112 |             font-weight: bold;
113 |             color: #808080;
114 |         }
115 | 
116 |         #three {
117 |             position: absolute;
118 |             left: 120px;
119 |             top: -15px;
120 |         }
121 | 
122 |         #six {
123 |             position: absolute;
124 |             top: 110px;
125 |             left: -8px;
126 |         }
127 | 
128 |         #nine {
129 |             position: absolute;
130 |             right: 120px;
131 |             top: -15px;
132 |         }
133 | 
134 |         #twelve {
135 |             position: absolute;
136 |             bottom: 110px;
137 |             left: -15px;
138 |         }
139 | 
140 |         .clock .hour,
141 |         .clock .min,
142 |         .clock .sec {
143 |             position: absolute;
144 |             z-index: 10;
145 |         }
146 | 
147 |         .hour,
148 |         .hr {
149 |             height: 160px;
150 |             width: 160px;
151 |         }
152 | 
153 |         .min,
154 |         .mn {
155 |             height: 190px;
156 |             width: 190px;
157 |         }
158 | 
159 |         .sec,
160 |         .sc {
161 |             height: 230px;
162 |             width: 230px;
163 |         }
164 | 
165 |         .hr,
166 |         .mn,
167 |         .sc {
168 |             display: flex;
169 |             justify-content: center;
170 |             position: absolute;
171 |             border-radius: 50%;
172 |         }
173 | 
174 |         .hr::before {
175 |             content: '';
176 |             position: absolute;
177 |             width: 8px;
178 |             height: 80px;
179 |             background: #ff105e;
180 |             z-index: 10;
181 |             border-radius: 6px 6px 0 0;
182 |         }
183 | 
184 |         .mn::before {
185 |             content: '';
186 |             position: absolute;
187 |             width: 4px;
188 |             height: 90px;
189 |             background: #ffffff;
190 |             z-index: 11;
191 |             border-radius: 6px 6px 0 0;
192 |         }
193 | 
194 |         body.light .mn::before {
195 |             background: #091921;
196 |         }
197 | 
198 |         .sc::before {
199 |             content: '';
200 |             position: absolute;
201 |             width: 2px;
202 |             height: 150px;
203 |             background: #008eff;
204 |             z-index: 12;
205 |             border-radius: 6px 6px 0 0;
206 |         }
207 | 
208 |         .time {
209 |             height: 20px;
210 |             position: absolute;
211 |             margin-top: 60%;
212 |             padding: 0 5px;
213 |             border: 1px solid #091921;
214 |             background: #091921;
215 |             border-radius: 5px;
216 |             color: #808080;
217 |             font-weight: bold;
218 |             box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.1);
219 |         }
220 | 
221 |         body.light .time {
222 |             color: #606060;
223 |             border: 1px solid #CAD3E3;
224 |             background: #CAD3E3;
225 |             box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.5);
226 |         }
227 | 
228 |         .toggleClass {
229 |             position: absolute;
230 |             top: 30px;
231 |             right: 150px;
232 |             width: 20px;
233 |             height: 20px;
234 |             font-size: 18px;
235 |             border-radius: 50%;
236 |             background: #d1dae3;
237 |             color: #d1dae3;
238 |             font-family: monospace;
239 |             cursor: pointer;
240 |             display: flex;
241 |             align-items: center;
242 |         }
243 | 
244 |         .toggleClass::before {
245 |             position: absolute;
246 |             left: 25px;
247 |             content: 'Light Mode';
248 |             white-space: nowrap;
249 |         }
250 | 
251 |         body.light .toggleClass {
252 |             background: #091921;
253 |             color: #091921;
254 |         }
255 | 
256 |         body.light .toggleClass::before {
257 |             content: 'Dark Mode';
258 |         }
259 |     </style>
260 | </head>
261 | 
262 | <body class="light">
263 |     <div class="clock">
264 |         <div class="hour">
265 |             <div class="hr" id="hr"></div>
266 |         </div>
267 |         <div class="min">
268 |             <div class="mn" id="mn"></div>
269 |         </div>
270 |         <div class="sec">
271 |             <div class="sc" id="sc"></div>
272 |         </div>
273 |         <div class="indicators">
274 |             <div></div>
275 |             <div></div>
276 |             <div></div>
277 |             <div></div>
278 |             <div></div>
279 |             <div></div>
280 |             <div></div>
281 |             <div></div>
282 |         </div>
283 |         <div class="nums">
284 |             <span id="three">3</span>
285 |             <span id="six">6</span>
286 |             <span id="nine">9</span>
287 |             <span id="twelve">12</span>
288 |         </div>
289 |         <div class="time"></div>
290 |     </div>
291 |     <div class="toggleClass" onclick="toggleClass()"></div>
292 |     <script>
293 |         function toggleClass() {
294 |             const body = document.querySelector('body');
295 |             body.classList.toggle('light');
296 |         }
297 | 
298 |         const hr = document.querySelector('#hr');
299 |         const mn = document.querySelector('#mn');
300 |         const sc = document.querySelector('#sc');
301 |         const time = document.querySelector('.time');
302 | 
303 |         setInterval(() => {
304 |             let day = new Date();
305 |             let hour = day.getHours();
306 |             let min = day.getMinutes();
307 |             let sec = day.getSeconds();
308 | 
309 |             let hrPosition = hour * 30 + min / 2      //hour * 360/12 + ((min * 360/60)/12)
310 |             let minPosition = min * 6;             //min * 360/60
311 |             let secPosition = sec * 6;           //sec * 360/60
312 | 
313 |             hr.style.transform = `rotateZ(${hrPosition}deg)`;
314 |             mn.style.transform = `rotateZ(${minPosition}deg)`;
315 |             sc.style.transform = `rotateZ(${secPosition}deg)`;
316 | 
317 |             if (sec < 10) {
318 |                 sec = '0' + sec;
319 |             }
320 |             if (min < 10) {
321 |                 min = '0' + min;
322 |             }
323 |             if (hour < 10) {
324 |                 hour = '0' + hour;
325 |             }
326 | 
327 |             time.textContent = hour + ' : ' + min + ' : ' + sec;
328 | 
329 |         }, 1000);
330 |     </script>
331 | </body>
332 | 
333 | </html>


--------------------------------------------------------------------------------
/entries/color-change-on-hover-objects.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 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 |     <style>
 9 |     body {
10 |         margin: 0px;
11 |         padding: 0px;
12 |         background: linear-gradient(black, blue, lightblue, burlywood);
13 |         width: 300px;
14 |         height: 700px;
15 |     }
16 |     #moon {
17 |         width: 7em;
18 |         height: 7em;
19 |         background-color: white;
20 |         border-radius: 50%;
21 |         position: absolute; 
22 |         top: 300px;
23 |         left: 900px;
24 |         box-shadow: 14px 10px 0px 0px white;
25 |         background: transparent;
26 |     }
27 |     body:hover {
28 |         background: black;
29 |     }
30 |     #star_1 {
31 |         animation-name: elem2;
32 |         animation-duration: 1s;
33 |         animation-fill-mode: forwards;
34 |         animation-iteration-count: infinite;
35 |         width: 2em;
36 |         height: 2em;
37 |         background-color: white;
38 |         border-radius: 50%;
39 |         position: absolute;
40 |         top: 320px;
41 |         left: 400px;
42 |     }
43 |     #star_2 {
44 |         animation-name: elem3;
45 |         animation-duration: 1s;
46 |         animation-fill-mode: forwards;
47 |         animation-iteration-count: infinite;
48 |         width: 2em;
49 |         height: 2em;
50 |         background-color: white;
51 |         border-radius: 50%;
52 |         position: absolute;
53 |         top: 180px;
54 |         left: 800px;
55 |     }
56 |     @keyframes elem2 {
57 |         20% {
58 |           transform: scale(0.6); 
59 |           background-color: gray; 
60 |         }
61 |         80% {
62 |             background-color: gray;
63 |         }
64 |     }
65 |     @keyframes elem3 {
66 |         20% {
67 |             background-color: gray;
68 |             transform: scale(0.6);
69 |         }
70 |         80% {
71 |             background-color: gray;
72 |         }
73 |     }
74 |     </style>
75 | </head>
76 | <body>
77 |     <div id="moon"></div>
78 |     <div id="star_1"></div>
79 |     <div id="star_2"></div>
80 | </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/entries/color-grid.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Random Color Generator</title>
  9 |     <style>
 10 |         body {
 11 |             background-image: linear-gradient(toright, #fffbd5, #b20a2c);
 12 |         }
 13 | 
 14 |         #main {
 15 |             display: flex;
 16 |             flex-direction: row;
 17 |             justify-content: center;
 18 |             align-items: center;
 19 |             flex-wrap: wrap;
 20 |         }
 21 | 
 22 |         .card {
 23 |             height: 250px;
 24 |             width: 175px;
 25 |             /* border: 1px solid black; */
 26 |             border-radius: 20px;
 27 |             display: inline-block;
 28 |             margin: 20px;
 29 |             display: flex;
 30 |             align-items: center;
 31 |         }
 32 | 
 33 |         .card:hover {
 34 |             transform: scale(1.1);
 35 |             transition: transform 330ms ease-in-out;
 36 |             box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
 37 |             cursor: pointer;
 38 |         }
 39 | 
 40 |         .selected {
 41 |             box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
 42 |             transform: scale(0.7);
 43 |         }
 44 | 
 45 |         #reload {
 46 |             height: 50px;
 47 |             width: 50px;
 48 |             border-radius: 50px;
 49 |             box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
 50 |             font-size: xx-large;
 51 |             position: fixed;
 52 |             top: 90vh;
 53 |             left: 90vw;
 54 |             z-index: 9999;
 55 |         }
 56 | 
 57 |         #info {
 58 |             display: none;
 59 |             text-align: center;
 60 |             width: 100%;
 61 |             font-family: fantasy;
 62 |             font-size: small;
 63 |             opacity: 0.5;
 64 | 
 65 |         }
 66 | 
 67 |         .card:hover > #info {
 68 |             display: block;
 69 |         }
 70 | 
 71 | 
 72 |     </style>
 73 | </head>
 74 | 
 75 | <body>
 76 |     <div id="main">
 77 |         <button id="reload" onclick="reload()"> &#x21bb; </button>
 78 |     </div>
 79 | </body>
 80 | 
 81 | <script>
 82 |     let mainSec = document.getElementById('main');   
 83 |     
 84 |     let copyColor = (code) => {
 85 |         navigator.clipboard.writeText(`#${code}`);
 86 | 
 87 |         let selectedCard = document.getElementById(`${code}`);
 88 | 
 89 |         selectedCard.classList.add('selected');
 90 | 
 91 |     }
 92 | 
 93 |     let reload = () => window.location.reload()
 94 | 
 95 |     for (let i = 0; i < 102; i++ ){
 96 |         let randomNum = Math.floor(Math.random() * 899999 + 100000);
 97 |         let element = `<div class="card" style="background-color: #${randomNum}" id="${randomNum}" onClick="copyColor(${randomNum})"><div id="info">Click to copy!</div></div>`;
 98 |         mainSec.insertAdjacentHTML('beforeend', element);
 99 |     }
100 | 
101 |     console.log('Made by: Rishabh Singh.\nGithub: https://github.com/Rishabh-Singh-Codes\nTwitter: https://twitter.com/Rishabh8Singh')
102 | 
103 | 
104 | </script>
105 | 
106 | </html>


--------------------------------------------------------------------------------
/entries/color-quiz.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 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <title>Color Quiz</title>
  8 | 
  9 |     <style>
 10 |       html,
 11 |       body {
 12 |         margin: 0;
 13 |         box-sizing: border-box;
 14 |         font-family: Verdana, Geneva, sans-serif;
 15 |       }
 16 |       .container {
 17 |         position: absolute;
 18 |         top: 50%;
 19 |         left: 50%;
 20 |         transform: translate(-50%, -50%);
 21 |         display: flex;
 22 |         align-items: center;
 23 |         justify-content: center;
 24 |         flex-wrap: wrap;
 25 |         height: 200px;
 26 |         width: 100vw;
 27 |       }
 28 | 
 29 |       h1,
 30 |       h2,
 31 |       #attempts {
 32 |         text-align: center;
 33 |         color: white;
 34 |         text-shadow: 1px 1px 1px #111111a9, 1px -1px 1px #111111a9,
 35 |           -1px 1px 1px #111111a9, -1px -1px 1px #111111a9;
 36 |       }
 37 | 
 38 |       button {
 39 |         height: 50px;
 40 |         width: 190px;
 41 |         margin: 0 10px;
 42 |         cursor: pointer;
 43 | 
 44 |         outline: none;
 45 |         background: #111;
 46 |         border: 2px solid white;
 47 |         border-radius: 25px;
 48 |         color: white;
 49 |         font-size: 22px;
 50 |         text-transform: capitalize;
 51 |       }
 52 |       button:hover {
 53 |         background: #333;
 54 |       }
 55 | 
 56 |       .hidden {
 57 |         display: none;
 58 |       }
 59 | 
 60 |       #end-screen {
 61 |         position: absolute;
 62 |         top: 0;
 63 |         right: 0;
 64 |         bottom: 0;
 65 |         left: 0;
 66 |         z-index: 2;
 67 |         background: linear-gradient(to top right, salmon, lemonchiffon);
 68 |       }
 69 | 
 70 |       .wrapper {
 71 |         position: absolute;
 72 |         top: 50%;
 73 |         left: 50%;
 74 |         transform: translate(-50%, -50%);
 75 |         height: 700px;
 76 |       }
 77 | 
 78 |       #end-screen div button {
 79 |         margin: 0 auto;
 80 |         display: block;
 81 |       }
 82 |     </style>
 83 |   </head>
 84 |   <body>
 85 |     <div class="wrapper">
 86 |       <h1>Background color name is ...?</h1>
 87 |       <h2 id="score">Score</h2>
 88 |       <h3 id="attempts"></h3>
 89 |       <div class="container">
 90 |         <button id="answer-1">a</button>
 91 |         <button id="answer-2">b</button>
 92 |         <button id="answer-3">c</button>
 93 |       </div>
 94 |     </div>
 95 | 
 96 |     <div id="end-screen" class="hidden">
 97 |       <div class="wrapper">
 98 |         <h1>Congratulations!</h1>
 99 |         <h2 name="score"></h2>
100 |         <button onclick="reset()">Restart</button>
101 |       </div>
102 |     </div>
103 | 
104 |     <script>
105 |       const colors = {
106 |         reds: ["salmon", "indianred", "crimson", "firebrick", "red"],
107 |         oranges: ["coral", "tomato", "gold", "orange", "orangered"],
108 |         yellows: [
109 |           "lemonchiffon",
110 |           "papayawhip",
111 |           "moccasin",
112 |           "peachpuff",
113 |           "khaki",
114 |           "yellow"
115 |         ],
116 |         greens: [
117 |           "lawngreen",
118 |           "chartreuse",
119 |           "limegreen",
120 |           "lime",
121 |           "forestgreen",
122 |           "green",
123 |           "yellowgreen",
124 |           "greenyellow",
125 |           "springgreen",
126 |           "seagreen",
127 |           "olive"
128 |         ],
129 |         cyans: [
130 |           "cyan",
131 |           "aqua",
132 |           "aquamarine",
133 |           "paleturquoise",
134 |           "turquoise",
135 |           "lightseagreen",
136 |           "teal",
137 |           "cadetblue"
138 |         ],
139 |         blues: [
140 |           "powderblue",
141 |           "lightskyblue",
142 |           "deepskyblue",
143 |           "dodgerblue",
144 |           "cornflowerblue",
145 |           "steelblue",
146 |           "royalblue",
147 |           "blue",
148 |           "darkblue",
149 |           "navy",
150 |           "midnightblue",
151 |           "mediumslateblue",
152 |           "slateblue"
153 |         ],
154 |         purples: [
155 |           "lavender",
156 |           "thistle",
157 |           "plum",
158 |           "violet",
159 |           "orchid",
160 |           "fuchsia",
161 |           "magenta",
162 |           "blueviolet",
163 |           "purple",
164 |           "indigo"
165 |         ],
166 |         pinks: [
167 |           "pink",
168 |           "lightpink",
169 |           "hotpink",
170 |           "deeppink",
171 |           "palevioletred",
172 |           "mediumvioletred"
173 |         ]
174 |       };
175 |       var body = document.getElementsByTagName("body")[0];
176 |       var scoreElem = document.getElementById("score");
177 |       var attemptsElem = document.getElementById("attempts");
178 |       var endScreen = document.getElementById("end-screen");
179 |       var score = 0;
180 |       var attempts = 0;
181 |       var maxAttempst = 10;
182 | 
183 |       Array.from(
184 |         document
185 |           .getElementsByClassName("container")[0]
186 |           .getElementsByTagName("button")
187 |       ).forEach(button => {
188 |         button.addEventListener("click", event => {
189 |           if (body.dataset["value"] == event.target.dataset["value"]) {
190 |             score++;
191 |           }
192 |           attempts++;
193 | 
194 |           if (attempts >= maxAttempst) {
195 |             showEndScreen();
196 |           } else {
197 |             doRound();
198 |           }
199 |         });
200 |       });
201 | 
202 |       function reset() {
203 |         score = 0;
204 |         attempts = 0;
205 |         updateDisplays();
206 |         endScreen.classList.add("hidden");
207 |       }
208 | 
209 |       function showEndScreen() {
210 |         endScreen.classList.remove("hidden");
211 |         endScreen.children.item(0).children.namedItem("score").innerHTML =
212 |           "You got " + score + " out of " + maxAttempst + " right";
213 |       }
214 | 
215 |       function updateDisplays() {
216 |         scoreElem.innerHTML = "Score: " + score + "/" + maxAttempst;
217 |         attemptsElem.innerHTML = "Answered: " + attempts;
218 |       }
219 | 
220 |       function randomNumberBetween(min, max) {
221 |         return Math.floor(Math.random() * (max - min + 1)) + min;
222 |       }
223 | 
224 |       function setButton(id, val) {
225 |         var button = document.getElementById("answer-" + id);
226 |         button.innerHTML = val;
227 |         button.dataset["value"] = val;
228 |       }
229 | 
230 |       function getRandomProperty(obj) {
231 |         var keys = Object.keys(obj);
232 |         return obj[keys[(keys.length * Math.random()) << 0]];
233 |       }
234 | 
235 |       function setRandomBackgroundColor() {
236 |         var colorType = getRandomProperty(colors);
237 |         var colorPos = randomNumberBetween(0, colorType.length - 1);
238 | 
239 |         body.style.background = colorType[colorPos];
240 |         body.dataset["value"] = colorType[colorPos];
241 | 
242 |         return [colorType, colorPos];
243 |       }
244 | 
245 |       function doRound() {
246 |         updateDisplays();
247 |         var [colorType, colorPos] = setRandomBackgroundColor();
248 | 
249 |         var correctAnswerButton = randomNumberBetween(1, 3);
250 |         setButton(correctAnswerButton, colorType[colorPos]);
251 |         var buttonIds = [1, 2, 3];
252 |         var possibleVals = Array.from(
253 |           Array(colorType.length),
254 |           (x, index) => index
255 |         ).filter(v => v != colorPos);
256 |         buttonIds
257 |           .filter(bi => bi != correctAnswerButton)
258 |           .forEach(bi => {
259 |             var otherColorPos = getRandomProperty(possibleVals);
260 |             setButton(bi, colorType[otherColorPos]);
261 |             possibleVals = possibleVals.filter(v => v != otherColorPos);
262 |           });
263 |       }
264 | 
265 |       doRound();
266 |     </script>
267 |   </body>
268 | </html>
269 | 


--------------------------------------------------------------------------------
/entries/contact_list.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>My Contacts</title>
  8 |       <style>
  9 |         * {
 10 |   font-family: sans-serif;
 11 | }
 12 | body {
 13 |   margin: 0;
 14 |   height: 100vh;
 15 |   background: linear-gradient(to bottom, #a0fff7 0%, #aaa8ff9a 100%);
 16 | }
 17 | .inp_items {
 18 |   max-width: 50vw;
 19 |   margin: auto;
 20 |   background-color: rgba(150, 118, 255, 0.687);
 21 |   padding: 20px;
 22 |   padding-bottom: 10px;
 23 |   border-radius: 10px;
 24 |   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
 25 | }
 26 | @media only screen and (max-width: 600px) {
 27 |   .inp_items {
 28 |     max-width: 100%;
 29 |     margin: auto;
 30 |     background-color: rgba(150, 118, 255);
 31 |     padding: 20px;
 32 |     padding-bottom: 10px;
 33 |   }
 34 | }
 35 | 
 36 | .inp {
 37 |   display: flex;
 38 |   justify-content: space-between;
 39 |   padding-bottom: 4px;
 40 |   font-size: 15px;
 41 |   font-weight: 700;
 42 | }
 43 | .inp input {
 44 |   border: none;
 45 |   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
 46 |   height: 20px;
 47 | }
 48 | .inp_btn {
 49 |   margin: auto;
 50 |   display: flex;
 51 |   padding-top: 10px;
 52 |   justify-content: center;
 53 | }
 54 | .inp_btn input {
 55 |   border: none;
 56 |   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
 57 |   padding: 5px;
 58 |   background-color: gold;
 59 |   font-weight: 800;
 60 |   letter-spacing: 1px;
 61 |   font-size: 18px;
 62 | }
 63 | .info {
 64 |   display: grid;
 65 |   grid-template-columns: 1fr 1fr;
 66 | }
 67 | @media only screen and (max-width: 600px) {
 68 |   .info {
 69 |     display: grid;
 70 |     grid-template-columns: 1fr;
 71 |   }
 72 | }
 73 | .card {
 74 |   border-color: rgb(0, 0, 0);
 75 |   border-style: solid;
 76 |   border-radius: 3px;
 77 |   padding: 10px;
 78 |   margin: 5px;
 79 |   border-radius: 10px;
 80 |   background: radial-gradient(
 81 |     circle,
 82 |     rgba(232, 240, 162, 0.532) 0%,
 83 |     rgb(24, 221, 34, 0.7) 100%
 84 |   );
 85 | }
 86 | 
 87 | .name {
 88 |   display: flex;
 89 |   justify-content: center;
 90 | }
 91 | 
 92 | .card input {
 93 |   margin-left: 10px;
 94 | }
 95 | 
 96 | .card input {
 97 |   border: none;
 98 |   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
 99 |   background-color: gold;
100 |   padding: 5px;
101 | }
102 |       </style>
103 | </head>
104 | <body>
105 |     <h1>My Contacts</h1>
106 |     
107 |     <hr>
108 |     <div class="inp_items">
109 |         <div class="inp" >
110 |             First name :
111 |             <input type="text" id="fname">
112 |         </div >
113 |         <div class="inp" >
114 |             Last name :
115 |             <input type="text" id="lname">
116 |         </div>
117 |         <div class="inp" >
118 |             Email :
119 |             <input type="text" id="email">
120 |         </div>
121 |         <div class="inp" >
122 |             Mobile number :
123 |             <input type="text" id="number">
124 |         </div>
125 |         <div class="inp_btn" >
126 |             <input type="button" id="submit" value="Add Contact" >
127 |         </div>
128 |     </div>
129 | 
130 |     <div>
131 |         <h1>Contacts</h1>
132 |         <div class="info">
133 |         </div>
134 |     </div>
135 |     
136 |     <script>
137 |       const _localstorage = localStorage.getItem("list");
138 | var arr = [];
139 | if (_localstorage) {
140 |   arr = JSON.parse(_localstorage).data;
141 | }
142 | flag = 0;
143 | const btnHandler = () => {
144 |   const fname = document.querySelector("#fname").value;
145 |   const lname = document.querySelector("#lname").value;
146 |   const email = document.querySelector("#email").value;
147 |   const number = document.querySelector("#number").value;
148 |   const uid = new Date().toISOString();
149 |   let con_obj = {
150 |     fname,
151 |     lname,
152 |     email,
153 |     number,
154 |     uid,
155 |   };
156 |   arr.push(con_obj);
157 |   render();
158 |   document.querySelector("#fname").value = "";
159 |   document.querySelector("#lname").value = "";
160 |   document.querySelector("#email").value = "";
161 |   document.querySelector("#number").value = "";
162 |   if (flag == 1) {
163 |     submit.value = "Add Contact";
164 |     flag == 0;
165 |   }
166 | };
167 | const submit = document.querySelector("#submit");
168 | submit.addEventListener("click", () => btnHandler());
169 | 
170 | const render = () => {
171 |   localStorage.setItem("list", JSON.stringify({ data: arr }));
172 |   const info = document.querySelector(".info");
173 |   info.innerHTML = "";
174 |   arr.map((e, index) => {
175 |     const ele = document.createElement("div");
176 |     ele.classList.add("card");
177 |     const n = document.createElement("h4");
178 |     n.append(`${e.fname} ${e.lname} `);
179 |     n.classList.add("name");
180 | 
181 |     const n1 = document.createElement("p");
182 |     n1.append(`Email : ${e.email}`);
183 |     n1.classList.add("creds");
184 | 
185 |     const n2 = document.createElement("p");
186 |     n2.append(`Number : ${e.number}`);
187 |     n2.classList.add("creds");
188 | 
189 |     const btn = document.createElement("input");
190 |     btn.type = "Button";
191 |     btn.value = "Delete";
192 | 
193 |     const btn_m = document.createElement("input");
194 |     btn_m.type = "Button";
195 |     btn_m.value = "Modify";
196 | 
197 |     const btn_update = document.createElement("input");
198 |     btn_update.type = "Button";
199 |     btn_update.value = "Update";
200 | 
201 |     ele.append(n);
202 |     ele.append(n1);
203 |     ele.append(n2);
204 |     ele.append(btn_m);
205 |     ele.append(btn);
206 |     info.append(ele);
207 |     btn.addEventListener("click", () => {
208 |       let tem_arr = arr;
209 |       tem_arr.map((ele, index) => {
210 |         if (ele.uid == e.uid) {
211 |           arr.splice(index, 1);
212 |         }
213 |       });
214 |       render();
215 |     });
216 |     btn_m.addEventListener("click", () => {
217 |       alert("Update your changes at top");
218 |       document.querySelector("#fname").value = e.fname;
219 |       document.querySelector("#lname").value = e.lname;
220 |       document.querySelector("#email").value = e.email;
221 |       document.querySelector("#number").value = e.number;
222 |       submit.value = "Update";
223 |       let tem_arr = arr;
224 |       tem_arr.map((ele, index) => {
225 |         if (ele.uid == e.uid) {
226 |           arr.splice(index, 1);
227 |         }
228 |       });
229 |       render();
230 |       flag = 1;
231 |     });
232 |   });
233 | };
234 | render();
235 |     </script>
236 | </body>
237 | 
238 | </html>
239 | 


--------------------------------------------------------------------------------
/entries/css-calc.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <meta charset="utf-8">
  7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |     <title>Css Calculator by Aryan Kapoor</title>
  9 |     <meta name="description" content="a css calculator">
 10 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 11 | 
 12 | </head>
 13 | 
 14 | <style>
 15 |     body {
 16 |         display: flex;
 17 |         justify-content: center;
 18 |         align-items: center;
 19 |         min-height: 100vh;
 20 |         background: #31285e;
 21 |         overflow: hidden;
 22 |     }
 23 | 
 24 |     span {
 25 |         border-radius: 8px;
 26 |     }
 27 | 
 28 |     .num {
 29 |         margin: 5px;
 30 |         cursor: pointer;
 31 |     }
 32 | 
 33 |     .calculator {
 34 |         position: relative;
 35 |         display: grid;
 36 |         background-color: #2a3846;
 37 |         padding: 13px;
 38 |         border-radius: 10px;
 39 |         box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 40 |     }
 41 | 
 42 |     .calculator .value {
 43 |         grid-column: span 4;
 44 |         height: 100px;
 45 |         text-align: right;
 46 |         border: none;
 47 |         outline: none;
 48 |         padding: 20px;
 49 |         font-size: 18px;
 50 |         margin-bottom: 5px;
 51 |         border-radius: 3px;
 52 |     }
 53 | 
 54 |     .calculator span {
 55 |         display: grid;
 56 |         width: 60px;
 57 |         height: 60px;
 58 |         color: #fff;
 59 |         background: #0c2835;
 60 |         place-items: center;
 61 |         border: 1px solid rgba(0, 0, 0, .1);
 62 |     }
 63 | 
 64 |     .calculator span:active {
 65 |         background: #74ff3b;
 66 |         color: #111;
 67 |     }
 68 | 
 69 |     .calculator span.clear {
 70 |         grid-column: span 2;
 71 |         width: 130px;
 72 |         background: #ff3077;
 73 |     }
 74 | 
 75 |     .calculator span.plus {
 76 |         grid-row: span 2;
 77 |         height: 130px;
 78 |     }
 79 | 
 80 |     .calculator span.equal {
 81 |         background: #03b1ff;
 82 |     }
 83 | </style>
 84 | 
 85 | <body>
 86 | 
 87 |     <form class="calculator" name="calc">
 88 |         <input type="text" name="txt" class="value" readonly="">
 89 | 
 90 |         <span class="num clear" onclick="document.calc.txt.value =''">c</span>
 91 |         <span class="num" onclick="document.calc.txt.value +='/'">/</span>
 92 |         <span class="num" onclick="document.calc.txt.value +='*'">*</span>
 93 |         <span class="num" onclick="document.calc.txt.value +='7'">7</span>
 94 |         <span class="num" onclick="document.calc.txt.value +='8'">8</span>
 95 |         <span class="num" onclick="document.calc.txt.value +='9'">9</span>
 96 |         <span class="num" onclick="document.calc.txt.value +='-'">-</span>
 97 |         <span class="num" onclick="document.calc.txt.value +='4'">4</span>
 98 |         <span class="num" onclick="document.calc.txt.value +='5'">5</span>
 99 |         <span class="num" onclick="document.calc.txt.value +='6'">6</span>
100 |         <span class="num plus" onclick="document.calc.txt.value +='+'">+</span>
101 |         <span class="num" onclick="document.calc.txt.value +='3'">3</span>
102 |         <span class="num" onclick="document.calc.txt.value +='2'">2</span>
103 |         <span class="num" onclick="document.calc.txt.value +='1'">1</span>
104 |         <span class="num" onclick="document.calc.txt.value +='0'">0</span>
105 |         <span class="num" onclick="document.calc.txt.value +='00'">00</span>
106 |         <span class="num" onclick="document.calc.txt.value +='.'">.</span>
107 |         <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
108 |     </form>
109 | 
110 | 
111 | 
112 | </body>
113 | 
114 | </html>


--------------------------------------------------------------------------------
/entries/date_me_form.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Date Me Form</title>
  8 |     <style>
  9 |         * {
 10 |         margin: 0;
 11 |         padding: 0;
 12 |         box-sizing: border-box;
 13 |         color: #09585d;
 14 |         font-family: "Oswald";
 15 |         font-size: 1.3rem;
 16 |         text-decoration:none;
 17 |     }
 18 |     a, input{
 19 |         cursor:pointer;
 20 |         padding: 2px 10px;
 21 |         border-radius: 5px;
 22 |     }
 23 |     .main-bg {
 24 |         background: #ece9e2;
 25 |     }
 26 |     .title{
 27 |         margin-bottom: 1rem;
 28 |     }
 29 |     .bord{
 30 |         margin: 0 auto;
 31 |         margin-top: 2rem;
 32 |         width: 80%;
 33 |         border: 1px solid #cfcfcf;
 34 |         margin-bottom:2rem;
 35 |         padding: 1rem .5rem 1rem .5rem;
 36 |     }
 37 |     .content {
 38 |         margin: 0 auto;
 39 |         margin-top: 2rem;
 40 |         padding-top:2rem;
 41 |         margin-bottom:2rem;
 42 |         width: 80%;
 43 |         border: 1 solid #cfcfcf;
 44 |         background: #f2dcde;
 45 |         text-align: center;
 46 |         border-radius: .3rem;
 47 |     }
 48 |     form.content{
 49 |         padding-bottom:2rem;
 50 |     }
 51 |     .check{
 52 |         width:100%;
 53 |     }
 54 |     .check-1, .check-2, .check-3{
 55 |         padding: 1rem 2rem .5rem 2rem;
 56 |         display:flex;
 57 |         justify-content: space-between;
 58 |     }
 59 |     .checkbox-align{
 60 |         padding-right: 2rem;
 61 |     }
 62 |     .gender{
 63 |         margin: 0 10px;
 64 |     }
 65 |     textarea{
 66 |         width:100%;
 67 |         height: 20vh;
 68 |         padding: 4px 10px;
 69 |         border-radius: 5px;
 70 |     }
 71 |     textarea:focus, input:focus{
 72 |         outline: 2px solid #98bcbe;
 73 |     }
 74 |     ::placeholder{
 75 |         font-size:1rem;
 76 |     }
 77 |     a.btn{
 78 |         background: #09585d;
 79 |         color:#fff;
 80 |         padding:.7rem;
 81 |         border-radius:5px;
 82 |     }
 83 |     </style>
 84 | </head>
 85 | <body class="main-bg">
 86 |     <form  class="content">
 87 |         <h2 class="title">Application for permission to date me</h2>
 88 |         <p class="note">
 89 |             <b>Note : </b>
 90 |             The Form is to be completed at least 21 days prior.
 91 |         </p>
 92 |         <fieldset class="bord">
 93 |             <legend>
 94 |                 <h2 class="title">Personal Details</h2>
 95 |             </legend>
 96 |             <label>Name : </label>
 97 |                 <input type="text" placeholder="Enter your name here"> <br> <br>
 98 |             <label>Email : </label>
 99 |                 <input type="text" placeholder="Enter your email here"> <br> <br>
100 |             <label>Address : </label>
101 |                 <input type="text" placeholder="Enter your address here"> <br> <br>
102 |             <label>Phone Number : </label>
103 |                 <input type="text" placeholder="Enter your phone number here">  <br> <br>
104 |             <label>IQ : </label>
105 |                 <input type="text" placeholder="Enter your IQ here">  <br> <br>      
106 |             <label>Gender: </label> <br><br>
107 |                 <input class="gender" type="radio" name="gender">Male 
108 |                 <input class="gender" type="radio" name="gender">Female <br><br>
109 |             <label>Date of Proposed Outing : </label>
110 |                 <input type="date">       
111 |         </fieldset>
112 |         <fieldset class="bord">
113 |             <h2 class="title">Check all that apply</h2>
114 |             <table class="check">
115 |                 <tr class="check-1">
116 |                     <td><input type="checkbox"> <label>I love pets</label></td>
117 |                     <td><input type="checkbox"> <label>I work Full-time</label></td>
118 |                 </tr>
119 |                 <tr class="check-2">
120 |                     <td><input type="checkbox"> <label>I have children</label></td>
121 |                     <td><input type="checkbox"> <label>My parents are rich</label></td>
122 |                 </tr>
123 |                 <tr class="check-3">
124 |                     <td><input type="checkbox"> <label>Date at public location</label></td>
125 |                     <td><input type="checkbox"> <label>Have fun without judging</label></td>
126 |                 </tr>
127 |             </table>
128 |         </fieldset>
129 |         <fieldset class="bord">
130 |             <legend>Essay</legend>
131 |             <p>In 50 words or more, explain why you want to date me</p>
132 |             <textarea placeholder="Enter your reasons why..."></textarea>
133 |         </fieldset>
134 |         <a href="#" class="btn">Send Your Application</a>
135 |     </form>    
136 | </body>
137 | </html>


--------------------------------------------------------------------------------
/entries/draw-rgb.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <style>
 7 |       svg {
 8 |         width: 30vw;
 9 |         margin: 10vw auto 0 auto;
10 |         display: block;
11 |         }
12 |         
13 |         @-webkit-keyframes animate-svg-fill-1 {
14 |           0% {fill: transparent;}
15 |           25% {fill: rgb(179, 255, 0);}
16 |           50% {fill: rgb(139, 162, 238);}
17 |           75% {fill: rgb(255, 0, 0);}
18 |           100% {fill: rgb(0, 0, 0);}
19 |         }
20 |           
21 |           @keyframes animate-svg-fill-1 {
22 |             0% {fill: transparent;}
23 |           25% {fill: rgb(179, 255, 0);}
24 |           50% {fill: rgb(139, 162, 238);}
25 |           75% {fill: rgb(255, 0, 0);}
26 |           100% {fill: rgb(0, 0, 0);}
27 |           }
28 |           
29 |           .svg-elem-1 {
30 |             -webkit-animation: animate-svg-fill-1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
31 |             animation: animate-svg-fill-1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
32 |             }
33 |     </style>
34 |     <title>Draw RGB</title>
35 | </head>
36 | <body>
37 | <div>
38 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211.783 237.027">
39 |     <defs/>
40 |     <path d="M102.906 236.393c-34.044-3.706-63.383-23.378-77.248-51.795-9.119-18.69-10.723-39.223-4.567-58.455l1.979-6.181-3.738-3.49c-2.654-2.476-4.312-4.703-5.713-7.672-1.764-3.74-1.975-4.759-1.986-9.595-.013-5.91-.005-5.932 7.607-20.676 4.08-7.904 4.082-8.036.09-10.654-4.134-2.71-10.804-10.09-12.814-14.178-.826-1.68-1.826-3.336-2.222-3.682C2.976 48.867.382 39.427.066 34.63-.666 23.512 4.72 15.451 13.974 13.81c8.301-1.472 15.361 3.298 17.397 11.754 1 4.157 3.224 8.923 4.8 10.287.59.511 1.969-.69 5.813-5.064C60.594 9.61 87.404-1.854 113.416.246c8.17.658 12.205 1.49 18.548 3.825 6.587 2.424 10.712 4.62 15.984 8.508 6.985 5.15 10.524 9.246 13.698 15.854 3.94 8.206 5.354 14.236 5.349 22.835-.004 8.199-1.246 13.024-4.606 17.905-1.217 1.766-2.126 3.286-2.02 3.376.105.09 2.623 1.476 5.596 3.08 14.642 7.898 28.467 21.64 36.1 35.884 21.997 41.045 5.502 90.314-37.902 113.21-18.863 9.95-40.022 13.981-61.257 11.67zm24.363-3.364c40.21-4.909 72.035-31.8 79.982-67.584 1.829-8.236 1.822-23.365-.014-31.64-3.925-17.684-14.067-33.841-28.96-46.134-14.888-12.29-33.495-19.718-54.501-21.76-7.706-.75-7.958-.82-7.958-2.225 0-1.695-.223-1.674 8.708-.814 8.865.854 17.595 2.734 25.062 5.395a858.987 858.987 0 007.131 2.52c.622.206 1.75-.638 3.177-2.378 3.197-3.897 4.833-9.874 4.776-17.455-.057-7.723-1.368-13.257-4.982-21.033-2.35-5.058-3.643-6.995-6.53-9.784-10.532-10.175-23.617-15.942-39.444-17.383-6.12-.557-15.911-.13-20.485.892-19.394 4.336-33.296 12.152-46.928 26.383-4.046 4.224-7.357 7.92-7.357 8.214 0 .294.802 1.028 1.78 1.632l1.781 1.097 1.595-2.686c2.028-3.413 4.451-6.132 5.467-6.132.95 0 1.051 1.636.138 2.225-1.134.731-4.824 7.178-4.46 7.791.19.324 1.352.759 2.579.966 4.318.731 4.795 1.194 6.2 6.024 1.557 5.348 1.793 12.084.578 16.465-.575 2.075-1.783 4.094-3.708 6.2l-2.854 3.123-6.8-.355c-5.974-.311-11.71-1.503-15.658-3.253-.805-.357-1.051-.164-1.051.825 0 1.735-.833 3.586-5.232 11.622-4.861 8.88-5.842 11.983-5.35 16.922.522 5.23 2.7 9.545 6.955 13.78 6.016 5.988 14.245 9.18 23.746 9.212 9.448.031 13.368-1.592 26.87-11.126 17.97-12.69 35.642-19.607 55.106-21.567 10.856-1.094 25.299.49 25.73 2.821.18.98-.111 1.094-2.1.829-12.965-1.73-16.157-1.892-23.17-1.176-3.975.406-9.285 1.18-11.8 1.719-12.127 2.6-28.581 9.78-38.761 16.915-2.905 2.036-5.723 3.983-6.264 4.328-.541.345-1.933 1.372-3.092 2.282-3.47 2.724-9.127 5.453-13.553 6.536-6.304 1.544-16 .992-21.878-1.243-2.478-.943-4.892-1.763-5.365-1.824-.985-.127-3.072 5.647-4.643 12.845-1.45 6.642-1.44 22.273.02 29.346 5.136 24.886 22.556 46.591 47.222 58.842 18.044 8.961 37.868 12.294 58.295 9.8zm-90.097-68.295c-1.622-2.04 1.063-4.493 2.862-2.615.764.798.843 1.287.34 2.122-.878 1.453-2.268 1.667-3.202.493zm33.21-78.062c.81-8.087 4.485-22.512 8.941-35.091C84.534 36.871 91.215 23.38 93.29 23.38c1.342 0 1.107 1.52-.65 4.202-7.08 10.804-16.436 37.955-19.39 56.269-.83 5.141-1.212 6.303-2.135 6.488-1.033.208-1.092-.088-.734-3.667zm-21.396-16.22c2.944-2.806 3.944-5.852 3.934-11.977-.006-3.633-.375-6.41-1.161-8.733-1.122-3.31-1.237-3.425-4.13-4.106-4.457-1.05-8.496-3.398-11.921-6.93-3.393-3.5-5.368-7.186-6.69-12.482-1.154-4.621-2.29-6.31-5.621-8.353-2.259-1.386-3.486-1.694-6.672-1.677-5.74.031-10.04 2.758-12.816 8.126-1.09 2.106-1.292 3.507-1.267 8.774.025 5.234.31 7.092 1.732 11.28.937 2.758 1.918 5.16 2.182 5.337.263.178 1.8 2.435 3.416 5.014 6.985 11.152 18.294 17.269 32.294 17.468 4.52.065 4.939-.044 6.72-1.742z" class="svg-elem-1"/>
41 |   </svg>
42 | </div>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/entries/fall_game.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>FallGame</title>
  9 | 
 10 |     <style>
 11 |         
 12 | 
 13 |         * {
 14 |             padding: 0;
 15 |             margin: 0;
 16 |         }
 17 | 
 18 |         body {
 19 |             background-color: blueviolet;
 20 |         }
 21 | 
 22 |         h1 {
 23 |             text-align: center;
 24 |             margin-top: 15px;
 25 |             font-size: 50px;
 26 |         }
 27 | 
 28 |         hr {
 29 |             text-align: center;
 30 |             margin: 50px;
 31 |         }
 32 | 
 33 |         #game {
 34 |             width: 400px;
 35 |             height: 500px;
 36 |             border: 5px solid red;
 37 |             border-radius: 15px;
 38 |             margin: 100px 0 0 550px;
 39 |             overflow: hidden;
 40 |         }
 41 | 
 42 |         #character {
 43 |             width: 20px;
 44 |             height: 20px;
 45 |             background-color: red;
 46 |             border-radius: 50%;
 47 |             position: relative;
 48 |             top: 400px;
 49 |             left: 190px;
 50 |             z-index: 1000000;
 51 |         }
 52 | 
 53 |         .block {
 54 |             width: 400px;
 55 |             height: 20px;
 56 |             background-color: black;
 57 |             position: relative;
 58 |             top: 100px;
 59 |             margin-top: -20px;
 60 |         }
 61 | 
 62 |         .hole {
 63 |             width: 40px;
 64 |             height: 20px;
 65 |             background-color: blueviolet;
 66 |             position: relative;
 67 |             top: 100px;
 68 |             margin-top: -20px;
 69 |         }
 70 |     </style>
 71 | </head>
 72 | 
 73 | <body>
 74 |     <h1>Fall Game</h1>
 75 |     <hr>
 76 |     <div id="game">
 77 |         <div id="character">
 78 | 
 79 |         </div>
 80 |     </div>
 81 | </body>
 82 | 
 83 | 
 84 | <script>
 85 |     var character = document.getElementById('character');
 86 |     var game = document.getElementById('game');
 87 |     var interval;
 88 |     var both = 0;
 89 |     var counter = 0;
 90 |     var currentBlocks = [];
 91 | 
 92 |     function moveLeft() {
 93 |         var left = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
 94 |         if (left > 0) {
 95 | 
 96 |             character.style.left = left - 2 + "px";
 97 |         }
 98 |     }
 99 |     function moveRight() {
100 |         var left = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
101 |         if (left < 380) {
102 | 
103 |             character.style.left = left + 2 + "px";
104 |         }
105 |     }
106 | 
107 |     document.addEventListener("keydown", event => {
108 |         if (both == 0) {
109 |             both++;
110 |             if (event.key === "ArrowLeft") {
111 |                 interval = setInterval(moveLeft, 1);
112 |             }
113 |             if (event.key === "ArrowRight") {
114 |                 interval = setInterval(moveRight, 1);
115 |             }
116 |         }
117 |     });
118 | 
119 |     document.addEventListener("keyup", event => {
120 |         clearInterval(interval);
121 |         both = 0;
122 |     });
123 | 
124 |     var blocks = setInterval(function () {
125 |         var blockLast = document.getElementById("block" + (counter - 1));
126 |         var holeLast = document.getElementById("hole" + (counter - 1));
127 | 
128 |         if (counter > 0) {
129 | 
130 |             var blockLastTop = parseInt(window.getComputedStyle(blockLast).getPropertyValue("top"));
131 |             var holeLastTop = parseInt(window.getComputedStyle(holeLast).getPropertyValue("top"));
132 |         }
133 | 
134 |         if (blockLastTop < 400 || counter == 0) {
135 | 
136 |             var block = document.createElement("div");
137 |             var hole = document.createElement("div");
138 |             block.setAttribute("class", "block");
139 |             hole.setAttribute("class", "hole");
140 |             block.setAttribute("id", "block" + counter);
141 |             hole.setAttribute("id", "hole" + counter);
142 | 
143 |             block.style.top = blockLastTop + 100 + "px";
144 |             hole.style.top = holeLastTop + 100 + "px";
145 | 
146 |             var random = Math.floor(Math.random() * 360);
147 |             hole.style.left = random + "px";
148 | 
149 |             game.appendChild(block);
150 |             game.appendChild(hole);
151 |             currentBlocks.push(counter);
152 |             counter++;
153 |         }
154 | 
155 |         var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
156 |         var characterLeft = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
157 |         var drop = 0;
158 | 
159 |         if (characterTop <= 0) {
160 |             alert('Game Over. Score: ' + (counter - 9));
161 |             clearInterval(blocks);
162 |             location.reload();
163 |         }
164 | 
165 |         for (var i = 0; i < currentBlocks.length; i++) {
166 |             let current = currentBlocks[i];
167 |             let iBlock = document.getElementById("block" + current);
168 |             let iHole = document.getElementById("hole" + current);
169 | 
170 |             let iblockTop = parseFloat(window.getComputedStyle(iBlock).getPropertyValue("top"));
171 |             let iholeLeft = parseFloat(window.getComputedStyle(iHole).getPropertyValue("left"));
172 | 
173 |             iBlock.style.top = iblockTop - 0.5 + "px";
174 |             iHole.style.top = iblockTop - 0.5 + "px";
175 | 
176 |             if (iblockTop < -20) {
177 |                 currentBlocks.shift();
178 |                 iBlock.remove();
179 |                 iHole.remove();
180 |             }
181 |             if (iblockTop - 20 < characterTop && iblockTop > characterTop) {
182 |                 drop++;
183 |                 if (iholeLeft <= characterLeft && iholeLeft + 20 >= characterLeft) {
184 |                     drop = 0;
185 |                 }
186 |             }
187 |         }
188 |         if (drop == 0) {
189 |             if (characterTop < 480) {
190 | 
191 |                 character.style.top = characterTop + 2 + "px";
192 |             }
193 |         }
194 |         else {
195 |             character.style.top = characterTop - 0.5 + "px";
196 |         }
197 |     }, 1);
198 | 
199 | </script>
200 | 
201 | </html>


--------------------------------------------------------------------------------
/entries/fireworks.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>Fireworks</title>
  7 |     <style type="text/css">
  8 |         html,
  9 |         body {
 10 |             background-color: black;
 11 |             height: 100%;
 12 |             margin: 0;
 13 |         }
 14 |     </style>
 15 | </head>
 16 | 
 17 | <body>
 18 |     <canvas></canvas>
 19 |     <script>
 20 |         // declare constant variables
 21 |         const canvas = document.querySelector('canvas');
 22 |         const c = canvas.getContext('2d'); // c within canvas is always context
 23 |         canvas.width = window.innerWidth;
 24 |         canvas.height = window.innerHeight;
 25 |         const mouse = {
 26 |             x: innerWidth / 2,
 27 |             y: innerHeight / 2
 28 |         }
 29 |         const gravity = 0.006
 30 |         const friction = 1
 31 | 
 32 |         addEventListener('resize', () => {
 33 |             canvas.width = window.innerWidth
 34 |             canvas.height = window.innerHeight
 35 |             init()
 36 |         })
 37 | 
 38 |         class Spinner {
 39 |             constructor(x, y, radius, color, velocity) {
 40 |                 this.x = x
 41 |                 this.y = y
 42 |                 this.radius = radius
 43 |                 this.color = color
 44 |                 this.velocity = velocity
 45 |                 this.alpha = 1 // alpha = opacity
 46 |             }
 47 | 
 48 |             draw() {
 49 |                 c.save()
 50 |                 c.globalAlpha = this.alpha
 51 |                 c.beginPath()
 52 |                 c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
 53 |                 c.fillStyle = this.color
 54 |                 c.fill()
 55 |                 c.closePath()
 56 |                 c.restore()
 57 |             }
 58 |             update() {
 59 |                 this.draw()
 60 |                 this.velocity.x *= friction
 61 |                 this.velocity.x *= friction
 62 |                 this.velocity.y += gravity
 63 |                 this.x += this.velocity.x
 64 |                 this.y += this.velocity.y
 65 |             }
 66 |         }
 67 | 
 68 |         let spinners
 69 | 
 70 |         function init() {
 71 |             spinners = []
 72 |         }
 73 | 
 74 |         function animate() {
 75 |             requestAnimationFrame(animate)
 76 |                 // make sliders for this VVVV
 77 |             c.fillStyle = 'rgba(0, 0, 0, .15)'
 78 |             c.fillRect(0, 0, canvas.width, canvas.height)
 79 |             spinners.forEach((spinner) => {
 80 |                 if (spinner.alpha > 0) {
 81 |                     spinner.update()
 82 |                 } else {
 83 |                     spinner.splice(i, 1)
 84 |                 }
 85 |             })
 86 |         }
 87 | 
 88 |         init()
 89 |         animate()
 90 |         addEventListener('click', (event) => {
 91 |             mouse.x = event.clientX
 92 |             mouse.y = event.clientY
 93 |             const particleCount = 400
 94 |             const angleIncrement = (Math.PI * 2) / particleCount
 95 |                 // particles
 96 |             for (let i = 0; i < particleCount; i++) {
 97 |                 spinners.push(
 98 |                     new Spinner(
 99 |                         mouse.x, mouse.y, 5, `hsl(${Math.random() * 360}, 50%, 50%)`, {
100 |                             x: Math.cos(angleIncrement * i) * (Math.random() * 10),
101 |                             y: Math.sin(angleIncrement * i) * (Math.random() * 10)
102 |                         }
103 |                     ))
104 |             }
105 |             console.log(spinners)
106 |         })
107 |     </script>
108 | </body>
109 | 
110 | </html>
111 | 


--------------------------------------------------------------------------------
/entries/game_of_life.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <title>game of life</title>
  6 |     <style>
  7 |       html {
  8 | 	  margin: auto;
  9 | 	  width: 80%;
 10 |       }
 11 | 
 12 |       #game {
 13 | 	  padding-left: 0;
 14 | 	  padding-right: 0;
 15 | 	  margin-left: auto;
 16 | 	  margin-right: auto;
 17 | 	  display: block;
 18 | 	  width: 600px;
 19 |       }
 20 | 
 21 |       .controls {
 22 | 	  padding-left: 0;
 23 | 	  padding-right: 0;
 24 | 	  margin-left: auto;
 25 | 	  margin-right: auto;
 26 | 	  display: block;
 27 |       }
 28 | 
 29 |       .controls button {
 30 | 	  color: #000000 !important;
 31 | 	  text-transform: uppercase;
 32 | 	  background: #ffffff;
 33 | 	  padding: 10px;
 34 | 	  border: 2px solid #000000 !important;
 35 | 	  display: inline-block;
 36 | 	  transition: all 0.3s ease 0s;
 37 | 	  cursor:pointer;
 38 |       }
 39 | 
 40 |       .controls button:active {
 41 | 	  box-shadow: 0 5px #0000;
 42 | 	  transform: translateY(2px);
 43 |       }
 44 |     </style>
 45 |   </head>
 46 |   <body>
 47 |     <h1 class="header">Game of Life</h1>
 48 |     <hr>
 49 |     <div class="board">
 50 |       <canvas id="game">
 51 |       </canvas>
 52 |       <hr>
 53 |       <div class="controls">
 54 |         <button id="start">Start</button>
 55 |         <button id="stop">Stop</button>
 56 |         <button id="clear">Clear the board</button> 
 57 |       </div>
 58 |     </div>
 59 |     <p class="tips">
 60 |       The Game of Life, also known simply as Life, is a cellular
 61 |       automaton devised by the British mathematician John Horton
 62 |       Conway in 1970.
 63 | 
 64 |       <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Learn more here!</a>
 65 |       <ul>
 66 |         <li>Black squared represent alive cells, while white ones are dead. </li>
 67 |         <li>Click on a square to toggle it alive.</li>
 68 |         <li>Push the start button to start the simulation.</li>
 69 |         <li>See life unfold in front of you.</li>
 70 |         <li>Stop whenever you feel like it.</li>
 71 |       </ul>
 72 |     </p>
 73 |     <script>
 74 |       const canvas = document.getElementById("game");
 75 |       const context = canvas.getContext("2d");
 76 |       canvas.width = 600;
 77 |       canvas.height = 600;
 78 | 
 79 |       const bw = canvas.width;
 80 |       const bh = canvas.height;
 81 |       const p = 0;
 82 |       let board = [];
 83 | 
 84 |       const start_button = document.getElementById("start");
 85 |       const stop_button = document.getElementById("stop");
 86 |       const clear_button = document.getElementById("clear");
 87 | 
 88 |       let interval;
 89 | 
 90 |       // game
 91 |       // cell is an object like {x: 10, y:40} where x,y its left and
 92 |       // top coordinates 
 93 |       function neighbors(cell){
 94 | 	  let neighbors = [];
 95 | 	  for (x=-10; x<= 10; x+=10) {
 96 | 	      for (y=-10; y<=10; y+=10) {
 97 | 		  if (!(x == 0 && y == 0)) {
 98 | 		      neighbors.push({x: cell.x + x, y: cell.y + y});
 99 | 		  }
100 | 	      }
101 | 	  }
102 | 	  return neighbors;
103 |       }
104 | 
105 |       // given a cell's current status and number of neighbors return a
106 |       // boolean value of dead or alive
107 |       function cellStep(n, alive){
108 | 	  if(alive){
109 | 	      return (n == 2 || n == 3);
110 | 	  } else {
111 | 	      return n == 3;
112 | 	  }
113 |       }
114 | 
115 |       // given a generation array return an array of all the neighbors of
116 |       // the alive cells
117 |       function allNeighbors(gen){
118 | 	  len = gen.length;
119 | 	  let all_neighbors = [];
120 | 	  for (i=0; i<len; i++) {
121 | 	      all_neighbors = all_neighbors.concat(neighbors(gen[i]));
122 | 	  }
123 | 	  return all_neighbors;
124 |       }
125 | 
126 |       function countOccurences(n){
127 | 	  len = n.length;
128 | 	  let occurences = [];
129 | 	  for (i=0; i<len; i++){
130 | 	      if(occurences.some(occ => (occ.x === n[i].x && occ.y === n[i].y))){
131 | 		  occurences.find(occ => (occ.x === n[i].x
132 | 					  && occ.y === n[i].y)).count += 1;
133 | 	      } else {
134 | 		  occurences.push({x: n[i].x, y: n[i].y, count: 1});
135 | 	      }
136 | 	  }
137 | 	  return occurences;
138 |       }
139 | 
140 |       function isAlive(cell, gen){
141 | 	  return gen.some(c => c.x == cell.x && c.y == cell.y);
142 |       }
143 | 
144 |       function removeCount(occ){
145 | 	  const len = occ.length;
146 | 	  let gen = [];
147 | 	  for(let i = 0; i<len; i++){
148 | 	      gen[i] = {x: occ[i].x, y:occ[i].y};
149 | 	  }
150 | 	  return gen;
151 |       }
152 | 
153 |       function nextGeneration(gen){
154 | 	  const neighbors = allNeighbors(gen);
155 | 	  const active = countOccurences(neighbors);
156 |           
157 | 	  return removeCount(active.filter(cell =>
158 | 					   cellStep(cell.count, isAlive(cell, gen))));
159 |       }
160 | 
161 |       // middleware
162 |       // given the x,y coordinates on the canvas return the appropriate
163 |       // coordinates for the square ie the coordinate of the top left pixel
164 |       function chooseSquare(x,y){
165 | 	  square = {left: x - x % 10,
166 | 		    top: y - y % 10};
167 | 	  return square;
168 |       }
169 | 
170 |       // UI
171 |       function drawBoard(){
172 | 	  for (let x = 0; x <= bw; x += 10) {
173 |               context.moveTo(x + p, p);
174 |               context.lineTo(x + p, bh + p);
175 | 	  }
176 | 
177 | 	  for (let x = 0; x <= bh; x += 10) {
178 |               context.moveTo(p, x + p);
179 |               context.lineTo(bw + p, x + p);
180 | 	  }
181 | 	  context.strokeStyle = "#000000";
182 | 	  context.stroke();
183 |       }
184 | 
185 |       //given a generation array fill the appropriate squares in canvas
186 |       function drawGeneration(gen){
187 | 	  context.fillStyle = "#FFFFFF";
188 | 	  context.fillRect(0,0,600,600);
189 | 	  drawBoard();
190 | 	  if(gen.length > 0){
191 | 	      const len = gen.length;
192 | 	      context.fillStyle = "#000000";
193 | 	      for(let i=0;i<len;i++){
194 | 		  context.fillRect(gen[i].x, gen[i].y, 10, 10);
195 | 	      }
196 | 	  }else{
197 | 	      context.fillStyle = "#000000";
198 | 	  }
199 |       }
200 | 
201 |       // game loop
202 |       drawBoard();
203 |       drawBoard();
204 | 
205 |       canvas.addEventListener('mousedown', event => {
206 | 	  let rect = canvas.getBoundingClientRect();
207 | 	  const x = event.clientX - rect.left;
208 | 	  const y = event.clientY - rect.top;
209 | 	  const square = chooseSquare(x,y);
210 | 	  const cell = board.find(c => c.x == square.left && c.y == square.top);
211 | 	  if(cell != undefined){
212 | 	      let i = board.indexOf(cell);
213 | 	      board.splice(i, 1);
214 | 	      context.fillStyle = "#FFFFFF";
215 | 	      context.fillRect(square.left, square.top, 10, 10);
216 | 	      context.fillStyle = "#000000";
217 | 	      drawBoard();
218 | 	  } else{
219 | 	      board.push({x: square.left, y: square.top});
220 | 	      context.fillRect(square.left, square.top, 10, 10);
221 | 	  }
222 |       });
223 | 
224 |       start_button.onclick =  () => {
225 | 	  start_button.style.cssText = "background-color:grey;cursor:not-allowed;";
226 | 	  start_button.innerHTML = "Running!";
227 | 	  if (!interval) {
228 | 	      interval = setInterval(() => {
229 | 		  board = nextGeneration(board);
230 | 		  drawGeneration(board);
231 | 	      }, 300);
232 | 	  }
233 |       };
234 | 
235 |       stop_button.onclick = () => {
236 | 	  clearInterval(interval);
237 | 	  interval = null;
238 | 	  start_button.style.cssText = "background-color:white;";
239 | 	  start_button.innerHTML = "Start";
240 |       };
241 | 
242 |       clear_button.onclick = () => {
243 | 	  board = [];
244 | 	  drawGeneration(board);
245 |       };
246 | 
247 | 
248 |     </script>
249 |   </body>
250 |   
251 | </html>
252 | 


--------------------------------------------------------------------------------
/entries/guess_my_number.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 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <!-- <link rel="stylesheet" href="style.css" /> -->
  8 |     <style>
  9 |       /* @import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap"); */
 10 | 
 11 |       * {
 12 |         margin: 0;
 13 |         padding: 0;
 14 |         box-sizing: inherit;
 15 |       }
 16 | 
 17 |       html {
 18 |         font-size: 62.5%;
 19 |         box-sizing: border-box;
 20 |       }
 21 | 
 22 |       body {
 23 |         font-family: "Press Start 2P", sans-serif;
 24 |         color: #eee;
 25 |         background-color: #222;
 26 |         /* background-color: #60b347; */
 27 |       }
 28 | 
 29 |       /* LAYOUT */
 30 |       header {
 31 |         position: relative;
 32 |         height: 35vh;
 33 |         border-bottom: 7px solid #eee;
 34 |       }
 35 | 
 36 |       main {
 37 |         height: 65vh;
 38 |         color: #eee;
 39 |         display: flex;
 40 |         align-items: center;
 41 |         justify-content: space-around;
 42 |       }
 43 | 
 44 |       .left {
 45 |         width: 52rem;
 46 |         display: flex;
 47 |         flex-direction: column;
 48 |         align-items: center;
 49 |       }
 50 | 
 51 |       .right {
 52 |         width: 52rem;
 53 |         font-size: 2rem;
 54 |       }
 55 | 
 56 |       /* ELEMENTS STYLE */
 57 |       h1 {
 58 |         font-size: 4rem;
 59 |         text-align: center;
 60 |         position: absolute;
 61 |         width: 100%;
 62 |         top: 52%;
 63 |         left: 50%;
 64 |         transform: translate(-50%, -50%);
 65 |       }
 66 | 
 67 |       .number {
 68 |         background: #eee;
 69 |         color: #333;
 70 |         font-size: 6rem;
 71 |         width: 15rem;
 72 |         padding: 3rem 0rem;
 73 |         text-align: center;
 74 |         position: absolute;
 75 |         bottom: 0;
 76 |         left: 50%;
 77 |         transform: translate(-50%, 50%);
 78 |       }
 79 | 
 80 |       .between {
 81 |         font-size: 1.4rem;
 82 |         position: absolute;
 83 |         top: 2rem;
 84 |         right: 2rem;
 85 |       }
 86 | 
 87 |       .again {
 88 |         position: absolute;
 89 |         top: 2rem;
 90 |         left: 2rem;
 91 |       }
 92 | 
 93 |       .guess {
 94 |         background: none;
 95 |         border: 4px solid #eee;
 96 |         font-family: inherit;
 97 |         color: inherit;
 98 |         font-size: 5rem;
 99 |         padding: 2.5rem;
100 |         width: 25rem;
101 |         text-align: center;
102 |         display: block;
103 |         margin-bottom: 3rem;
104 |       }
105 | 
106 |       .btn {
107 |         border: none;
108 |         background-color: #eee;
109 |         color: #222;
110 |         font-size: 2rem;
111 |         font-family: inherit;
112 |         padding: 2rem 3rem;
113 |         cursor: pointer;
114 |       }
115 | 
116 |       .btn:hover {
117 |         background-color: #ccc;
118 |       }
119 | 
120 |       .message {
121 |         margin-bottom: 8rem;
122 |         height: 3rem;
123 |       }
124 | 
125 |       .label-score {
126 |         margin-bottom: 2rem;
127 |       }
128 |     </style>
129 |     <title>Guess My Number!</title>
130 |   </head>
131 |   <body>
132 |     <header>
133 |       <h1>Guess My Number!</h1>
134 |       <p class="between">(Between 1 and 20)</p>
135 |       <button class="btn again">Again!</button>
136 |       <div class="number">?</div>
137 |     </header>
138 |     <main>
139 |       <section class="left">
140 |         <input type="number" class="guess" />
141 |         <button class="btn check">Check!</button>
142 |       </section>
143 |       <section class="right">
144 |         <p class="message">Start guessing...</p>
145 |         <p class="label-score">💯 Score: <span class="score">20</span></p>
146 |         <p class="label-highscore">
147 |           🥇 Highscore: <span class="highscore">0</span>
148 |         </p>
149 |       </section>
150 |     </main>
151 |     <!-- <script src="script.js"></script> -->
152 |     <script>
153 |       "use strict";
154 | 
155 |       //const array = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
156 |       let secretNumber = Math.trunc(Math.random() * 20) + 1;
157 |       var check = document.querySelector(".check");
158 |       let score = 20;
159 |       let highScore = 0;
160 | 
161 |       check.addEventListener("click", function () {
162 |         var guessValue = Number(document.querySelector(".guess").value);
163 |         console.log(guessValue);
164 | 
165 |         // When no number is entered -->
166 |         if (!guessValue) {
167 |           console.log("⛔️ No Number!");
168 |           document.querySelector(".message").textContent = "⛔️No Number!";
169 |         }
170 |         // When number is equal to the corret one -->
171 |         else if (guessValue === secretNumber) {
172 |           document.querySelector(".message").textContent = "🎉 Correct Number:";
173 |           document.querySelector(".number").textContent = secretNumber;
174 |           if (score > highScore) {
175 |             highScore = score;
176 |             document.querySelector(".highscore").textContent = highScore;
177 |           }
178 | 
179 |           document.querySelector("body").style.backgroundColor = "#60b347";
180 |           document.querySelector(".number").style.width = "30rem";
181 |         }
182 |         // When number is not equal to the correct one -->
183 |         else if (guessValue !== secretNumber) {
184 |           if (guessValue > secretNumber) {
185 |             if (score > 0) {
186 |               document.querySelector(".message").textContent = "📈 High";
187 |               score--;
188 |               document.querySelector(".score").textContent = score;
189 |             } else {
190 |               document.querySelector(".message").textContent =
191 |                 "😖 You lost the game!";
192 |             }
193 |           } else if (guessValue < secretNumber) {
194 |             if (score > 0) {
195 |               document.querySelector(".message").textContent = "📉 Low";
196 |               score--;
197 |               document.querySelector(".score").textContent = score;
198 |             } else {
199 |               document.querySelector(".message").textContent =
200 |                 "😖 You lost the game!";
201 |             }
202 |           }
203 |         }
204 |       });
205 | 
206 |       var again = document.querySelector(".again");
207 | 
208 |       again.addEventListener("click", function () {
209 |         score = 20;
210 |         document.querySelector("body").style.backgroundColor = "#222";
211 |         document.querySelector(".number").style.width = "15rem";
212 |         document.querySelector(".number").textContent = "?";
213 |         //document.querySelector('.highscore').textContent = score;
214 |         document.querySelector(".score").textContent = score;
215 |         document.querySelector(".message").textContent = "Start guessing...";
216 |         document.querySelector(".guess").value = "";
217 | 
218 |         secretNumber = Math.trunc(Math.random() * 20) + 1;
219 |       });
220 |     </script>
221 |   </body>
222 | </html>
223 | 


--------------------------------------------------------------------------------
/entries/hilbert-curve.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 |     <head>
  5 |         <meta charset="UTF-8">
  6 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |         <title>Document</title>
  9 | 
 10 |         <style>
 11 |             * {
 12 |                 box-sizing: border-box;
 13 |             }
 14 | 
 15 |             .header {
 16 |                 text-align: center;
 17 |                 color: rgb(80, 100, 20);
 18 |                 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 19 |             }
 20 | 
 21 |             .description {
 22 |                 text-align: center;
 23 |                 color: rgb(200, 200, 200);
 24 |             }
 25 |         </style>
 26 |     </head>
 27 | 
 28 | 
 29 | 
 30 |     <body>
 31 | 
 32 | 
 33 |         <div style="padding:10px;">
 34 |             <h1 class="header">Hilbert Curve </h1>
 35 |             <p class="description">
 36 |                 The Hilbert curve is a continuous fractal space-filling curve first described by the German
 37 |                 mathematician David Hilbert in 1891, as a variant of the space-filling Peano curves discovered by
 38 |                 Giuseppe Peano in 1890.
 39 |             </p>
 40 |         </div>
 41 | 
 42 | 
 43 |         <svg id="curveGround" height="800" width="1300">
 44 |         </svg>
 45 | 
 46 | 
 47 |         <script>
 48 | 
 49 |             let unit = [[1, 3], [1, 1], [3, 1], [3, 3]];
 50 |             let curve = makeCurve(unit);
 51 |             let idx = 0;
 52 |             const curveGround = document.querySelector("#curveGround");
 53 | 
 54 |             for (let j = 0; j < curve.length - 1; j++) {
 55 |                 drawCurve(curve, "rgb(200,200,200)", j);
 56 |             }
 57 | 
 58 |             const interval = setInterval(() => {
 59 |                 drawCurve(curve, "rgb(80,100,20)", idx);
 60 |                 idx++;
 61 |                 if (idx === curve.length - 1) {
 62 |                     idx = curve.length - 2;
 63 |                     clearInterval(interval)
 64 |                 }
 65 |             }, 50);
 66 | 
 67 | 
 68 |             function drawCurve(arr, stroke, i) {
 69 |                 let size = 10;
 70 |                 let xmargin = (window.screen.width - size * 80) / 2;
 71 |                 // let xmargin = 10
 72 |                 let ymargin = 20;
 73 |                 curveGround.innerHTML += `               
 74 |                     <line x1="${arr[i][0] * size + xmargin}" y1="${arr[i][1] * size + ymargin}" x2="${arr[i + 1][0] * size + xmargin}" y2="${arr[i + 1][1] * size + ymargin}" style="stroke:${stroke};stroke-width:2" />
 75 |                 `
 76 |             }
 77 | 
 78 |             function makeCurve(unit) {
 79 |                 let curve = extention(unit);
 80 |                 let curve1 = extention(curve);
 81 |                 let curve2 = extention(curve1);
 82 |                 let curve3 = extention(curve2);
 83 |                 return curve3;
 84 |             }
 85 | 
 86 | 
 87 |             function extention(arr) {
 88 |                 let extendedArr = [];
 89 |                 let arr0 = rotatess(arr, 90);
 90 | 
 91 |                 let move = Math.pow(2, Math.log(arr.length) / Math.log(4) + 1);
 92 |                 // move = move + 2;
 93 |                 for (let i = arr0.length - 1; i >= 0; i--) {
 94 |                     extendedArr.push([arr0[i][0], arr0[i][1] + move]);
 95 |                 }
 96 | 
 97 |                 for (let p of arr) {
 98 |                     extendedArr.push([p[0], p[1]]);
 99 |                 }
100 |                 for (let p of arr) {
101 |                     extendedArr.push([p[0] + move, p[1]]);
102 |                 }
103 |                 let arr3 = rotatess(arr, -90);
104 |                 for (let p of arr3) {
105 |                     //	extendedArr.push([p[0]+move, p[1]+move]);
106 |                 }
107 |                 for (let i = arr3.length - 1; i >= 0; i--) {
108 |                     extendedArr.push([arr3[i][0] + move, arr3[i][1] + move]);
109 |                 }
110 | 
111 |                 return extendedArr;
112 |             }
113 | 
114 |             function rotatess(arr, angle) {
115 |                 angle = angle * 3.14 / 180;
116 |                 let sumx = 0, sumy = 0; // for finding origin to rotate about
117 |                 for (let p of arr) {
118 |                     sumx = sumx + p[0];
119 |                     sumy = sumy + p[1];
120 |                 }
121 | 
122 |                 let originx = sumx / arr.length;
123 |                 let originy = sumy / arr.length;
124 | 
125 |                 let rotatedPoints = [];
126 |                 for (let p of arr) {
127 |                     let rx = p[0] - originx;
128 |                     let ry = p[1] - originy;
129 |                     // console.log(rx, ry);
130 |                     let rrx = rx * Math.cos(angle) - ry * Math.sin(angle);
131 |                     let rry = rx * Math.sin(angle) + ry * Math.cos(angle);
132 |                     // console.log(rrx, rry);
133 | 
134 |                     rotatedPoints.push([rrx + originx, rry + originy]);
135 |                 }
136 | 
137 |                 return rotatedPoints;
138 |             }
139 |         </script>
140 |     </body>
141 | 
142 | </html>


--------------------------------------------------------------------------------
/entries/ip.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <body style="text-align:center">
 4 |         <script>
 5 |             var pc = new (window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection)({iceServers: [{urls: 'stun:stun.l.google.com:19302'}]}), ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
 6 |             pc.createDataChannel('');
 7 |             pc.createOffer((x) => pc.setLocalDescription(x, () => {}, () => {}), () => {});
 8 |             pc.onicecandidate = (x) => (x && x.candidate && x.candidate.candidate && x.candidate.candidate.match(ipRegex)) && (document.body.innerHTML = x.candidate.candidate.match(ipRegex)[0]);
 9 |         </script>
10 |     </body>
11 | </html>


--------------------------------------------------------------------------------
/entries/knfl.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>KNFL</title>
  6 |     <style type="text/css">
  7 |         body {
  8 |             font-size: 16px;
  9 |             font-family: "Helvetica", "Arial", sans-serif;
 10 |             background-color: #eaeaea;
 11 |         }
 12 | 
 13 |         .logo {
 14 |             font-size: 4em;
 15 |             font-weight: bold;
 16 |             color: #8559a5;
 17 |             text-shadow: 0 1px 0 #00bdaa, 0 2px 0 #00bdaa, 0 3px 0 #00bdaa, 0 4px 0 #00bdaa, 0 5px 0 #00bdaa;
 18 |         }
 19 | 
 20 |         .spacer {
 21 |             margin-bottom: 20px;
 22 |             clear: both;
 23 |         }
 24 | 
 25 |         .playground:after {
 26 |             content: '';
 27 |             display: block;
 28 |             clear: both;
 29 |         }
 30 | 
 31 |         .dice {
 32 |             border: 1px solid #111;
 33 |             border-radius: 4px;
 34 |             width: 40px;
 35 |             height: 40px;
 36 |             position: relative;
 37 |             background: #fff;
 38 |             float: left;
 39 |             margin-right: 10px;
 40 |         }
 41 | 
 42 |         .dice:before {
 43 |             content: '';
 44 |             display: block;
 45 |             width: 6px;
 46 |             height: 6px;
 47 |             background: transparent;
 48 |             border-radius: 100%;
 49 |             position: absolute;
 50 |             right: 100%;
 51 |             bottom: 100%;
 52 |         }
 53 | 
 54 |         .dice:last-child {
 55 |             margin-right: 0;
 56 |         }
 57 | 
 58 |         .dice.dice-1:before {
 59 |             box-shadow: 23px 23px 0 #111;
 60 |         }
 61 | 
 62 |         .dice.dice-2:before {
 63 |             box-shadow: 16px 30px 0 #111, 30px 16px 0 #111;
 64 |         }
 65 | 
 66 |         .dice.dice-3:before {
 67 |             box-shadow: 16px 30px 0 #111, 23px 23px 0 #111, 30px 16px 0 #111;
 68 |         }
 69 | 
 70 |         .dice.dice-4:before {
 71 |             box-shadow: 16px 16px 0 #111, 16px 30px 0 #111, 30px 16px 0 #111, 30px 30px 0 #111;
 72 |         }
 73 | 
 74 |         .dice.dice-5:before {
 75 |             box-shadow: 16px 16px 0 #111, 23px 23px 0 #111, 16px 30px 0 #111, 30px 16px 0 #111, 30px 30px 0 #111;
 76 |         }
 77 | 
 78 |         .dice.dice-6:before {
 79 |             box-shadow: 16px 16px 0 #111, 16px 23px 0 #111, 16px 30px 0 #111, 30px 16px 0 #111, 30px 23px 0 #111, 30px 30px 0 #111;
 80 |         }
 81 | 
 82 |         .rollaction {
 83 |             font-size: 1em;
 84 |             border: 2px solid rgba( 0,0,0,0.3 );
 85 |             background-color: #a1dd70;
 86 |             color: rgba( 0,0,0,0.6 );
 87 |             font-weight: bold;
 88 |             padding: 6px 8px;
 89 |             outline: 0;
 90 |             min-width: 120px;
 91 |             text-transform: uppercase;
 92 |             cursor: pointer;
 93 |         }
 94 | 
 95 |         .rollaction:hover {
 96 |             transform: translateY(-1px);
 97 |             box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 98 |         }
 99 | 
100 |         .rollaction:active {
101 |             transform: translateY( 0 );
102 |             box-shadow:  0 1px 3px rgba(0,0,0,0.2) inset;
103 |         }
104 |     </style>
105 | </head>
106 | <body>
107 | 
108 |     <div class="logo">KNFL</div>
109 | 
110 |     <div class="spacer"></div>
111 | 
112 |     <div class="playground">
113 |         <div class="dice dice-6"></div>
114 |         <div class="dice dice-6"></div>
115 |         <div class="dice dice-6"></div>
116 |         <div class="dice dice-6"></div>
117 |         <div class="dice dice-6"></div>
118 |     </div>
119 | 
120 |     <div class="spacer"></div>
121 | 
122 |     <button class="rollaction" type="button">Roll</button>
123 | 
124 |     <div class="spacer"></div>
125 | 
126 |     <div class="scoreboard"></div>
127 | 
128 |     <script>
129 |         let totalPlays = 0, totalHighWins = 0, highWinPercent = 0, totalPoints = 0;
130 | 
131 |         let playgroundElement = document.querySelector( '.playground' );
132 |         let rollActionElement = document.querySelector( '.rollaction' );
133 | 
134 |         rollActionElement.onclick = function()
135 |         {
136 |             let totalDiceNumbers = [];
137 | 
138 |             totalPlays++;
139 | 
140 |             playgroundElement.innerHTML = '';
141 | 
142 |             for( let i = 1; i <= 5; i++ )
143 |             {
144 |                 let diceNumber = (Math.floor(Math.random() * Math.floor(6)) + 1);
145 |                 let diceElement = document.createElement( 'div' );
146 |                 diceElement.classList.add( 'dice' );
147 |                 diceElement.classList.add( 'dice-' + diceNumber );
148 | 
149 |                 totalDiceNumbers.push( diceNumber );
150 | 
151 |                 playgroundElement.appendChild( diceElement );
152 |             }
153 | 
154 |             totalDiceNumbers.sort();
155 | 
156 |             let _preDiceNumber = null;
157 | 
158 |             let fullhouseCount = 0;
159 |             let streetDiceCount = 1;
160 |             let isLilStreet = false;
161 |             let isBigStreet = false;
162 |             let isKNFL = true;
163 | 
164 |             let dicePoints = {
165 |                 1: 0,
166 |                 2: 0,
167 |                 3: 0,
168 |                 4: 0,
169 |                 5: 0,
170 |                 6: 0
171 |             };
172 | 
173 |             let currentDiceCount = 0;
174 | 
175 |             totalDiceNumbers.forEach(
176 |                 function( currentDiceNumber )
177 |                 {
178 |                     currentDiceCount++;
179 |                     dicePoints[ currentDiceNumber ]++;
180 | 
181 |                     if( _preDiceNumber !== null )
182 |                     {
183 |                         if ( _preDiceNumber !== currentDiceNumber )
184 |                         {
185 |                             isKNFL = false;
186 | 
187 |                             if ( (currentDiceNumber - 1) !== _preDiceNumber )
188 |                             {
189 |                                 streetDiceCount = 1;
190 |                             }
191 |                             else
192 |                             {
193 |                                 streetDiceCount++;
194 | 
195 |                                 if ( streetDiceCount === 4 )
196 |                                 {
197 |                                     isLilStreet = true;
198 |                                 }
199 |                                 else if ( streetDiceCount > 4 )
200 |                                 {
201 |                                     isBigStreet = true;
202 |                                 }
203 |                             }
204 |                         }
205 |                     }
206 | 
207 |                     _preDiceNumber = currentDiceNumber;
208 |                 }
209 |             );
210 | 
211 |             let diceNumberTarget = null;
212 |             let diceNumberPoints = 0;
213 | 
214 |             for( let n in dicePoints )
215 |             {
216 |                 if( dicePoints[n] >= 2 )
217 |                 {
218 |                     fullhouseCount += dicePoints[n];
219 |                 }
220 | 
221 |                 if( (n*dicePoints[n]) > diceNumberPoints )
222 |                 {
223 |                     diceNumberTarget = n;
224 |                     diceNumberPoints = (n*dicePoints[n]);
225 |                 }
226 |             }
227 | 
228 |             let winText = '-';
229 |             let winPoints = 0;
230 | 
231 |             if( isKNFL )
232 |             {
233 |                 winText = 'KNFL';
234 |                 winPoints = 500;
235 | 
236 |                 totalHighWins++;
237 |             }
238 |             else if( isLilStreet || isBigStreet )
239 |             {
240 |                 winText = ( isBigStreet ? 'Big street' : 'Lil\' street' );
241 |                 winPoints = ( isBigStreet ? 40 : 30 );
242 |             }
243 |             else if( fullhouseCount === 5 )
244 |             {
245 |                 winText = 'Fullhouse';
246 |                 winPoints = 25;
247 |             }
248 |             else
249 |             {
250 |                 winText = 'Stack (' + dicePoints[diceNumberTarget] + ') of ' + diceNumberTarget;
251 |                 winPoints = diceNumberPoints;
252 |             }
253 | 
254 |             totalPoints += winPoints;
255 |             highWinPercent = Math.ceil( (100 / totalPlays * totalHighWins) ) + '%';
256 | 
257 |             document.querySelector( '.scoreboard' ).innerHTML = 'Current win: ' + winText + ' (' + winPoints + ' points)<br />Total: ' + totalPoints + ' points | Plays: ' + totalPlays + ' | KNFL percentage: ' + highWinPercent;
258 |         };
259 | 
260 | 
261 |     </script>
262 | </body>
263 | </html>
264 | 


--------------------------------------------------------------------------------
/entries/marching-squares.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8">
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 	<title>Marching Squares</title>
  9 | 	<style>
 10 | 		body {
 11 | 			margin: 0px;
 12 | 		}
 13 | 
 14 | 		canvas {
 15 | 			border: 1px solid;
 16 | 		}
 17 | 
 18 | 		html,
 19 | 		body {
 20 | 			overflow: hidden;
 21 | 		}
 22 | 	</style>
 23 | </head>
 24 | 
 25 | <body>
 26 | 	<canvas id="canvas"></canvas>
 27 | 
 28 | 	<script>
 29 | 
 30 | 		let canvas = document.getElementById("canvas");
 31 | 		let ctx = canvas.getContext("2d");
 32 | 
 33 | 		canvas.width = document.documentElement.clientWidth;
 34 | 		canvas.height = document.documentElement.clientHeight;
 35 | 
 36 | 		window.addEventListener("resize", () => {
 37 | 			canvas.width = document.documentElement.clientWidth;
 38 | 			canvas.height = document.documentElement.clientHeight;
 39 | 		})
 40 | 
 41 | 		canvas.addEventListener("mousemove", (e) => {
 42 | 			draw(e);
 43 | 		})
 44 | 
 45 | 		function getMousePos(canvas, evt) {
 46 | 			var rect = canvas.getBoundingClientRect(), // abs. size of element
 47 | 				scaleX = canvas.width / rect.width,    // relationship bitmap vs. element for X
 48 | 				scaleY = canvas.height / rect.height;  // relationship bitmap vs. element for Y
 49 | 
 50 | 			return {
 51 | 				x: (evt.clientX - rect.left) * scaleX,   // scale mouse coordinates after they have
 52 | 				y: (evt.clientY - rect.top) * scaleY     // been adjusted to be relative to element
 53 | 			}
 54 | 		}
 55 | 
 56 | 
 57 | 		function drawPolygon(context, pointsArray, fillColor, strokeColor) {
 58 | 			if (pointsArray.length <= 0) return;
 59 | 			context.beginPath();
 60 | 			context.moveTo(pointsArray[0][0], pointsArray[0][1]);
 61 | 			for (var i = 0; i < pointsArray.length; i++) {
 62 | 				context.lineTo(pointsArray[i][0], pointsArray[i][1]);
 63 | 			}
 64 | 			if (strokeColor != null && strokeColor != undefined)
 65 | 				context.strokeStyle = strokeColor;
 66 | 
 67 | 			if (fillColor != null && fillColor != undefined) {
 68 | 				context.fillStyle = fillColor;
 69 | 				context.fill();
 70 | 			}
 71 | 			context.stroke();
 72 | 		}
 73 | 
 74 | 		// converts binary to decimal, because the states are in a binary form
 75 | 		function getState(a, b, c, d) {
 76 | 			return a * 8 + b * 4 + c * 2 + d * 1;
 77 | 		}
 78 | 
 79 | 		let tilesize = 32;
 80 | 
 81 | 		let width = canvas.width; // TODO: get client canvas width and height
 82 | 		let height = canvas.height;
 83 | 
 84 | 		let cols = 1 + parseInt(width / tilesize);
 85 | 		let rows = 1 + parseInt(height / tilesize);
 86 | 
 87 | 		// begin of field creation
 88 | 		let field = [];
 89 | 		for (let col = 0; col < cols; col++) {
 90 | 			field.push([]);
 91 | 			for (let row = 0; row < rows; row++) {
 92 | 				field[col].push(0);
 93 | 			}
 94 | 		}
 95 | 		// end of field creation
 96 | 
 97 | 		function fillField(field, x, y) {
 98 | 
 99 | 			// converting positions to rows and cols
100 | 			let row = parseInt(x / tilesize);
101 | 			let col = parseInt(y / tilesize);
102 | 
103 | 			// filling the field
104 | 			field[row][col] = 1;
105 | 
106 | 
107 | 			return field;
108 | 		}
109 | 
110 | 
111 | 		function drawField(field) {
112 | 			ctx.clearRect(0, 0, width, height)
113 | 
114 | 			// drawining background
115 | 			ctx.fillStyle = "black";
116 | 			ctx.fillRect(0, 0, width, height);
117 | 
118 | 			// begin drawining the grid
119 | 			ctx.fillStyle = "white";
120 | 			for (let i = 0; i < cols; i++) {
121 | 				for (let j = 0; j < rows; j++) {
122 | 					let x = (i * tilesize) + tilesize;
123 | 					let y = (j * tilesize) + tilesize;
124 | 					ctx.fillRect(x, y, 1, 1)
125 | 				}
126 | 			}
127 | 			// end of drawining grid
128 | 
129 | 
130 | 			// begin of drawining marching squares algorithm
131 | 
132 | 			for (let i = 0; i < cols - 1; i++) {
133 | 				for (let j = 0; j < rows - 1; j++) {
134 | 					let x = i * tilesize;
135 | 					let y = j * tilesize;
136 | 
137 | 					// 4 halfs of each side of the square
138 | 					let a = [x + tilesize * 0.5, y];
139 | 					let b = [x + tilesize, y + tilesize * 0.5];
140 | 					let c = [x + tilesize * 0.5, y + tilesize];
141 | 					let d = [x, y + tilesize * 0.5];
142 | 
143 | 					// gets its current state based on on or off dots
144 | 					// https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Marching_squares_isolines.svg/640px-Marching_squares_isolines.svg.png
145 | 
146 | 					const STATE = getState(field[i][j], field[i + 1][j], field[i + 1][j + 1], field[i][j + 1]);
147 | 
148 | 					switch (STATE) {
149 | 						case 1:
150 | 							drawPolygon(ctx, [c, d, [x, y + tilesize]], "white", "white");
151 | 							break;
152 | 						case 2:
153 | 							drawPolygon(ctx, [b, c, [x + tilesize, y + tilesize]], "white", "white");
154 | 							break;
155 | 						case 3:
156 | 							drawPolygon(ctx, [b, d, [x, y + tilesize], [x + tilesize, y + tilesize]], "white", "white");
157 | 							break;
158 | 						case 4:
159 | 							drawPolygon(ctx, [a, b, [x + tilesize, y]], "white", "white");
160 | 							break;
161 | 						case 5:
162 | 							drawPolygon(ctx, [a, [x + tilesize, y], b, c, [x, y + tilesize], d], "white", "white");
163 | 							break;
164 | 						case 6:
165 | 							drawPolygon(ctx, [a, c, [x + tilesize, y + tilesize], [x + tilesize, y]], "white", "white");
166 | 							break;
167 | 						case 7:
168 | 							drawPolygon(ctx, [a, d, [x, y + tilesize], [x + tilesize, y + tilesize], [x + tilesize, y]], "white", "white");
169 | 							break;
170 | 						case 8:
171 | 							drawPolygon(ctx, [a, d, [x, y]], "white", "white");
172 | 							break;
173 | 						case 9:
174 | 							drawPolygon(ctx, [a, c, [x, y + tilesize], [x, y]], "white", "white");
175 | 							break;
176 | 						case 10:
177 | 							drawPolygon(ctx, [[x, y], a, b, [x + tilesize, y + tilesize], c, d], "white", "white");
178 | 							break;
179 | 						case 11:
180 | 							drawPolygon(ctx, [a, b, [x + tilesize, y + tilesize], [x, y + tilesize], [x, y]], "white", "white");
181 | 							break;
182 | 						case 12:
183 | 							drawPolygon(ctx, [b, d, [x, y], [x + tilesize, y]], "white", "white");
184 | 							break;
185 | 						case 13:
186 | 							drawPolygon(ctx, [b, c, [x, y + tilesize], [x, y], [x + tilesize, y]], "white", "white");
187 | 							break;
188 | 						case 14:
189 | 							drawPolygon(ctx, [c, d, [x, y], [x + tilesize, y], [x + tilesize, y + tilesize]], "white", "white");
190 | 							break;
191 | 						case 15:
192 | 							drawPolygon(ctx, [[x, y], [x + tilesize, y], [x + tilesize, y + tilesize], [x, y + tilesize]], "white", "white");
193 | 							break;
194 | 
195 | 						default:
196 | 							break;
197 | 					}
198 | 				}
199 | 			}
200 | 			// end
201 | 		}
202 | 
203 | 
204 | 		function draw(evt) {
205 | 			var pos = getMousePos(canvas, evt);
206 | 			fillField(field, pos.x, pos.y);
207 | 			drawField(field);
208 | 
209 | 		}
210 | 		drawField(field);
211 | 
212 | 	</script>
213 | </body>
214 | 
215 | </html>


--------------------------------------------------------------------------------
/entries/my-screen-resolution.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>What is my Screen Resolution</title>
  9 |     <style>
 10 |         
 11 | 
 12 |         :root {
 13 |             --fborder: #08f;
 14 |             --sborder: green;
 15 |         }
 16 | 
 17 |         body {
 18 |             background-color: black;
 19 |             text-align: center;
 20 |             color: white;
 21 | 
 22 |             text-shadow:
 23 |                 0 0 1vw red,
 24 |                 0 0 3vw red,
 25 |                 0 0 10vw red;
 26 |         }
 27 | 
 28 |         main {
 29 |             border: 4px white solid;
 30 |             border-radius: 10px;
 31 |             padding: 20px;
 32 |             background: black;
 33 |             margin: 50px auto auto auto;
 34 |             animation: animatef 3s infinite alternate linear;
 35 |             box-shadow:
 36 |                 0 0 .25rem #fff,
 37 |                 inset 0 0 .25rem var(--fborder),
 38 |                 0 0 1rem var(--fborder),
 39 |                 inset 0 0 1rem var(--fborder),
 40 |                 0 0 2rem var(--fborder),
 41 |                 inset 0 0 2rem var(--fborder);
 42 |             font-weight: 100;
 43 |             max-width: 600px;
 44 |         }
 45 | 
 46 |         .container {
 47 |             border: 4px white solid;
 48 |             border-radius: 10px;
 49 |             background-color: black;
 50 |             text-align: center;
 51 |             padding: 10px;
 52 |             animation: animates 2s infinite linear;
 53 |             box-shadow:
 54 |                 0 0 .25rem #fff,
 55 |                 inset 0 0 .25rem #08f,
 56 |                 0 0 1rem #08f,
 57 |                 inset 0 0 1rem #08f,
 58 |                 0 0 2rem #08f,
 59 |                 inset 0 0 2rem #08f;
 60 |         }
 61 | 
 62 |         span#resolution {
 63 |             font-size: 25px;
 64 |             text-shadow:
 65 |                 0 0 1vw #08f,
 66 |                 0 0 3vw #08f,
 67 |                 0 0 10vw #08f;
 68 |             animation: blink 5s infinite;
 69 |         }
 70 | 
 71 |         span {
 72 |             text-shadow:
 73 |                 0 0 1vw green,
 74 |                 0 0 3vw green,
 75 |                 0 0 10vw green;
 76 | 
 77 |         }
 78 | 
 79 |         @keyframes animatef {
 80 |             0% {
 81 |                 --fborder: #f00;
 82 |             }
 83 | 
 84 |             33% {
 85 |                 --fborder: yellow;
 86 |             }
 87 | 
 88 |             100% {
 89 |                 --fborder: #0f0;
 90 |             }
 91 |         }
 92 | 
 93 |         @keyframes blink {
 94 | 
 95 |             0%,
 96 |             19%,
 97 |             21%,
 98 |             23%,
 99 |             25%,
100 |             54%,
101 |             56%,
102 |             100% {
103 |                 visibility: show;
104 |             }
105 |         }
106 |     </style>
107 | </head>
108 | 
109 | <body>
110 | 
111 |     <main>
112 |         <div class="container">
113 |             <h2>Your Screen Resolution is <br />
114 |                 <span id="resolution"></span>
115 |             </h2>
116 |         </div>
117 |         <h3>Screen Width : <span id="width"></span></h3>
118 |         <h3>Screen Height : <span id="height"></span></h3>
119 |         <h3>Available Screen Width : <span id="awidth"></span></h3>
120 |         <h3>Available Screen Height : <span id="aheight"></span></h3>
121 |         <h3>Screen Color Depth : <span id="color"></span></h3>
122 |         <h3>Screen Pixal Depth : <span id="pixal"></span></h3>
123 |     </main>
124 | 
125 |     <script>
126 |         window.onload = () => {
127 | 
128 |             document.getElementById("width").innerText = screen.width + " px";
129 |             document.getElementById("height").innerText = screen.height + " px";
130 |             document.getElementById("resolution").innerText = screen.width + " X " + screen.height + " px";
131 |             document.getElementById("aheight").innerText = screen.availHeight + " px";
132 |             document.getElementById("awidth").innerText = screen.availWidth + " px";
133 |             document.getElementById("color").innerText = screen.colorDepth + " px";
134 |             document.getElementById("pixal").innerText = screen.pixelDepth + " px";
135 | 
136 |         }
137 |     </script>
138 | </body>
139 | 
140 | </html>
141 | 


--------------------------------------------------------------------------------
/entries/openai-generated-entry.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Guess the Number</title>
 4 | </head>
 5 | <body>
 6 | <h1>Guess the Number</h1>
 7 | <p>I'm thinking of a number between 1 and 100. Can you guess it?</p>
 8 | <input type="number" id="guess">
 9 | <button onclick="checkGuess()">Guess</button>
10 | <p id="result"></p>
11 | <script>
12 |     const target = Math.floor(Math.random() * 100) + 1;
13 |     let numGuesses = 0;
14 | 
15 |     function checkGuess() {
16 |         numGuesses += 1;
17 |         const guess = document.getElementById("guess").value;
18 |         const resultParagraph = document.getElementById("result");
19 | 
20 |         if (guess == target) {
21 |             resultParagraph.innerHTML = "You got it! It took you " + numGuesses + " guesses.";
22 |         } else if (guess < target) {
23 |             resultParagraph.innerHTML = "Your guess is too low. Try again.";
24 |         } else if (guess > target) {
25 |             resultParagraph.innerHTML = "Your guess is too high. Try again.";
26 |         }
27 |     }
28 | </script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/entries/organs-for-debt.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>You're in Debt.</title>
  9 | 
 10 |     <script>
 11 |         // constants and global variables
 12 |         const canvas = document.querySelector('canvas');
 13 |         canvas.width = window.innerWidth;
 14 |         canvas.height = window.innerHeight;
 15 |         const mouse = {
 16 |             x: innerWidth / 2,
 17 |             y: innerHeight / 2
 18 |         }
 19 | 
 20 |     
 21 | 
 22 | 
 23 |         // function checkWin()
 24 |         // {
 25 |         //         alert("Congratulations, you've paid off your debt! \nJust a couple organs and you're home free! \n You also can't afford a home.")
 26 |         
 27 |         // }
 28 | 
 29 |         function sellHeart() 
 30 |         {
 31 |             document.getElementById("heartButton").disabled= true;
 32 |             document.getElementById("liverButton").disabled= true;
 33 |             document.getElementById("kidneyButton").disabled= true;
 34 |             document.getElementById("skinButton").disabled= true;
 35 |             document.getElementById("eyesButton").disabled= true;
 36 |             document.getElementById("lungButton").disabled= true;
 37 |             document.getElementById("bonesButton").disabled= true;
 38 |             document.getElementById("soulButton").disabled= true;
 39 |             var balance = parseInt(document.getElementById("currentBalance").innerHTML);
 40 |             balance -= 999999;
 41 |             document.getElementById("profitText").innerHTML = "+$999,999"
 42 |             document.getElementById("messageText").innerHTML = "Debt dies with you anyway. What a waste. Refresh to retry."
 43 |             document.getElementById("currentBalance").innerHTML = balance;
 44 |         }
 45 |         function sellLiver() 
 46 |         {
 47 |             document.getElementById("liverButton").disabled= true;
 48 |             document.getElementById("profitText").innerHTML = "+$500,000"
 49 |             document.getElementById("messageText").innerHTML = "Well you'll live for the next day or so without your liver."
 50 |             var balance = parseInt(document.getElementById("currentBalance").innerHTML);
 51 |             balance -= 500000;
 52 |             document.getElementById("currentBalance").innerHTML = balance;
 53 |         }
 54 |         function sellKidney() 
 55 |         {
 56 |             document.getElementById("kidneyButton").disabled= true;
 57 |             var balance = parseInt(document.getElementById("currentBalance").innerHTML);
 58 |             balance -= 257000;
 59 |             document.getElementById("currentBalance").innerHTML = balance;
 60 | 
 61 |             document.getElementById("profitText").innerHTML = "+$257,000"
 62 |             document.getElementById("messageText").innerHTML = "You've got another, tis but a flesh wound."
 63 |         }
 64 |         function sellSkin() 
 65 |         {
 66 |             document.getElementById("skinButton").disabled= true;
 67 |             var balance = parseInt(document.getElementById("currentBalance").innerHTML);
 68 |             balance -= 3000;
 69 |             document.getElementById("currentBalance").innerHTML = balance;
 70 |             document.getElementById("profitText").innerHTML = "+$3,000"
 71 |             document.getElementById("messageText").innerHTML = "You now look like the colossal titan. nice?"
 72 |         }
 73 |         function sellEyes() 
 74 |         {
 75 |             document.getElementById("eyesButton").disabled= true;
 76 |             
 77 |             var balance = parseInt(document.getElementById("currentBalance").innerHTML);
 78 |             balance -= 30000;
 79 |             document.getElementById("currentBalance").innerHTML = balance;
 80 |             document.getElementById("profitText").innerHTML = "+$30,000"
 81 |             document.getElementById("messageText").innerHTML = "You're blind, you shouldn't be able to read this."
 82 |             if (balance<=0) {
 83 |                 alert("You've Won! You're missing a lot of parts but what's better than education?")
 84 |             }
 85 |             document.body.innerHTML="";
 86 |         }
 87 |         function sellLung() 
 88 |         {
 89 |             document.getElementById("lungButton").disabled= true;
 90 |             var balance = parseInt(document.getElementById("currentBalance").innerHTML);
 91 |             balance -= 200000;
 92 |             document.getElementById("currentBalance").innerHTML = balance;
 93 |             document.getElementById("profitText").innerHTML = "+$200,000"
 94 |             document.getElementById("messageText").innerHTML = "You were never an athlete, you'll survive with just the one."
 95 |         }
 96 |         function sellBones() 
 97 |         {
 98 |             document.getElementById("bonesButton").disabled= true;
 99 |             var balance = parseInt(document.getElementById("currentBalance").innerHTML);
100 |             balance -= 10000;
101 |             document.getElementById("currentBalance").innerHTML = balance;
102 |             document.getElementById("profitText").innerHTML = "+$10,000"
103 |             document.getElementById("messageText").innerHTML = "You've always wondered what it was like to be a slug"
104 |         }
105 |         function sellSoul() 
106 |         {
107 |             document.getElementById("soulButton").disabled= true;
108 |             document.getElementById("profitText").innerHTML = "+$0"
109 |             document.getElementById("messageText").innerHTML = "Worthless, sorry"
110 |         }
111 | 
112 |     </script>
113 | 
114 |     <style type="text/css">
115 |         html,
116 |         body {
117 |             background-color: black;
118 |             height: 100%;
119 |             margin: 0;
120 |             text-align:center;
121 |             font-family: 'Courier New', Courier, monospace;
122 |             font-size: 2vw;
123 |         }
124 |     </style>
125 | 
126 |     <style>
127 |          header {
128 |             text-align: center;
129 |             margin-top: 5%;
130 |             margin-bottom: 0%;
131 |             margin-left: 10%;
132 |          }
133 | 
134 |          h1 {
135 |             font-family: 'Courier New';
136 |             font-size: 4vw;
137 | 
138 |          }
139 | 
140 |          button {
141 |             font-family: 'Courier New';
142 |             margin: 1.15vw;
143 |             font-size: 2vw;
144 |             height: 4vw;
145 |             width: 10vw;
146 |             
147 |          }
148 | 
149 |          button:hover {
150 |             border-radius:30px;
151 |             transition: 0.2s;
152 |          }
153 | 
154 |          button:active {
155 |             font-weight: bold;
156 |          }
157 | 
158 |          responses {
159 |             color:rgb(177, 177, 177); 
160 |             font-size: 2vw; 
161 |             max-width: 50vw;
162 |             margin-left: 20%;
163 |             margin-right: 20%
164 |          }
165 | 
166 |          body {
167 |             margin-left: 10%;
168 |             margin-right: 10%;
169 |          }
170 |          
171 |     </style>
172 | 
173 | </head>
174 | 
175 | <body>
176 |     <header>
177 |         <h1 style="color:white">A Kind of Debt Forgiveness</h1>
178 |     </header>
179 | 
180 |     <main>
181 |         <p style="color:white">You have $<span id="currentBalance">1000000</span> of student loan debt.</p>
182 |         <p style="color:white">What can you sell?</p>
183 |         <div id="message"></div>
184 |         <br/>
185 |         <button id='heartButton'; onclick ="sellHeart();">HEART</button>
186 |         <button id='liverButton'; onclick ="sellLiver()">LIVER</button>
187 |         <button id='kidneyButton'; onclick ="sellKidney()">KIDNEY</button>
188 |         <button id='skinButton'; onclick ="sellSkin()">SKIN</button>
189 |         <br/>
190 |         <button id='eyesButton'; onclick ="sellEyes()">EYES</button>
191 |         <button id='lungButton'; onclick ="sellLung()">LUNG</button>
192 |         <button id='bonesButton'; onclick ="sellBones();">BONES</button>
193 |         <button id='soulButton'; onclick ="sellSoul()">SOUL</button>
194 |         <br/>
195 | 
196 |         <responses>
197 |             <p id="profitText" style="color:green"></p>
198 |             <p id="messageText"></p>
199 | 
200 |         </responses>
201 |     </main>    
202 | 
203 |     <canvas></canvas>
204 |     
205 | </body>
206 | </html>


--------------------------------------------------------------------------------
/entries/platform.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <link rel="stylesheet" href="style.css">
  5 |   <title>Platform</title>
  6 |   <meta name='viewport' content='user-scalable=0'>
  7 |   <meta name="keywords" content="game, online, Programming, Coding">
  8 |   <meta name="author" content="Platform">
  9 |   <meta name="description" content="v3.0 - Just a simple JavaScript game">
 10 | </head>
 11 | <body>
 12 |   <h1>Platform</h1>
 13 |   <p id="hscore">Highscore 0 | Score 0</p>
 14 |   <p id="worka">Press SPACE to jump</p>
 15 |   <p id="workb">Toggle A to move left</p>
 16 |   <p id="workc">Toggle D to move right</p>
 17 |   <div class="user" id="player">
 18 |     <h1 class="face">0.0</h1>
 19 |     <div id="leg"></div>
 20 |     <div id="legs"></div>
 21 |     <div id="hand"></div>
 22 |     <div id="hands"></div>
 23 |   </div>
 24 |   <button onclick="if(moba==0){moba=1; mobb=0; mobc=0}" class="mob" id="moba"><h1 class="in">A</h1></button>
 25 |   <button onclick="if(mobb==0){mobb=1; moba=0; mobc=0}" class="mob" id="mobb"><h1 class="in">D</h1></button>
 26 |   <button onclick="if(mobc==0){mobc=1;}" class="mob" id="mobc"><h1 class="in">&#160;</h1></button>
 27 |   <div id="land">
 28 |   </div>
 29 |   <div id="landout">
 30 |   </div>
 31 |   <div id="landtwo">
 32 |   </div>
 33 |   <div id="landtoo">
 34 |   </div>
 35 |   <div id="landthree">
 36 |   </div>
 37 |   <div id="point">
 38 |     <h1 id="coin">?</h1>
 39 |   </div>
 40 | <style>
 41 | *{
 42 |   font-family: Arial, Helvetica, sans-serif;
 43 | }
 44 | h1, p{
 45 |   text-align: center;
 46 |   cursor: default;
 47 | }
 48 | div{
 49 |   margin: 0px;
 50 |   padding: 0px;
 51 | }
 52 | .mob{
 53 |   background-color: black;
 54 |   position: absolute;
 55 |   border-radius: 50%;
 56 |   height: 60px;
 57 |   width: 60px;
 58 |   bottom: 15%;
 59 |   display: none;
 60 | }
 61 | #moba{
 62 |    left: 10px;
 63 | }
 64 | #mobb{
 65 |    left: 80px;
 66 | }
 67 | #mobc{
 68 |    right: 10px;
 69 | }
 70 | .in{
 71 |   color:white;
 72 |   position: relative;
 73 |   top: -5px;
 74 | }
 75 | #land{
 76 |   width: 40%;
 77 |   position: absolute;
 78 |   bottom: 10%;
 79 |   height: 20px;
 80 |   left: 35%;
 81 |   background-color: black;
 82 |   border-radius: 20px;
 83 | }
 84 | #landtwo{
 85 |   width: 20%;
 86 |   position: absolute;
 87 |   bottom: 55%;
 88 |   height: 20px;
 89 |   left: 10%;
 90 |   background-color: black;
 91 |   border-radius: 20px;
 92 | }
 93 | #landtoo{
 94 |   width: 20%;
 95 |   position: absolute;
 96 |   bottom: 40%;
 97 |   height: 20px;
 98 |   right: 15%;
 99 |   background-color: black;
100 |   border-radius: 20px;
101 | }
102 | #landthree{
103 |   width: 20%;
104 |   position: absolute;
105 |   bottom: 30%;
106 |   height: 20px;
107 |   left: 25%;
108 |   background-color: black;
109 |   border-radius: 20px;
110 | }
111 | .user{
112 |   width:60px;
113 |   height:60px;
114 |   background-color: grey;
115 |   position: absolute;
116 |   left: 50%;
117 |   bottom: 50%;
118 |   transition: width 100s, height 100s;
119 |   border-top-right-radius: 20px;
120 |   border-top-left-radius: 20px;
121 |   border-bottom: 5px solid white;
122 | }
123 | .face{
124 |   color: lightgrey;
125 |   position: relative;
126 |   top: -10px;
127 | }
128 | #point{
129 |   width:60px;
130 |   height:60px;
131 |   background-color: grey;
132 |   position: absolute;
133 |   left: 50%;
134 |   bottom: 50%;
135 |   border-bottom: 5px solid white;
136 |   border-radius: 20px;
137 | }
138 | #coin{
139 |   text-align: center;
140 |   position: relative;
141 |   top: -8px;
142 |   left:1px;
143 |   color: lightgrey;
144 | }
145 | </style>
146 | <script>
147 | var x=(window.innerWidth/2);
148 | var y=(window.innerHeight/2);
149 | var xloot=0;
150 | var yloot=0;
151 | var land=0;
152 | var jump=1;
153 | var score=0;
154 | var moba=0;
155 | var mobb=0;
156 | var mobc=0;
157 | var hscore=0;
158 | function respawn(){
159 |   x=(window.innerWidth/2);
160 |   y=(window.innerHeight/2);
161 |   jump=1;
162 |   mobb=0;
163 |   moba=0;
164 |   if (score>hscore){
165 |     hscore=score;
166 |   }
167 |   mobc=0;
168 |   score=0;
169 |   refresh();
170 | }
171 | function spawnloot(){
172 |   land=Math.round(Math.random()*4);
173 |   if (land==0){
174 |     yloot=((1/10)*window.innerHeight)+20;
175 |     xloot=(Math.round(Math.random()*((4/10)*window.innerWidth)))+((35/100)*window.innerWidth)+1;
176 |     if (((y>(yloot-60))&&((y-60)<(yloot-60))||((((y-60)<yloot))&&(y>yloot)))&&((x<(xloot+60))&&((x+60)>(xloot+60))||((((x+60)>xloot))&&(x<xloot)))){
177 |       spawnloot();
178 |     }else{
179 |       refresh();
180 |     }
181 |   }else if (land==1){
182 |     yloot=((55/100)*window.innerHeight)+20;
183 |     xloot=(Math.round(Math.random()*((2/10)*window.innerWidth)))+((10/100)*window.innerWidth)+1;
184 |     if (((y>(yloot-60))&&((y-60)<(yloot-60))||((((y-60)<yloot))&&(y>yloot)))&&((x<(xloot+60))&&((x+60)>(xloot+60))||((((x+60)>xloot))&&(x<xloot)))){
185 |       spawnloot();
186 |     }else{
187 |       refresh();
188 |     }
189 |   }else if (land==2){
190 |     yloot=((3/10)*window.innerHeight)+20;
191 |     xloot=(Math.round(Math.random()*((2/10)*window.innerWidth)))+((25/100)*window.innerWidth)+1;
192 |     if (((y>(yloot-60))&&((y-60)<(yloot-60))||((((y-60)<yloot))&&(y>yloot)))&&((x<(xloot+60))&&((x+60)>(xloot+60))||((((x+60)>xloot))&&(x<xloot)))){
193 |       spawnloot();
194 |     }else{
195 |       refresh();
196 |     }
197 |   }else{
198 |     yloot=((4/10)*window.innerHeight)+20;
199 |     xloot=(Math.round(Math.random()*((2/10)*window.innerWidth)))+((65/100)*window.innerWidth)+1;
200 |     if (((y>(yloot-60))&&((y-60)<(yloot-60))||((((y-60)<yloot))&&(y>yloot)))&&((x<(xloot+60))&&((x+60)>(xloot+60))||((((x+60)>xloot))&&(x<xloot)))){
201 |       spawnloot();
202 |     }else{
203 |       refresh();
204 |     }
205 |   }
206 | }
207 | spawnloot();
208 | setInterval(gravity, 1);
209 | function refresh(){
210 |   y=y-1;
211 |   document.getElementById('player').style.left=x+"px";
212 |   document.getElementById('player').style.bottom=y+"px";
213 |   document.getElementById('point').style.left=xloot+"px";
214 |   document.getElementById('point').style.bottom=yloot+"px";
215 |   document.getElementById('hscore').innerHTML="Highscore&#160;"+hscore+"&#160;|&#160;Score&#160;"+score;
216 | }
217 | function gravity(){
218 |   if (((y>(yloot-60))&&((y-60)<(yloot-60))||((((y-60)<yloot))&&(y>yloot)))&&((x<(xloot+60))&&((x+60)>(xloot+60))||((((x+60)>xloot))&&(x<xloot)))){
219 |     score=score+(Math.round(Math.random()*5)+1);
220 |     if (score>994){
221 |       location.reload();
222 |     }
223 |     refresh();
224 |     spawnloot();
225 |   }
226 |   if ((y<(((3/10)*window.innerHeight)+20))&&(y>((3/10)*window.innerHeight))&&((x+60)>((1/4)*window.innerWidth))&&(x<((45/100)*window.innerWidth))){
227 |     y=(((3/10)*window.innerHeight)+20);
228 |     refresh();
229 |     jump=0;
230 |   }else if ((y<(((55/100)*window.innerHeight)+20))&&(y>((55/100)*window.innerHeight))&&((x+60)>((1/10)*window.innerWidth))&&(x<((30/100)*window.innerWidth))){
231 |     y=(((55/100)*window.innerHeight)+20);
232 |     refresh();
233 |     jump=0;
234 |   }else if ((y<(((4/10)*window.innerHeight)+20))&&(y>((4/10)*window.innerHeight))&&((x+60)>((65/100)*window.innerWidth))&&(x<((85/100)*window.innerWidth))){
235 |     y=(((4/10)*window.innerHeight)+20);
236 |     refresh();
237 |     jump=0;
238 |   }else if ((y<(((1/10)*window.innerHeight)+20))&&(y>((1/10)*window.innerHeight))&&((x+60)>((35/100)*window.innerWidth))&&(x<((75/100)*window.innerWidth))){
239 |     y=(((1/10)*window.innerHeight)+20);
240 |     refresh();
241 |     jump=0;
242 |   }else if (y>0){
243 |     y=y-1;
244 |     refresh();
245 |   }else if (y<70){
246 |     respawn();
247 |   }else{
248 |     jump=0;
249 |   }
250 | }
251 | var map = {};
252 | onkeydown = onkeyup = function(e){
253 |     e = e || event;
254 |     map[e.keyCode] = e.type == 'keydown';
255 |     if(map[65]){
256 |       if(moba==0){moba=1; mobb=0; mobc=0}
257 |     }else if(map[68]){
258 |       if(mobb==0){mobb=1; moba=0; mobc=0}
259 |     }else if(map[32] && jump==0){
260 |       if(mobc==0){mobc=1;}
261 |     }
262 | }
263 | function mobmove(){
264 |   if (moba==1){
265 |     if(x>10){
266 |       x=x-10;
267 |     refresh();
268 |     }
269 |   }
270 |   if (mobb==1){
271 |     if(x<(window.innerWidth-70)){
272 |       x=x+10;
273 |       refresh();
274 |      }
275 |   }
276 |   if (mobc==1 && jump==0){
277 |     if((y<(window.innerHeight-10))){
278 |       jump=1;
279 |       y=y+((3/10)*window.innerHeight);
280 |       mobc=0;
281 |       refresh();
282 |     }
283 |   }
284 | }
285 | setInterval(mobmove, 20);
286 | if ( window.innerWidth <= window.innerHeight ){
287 |   document.getElementById("moba").style.display="block";
288 |   document.getElementById("mobb").style.display="block";
289 |   document.getElementById("mobc").style.display="block";
290 | }
291 | </script>
292 | </body>
293 | </html>
294 | 


--------------------------------------------------------------------------------
/entries/randomPassword.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Random Password</title>
 8 |     <style>
 9 |       .flex {
10 |         display: flex;
11 |         align-items: center;
12 |         justify-content: center;
13 |       }
14 |       body {
15 |         flex-direction: column;
16 |       }
17 |       .container {
18 |         flex-direction: column;
19 |         width: 400px;
20 |         height: 400px;
21 |       }
22 |       .box {
23 |         margin: 1rem;
24 |       }
25 |       button {
26 |         padding: 0.5rem;
27 |         margin-right: 0.5rem;
28 |       }
29 | 
30 |       #input-el {
31 |         padding: 0.5rem;
32 |         margin-right: 0.5rem;
33 |       }
34 |       .copied {
35 |         margin-top: 2rem;
36 |         padding: 0.5rem 8rem;
37 |         background-color: rgb(163, 163, 163);
38 |         opacity: 0;
39 |       }
40 |     </style>
41 |   </head>
42 |   <body class="flex">
43 |     <div class="container flex">
44 |       <h1>Generate Password</h1>
45 |       <div class="box flex">
46 |         <input type="text" id="input-el" />
47 |         <button id="copy-button">copy</button>
48 |         <button id="generate-button">Generate</button>
49 |       </div>
50 |       <p class="copied">copied</p>
51 |     </div>
52 | 
53 |     <script>
54 |       //dom selection
55 |       let inputEl = document.querySelector("#input-el");
56 |       const copyButton = document.querySelector("#copy-button");
57 |       const copied = document.querySelector(".copied");
58 |       const generateButton = document.querySelector("#generate-button");
59 |       let password = "";
60 |       generateButton.addEventListener("click", function () {
61 |         let password = "";
62 |         inputEl.value =""
63 |         const length = 8;
64 |         let chars = `abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*()`;
65 |         let n = chars.length;
66 |         for (let i = 0; i < length; i++) {
67 |           password += chars.charAt(Math.floor(Math.random() * n));
68 |         }
69 |         console.log(password);
70 |         inputEl.value = password;
71 |       });
72 |       copyButton.addEventListener("click", function () {
73 |         inputEl.value =""
74 |         navigator.clipboard.writeText(password);
75 |         copied.style.opacity = "1";
76 |         setTimeout(function () {
77 |           copied.style.opacity = "0";
78 |         }, 900);
79 |       });
80 |     </script>
81 |   </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/entries/ring-loader.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>A ring shaped loader with only CSS | one-html-page-challenge</title>
 5 |     <style>
 6 |     *, *:before, *:after {
 7 |     box-sizing: border-box;
 8 |     }
 9 |     @keyframes loader {
10 |     from {transform: scale(1) rotateY(0deg) rotateX(0deg) rotateZ(0deg)}
11 |     to {transform: scale(2) rotateY(180deg) rotateX(180deg) rotateZ(180deg)}
12 |     }
13 |     html, body {
14 |     width: 100%;
15 |     height: 100%;
16 |     }
17 |     body {
18 |     background:
19 |     radial-gradient(#101010, black);
20 |     background-attachment: fixed;
21 |     background-repeat: no-repeat;
22 |     color: white;
23 |     }
24 |     .ring {
25 |     position: absolute;
26 |     left: 50%;
27 |     top: 50%;
28 |     width: 3.5rem;
29 |     height: 3.5rem;
30 |     border: 5px solid white;
31 |     border-radius: 50%;
32 |     animation: loader 1.5s infinite;
33 |     animation-timing-function: cubic-bezier(1,0,0,1);
34 |     animation-direction: alternate;
35 |     box-shadow:
36 |     0 0 3px grey inset,
37 |     0 0 5px white,
38 |     0 0 3px grey;
39 |     }
40 |     .ring:nth-child(2) {
41 |     animation-delay: 250ms;
42 |     }
43 |     .ring:nth-child(3) {
44 |     animation-delay: 500ms;
45 |     }
46 |     </style>
47 |   </head>
48 |   <body>
49 |     <div class="ring"></div>
50 |     <div class="ring"></div>
51 |     <div class="ring"></div>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/entries/ripples.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Ripples</title>
 5 |     <style>
 6 |         #canvas {
 7 |             position: absolute;
 8 |             width: 100%;
 9 |             height: 100%;
10 |             overflow: hidden;
11 |             font-family: monospace;
12 |             white-space: pre-wrap;
13 |         }
14 | 
15 |         .ripple {
16 |             position: absolute;
17 |             border-radius: 50%;
18 |             animation: ripple 0.5s ease-out forwards;
19 |             pointer-events: none;
20 |             transform: scale(0);
21 |             opacity: 1;
22 |         }
23 | 
24 |         .acknowledgment {
25 |             position: absolute;
26 |             bottom: 0;
27 |             left: 50%;
28 |             transform: translateX(-50%);
29 |             font-family: 'Courier New', Courier, monospace;
30 |             font-size: 24px;
31 |             padding: 10px;
32 |             background: white;
33 |             border-radius: 5px;
34 |             border: 7px solid;
35 |             display: flex;
36 |             justify-content: space-around;
37 |             width: 80%;
38 |         }
39 | 
40 |         .acknowledgment a {
41 |             color: inherit;
42 |             text-decoration: none;
43 |         }
44 | 
45 |         @keyframes ripple {
46 |             0% {
47 |                 transform: scale(0);
48 |                 opacity: 1;
49 |             }
50 | 
51 |             100% {
52 |                 transform: scale(2);
53 |                 opacity: 0.4;
54 |             }
55 |         }
56 |     </style>
57 | </head>
58 | <body>
59 |     <div id="canvas"></div>
60 |     <div id="acknowledgment" class="acknowledgment">
61 |         <a href="https://github.com/Metroxe/one-html-page-challenge" target="_blank">Made by Nico for the one-html-page-challenge</a>&nbsp|&nbsp
62 |         <a href="https://github.com/ncerutti" target="_blank">Looking for friends: check out my GitHub page</a>&nbsp|&nbsp
63 |         <a href="https://www.linkedin.com/in/ncerutti/" target="_blank">and add me on LinkedIn!</a>
64 |     </div>
65 |     <script>
66 |         const canvas = document.getElementById('canvas');
67 |         const acknowledgment = document.getElementById('acknowledgment');
68 | 
69 |         canvas.addEventListener('click', function (event) {
70 |             let ripple = document.createElement('div');
71 |             ripple.className = 'ripple';
72 | 
73 |             // Generate random color
74 |             let color = `rgba(${Math.random() * 256}, ${Math.random() * 256}, ${Math.random() * 256}, 0.4)`;
75 |             ripple.style.background = color;
76 | 
77 |             // Change acknowledgment border color
78 |             acknowledgment.style.borderColor = color;
79 | 
80 |             // Generate random size between 100 and 400
81 |             let size = Math.random() * 300 + 100;
82 |             ripple.style.width = `${size}px`;
83 |             ripple.style.height = `${size}px`;
84 | 
85 |             ripple.style.top = `${event.clientY - size / 2}px`;
86 |             ripple.style.left = `${event.clientX - size / 2}px`;
87 | 
88 |             canvas.appendChild(ripple);
89 |         });
90 |     </script>
91 | </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/entries/signup_page.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | 	<title>signup html</title>
 5 | </head>
 6 | 
 7 | <body>
 8 | 	<div class="section">
 9 | 		<center>
10 | 			<h1><span>SIGNUP</span></h1>
11 | 		</center>
12 | 
13 | 	</div>
14 | 	<form name="signup" method="GET">
15 | 		FIRST NAME:<input type="text" id="first name" name="first name" placeholder="first name" /><br><br>
16 | 		LAST NAME:<input type="text" id="last name" name="last name" placeholder="last name" /><br><br>
17 | 		Email:<input type="text" id="email" name="email" size="30" placeholder="email" /><br><br>
18 | 		PASSWORD:<input type="password" id="password" name="password" placeholder="password" /><br><br>
19 | 		&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160&#160<a
20 | 			href="" title="forgot password">forgot password</a><br></br>
21 | 		Phone Number:<input type="text" id="phone no." name="phone no." placeholder="phone number" /><br><br>
22 | 		Gender:<input type="radio" id="gender" name="gender" value="male" />male
23 | 		<input type="radio" id="gender" name="gender" value="female" />female<br><br>
24 | 		Date Of Birth<input type="date"><br><br>
25 | 		time Of Birth<input type="time"><br><br>
26 | 		<input type="checkbox" value="terms">I accept terms & conditions through <a href="">terms and
27 | 			conditions</a></input></br><br>
28 | 
29 | 		<button type="button">signup</button>
30 | 		<button type="reset">reset</button><br>
31 | 
32 | 
33 | 		<a href="http://www.google.com\" target="_blank">opens in new tab</a></br><br>
34 | 		<a href="http://www.google.com\" target="_self">opens in same tab</a></br><br>
35 | 		<a href="http://www.google.com\" target="_parent">opens in parent frame</a></br><br>
36 | 		<a href="http://www.google.com\" target="_top">opens in full body of tab</a></br><br>
37 | 		<a href="http://www.google.com\" target="_framename">opens in opens in named frame</a></br><br>
38 | 	</form>
39 | 
40 | </body>
41 | 
42 | </html>


--------------------------------------------------------------------------------
/entries/simple-counter.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>New year counter</title>
  8 |   <!-- CSS Style -->
  9 |     <style>
 10 |           html {
 11 |         height:100%;
 12 |       }
 13 |       
 14 |       body {
 15 |         margin:0;
 16 |       }
 17 |       
 18 |       .bg {
 19 |         animation:slide 3s ease-in-out infinite alternate;
 20 |         background-image: linear-gradient(-60deg, #d53369 50%,#daae51 50%);  
 21 |         bottom:0;
 22 |         left:-50%;
 23 |         opacity:.5;
 24 |         position:fixed;
 25 |         right:-50%;
 26 |         top:0;
 27 |         z-index:-1;
 28 |       }
 29 |       
 30 |       .bg2 {
 31 |         animation-direction:alternate-reverse;
 32 |         animation-duration:10s;
 33 |       }
 34 |       
 35 |       .bg3 {
 36 |         animation-duration:5s;
 37 |       }
 38 |       
 39 |       .content {
 40 |         background-color:rgba(255,255,255,.5);
 41 |         border-radius:.55em;
 42 |         box-shadow:0 0 .25em rgba(0,0,0,.25);
 43 |         box-sizing:border-box;
 44 |         left:50%;
 45 |         padding-top: 10vmin;
 46 |         padding-bottom: 10vmin;
 47 |         width: 450px;
 48 |         position:fixed;
 49 |         text-align:center;
 50 |         top:50%;
 51 |         transform:translate(-50%, -50%);
 52 |       }
 53 |       
 54 |     
 55 |       h1 , p {
 56 |         font-family:monospace;
 57 |       }
 58 |       p {
 59 |         font-size: 19px
 60 |       }
 61 |       
 62 |       @keyframes slide {
 63 |         0% {
 64 |           transform:translateX(-25%);
 65 |         }
 66 |         100% {
 67 |           transform:translateX(25%);
 68 |         }
 69 |       }
 70 |     </style>
 71 | </head>
 72 | <body>
 73 |     <div class="bg"></div>
 74 |     <div class="bg bg2"></div>
 75 |     <div class="bg bg3"></div>
 76 |     <div class="content">
 77 |       <h1>2023 New year Count Down</h1>
 78 |       <p id="demo"></p>
 79 |     </div> 
 80 |     
 81 |     <script>
 82 |         
 83 |     // Set the date we're counting down to
 84 |     var countDownDate = new Date("Jan 1, 2023").getTime();
 85 | 
 86 |     // Update the count down every 1 second
 87 |     var x = setInterval(function() {
 88 | 
 89 |       // Get today's date and time
 90 |       var now = new Date().getTime();
 91 | 
 92 |       // Find the distance between now and the count down date
 93 |       var distance = countDownDate - now;
 94 | 
 95 |       // Time calculations for days, hours, minutes and seconds
 96 |       var days = Math.floor(distance / (1000 * 60 * 60 * 24));
 97 |       var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 98 |       var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 99 |       var seconds = Math.floor((distance % (1000 * 60)) / 1000);
100 | 
101 |       // Output the result in an element with id="demo"
102 |       document.getElementById("demo").innerHTML = days + "days " + hours + "hours "
103 |       + minutes + "m " + seconds + "s ";
104 | 
105 |       // If the count down is over, write some text 
106 |       if (distance < 0) {
107 |         clearInterval(x);
108 |         document.getElementById("demo").innerHTML = "Happy New Year,,,2023";
109 |       }
110 |     }, 1000);
111 |     </script>
112 |   </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/entries/stopWatch.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 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 | 		<title>StopWatch</title>
  8 | 	</head>
  9 | 	<style>
 10 | 		body {
 11 | 			background: #f5e8e4;
 12 | 		}
 13 | 		p {
 14 | 			font-size: xx-large;
 15 | 			line-height: 2rem;
 16 | 		}
 17 | 		footer {
 18 | 			position: absolute;
 19 | 			right: 0;
 20 | 			bottom: 0;
 21 | 			font-size: 1.125rem;
 22 | 			line-height: 1.75rem;
 23 | 			color: #411530;
 24 | 		}
 25 | 		.heading {
 26 | 			padding: 0.5rem;
 27 | 			font-size: 4.5rem;
 28 | 			line-height: 1;
 29 | 			place-self: center;
 30 | 			color: #411530;
 31 | 		}
 32 | 		.mainDiv {
 33 | 			display: flex;
 34 | 			padding: 2.5rem;
 35 | 			margin-top: 3rem;
 36 | 			margin-left: auto;
 37 | 			margin-right: auto;
 38 | 			flex-direction: column;
 39 | 			width: 100%;
 40 | 			border-radius: 0.375rem;
 41 | 			border-width: 2px;
 42 | 			border-color: #ffffff;
 43 | 			border-style: solid;
 44 | 			background: #f5c7a9;
 45 | 		}
 46 | 		.timerDigit {
 47 | 			display: flex;
 48 | 			margin-bottom: 1.25rem;
 49 | 			justify-content: center;
 50 | 			color: #411530;
 51 | 		}
 52 | 		.buttonDiv {
 53 | 			display: flex;
 54 | 			padding-left: 2.5rem;
 55 | 			padding-right: 2.5rem;
 56 | 			justify-content: space-evenly;
 57 | 		}
 58 | 		.Button {
 59 | 			color: #ffffff;
 60 | 			width: 6rem;
 61 | 			height: 4rem;
 62 | 			font-size: medium;
 63 | 			border-radius: 0.375rem;
 64 | 			background: #d1512d;
 65 | 		}
 66 | 		.lapDiv {
 67 | 			overflow: auto;
 68 | 			margin: 2.5rem;
 69 | 			margin-left: auto;
 70 | 			margin-right: auto;
 71 | 			width: 100%;
 72 | 			max-height: 24rem;
 73 | 			border-top-width: 1px;
 74 | 			background: #f5c7a9;
 75 | 		}
 76 | 		.newDiv {
 77 | 			padding-top: 0.25rem;
 78 | 			padding-bottom: 0.25rem;
 79 | 			padding-left: 1.25rem;
 80 | 			padding-right: 1.25rem;
 81 | 			font-size: 1.125rem;
 82 | 			line-height: 1.75rem;
 83 | 			border-radius: 0.375rem;
 84 | 			border-bottom-style: solid;
 85 | 			border-bottom-width: 1px;
 86 | 			color: #411530;
 87 | 		}
 88 | 
 89 | 		@media (min-width: 1024px) {
 90 | 			.lapDiv {
 91 | 				width: 33.333333%;
 92 | 			}
 93 | 			.mainDiv {
 94 | 				width: 33.333333%;
 95 | 			}
 96 | 		}
 97 | 	</style>
 98 | 	<body id="bodyId">
 99 | 		<div id="main-div" class="mainDiv">
100 | 			<h1 class="heading">
101 | 				<span>StopWatch</span>
102 | 			</h1>
103 | 
104 | 			<div id="timer-digits" class="timerDigit">
105 | 				<p id="minutes">00</p>
106 | 				<p>:</p>
107 | 				<p id="seconds">00</p>
108 | 			</div>
109 | 
110 | 			<div class="buttonDiv">
111 | 				<button class="Button" id="start-button">Start</button>
112 | 				<button class="Button" id="stop-button">Stop</button>
113 | 				<button class="Button" id="lap-button">Lap</button>
114 | 				<button class="Button" id="reset-button">Reset</button>
115 | 			</div>
116 | 		</div>
117 | 		<div class="lapDiv" id="lap-div"></div>
118 | 
119 | 		<footer>
120 | 			<span> made by Kabir Seth </span>
121 | 		</footer>
122 | 
123 | 		<script>
124 | 			var myVar;
125 | 			var seconds = 0;
126 | 			var minutes = 0;
127 | 			var srNo = 0;
128 | 			var minuteTag = document.getElementById("minutes");
129 | 			var secondsTag = document.getElementById("seconds");
130 | 			var lapTag = document.getElementById("lap-div");
131 | 			var darkTag = false;
132 | 
133 | 			//Logic for the Lap functionality
134 | 			document.getElementById("lap-button").onclick = function () {
135 | 				srNo++;
136 | 				var newDiv = document.createElement("div");
137 | 				newDiv.className = "newDiv";
138 | 				newDiv.innerHTML =
139 | 					"Lap " +
140 | 					srNo +
141 | 					": " +
142 | 					" " +
143 | 					" " +
144 | 					minuteTag.innerHTML +
145 | 					":" +
146 | 					secondsTag.innerHTML;
147 | 				lapTag.appendChild(newDiv);
148 | 			};
149 | 
150 | 			//Logic for coding the stopwatch
151 | 			document.getElementById("start-button").onclick = function () {
152 | 				clearInterval(myVar);
153 | 				myVar = setInterval(setTimer, 10);
154 | 			};
155 | 
156 | 			document.getElementById("stop-button").onclick = function () {
157 | 				clearInterval(myVar);
158 | 			};
159 | 			document.getElementById("reset-button").onclick = function () {
160 | 				clearInterval(myVar);
161 | 				seconds = 0;
162 | 				minutes = 0;
163 | 				srNo = 0;
164 | 				secondsTag.innerHTML = "00";
165 | 				minuteTag.innerHTML = "00";
166 | 				lapTag.textContent = "";
167 | 			};
168 | 
169 | 			function setTimer() {
170 | 				if (seconds < 99) {
171 | 					seconds++;
172 | 					if (seconds < 10) {
173 | 						seconds = "0" + seconds;
174 | 					}
175 | 				} else {
176 | 					minutes++;
177 | 					if (minutes < 10) {
178 | 						minuteTag.innerHTML = "0" + minutes;
179 | 					} else {
180 | 						minuteTag.innerHTML = minutes;
181 | 					}
182 | 					seconds = "0" + 0;
183 | 				}
184 | 				secondsTag.innerHTML = seconds;
185 | 			}
186 | 		</script>
187 | 	</body>
188 | </html>
189 | 


--------------------------------------------------------------------------------
/entries/tic-tac-toe.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Tic-Tac-Toe Game</title>
  8 |     <style>
  9 |         * {
 10 |             margin: 0;
 11 |             padding: 0;
 12 |             box-sizing: border-box;
 13 |         } 
 14 |         body {
 15 |             height: 100vh;
 16 |             width: 100vw;
 17 |             display: flex;
 18 |             flex-direction: column;
 19 |             justify-content: space-evenly;
 20 |             align-items: center;
 21 |             background: #355C7D;  
 22 |             background: -webkit-linear-gradient(to right, #C06C84, #6C5B7B, #355C7D);  
 23 |             background: linear-gradient(to right, #C06C84, #6C5B7B, #355C7D); 
 24 |         }
 25 |         h1 {
 26 |             font-size: 60px;
 27 |             font-weight: bold;
 28 |             color: white;
 29 |             background: #FF0000;
 30 |             background: -webkit-radial-gradient(circle farthest-corner at center center, #FF0000 0%, #FFFF00 25%, #05C1FF 50%, #FFFF00 75%, #FF0000 100%);
 31 |             background: -moz-radial-gradient(circle farthest-corner at center center, #FF0000 0%, #FFFF00 25%, #05C1FF 50%, #FFFF00 75%, #FF0000 100%);
 32 |             background: radial-gradient(circle farthest-corner at center center, #FF0000 0%, #FFFF00 25%, #05C1FF 50%, #FFFF00 75%, #FF0000 100%);
 33 |             -webkit-background-clip: text;
 34 |             -webkit-text-fill-color: transparent;
 35 |         }
 36 |         .turns {
 37 |             font-size: 30px;
 38 |             font-weight: bold;
 39 |             font-family: cursive;
 40 |             margin-bottom: 15px;
 41 |         }
 42 |         .turns.x {
 43 |             color: cornsilk;
 44 |             border-bottom: 2px solid cornsilk;
 45 |         }
 46 |         .turns.o {
 47 |             color: paleturquoise;
 48 |             border-bottom: 2px solid paleturquoise;
 49 |         }
 50 |         .board {
 51 |             width: 350px;
 52 |             height: 350px;
 53 |             display: grid;
 54 |             grid-template-columns: repeat(3, 1fr);
 55 |             grid-gap: 8px;
 56 |             cursor: pointer;
 57 |         }
 58 |         .cell {
 59 |             font-size: 60px;
 60 |             font-family: cursive;
 61 |             border-radius: 15px;
 62 |             background-color: rgba(255, 255, 255, 0.25);
 63 |             display: flex;
 64 |             justify-content: center;
 65 |             align-items: center;
 66 |         }
 67 |         .cell:hover {
 68 |             background-color: rgba(255, 255, 255, 0.5);
 69 |             border-left: 2px solid rgba(255, 255, 255, 0.8);
 70 |             border-right: 2px solid rgba(255, 255, 255, 0.8);
 71 |             box-shadow: 15px 15px 40px -6px rgba(0, 0, 0, 0.2);
 72 |         }
 73 |         .cell.x {
 74 |             color: cornsilk;
 75 |             cursor: not-allowed;
 76 |         }
 77 |         .cell.o {
 78 |             color: paleturquoise;
 79 |             cursor: not-allowed;
 80 |         }
 81 |         .board.x .cell:not(.x):not(.o),
 82 |         .board.o .cell:not(.x):not(.o) {
 83 |             text-indent: -9999px;
 84 |             overflow: hidden;
 85 |         }
 86 |         .board.x .cell:not(.x):not(.o):hover,
 87 |         .board.o .cell:not(.x):not(.o):hover {
 88 |             text-indent: 0px;
 89 |             color: rgba(129, 129, 129, 0.3);
 90 |         }
 91 |         .finish {
 92 |             height: 100vh;
 93 |             width: 100vw;
 94 |             display: flex;
 95 |             justify-content: center;
 96 |             align-items: center;
 97 |             position: absolute;
 98 |             background: rgba(255, 255, 255, 0.4);
 99 |             backdrop-filter: blur(5px);
100 |             -webkit-backdrop-filter: blur(5px); 
101 |             display: none;
102 |         }
103 |         .message {
104 |             display: flex;
105 |             justify-content: center;
106 |             align-items: center;
107 |             flex-direction: column;
108 |             font-size: 30px;
109 |             width: 400px;
110 |             height: 200px;
111 |             border-radius: 30px;
112 |             background-color: linen;
113 |             box-shadow: 6px 7px 42px 0px rgba(0, 0, 0, 0.9);
114 |             font-weight: bold;
115 |             text-shadow: 1px 1px 3px rgba(82, 80, 80, 0.473);
116 |         }
117 |         .message .text{
118 |             color: maroon;
119 |             font-family: cursive;
120 |         }
121 |         .message button {
122 |             color: rgb(141, 41, 41);
123 |             margin-top: 30px;
124 |             padding: 10px 12px;
125 |             font-size: 20px;
126 |             font-weight: bold;
127 |             border-radius: 10px;
128 |             cursor: pointer;
129 |         }
130 |         .finish button {
131 |             background: -webkit-linear-gradient(100deg, #fff6b7 10%, #f6416c 150%);
132 |             box-shadow: 1px 1px 5px 2px rgba(128, 128, 128, 0.596);
133 |             border: none;
134 |         }
135 |         .finish button:active {
136 |             transform: scale(0.8);
137 |         }
138 |     </style>
139 | </head>
140 | <body>
141 |     <h1>TIC TAC TOE</h1>
142 |     <div class="turns x">Player X's turn</div>
143 |     <div class="board x">
144 |       <div class="cell">X</div>
145 |       <div class="cell">X</div>
146 |       <div class="cell">X</div>
147 |       <div class="cell">X</div>
148 |       <div class="cell">X</div>
149 |       <div class="cell">X</div>
150 |       <div class="cell">X</div>
151 |       <div class="cell">X</div>
152 |       <div class="cell">X</div>
153 |     </div>
154 |     <div class="finish">
155 |       <div class="message">
156 |         <span class="text"></span>
157 |         <button id="restart">Play Again</button>
158 |       </div>
159 |     </div>
160 |     <script>
161 |         var currTurn = "x";
162 |         var board = document.querySelector(".board");
163 |         var text = document.querySelector(".text");
164 |         var turns = document.querySelector(".turns");
165 |         var cells = document.querySelectorAll(".cell");
166 |         var restart = document.getElementById("restart");
167 | 
168 |         const winCombs = [
169 |         [0, 1, 2],
170 |         [3, 4, 5],
171 |         [6, 7, 8],
172 |         [0, 3, 6],
173 |         [1, 4, 7],
174 |         [2, 5, 8],
175 |         [0, 4, 8],
176 |         [2, 4, 6],
177 |         ];
178 | 
179 |         cells.forEach((element) => {
180 |         element.addEventListener("click", doThis, { once: true }); 
181 |         });
182 | 
183 |         restart.addEventListener("click", (e) => {
184 |         location.reload();
185 |         return false;
186 |         });
187 | 
188 |         function doThis(e) {
189 |         markTheCell(e.target);
190 |         if (isCurrWinner()) {
191 |             gameOver(false);
192 |         } else if (isDraw()) {
193 |             gameOver(true);
194 |         } else {
195 |             changeTurn();
196 |             changeBoard();
197 |         }
198 |         }
199 | 
200 |         function markTheCell(element) {
201 |         if (currTurn == "x") {
202 |             element.innerHTML = "X";
203 |             element.classList.add("x");
204 |         } else {
205 |             element.innerHTML = "O";
206 |             element.classList.add("o");
207 |         }
208 |         }
209 | 
210 |         function isCurrWinner() {
211 |         return winCombs.some((currComb) => {
212 |             return currComb.every((cellIndex) => {
213 |             return cells[cellIndex].classList.contains(currTurn);
214 |             });
215 |         });
216 |         }
217 | 
218 |         function isDraw() {
219 |         return [...cells].every((cell) => {
220 |             return cell.classList.contains("x") || cell.classList.contains("o");
221 |         });
222 |         }
223 | 
224 |         function gameOver(draw) {
225 |         if (draw) {
226 |             text.innerText = "Draw!";
227 |         } else {
228 |             text.innerText = "Player " + currTurn.toUpperCase() + " Wins!";
229 |         }
230 |         document.querySelector(".finish").style.display = "flex";
231 |         }
232 | 
233 |         function changeTurn() {
234 |         turns.classList.remove(currTurn);
235 |         currTurn == "x" ? (currTurn = "o") : (currTurn = "x");
236 |         turns.classList.add(currTurn);
237 |         turns.innerText = "Player " + currTurn.toUpperCase() + "'s turn";
238 |         }
239 | 
240 |         function changeBoard() {
241 |         cells.forEach((element) => {
242 |             if (element.classList.length == 1)
243 |             element.innerHTML = currTurn.toUpperCase();
244 |         });
245 |         currTurn == "x" ? board.classList.remove("o") : board.classList.remove("x");
246 |         board.classList.add(currTurn);
247 |         }
248 |     </script>
249 | </body>
250 | </html>


--------------------------------------------------------------------------------
/entries/wargames.html:
--------------------------------------------------------------------------------
 1 | <!-- Wargames demo, @vasil9v -->
 2 | <html>
 3 |   <head>
 4 |     <title>Wargames</title>
 5 |   </head>
 6 |   <body style="background-color:black;font-family:courier;color:#05fa0d;">
 7 |     <span id="content"></span><span style="height:20px;width:20px;background-color:#05fa0d;">&nbsp;</span>
 8 |     <script>
 9 |       var menu = [
10 |           "CHESS",
11 |           "POKER",
12 |           "FIGHTER COMBAT",
13 |           "GUERRILLA ENGAGEMENT",
14 |           "DESERT WARFARE",
15 |           "AIR-TO-GROUND ACTIONS",
16 |           "THEATERWIDE TACTICAL WARFARE",
17 |           "THEATERWIDE BIOTOXIC AND CHEMICAL WARFARE",
18 |           " ",
19 |           "GLOBAL THERMONUCLEAR WAR",
20 |           " "
21 |         ],
22 |         i = 0, j, item, html,
23 |         e = document.getElementById("content"),
24 |         doChar = function() {
25 |           e.innerHTML += item[j++];
26 |           if (j < item.length) {
27 |             setTimeout(doChar, 10);
28 |           }
29 |           else {
30 |             e.innerHTML += "<br/>";
31 |             doItem();
32 |           }
33 |         },
34 |         doItem = function() {
35 |           if (i < menu.length) {
36 |             item = menu[i++];
37 |             j = 0;
38 |             doChar();
39 |           }
40 |         };
41 |       doItem();
42 |     </script>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/meta/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/android-icon-144x144.png


--------------------------------------------------------------------------------
/meta/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/android-icon-192x192.png


--------------------------------------------------------------------------------
/meta/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/android-icon-36x36.png


--------------------------------------------------------------------------------
/meta/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/android-icon-48x48.png


--------------------------------------------------------------------------------
/meta/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/android-icon-72x72.png


--------------------------------------------------------------------------------
/meta/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/android-icon-96x96.png


--------------------------------------------------------------------------------
/meta/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-114x114.png


--------------------------------------------------------------------------------
/meta/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-120x120.png


--------------------------------------------------------------------------------
/meta/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-144x144.png


--------------------------------------------------------------------------------
/meta/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-152x152.png


--------------------------------------------------------------------------------
/meta/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-180x180.png


--------------------------------------------------------------------------------
/meta/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-57x57.png


--------------------------------------------------------------------------------
/meta/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-60x60.png


--------------------------------------------------------------------------------
/meta/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-72x72.png


--------------------------------------------------------------------------------
/meta/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-76x76.png


--------------------------------------------------------------------------------
/meta/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon-precomposed.png


--------------------------------------------------------------------------------
/meta/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/apple-icon.png


--------------------------------------------------------------------------------
/meta/browserconfig.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square70x70logo src="./ms-icon-70x70.png" />
 6 |             <square150x150logo src="./ms-icon-150x150.png" />
 7 |             <square310x310logo src="./ms-icon-310x310.png" />
 8 |             <TileColor>#da532c</TileColor>
 9 |         </tile>
10 |     </msapplication>
11 | </browserconfig>


--------------------------------------------------------------------------------
/meta/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/favicon-16x16.png


--------------------------------------------------------------------------------
/meta/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/favicon-32x32.png


--------------------------------------------------------------------------------
/meta/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/favicon-96x96.png


--------------------------------------------------------------------------------
/meta/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/favicon.ico


--------------------------------------------------------------------------------
/meta/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/ms-icon-144x144.png


--------------------------------------------------------------------------------
/meta/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/ms-icon-150x150.png


--------------------------------------------------------------------------------
/meta/ms-icon-310x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/ms-icon-310x150.png


--------------------------------------------------------------------------------
/meta/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/ms-icon-310x310.png


--------------------------------------------------------------------------------
/meta/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/ms-icon-70x70.png


--------------------------------------------------------------------------------
/meta/one-html-page-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/one-html-page-icon.png


--------------------------------------------------------------------------------
/meta/one-html-page-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/one-html-page-logo.png


--------------------------------------------------------------------------------
/meta/promotion-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Metroxe/one-html-page-challenge/eeb16c7119a0d03954f2b280266340cec8a9af42/meta/promotion-image.png


--------------------------------------------------------------------------------
/meta/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" standalone="no"?>
  2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  5 |  width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
  6 |  preserveAspectRatio="xMidYMid meet">
  7 | <metadata>
  8 | Created by potrace 1.11, written by Peter Selinger 2001-2013
  9 | </metadata>
 10 | <g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
 11 | fill="#000000" stroke="none">
 12 | <path d="M4985 9765 l-118 -115 41 -52 c103 -136 145 -257 146 -423 0 -204
 13 | -58 -346 -217 -523 -36 -40 -82 -98 -102 -128 -42 -63 -115 -214 -115 -237 0
 14 | -9 -4 -18 -9 -21 -4 -3 -12 -25 -16 -48 -10 -55 -11 -62 -14 -68 -13 -29 -19
 15 | -235 -9 -325 8 -72 51 -225 79 -278 10 -21 19 -44 19 -52 0 -8 4 -15 8 -15 5
 16 | 0 14 -12 21 -27 16 -34 110 -160 144 -191 l25 -23 103 103 c147 147 138 127
 17 | 84 194 -141 173 -182 442 -102 661 31 82 96 183 174 269 82 89 136 170 184
 18 | 270 35 74 79 223 79 265 0 14 3 29 7 32 11 12 9 209 -4 277 -20 112 -23 123
 19 | -56 210 -46 124 -136 270 -209 338 l-25 23 -118 -116z"/>
 20 | <path d="M6107 9764 l-118 -116 24 -27 c40 -42 105 -149 128 -210 99 -264 41
 21 | -521 -167 -743 -43 -45 -120 -147 -143 -187 -53 -94 -103 -218 -116 -288 -2
 22 | -10 -4 -18 -5 -18 -6 0 -22 -140 -24 -210 -1 -27 3 -88 10 -135 22 -152 57
 23 | -256 129 -380 43 -73 150 -210 164 -210 8 0 231 224 231 233 0 3 -21 34 -48
 24 | 69 -108 144 -143 280 -132 512 5 98 89 275 177 373 135 150 201 255 257 411
 25 | 14 39 24 72 21 72 -2 0 0 12 5 26 23 59 33 277 18 369 -20 118 -65 253 -111
 26 | 335 -11 19 -25 44 -31 55 -26 49 -138 187 -150 185 -1 0 -54 -53 -119 -116z"/>
 27 | <path d="M3857 9751 c-115 -117 -117 -118 -97 -136 33 -30 104 -145 127 -205
 28 | 41 -105 47 -136 49 -251 1 -103 -2 -127 -26 -203 -39 -122 -86 -196 -194 -314
 29 | -135 -145 -226 -330 -261 -527 -13 -80 -14 -275 0 -345 12 -57 13 -65 15 -65
 30 | 1 0 3 -9 5 -19 23 -121 125 -308 230 -420 l37 -39 120 121 121 121 -34 38
 31 | c-71 79 -132 204 -154 318 -9 50 -6 209 5 261 22 100 79 224 130 284 11 14 41
 32 | 48 65 76 85 98 127 156 166 228 138 257 158 579 50 847 -32 80 -80 172 -93
 33 | 177 -4 2 -8 8 -8 14 0 18 -115 158 -130 158 -3 0 -58 -53 -123 -119z"/>
 34 | <path d="M2103 6672 c-99 -34 -125 -101 -108 -272 2 -25 7 -83 10 -128 3 -46
 35 | 8 -97 10 -113 2 -16 7 -71 10 -122 4 -50 8 -108 10 -127 2 -19 6 -73 10 -120
 36 | 4 -47 8 -101 10 -120 3 -35 12 -137 20 -235 2 -27 7 -88 10 -135 3 -47 8 -98
 37 | 10 -115 2 -16 7 -68 10 -115 3 -47 7 -105 10 -130 9 -97 17 -197 30 -365 5
 38 | -68 11 -132 20 -225 2 -25 7 -79 10 -120 7 -97 15 -204 20 -255 5 -62 14 -178
 39 | 20 -257 3 -40 8 -95 10 -123 8 -73 15 -160 20 -240 3 -38 7 -90 10 -115 2 -25
 40 | 7 -79 10 -120 3 -41 8 -95 10 -120 2 -25 7 -79 10 -120 3 -41 8 -95 10 -120 2
 41 | -25 7 -79 10 -120 3 -41 7 -100 10 -130 7 -76 14 -164 20 -235 2 -33 7 -85 9
 42 | -115 3 -30 8 -91 11 -135 3 -44 8 -102 10 -130 3 -27 7 -79 10 -115 11 -131
 43 | 16 -196 20 -240 3 -25 7 -79 10 -120 3 -41 8 -93 10 -115 2 -22 7 -80 11 -130
 44 | 3 -49 8 -103 9 -120 6 -77 19 -108 57 -146 25 -24 54 -41 76 -45 21 -4 1072
 45 | -7 2337 -7 l2300 0 42 21 c57 29 89 87 99 177 4 39 8 77 9 85 1 8 6 47 10 85
 46 | 4 39 9 77 10 85 2 8 6 44 9 80 4 36 9 81 11 100 3 19 9 76 15 125 6 50 12 106
 47 | 15 125 7 59 27 233 30 260 5 49 17 155 20 180 2 14 6 50 10 80 7 66 14 123 20
 48 | 170 2 19 7 58 10 85 9 90 29 261 40 345 3 19 7 62 11 95 3 33 8 62 9 63 2 2
 49 | 192 4 422 4 235 0 435 4 456 9 46 12 110 73 227 216 30 35 147 218 180 278 91
 50 | 169 173 418 196 595 2 19 8 64 13 99 9 69 7 265 -3 327 -4 21 -9 57 -11 78
 51 | -13 99 -28 167 -71 306 -20 63 -40 119 -45 125 -5 5 -9 15 -9 22 0 19 -77 178
 52 | -131 269 -106 180 -280 383 -347 405 -25 8 -127 12 -323 12 l-286 0 3 26 c2
 53 | 14 6 69 9 121 3 52 8 106 10 120 2 14 6 68 10 120 4 52 8 111 10 130 2 19 6
 54 | 76 10 125 4 50 8 91 10 93 9 9 -20 92 -42 120 -54 72 209 66 -2911 66 -2251 1
 55 | -2820 -1 -2849 -12z m5422 -382 c-5 -64 -13 -146 -20 -205 -2 -16 -7 -57 -10
 56 | -90 -3 -33 -8 -73 -10 -90 -2 -16 -7 -66 -10 -110 -3 -44 -8 -87 -10 -95 -2
 57 | -8 -7 -53 -10 -100 -4 -47 -9 -94 -11 -105 -2 -11 -6 -51 -9 -90 -3 -38 -8
 58 | -81 -10 -95 -3 -23 -9 -77 -20 -185 -2 -22 -6 -69 -10 -105 -3 -36 -8 -76 -10
 59 | -90 -2 -14 -6 -60 -10 -102 -3 -42 -8 -86 -10 -97 -2 -10 -6 -56 -10 -101 -4
 60 | -45 -8 -89 -10 -98 -1 -10 -6 -51 -9 -92 -4 -41 -9 -86 -11 -100 -3 -14 -7
 61 | -61 -11 -104 -3 -44 -7 -87 -9 -95 -1 -9 -6 -50 -10 -91 -4 -41 -9 -88 -11
 62 | -105 -2 -16 -6 -59 -9 -95 -3 -36 -8 -81 -10 -100 -3 -19 -7 -60 -10 -90 -3
 63 | -30 -8 -73 -10 -95 -2 -22 -7 -69 -10 -105 -3 -36 -7 -76 -10 -90 -2 -14 -7
 64 | -54 -10 -90 -3 -36 -7 -81 -10 -100 -3 -19 -7 -64 -10 -100 -3 -36 -8 -76 -10
 65 | -90 -2 -14 -7 -63 -10 -110 -4 -47 -9 -93 -10 -102 -2 -9 -6 -48 -10 -85 -3
 66 | -37 -8 -84 -10 -103 -8 -68 -16 -145 -20 -185 -7 -87 -17 -181 -20 -205 -2
 67 | -14 -7 -54 -10 -90 -3 -36 -8 -76 -10 -90 -2 -14 -7 -59 -10 -100 -3 -41 -7
 68 | -86 -10 -100 -2 -14 -7 -59 -11 -100 -3 -41 -7 -86 -9 -100 -1 -14 -5 -52 -9
 69 | -85 -3 -33 -11 -100 -16 -150 -5 -49 -12 -110 -14 -133 -2 -24 -7 -46 -10 -49
 70 | -7 -7 -4205 -8 -4212 -1 -6 7 -10 36 -19 143 -3 44 -8 98 -10 120 -2 22 -7 72
 71 | -10 110 -6 76 -13 154 -19 225 -3 25 -7 81 -11 125 -3 44 -8 96 -10 115 -2 19
 72 | -7 71 -10 115 -3 44 -8 98 -10 120 -2 22 -7 72 -10 110 -3 39 -8 88 -10 110
 73 | -5 45 -12 130 -30 345 -5 61 -13 151 -19 220 -10 105 -17 179 -21 235 -3 33
 74 | -7 80 -10 105 -3 25 -7 79 -10 120 -3 41 -7 95 -10 120 -2 25 -7 81 -11 125
 75 | -4 44 -8 94 -10 110 -1 17 -5 68 -9 115 -4 47 -8 96 -10 110 -2 14 -7 61 -10
 76 | 105 -4 44 -8 96 -10 115 -2 19 -7 78 -11 130 -3 52 -8 102 -9 111 -2 8 -6 55
 77 | -10 105 -4 49 -8 100 -10 114 -2 14 -7 63 -10 110 -4 47 -8 101 -10 120 -2 19
 78 | -7 73 -10 120 -3 47 -8 96 -10 110 -2 14 -7 63 -10 110 -4 47 -8 99 -10 115
 79 | -1 17 -6 71 -9 120 -4 50 -9 101 -11 115 -2 14 -7 61 -10 105 -4 44 -8 96 -10
 80 | 115 -2 19 -6 73 -10 120 -4 47 -8 103 -11 125 -2 22 -7 74 -10 115 l-6 75
 81 | 2601 0 2601 0 -5 -65z m848 -937 c151 -187 258 -411 307 -646 56 -270 45 -521
 82 | -35 -777 -50 -160 -134 -325 -231 -455 -78 -104 -97 -120 -152 -121 -26 -1
 83 | -173 -5 -327 -9 -154 -5 -300 -8 -325 -9 -39 -1 -45 2 -44 19 1 21 12 126 18
 84 | 185 8 63 15 134 21 195 3 33 8 74 10 90 2 17 6 57 10 90 3 33 8 78 10 100 3
 85 | 22 7 67 10 100 4 33 8 71 10 85 2 14 7 61 11 105 3 44 8 87 9 95 2 8 6 44 9
 86 | 80 4 36 9 81 11 100 3 19 7 64 11 100 3 36 7 79 9 95 3 17 7 59 11 95 3 36 8
 87 | 79 10 95 2 17 6 66 10 110 3 44 8 83 10 86 1 3 6 39 9 80 3 42 8 84 10 95 2
 88 | 10 4 34 4 52 l1 32 269 0 269 0 55 -67z"/>
 89 | <path d="M4644 3982 l-422 -838 152 2 c83 0 156 2 163 2 6 1 60 98 119 215 59
 90 | 116 148 293 199 392 225 439 535 1053 535 1059 0 3 -73 6 -162 6 l-163 0 -421
 91 | -838z"/>
 92 | <path d="M5749 4606 c-2 -2 -3 -64 -1 -138 l3 -133 47 -22 c26 -12 97 -45 157
 93 | -74 61 -28 191 -89 290 -136 99 -46 183 -88 188 -92 4 -4 -148 -83 -338 -176
 94 | l-345 -169 -1 -56 c-2 -124 0 -212 4 -216 2 -2 53 19 113 47 60 28 177 83 259
 95 | 121 83 39 213 101 290 138 77 36 206 97 288 135 l147 68 0 99 c0 93 -1 99 -22
 96 | 107 -13 5 -81 37 -153 71 -71 34 -157 74 -190 90 -33 16 -109 52 -170 80 -60
 97 | 29 -137 65 -170 80 -33 15 -126 59 -206 98 -152 73 -183 85 -190 78z"/>
 98 | <path d="M3820 4469 c-140 -66 -277 -131 -305 -144 -91 -41 -208 -97 -345
 99 | -162 -74 -36 -145 -69 -157 -74 -22 -8 -23 -14 -23 -102 l0 -94 228 -108 c125
100 | -60 308 -148 407 -196 351 -169 458 -219 463 -215 4 4 5 141 3 252 -1 29 -7
101 | 34 -73 64 -40 19 -145 68 -233 110 -88 42 -211 100 -272 130 -99 47 -134 70
102 | -104 70 4 0 132 60 282 133 151 73 302 146 337 162 46 21 62 34 62 49 1 12 2
103 | 72 3 134 1 69 -2 112 -8 112 -5 0 -125 -54 -265 -121z"/>
104 | <path d="M944 598 c-53 -14 -106 -79 -118 -144 -12 -64 31 -140 98 -174 25
105 | -13 517 -15 4021 -15 l3991 0 36 24 c19 13 44 38 56 55 26 38 35 111 17 151
106 | -15 36 -61 83 -95 98 -29 13 -7958 18 -8006 5z"/>
107 | </g>
108 | </svg>
109 | 


--------------------------------------------------------------------------------
/meta/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "One HTML Page Challenge",
 3 |   "short_name": "SPA challange",
 4 |   "icons": [
 5 |     {
 6 |       "src": "./android-icon-36x36.png",
 7 |       "sizes": "36x36",
 8 |       "type": "image/png",
 9 |       "density": "0.75"
10 |     },
11 |     {
12 |       "src": "./android-icon-48x48.png",
13 |       "sizes": "48x48",
14 |       "type": "image/png",
15 |       "density": "1.0"
16 |     },
17 |     {
18 |       "src": "./android-icon-72x72.png",
19 |       "sizes": "72x72",
20 |       "type": "image/png",
21 |       "density": "1.5"
22 |     },
23 |     {
24 |       "src": "./android-icon-96x96.png",
25 |       "sizes": "96x96",
26 |       "type": "image/png",
27 |       "density": "2.0"
28 |     },
29 |     {
30 |       "src": "./android-icon-144x144.png",
31 |       "sizes": "144x144",
32 |       "type": "image/png",
33 |       "density": "3.0"
34 |     },
35 |     {
36 |       "src": "./android-icon-192x192.png",
37 |       "sizes": "192x192",
38 |       "type": "image/png",
39 |       "density": "4.0"
40 |     }
41 |   ],
42 |   "theme_color": "#ffffff",
43 |   "background_color": "#ffffff",
44 |   "display": "standalone"
45 | }
46 | 


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