<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
	<types>
		<members>*</members>
		<name>ActionLinkGroupTemplate</name>
	</types>
	<types>
		<members>*</members>
		<name>ApexClass</name>
	</types>
	<types>
		<members>*</members>
		<name>ApexComponent</name>
	</types>
	<types>
		<members>*</members>
		<name>ApexPage</name>
	</types>
	<types>
		<members>*</members>
		<name>ApexTrigger</name>
	</types>
	<types>
		<members>*</members>
		<name>AppMenu</name>
	</types>
	<types>
		<members>*</members>
		<name>ApprovalProcess</name>
	</types>
	<types>
		<members>*</members>
		<name>AssignmentRules</name>
	</types>
	<types>
		<members>*</members>
		<name>AuraDefinitionBundle</name>
	</types>
	<types>
		<members>*</members>
		<name>AuthProvider</name>
	</types>
	<types>
		<members>*</members>
		<name>AutoResponseRules</name>
	</types>
	<types>
		<members>*</members>
		<name>BrandingSet</name>
	</types>
	<types>
		<members>*</members>
		<name>CallCenter</name>
	</types>
	<types>
		<members>*</members>
		<name>Certificate</name>
	</types>
	<types>
		<members>*</members>
		<name>CleanDataService</name>
	</types>
	<types>
		<members>*</members>
		<name>Community</name>
	</types>
	<types>
		<members>*</members>
		<name>ConnectedApp</name>
	</types>
	<types>
		<members>*</members>
		<name>ContentAsset</name>
	</types>
	<types>
		<members>*</members>
		<name>CorsWhitelistOrigin</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomApplication</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomApplicationComponent</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomFeedFilter</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomHelpMenuSection</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomLabels</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomMetadata</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomObject</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomObjectTranslation</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomPageWebLink</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomPermission</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomSite</name>
	</types>
	<types>
		<members>*</members>
		<name>CustomTab</name>
	</types>
	<types>
		<members>*</members>
		<name>Dashboard</name>
	</types>
	<types>
		<members>*</members>
		<name>DataCategoryGroup</name>
	</types>
	<types>
		<members>*</members>
		<name>DelegateGroup</name>
	</types>
	<types>
		<members>*</members>
		<name>Document</name>
	</types>
	<types>
		<members>*</members>
		<name>DuplicateRule</name>
	</types>
	<types>
		<members>*</members>
		<name>EclairGeoData</name>
	</types>
	<types>
		<members>*</members>
		<name>EmailServicesFunction</name>
	</types>
	<types>
		<members>*</members>
		<name>EmailTemplate</name>
	</types>
	<types>
		<members>*</members>
		<name>EscalationRules</name>
	</types>
	<types>
		<members>*</members>
		<name>ExternalDataSource</name>
	</types>
	<types>
		<members>*</members>
		<name>ExternalServiceRegistration</name>
	</types>
	<types>
		<members>*</members>
		<name>FlexiPage</name>
	</types>
	<types>
		<members>*</members>
		<name>Flow</name>
	</types>
	<types>
		<members>*</members>
		<name>FlowCategory</name>
	</types>
	<types>
		<members>*</members>
		<name>FlowDefinition</name>
	</types>
	<types>
		<members>*</members>
		<name>GlobalValueSet</name>
	</types>
	<types>
		<members>*</members>
		<name>GlobalValueSetTranslation</name>
	</types>
	<types>
		<members>*</members>
		<name>HomePageComponent</name>
	</types>
	<types>
		<members>*</members>
		<name>HomePageLayout</name>
	</types>
	<types>
		<members>*</members>
		<name>InstalledPackage</name>
	</types>
	<types>
		<members>*</members>
		<name>Layout</name>
	</types>
	<types>
		<members>*</members>
		<name>Letterhead</name>
	</types>
	<types>
		<members>*</members>
		<name>LightningBolt</name>
	</types>
	<types>
		<members>*</members>
		<name>LightningComponentBundle</name>
	</types>
	<types>
		<members>*</members>
		<name>LightningExperienceTheme</name>
	</types>
	<types>
		<members>*</members>
		<name>MatchingRules</name>
	</types>
	<types>
		<members>*</members>
		<name>NamedCredential</name>
	</types>
	<types>
		<members>*</members>
		<name>NetworkBranding</name>
	</types>
	<types>
		<members>*</members>
		<name>PathAssistant</name>
	</types>
	<types>
		<members>*</members>
		<name>PermissionSet</name>
	</types>
	<types>
		<members>*</members>
		<name>PlatformCachePartition</name>
	</types>
	<types>
		<members>*</members>
		<name>PostTemplate</name>
	</types>
	<types>
		<members>*</members>
		<name>Profile</name>
	</types>
	<types>
		<members>*</members>
		<name>ProfileSessionSetting</name>
	</types>
	<types>
		<members>*</members>
		<name>Queue</name>
	</types>
	<types>
		<members>*</members>
		<name>QuickAction</name>
	</types>
	<types>
		<members>*</members>
		<name>RecommendationStrategy</name>
	</types>
	<types>
		<members>*</members>
		<name>RecordActionDeployment</name>
	</types>
	<types>
		<members>*</members>
		<name>RemoteSiteSetting</name>
	</types>
	<types>
		<members>*</members>
		<name>ReportType</name>
	</types>
	<types>
		<members>*</members>
		<name>Role</name>
	</types>
	<types>
		<members>*</members>
		<name>SamlSsoConfig</name>
	</types>
	<types>
		<members>*</members>
		<name>Scontrol</name>
	</types>
	<types>
		<members>*</members>
		<name>Settings</name>
	</types>
	<types>
		<members>*</members>
		<name>SharingRules</name>
	</types>
	<types>
		<members>*</members>
		<name>SiteDotCom</name>
	</types>
	<types>
		<members>*</members>
		<name>StandardValueSetTranslation</name>
	</types>
	<types>
		<members>*</members>
		<name>StaticResource</name>
	</types>
	<types>
		<members>*</members>
		<name>SynonymDictionary</name>
	</types>
	<types>
		<members>*</members>
		<name>TopicsForObjects</name>
	</types>
	<types>
		<members>*</members>
		<name>TransactionSecurityPolicy</name>
	</types>
	<types>
		<members>*</members>
		<name>Workflow</name>
	</types>
	<version>46.0</version>
</Package>

<style>
.reflection {
  width: 300px;
  height: 215px;
  margin: 50px auto;
}
.reflection-figure {
  position: relative;
  height: 215px;
  margin: 0;
}
.reflection-text {
  font: 0.8em sans-serif;
  position: absolute;
  right: 0; bottom: 20px;
  margin: 0;
  padding: 10px;
  background: rgba(255,255,255,.6);
  color: #000;
  transition: padding .3s;
}
.reflection:hover .reflection-text {
  padding-right: 50px;
}

/* reflection the standard way (detecting support) */
@supports (background: -moz-element(#css-element)) {
  .reflection::after{
    content: '';
    position: absolute;
    width: inherit; height: inherit;
    background: -moz-element(#css-element);
    transform: scaleY(-1);
    mask: url('#mask');
    opacity: .3;
  }
}

/* reflection the old WebKit way */
.reflection {
  -webkit-box-reflect: below 0 linear-gradient(transparent 50%, rgba(0,0,0,.3));
}
</style>
<div class="reflection">
  <figure class="reflection-figure" id="css-element">
    <img class="reflection-image" src="https://unsplash.it/300/215?image=84" alt="">
    <figcaption class="reflection-text">San Francisco, CA</figcaption>
  </figure>
</div>
<svg height="0">
  <mask id="mask">
    <rect width="100%" height="215" fill="url(#gradient)"/>
    <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient">
      <stop offset="50%" stop-color="black" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </mask>
</svg>

<style>
   @import url(https://fonts.googleapis.com/css?family=Droid+Sans:700);

/* counters */

body {
  counter-reset: characters;
}

input:checked {
  counter-increment: characters;
}

.total::after {
  content: counter(characters);
}

/* the rest is just to make things pretty */

body {
  margin: 32px;
  font: 700 32px/1 'Droid Sans', sans-serif;
  color: #fff;
  background-color: #3f584e;
}

h1 {
  margin: 0 0 32px;
  font-size: 48px;
}

h2 {
  margin: 0 0 8px 8px;
  font-size: inherit;
}

section {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, .1);
}

input {
  position: absolute;
  left: -9999px;
}

label {
  float: left;
  margin: 8px;
  padding: 16px;
  border-radius: 4px;
  border: solid 2px rgba(255, 255, 255, .4);
  background-color: rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: all .1s;
}

label::before {
  display: inline;
}

input:checked + label {
  border: solid 2px #fff;
  background-color: rgba(255, 255, 255, .4);
  box-shadow: 0 0 10px #fff;
}

.total {
  padding: 16px 24px;
}
  </style>
<h1>בחר קוביה</h1>
<section class="characters">
  <h2>בחר קוביה או קוביות</h2>
  <input id="b" type="checkbox"><label for="b">ראשון</label>
  <input id="c" type="checkbox"><label for="c">שני</label>
  <input id="e" type="checkbox"><label for="e">שלישי</label>
  <input id="g" type="checkbox"><label for="g">רביעי</label>
  <input id="i" type="checkbox"><label for="i">חמישי</label>
  <input id="k" type="checkbox"><label for="k">שישי</label>
  <input id="l" type="checkbox"><label for="l">שביעי</label>
  <input id="o" type="checkbox"><label for="o">שמיני</label>
</section>
<section class="total">
  סה"כ נבחרו:
</section>

<!DOCTYPE html>
<html>

<head>
    <style id="grid1">
        * {
          box-sizing: border-box;
        }
        .wrapper {
          max-width: 940px;
          margin: 0 auto;
        }
        
        .wrapper > div {
          border: 2px solid rgb(233 171 88);
          border-radius: 5px;
          background-color: rgb(233 171 88 / 50%);
          padding: 1em;
          color: #d9480f;
        }
        
        .wrapper {
          display: grid;
          grid-template-columns: repeat(3, 5fr);
          gap: 10px;
          grid-auto-rows: minmax(100px, auto);
        }
        .one {
          grid-column: 1 / 3;
          grid-row: 1;
        }
        .two {
          grid-column: 3 ;
          grid-row: 1 / 4;
        }
        .three {
          grid-column: 1;
          grid-row: 2 / 5;
        }
        .four {
          grid-column: 2;
          grid-row: 2 / 4;
        }
        .five {
          grid-column: 2;
          grid-row: 4;
        }
        .six {
          grid-column: 3;
          grid-row: 4;
        }
    </style>
    <style id="grid2">
    .item1 { grid-area: header; }
    .item2 { grid-area: menu; }
    .item3 { grid-area: main; }
    .item4 { grid-area: right; }
    .item5 { grid-area: footer; }

    .grid-container {
      display: grid;
      grid-template-areas:
        'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';
      gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }

    .grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
    </style>
</head>

<body>
    <div class="wrapper" id="grid1">
        <div class="one">One</div>
        <div class="two">Two</div>
        <div class="three">Three</div>
        <div class="four">Four</div>
        <div class="five">Five</div>
        <div class="six">Six</div>
    </div>
    <div class="grid-container" id="grid2">
        <div class="item1">Header</div>
        <div class="item2">Menu</div>
        <div class="item3">Main</div>  
        <div class="item4">Right</div>
        <div class="item5">Footer</div>
	</div>

</body>

</html>

<a class="icon-download btn btn-primary" href="https://[the URL]">Download</a></p>

<div class="content-box">
 <div class="grid-row">
  <div class="col-xs">
   <div class="styleguide-section__grid-demo-element">Column 1 content</div>
  </div>
  <div class="col-xs">
   <div class="styleguide-section__grid-demo-element">Column 2 content</div>
  </div>
  <div class="col-xs">
   <div class="styleguide-section__grid-demo-element">Column 3 content</div>
  </div>
 </div><!--end of grid row-->
</div><!--end of content box-->

MID({!$Flow.FaultMessage}, FIND('FIELD_CUSTOM_VALIDATION_EXCEPTION: ', {!$Flow.FaultMessage}) + LEN('FIELD_CUSTOM_VALIDATION_EXCEPTION: '), FIND('. Você pode consultar valores de ExceptionCode', {!$Flow.FaultMessage}) - FIND('FIELD_CUSTOM_VALIDATION_EXCEPTION: ', {!$Flow.FaultMessage}) - LEN('FIELD_CUSTOM_VALIDATION_EXCEPTION: '))

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Word Generator</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="header">
    <h1>Random Word Generator</h1>
    <i id="add-icon" class="fa fa-plus" aria-hidden="true"></i>
    <div id="dropdown-menu">
      <button id="create-list">Create List</button>
      <button id="view-list">View List</button>
    </div>
  </div>

  <input type="text" id="word-input" placeholder="Enter words separated by commas">
  <p id="word-counter">0 words</p>
  <input type="number" id="num-words-input" min="1" value="1">
  <button id="generate-button">Generate Random Words</button>
  <button id="reset">Reset</button>
  <div id="result">
    <ul id="word-list"></ul>
  </div>

  <!-- Modal for displaying lists -->
  <div id="listModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
        <h2>Lists</h2>
      </div>
      <div class="modal-body" id="modal-body">
        <!-- List items will be displayed here -->
      </div>
      <div class="modal-footer">
        <button id="close-modal" class="close">Close</button>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

<input type="number" onKeyPress="if(this.value.length==6) return false;"/>

\xB0

<link href="splendor.css" rel="stylesheet">

<script type="application/ld+json">
{
  "@context": "https://schema.org/", 
  "@type": "Product", 
  "name": "Terminus Developers",
  "image": "https://terminus-developers.com/wp-content/themes/terminus/assets/images/projects/_MG_4516.webp",
  "description": "Terminus Developers: Offering Premium Building Construction, Real Estate Services, and a Range of Flats, Plots, and Apartments in TSPA Junction, Kokapet, Kollur, Hyderabad.",
  "brand": {
    "@type": "Brand",
    "name": "Terminus"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "bestRating": "5",
    "worstRating": "1",
    "ratingCount": "836"
  }
}
</script>

<script src="https://rawcdn.githack.com/oscarmorrison/md-page/232e97938de9f4d79f4110f6cfd637e186b63317/md-page.js"></script><noscript>

function sum(...numbers) {
  // The rest operator is three dots followed by the variable name; by convention, it is typically called 'rest'
  // The rest operator must be the last parameter in the function definition
  return numbers.reduce((acc, val) => acc + val, 0);
}   // The reduce method is used to sum all the numbers in the array

<!DOCTYPE html>
<html>
​
<body>
  
<script>
class Car {
  constructor(name) {
    this.brand = name;
  }
​
  present() {
    return 'I have a ' + this.brand;
  }
}
​
class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
    return this.present() + ', it is a ' + this.model
  }
}
​
const mycar = new Model("Ford", "Mustang");
document.write(mycar.show());
</script>
​
</body>
</html>
​

<!DOCTYPE html>
<html>
​
<body>
  
<script>
class Car {
  constructor(name) {
    this.brand = name;
  }
}
​
const mycar = new Car("Ford");
​
document.write(mycar.brand);
</script>
​
</body>
</html>
​

<div class="page-breadcrumb">
                                        <ul>
                                            <li><a href="https://www.lundbergroofing.com">Home</a></li>
                                            <li>About Us</li>
                                        </ul>
                                    </div>


.page-breadcrumb ul { display: flex; padding: 0px; margin-left: 0px; list-style: none; gap: 16px; }
.page-breadcrumb ul li a { font-size: 14px; color: rgb(161, 161, 161); }
.page-breadcrumb ul li { position: relative; font-size: 14px; font-weight: 600; color: rgb(161, 161, 161); text-transform: uppercase; }
.page-breadcrumb ul li::after { content: ""; width: 13px; height: 1.5px; background: rgb(161, 161, 161); position: absolute; rotate: -74deg; bottom: 9px; right: -14px; }
.page-breadcrumb { border: 1px solid rgb(238, 238, 238); border-radius: 2px; margin-bottom: 16px; padding: 4px 8px; }
.page-breadcrumb ul li:last-child::after { display: none; }
.page-breadcrumb ul li a:hover { color: rgb(126, 44, 33); }

<!-- in css: -->
<style>
  #p-bar-wrapper {
   	display:none;
   	position: fixed;
   	bottom: 0;
   	right: 0;
   	width: 100vw;
   	height: 8px;
   	background-color:#d1d6d8;
   	z-index: 18;
  }
  #progress-bar {
   	background-color:#295b71;
   	width: 0;
   	height: 8px;
   	transition: .3s;
  }
  #progress-bar span {
   	position: absolute;
   	color: #42616c;
   	top: -18px;
   	font-size: 0.8em;
   	font-weight: 600;
   	margin-right:0;
  }
  #run-bar.right-fix {
   	margin-right: -80px;
  }
  #run-bar.right-fix-2one {
   	margin-right: -77px;
  }
</style>

<!-- in html: -->
<div id="p-bar-wrapper">
    <div id="progress-bar"><span id="run-bar"></span></div>
</div>

<!-- in js: -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" async>
    document.addEventListener("DOMContentLoaded", function() {
    	  document.addEventListener("scroll", function() {
    	    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    	    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    		var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    		var windowWidth = window.innerWidth;
    		var p_bar =	document.getElementById("progress-bar");
    		var scrolled = (scrollTop / (scrollHeight - clientHeight)) * 100;
     
     	//Check if Tablet or smaller than hide all progress bar
    		if( windowWidth < 767 ){
    			return;
    		}
    		else {
    			jQuery("#p-bar-wrapper").css('display','block').show('slow');
    			p_bar.style.width = scrolled + "%";
    			var scrolled_num = parseInt(scrolled, 10);
    			var span_run = document.getElementById("run-bar");
    			jQuery(span_run).text(scrolled_num + '%').css('right',scrolled + '%');
    				if (scrolled == 100){
    					jQuery(span_run).addClass('right-fix-2one').css('color','#21f1af');
    				}
    				else {
    					jQuery(span_run).removeClass('right-fix-2one').css('color','#42616c');
    					if (scrolled > 15){
    						jQuery(span_run).addClass('right-fix');
    					}
    					else {
    						jQuery(span_run).removeClass('right-fix');
    					}
    				}
    			}
    		});
    	});	
</script>

<!-- in css: -->
<style>
	#up-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
  	  z-index: 15;
	  cursor: pointer;
      transition: all .3s;
  	}
 	img[src$=".svg"]{
		width:48px
    }
</style>

<!-- in html: -->
<div class="btn-hide" data-id="" data-element_type="widget" id="up-btn" data-settings="" alt="scroll to top">
	<img width="40" height="55" src="https://aspx.co.il/wp-content/uploads/2023/04/arrowup.svg" class="" alt="arrowup" /> 
</div>

<!-- in js: -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" async>
	jQuery(document).ready(function($){
  
	//Check to see if the window is top if more then 500px from top display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 500) {
			$('#up-btn').fadeIn(300,'linear').removeClass('btn-hide');
		} else {
			$('#up-btn').fadeOut(200).hide('slow').addClass('btn-hide');
		}
	});

	//Click event to scroll to top
	$('#up-btn').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		$(this).addClass('btn-hide');
			return false;
	});
</script>

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

The Alphacodez Cryptocurrency Exchange Script is a robust solution for launching secure and efficient trading platforms, featuring user management, a high-performance trading engine, and wallet integration. It offers advanced security measures and customization options. Ongoing support and maintenance ensure smooth operation.

import pandas as pd

dict_data = {
    'users': ['user_123', 'user_abc'],
    'tasks': ['test1', 'test2']
}

df = pd.DataFrame.from_dict(dict_data)
df.to_html('out.html')

<button type="button" class="btn-close" aria-label="Close"></button>

Cascading Style Sheets

CSS - 
SASS - Syntactically Awesome Style Sheet
LESS - Leaner CSS
...

How to add CSS
////////////////////
INLINE CSS
<html style="background: blue">
  </html>

////////////////////
INTERNAL CSS
<html>
  <head>
   <style>
    	html {
    	  background: red;
  		  }
		h1 {
          background: green;
        }
	</style>
  </head>
</html>
 
////////////////////
EXTERNAL CSS
<html>
  <head>
   <link
		rel="stylesheet"
		href="./styles.css"
    />
  </head>
</html>


CSS Selectors
////////////////////
ELEMENT SELECTOR
h1 {
  color: blue
}
You can add the same group of styles to many elements by creating a list of selectors. Each selector is separated with commas like this:
selector1, selector2 {
  property: value;
}
 
////////////////////
CLASS SELECTOR. used for many elements
.red-heading {
  color: red
}
<h1 class="red-heading"></h1>
 
////////////////////
ID SELECTOR. used for one specific element
#main {
color: red
}
<h1 id="main"></h1>
 
////////////////////
ATTRIBUTE SELECTOR. used for all elements with specific attributes
p[draggable="true"]{
  color: red
}
<p id="" class="" draggable="true"></p> //applied
<p id="" class="" draggable="false"></p> //not applied
 
////////////////////
UNIVERSAL SELECTOR. used to select everything where stylesheet is active
* {
  color: red
}

COLOR PROPERTIES

Named Colors: background-color: blue

Hex Codes: background-color: #5D3891


FONT SIZE
//static sizes
1px = 1/96th of an inch //PIXEL
1pt = 1/72nd of an inch //POINT
 
//relative sizes (scalable)
1em = 100% of parent
1rem = 100% of root

FONT WEIGHT
//Keywords
normal; //-100
bold; //+100

//Relative to Parent
lighter;
bolder;

//Number
light-bold
100-900;


FONT FAMILY
h1{
  font-family: "FONTNAME", "BACKUP GENERIC FONT TYPE" //Helvetica, sans-serif
}
fonts needs quotation marks with multiple words
include link in html file under style element

TEXT ALIGN
sets the horizontal alignment of the element


THE BOX MODEL

border: 10px solid black //border: "thickness" "style" "color"
	border-top: 0px //has to come after border property
border property adds outwards of the html element

border-width: 0px 10px 20px 30px //border-width: "top" "right" "bottom" "left"
border-width: 0px 20px //border-width: "top+bottom" "left+right"

padding: 20px //doesn't affect height or width of element, adds to it. around paragraph, inside border

margin: 10px //adds space around element, outside of border


CONTENT DIVISION ELEMENT

<div>		//take as many elements as needed
  <p><p/>
  <img/>
</div> 

horizontally center div with img

div{
width: 50%;
margin-left: 25%;
}
img{
  width: 100%;
}


CASCADE

resolving conflicting styling rules for elements

css rules apply by:

Position
order in stylesheet
li {
  color: red; 
  color: blue; //overwrites red value
}
li{
  color: green; //overwrites blue value
}

Specificity
how specific a selector is
<li id="first-id" class="first-class" draggable></li>

li{color: blue;} //selects all list item elements(least specific)
.first-class{color: red;} //class selector with classname, second specific
li[draggable] {color: purple;} //attribute selector, third specific
#first-id {color: orange;} //id selector, most specific

Type
<link rel="stylesheet" href="./style.css">	//external, least important
<style> <style/>							//internal, second important
<h1 style="">Hello</h1>						//inline, most important

Importance
color: red;
color: green !important; //gets most important rule for element

Color

The CSS linear-gradient function lets you control the direction of the transition along a line, and which colors are used.
linear-gradient(gradientDirection, color1, color2, ...);
gradientDirection is the direction of the line used for the transition. color1 and color2 are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, rgb, or hsl.
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));

With the CSS opacity property, you can control how opaque or transparent an element is. With the value 0, or 0%, the element will be completely transparent, and at 1.0, or 100%, the element will be completely opaque like it is by default.

The rgba function works just like the rgb function, but takes one more number from 0 to 1.0 for the alpha channel:
rgba(redValue, greenValue, blueValue, alphaValue);

The box-shadow property lets you apply one or more shadows around an element.
box-shadow: offsetX offsetY color;

both offsetX and offsetY accept number values in px and other CSS units
a positive offsetX value moves the shadow right and a negative value moves it left
a positive offsetY value moves the shadow down and a negative value moves it up
if you want a value of zero (0) for any or both offsetX and offsetY, you don't need to add a unit. Every browser understands that zero means no change.

If a blurRadius value isn't included, it defaults to 0 and produces sharp edges. The higher the value of blurRadius, the greater the blurring effect is.
box-shadow: offsetX offsetY blurRadius color;

The vh unit stands for viewport height, and is equal to 1% of the height of the viewport. This makes it relative to the viewport height.

Now, get rid of the horizontal scroll-bar, by setting the body default margin added by some browsers to 0.

HTML Elements

<h1> //opening tag
</h1> // closing tag

Heading Element
<h1> to <h6>
not good practice to have more than one h1 or skip levels.

  
Paragraph
<p></p>
adds a linebreak
  

Horizontal Rule Element (self closing)
<hr />
doesn't take content
adds a horizontal line
  
Break Element (self closing)
<br />
doesn't take content
adds a break at the end
don't use break elements to break up paragraphs
  
List Element

Unordered
<ul>		//unordered
  <li></li> // list item
</ul>
will create bullet points. order of items don't matter
  
Ordered
<ol>
  <li></li>
</ol>
adds numbers to every item

Anchor Element
<a href="LINK"></a>
adds a target to some content
  
Image Element
<img src="URL" alt="ALTERNATIVE TEXT DESCRIPTION" />

HTML Boilerplate
<!DOCTYPE html> //tells browser code is written in html
  <html lang="en"> //language of text content, used for screen readers
    <head> //important information that does not get displayed
    <meta charset="UTF-8"> //character encoding
      <title>TITLE</title> //gets displayed in tab bar
      </head>
      
      <body> //content of website goes here
        
      </body>
  </html>

Main Element
The main element is used to represent the main content of the body of an HTML document.
<main>
  <h1>Most important content of the document</h1>
  <p>Some more important content...</p>
</main>

Section Element
The section element is used to define sections in a document, such as chapters, headers, footers, or any other sections of the document. It is a semantic element that helps with SEO and accessibility.
<section>
  <h2>Section Title</h2>
  <p>Section content...</p>
</section>

Figure Element
The figure element represents self-contained content and will allow you to associate an image with a caption.
A figure caption (figcaption) element is used to add a caption to describe the image contained within the figure element.
<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>A cute cat</figcaption>
</figure>

Form Element
The form element is used to get information from a user like their name, email, and other details.
The action attribute indicates where form data should be sent.
<form action="/submit-url"></form>

Input element
The input element allows you several ways to collect data from a web form.
There are many kinds of inputs you can create using the type attribute. You can easily create a password field, reset button, or a control to let users select a file from their computer.
In order for a form's data to be accessed by the location specified in the action attribute, you must give the text field a name attribute and assign it a value to represent the data being submitted.
To prevent a user from submitting your form when required information is missing, you need to add the required attribute to an input element.

Fieldset Element
The fieldset element is used to group related inputs and labels together in a web form.

Legend Element
The legend element acts as a caption for the content in the fieldset element. It gives users context about what they should enter into that part of the form.

Footer Element
The footer element is used to define a footer for a document or section. A footer typically contains information about the author of the document, copyright data, links to terms of use, contact information, and more.

Select Element
Adding a dropdown to the form is easy with the select element. The select element is a container for a group of option elements, and the option element acts as a label for each dropdown option. Both elements require closing tags.

function custom_mini_cart() {
    if ( function_exists('WC') && WC()->cart ) {
        ?>
        <div class="custom-mini-cart">
            <a class="cart-contents" href="#" title="<?php _e( 'View your shopping cart', 'text-domain' ); ?>">
				<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000" class="bi bi-cart2">
				  <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
				</svg>
                <span class="cart-contents-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
            </a>
            <div class="widget_shopping_cart_content">
                <?php woocommerce_mini_cart(); ?>
            </div>
        </div>
        <?php
    } else {
        echo '<p>' . __( 'Cart is empty.', 'text-domain' ) . '</p>';
    }
}
add_shortcode('custom_mini_cart', 'custom_mini_cart');

function add_to_cart_fragment( $fragments ) {
    if ( function_exists('WC') && WC()->cart ) {
        ob_start();
        ?>
        <span class="cart-contents-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
        <?php
        $fragments['.cart-contents-count'] = ob_get_clean();
    }
    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'add_to_cart_fragment' );

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fonts</title> 
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Poppins:wght@300&display=swap');
        h1 {
            font-family: 'Poppins', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
        }

        p {
            /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
            font-family: 'Baloo Bhai 2', sans-serif;
            font-size: 20px; 
            /* font-style:italic;
            font-weight: 500;  */
            
        }
        h2{
            text-align: center;
            text-transform: uppercase;
            text-decoration: underline;
            text-decoration-color: blue;//to change color of underline
            /* text-decoration-style: dotted; */
            text-decoration-thickness: 7px ;
            /* text-indent: 45px; */
        }
        .lorem{
            border: 2px solid red;
            width: 145px;
            word-break: break-all;
            /* text-overflow: ellipsis;
            overflow: hidden; */

        }
    </style>
</head>

<body>
    <div>
        <!-- https://codepen.io/web-dot-dev/pen/yLojraG -->
        <h1>Fonts</h1>
        <h2>about Fonts</h2>
        <p>This is a video on fonts</p>
        <p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos sequi accusamus quas itaque molestias dolorem quisquam quod, adipisci maxime dolore, mollitia illo officia deserunt voluptatem iure qui. Fugit aliquam possimus aperiam commodi eum amet veniam at vel. Necessitatibus asperiores eos amet laborum dolor, ipsum porro!</p>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Boxmodel</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box {
            background-color: aqua;
        }
        .box1{
            color: yellow;
            padding: 10px;
            margin:35px;
            border: 2px solid blue;
            height: 200px;
            box-sizing: border-box;
        }
        .box2{
            color:red;
            padding: 10px;
            margin:25px;
            border: 2px solid black;
            height: 200px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box box1">I am a box</div>
    <div class="box box2">I am another box</div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors</title>
    <style>
        /* Element Selector  */
        div{
            /* background-color: red; */
        }

        /* Class Selector  */
        .red{
            background-color: red;
        }

        /* Id Selector */
        #green{
            background-color: green;
        }

        /* Child Selectors  */
        div > p {
            color: blue;
            background-color: brown;
        }

        /* Descendant Selector  */
        div p {
            color: blue;
            background-color: brown;
        }

        /* Universal Selector */
        * {
            margin:0;
            padding: 0;
        }

        /* Pseudo Selector  */
        a:visited{
            color: yellow
        }

        a:link {
            color: green;
        }

        a:active{
            background-color: red;
        }

        a:hover{
            background-color: yellow;
        }


        p:first-child{
            background-color: aqua;
        }

    </style>
</head>
<body>
    <main class="one">
        <p>I am first</p>
        <p>I am second</p>
    </main>
    <div class="red">
        I am a div
        <article>

            <p>I am a para inside div</p>
        </article>
    </div>

    <div id="green">
        I am another div
    </div>
    <a href="https://www.google.com">Go to Google</a>
    <a href="https://www.facebook2.com">Go to Facebook</a>
</body>
</html>

<body style="font-family: 'Poppins', Arial, sans-serif">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" style="padding: 20px;">
                <table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;">
                    <!-- Header -->
                    <tr>
                        <td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;">
                        Responsive Email Template
                        </td>
                    </tr>

                    <!-- Body -->
                    <tr>
                        <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
                        Hello, All! <br>
                        Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam.
                        <br><br>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis  atque? Ipsam voluptas fugiat distinctio blanditiis veritatis.            
                        </td>
                    </tr>

                    <!-- Call to action Button -->
                    <tr>
                        <td style="padding: 0px 40px 0px 40px; text-align: center;">
                            <!-- CTA Button -->
                            <table cellspacing="0" cellpadding="0" style="margin: auto;">
                                <tr>
                                    <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
                                        <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit.             
                        </td>
                    </tr>
                    <!-- Footer -->
                    <tr>
                        <td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;">
                        Copyright &copy; 2024 | Your brand name
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="video.mp4" height="255" controls loop muted poster="download.jpg"></video>

    <audio src="sachin.mp3" controls autoplay loop muted></audio>

    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
    <img src="img.svg" alt="My Svg Image">

    <!-- <iframe src="https://www.codewithharry.com/tutorial/html-iframes/" width="322" height="444"></iframe> -->
    
    <iframe width="560" height="315" src="https://www.youtube.com/embed/tVzUXW6siu0?si=NuQZuYqrMHn7Pg-i&amp;start=739" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

    <!-- Quick Quiz  -->
    <!-- Create a website which shows videos of different category and audios of different categories.
    You can use YouTube videos in an iframe using YouTube's embedding feature -->
</body>
</html>

Block Elements (Most Commonly Used First)

<div>: A generic container for flow content.
<p>: Paragraph.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings.
<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.
<form>: A section containing form controls.
<table>: Table.
<section>: A standalone section of a document.
<header>: A container for introductory content or a set of navigational links.
<footer>: Footer of a section or page.
<nav>: A section of a page that contains navigation links.
<article>: A self-contained composition in a document.
<aside>: A section of a page that contains information indirectly related to the main content.
<main>: The main content of a document.
<fieldset>: A set of form controls grouped under a common name.
<blockquote>: A block of text that is a quotation from another source.
<pre>: Preformatted text.
<canvas>: A container used to draw graphics via JavaScript.
<dl>: Description list.
<dt>: Term in a description list.
<dd>: Description in a description list.
<figure>: Any content that is referenced from the main content.
<figcaption>: A caption for a <figure> element.
<address>: Contact information for the author or owner of the document.
<hr>: A thematic break or a horizontal rule.
<tfoot>: Footer of a table.



Inline Elements (Most Commonly Used First)
<a>: Anchor or hyperlink.
<img>: Image.
<span>: Generic inline container.
<input>: Input field.
<label>: Label for a form element.
<strong>: Strong emphasis.
<em>: Emphasized text.
<br>: Line break.
<code>: Code snippet.
<b>: Bold text.
<i>: Italic text.
<u>: Underlined text.
<small>: Smaller text.
<sub>: Subscript.
<sup>: Superscript.
<mark>: Marked or highlighted text.
<q>: Short inline quotation.
<cite>: Citation.
<kbd>: Keyboard input.
<samp>: Sample output.
<var>: Variable in a mathematical expression or programming context.
<time>: Time.
<abbr>: Abbreviation.
<data>: Machine-readable translation of content.
<acronym>: Acronym (Not supported in HTML5).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline and Block Elements - HTML</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>Hey I am a para</p>
    <a href="https://google.com">Google</a>
    <div> I am a block element</div>
    <span>I am span and I am inline</span>
    <a href="">yes he is inline</a>

    <!-- Quick Quiz:
    Without using br tag, write a vertically aligned form asking for name, city and pincode of a user.
    Everyone must comment -->

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forms - Lets learn it</title>
</head>

<body>
    <h1>Form to apply for Sigma Web Development course - TA </h1>
    <form action="post">
        <div>
            <label for="username">Enter your Username</label>
            <input type="text" id="username" name="username" placeholder="Enter your username" autofocus>
        </div>
        <div>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label>
        </div>

        <div>
            <input type="checkbox" id="subscribe" name="subscribe" value="yes">
            <label for="subscribe">Subscribe to newsletter</label>
        </div>
        <div>
            <label for="comment">Enter your comment</label>
            <br>
            <textarea id="comment" name="comment" rows="4" cols="50"></textarea>
        </div>

        <div>
            <select name="fruits">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
          </select>
        </div>
    </form>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Images</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <img height="230" src="image.png" alt="Train image">
    <br>
    <table>
        <caption>Employee Details</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Designation</th>
                <th>Fav Language</th>
            </tr>
        </thead>
        <tbody>


            <tr>
                <td>Harry</td>
                <td>Programmer</td>
                <td>JavaScript</td>
            </tr>

            <tr>
                <td colspan="2">Sam</td>//colspan means how many column a data will span
                <td rowspan="2">Java</td>
            </tr>
            <tr>
                <td colspan="2">Sam</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">Sam</td>
                <td rowspan="2">foot</td>
            </tr>
        </tfoot>
    </table>


    <ul type="square">
        <li>Harry</li>
        <li>Rohan</li>
        <li>Shubham</li>
    </ul>
    <ol type="A">
        <li>Harry</li>
        <li>Rohan</li>
        <li>Shubham</li>
    </ol>

</body>

</html>

<img src="" alt="">

 <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>

 <a href = "https://www.youtube.com" target = _main>YOUTUBE</a>

<p>TopHomeworkHelper.com offers comprehensive programming help for students, covering various programming languages like Java, Python, C++, and more. Services include assignment help, coding assistance, and debugging support. With 24/7 availability and experienced tutors, the platform ensures timely and reliable solutions for all programming-related academic needs.<br /><br />Source:&nbsp;<a href="https://tophomeworkhelper.com/programming-help.html" target="_blank" rel="noopener">Programming Homework Help</a></p>
<p>&nbsp;</p>

public delegate void Print(int val);

static void ConsolePrint(int i)
{
    Console.WriteLine(i);
}

static void Main(string[] args)
{           
    Print prnt = ConsolePrint;
    prnt(10);
}

<div class="related-post">
  <div class="container">
    <h2 id="recent">Related Articles</h2>
    <div class="row">
      <?php
      $current_post_type = get_post_type($post);
      // The query arguments
      $args = array(
        'posts_per_page' => 3,
        'order' => 'rand',
        'orderby' => 'ID',
        'post_type' => 'post',
        'post_status' => 'publish',
        'numberposts' => -1,
        'post__not_in' => array($post->ID)
      );

      // Create the related query
      $rel_query = new WP_Query($args);

      // Check if there is any related posts
      if ($rel_query->have_posts()):
        ?>


        <?php
        // The Loop
        while ($rel_query->have_posts()):
          $rel_query->the_post();
          $post_tags = get_the_tags();
          ?>
          <div class="col-md-4 col-sm-6 col-12 related-col">

            <?php the_post_thumbnail(); ?>
            <div class="taxonomy-post_tag wp-block-post-terms">
              <?php
              if ($post_tags) {
                if (count($post_tags) > 0) {
                  foreach ($post_tags as $key => $val) {
                    ?>
                    <a href="<?php echo get_permalink(); ?>">
                      <?php echo $val->name; ?>
                    </a>
                    <?php
                  }
                }
              }
              ?>
            </div>
            <div class="wp-block-post-date"> <time>
                <?php echo get_the_date() ?>
              </time></div>
            <a href="<?php the_permalink() ?>">
              <h3 class="entry-title">
                <?php the_title() ?>
              </h3>
            </a>

          </div>
          <?php
        endwhile;
        ?>

        <?php
      endif;

      // Reset the query
      wp_reset_query();

      ?>
    </div>
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>

<span class="text-[color:var(--text-color)] text-[length:var(--text-size)] font-bold">
  Hello world!
</span>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="x-apple-disable-message-reformatting">
  <title></title>
	<!--[if mso]>
  <style>
    table {border-collapse:collapse;border-spacing:0;border:none;margin:0;}
    div, td {padding:0;}
    div {margin:0 !important;}
	</style>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <![endif]-->
  <style>
    table, td, div, h1, p {
      font-family: Arial, sans-serif;
    }
    @media screen and (max-width: 530px) {
      .unsub {
        display: block;
        padding: 8px;
        margin-top: 14px;
        border-radius: 6px;
        background-color: #555555;
        text-decoration: none !important;
        font-weight: bold;
      }
      .col-lge {
        max-width: 100% !important;
      }
    }
    @media screen and (min-width: 531px) {
      .col-sml {
        max-width: 27% !important;
      }
      .col-lge {
        max-width: 73% !important;
      }
    }
  </style>
</head>
<body style="margin:0;padding:0;word-spacing:normal;background-color:#939297;">
  <div role="article" aria-roledescription="email" lang="en" style="text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#939297;">
    <table role="presentation" style="width:100%;border:none;border-spacing:0;">
      <tr>
        <td align="center" style="padding:0;">
          <!--[if mso]>
          <table role="presentation" align="center" style="width:600px;">
          <tr>
          <td>
          <![endif]-->
          <table role="presentation" style="width:94%;max-width:600px;border:none;border-spacing:0;text-align:left;font-family:Arial,sans-serif;font-size:16px;line-height:22px;color:#363636;">
            <tr>
              <td style="padding:40px 30px 30px 30px;text-align:center;font-size:24px;font-weight:bold;">
                <a href="http://www.example.com/" style="text-decoration:none;"><img src="https://assets.codepen.io/210284/logo.png" width="165" alt="Logo" style="width:165px;max-width:80%;height:auto;border:none;text-decoration:none;color:#ffffff;"></a>
              </td>
            </tr>
            <tr>
              <td style="padding:30px;background-color:#ffffff;">
                <h1 style="margin-top:0;margin-bottom:16px;font-size:26px;line-height:32px;font-weight:bold;letter-spacing:-0.02em;">Welcome to our responsive email!</h1>
                <p style="margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, <a href="http://www.example.com/" style="color:#e50d70;text-decoration:underline;">eget accumsan dictum</a>, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
              </td>
            </tr>
            <tr>
              <td style="padding:0;font-size:24px;line-height:28px;font-weight:bold;">
                <a href="http://www.example.com/" style="text-decoration:none;"><img src="https://assets.codepen.io/210284/1200x800-2.png" width="600" alt="" style="width:100%;height:auto;display:block;border:none;text-decoration:none;color:#363636;"></a>
              </td>
            </tr>
            <tr>
              <td style="padding:35px 30px 11px 30px;font-size:0;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);">
                <!--[if mso]>
                <table role="presentation" width="100%">
                <tr>
                <td style="width:145px;" align="left" valign="top">
                <![endif]-->
                <div class="col-sml" style="display:inline-block;width:100%;max-width:145px;vertical-align:top;text-align:left;font-family:Arial,sans-serif;font-size:14px;color:#363636;">
                  <img src="https://assets.codepen.io/210284/icon.png" width="115" alt="" style="width:115px;max-width:80%;margin-bottom:20px;">
                </div>
                <!--[if mso]>
                </td>
                <td style="width:395px;padding-bottom:20px;" valign="top">
                <![endif]-->
                <div class="col-lge" style="display:inline-block;width:100%;max-width:395px;vertical-align:top;padding-bottom:20px;font-family:Arial,sans-serif;font-size:16px;line-height:22px;color:#363636;">
                  <p style="margin-top:0;margin-bottom:12px;">Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. Mauris sapien massa, placerat non venenatis et, tincidunt eget leo.</p>
                  <p style="margin-top:0;margin-bottom:18px;">Nam non ante risus. Vestibulum vitae eleifend nisl, quis vehicula justo. Integer viverra efficitur pharetra. Nullam eget erat nibh.</p>
                  <p style="margin:0;"><a href="https://example.com/" style="background: #ff3884; text-decoration: none; padding: 10px 25px; color: #ffffff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ff3884"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt">&nbsp;</i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%">&nbsp;</i><![endif]--></a></p>
                </div>
                <!--[if mso]>
                </td>
                </tr>
                </table>
                <![endif]-->
              </td>
            </tr>
            <tr>
              <td style="padding:30px;font-size:24px;line-height:28px;font-weight:bold;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);">
                <a href="http://www.example.com/" style="text-decoration:none;"><img src="https://assets.codepen.io/210284/1200x800-1.png" width="540" alt="" style="width:100%;height:auto;border:none;text-decoration:none;color:#363636;"></a>
              </td>
            </tr>
            <tr>
              <td style="padding:30px;background-color:#ffffff;">
                <p style="margin:0;">Duis sit amet accumsan nibh, varius tincidunt lectus. Quisque commodo, nulla ac feugiat cursus, arcu orci condimentum tellus, vel placerat libero sapien et libero. Suspendisse auctor vel orci nec finibus.</p>
              </td>
            </tr>
            <tr>
              <td style="padding:30px;text-align:center;font-size:12px;background-color:#404040;color:#cccccc;">
                <p style="margin:0 0 8px 0;"><a href="http://www.facebook.com/" style="text-decoration:none;"><img src="https://assets.codepen.io/210284/facebook_1.png" width="40" height="40" alt="f" style="display:inline-block;color:#cccccc;"></a> <a href="http://www.twitter.com/" style="text-decoration:none;"><img src="https://assets.codepen.io/210284/twitter_1.png" width="40" height="40" alt="t" style="display:inline-block;color:#cccccc;"></a></p>
                <p style="margin:0;font-size:14px;line-height:20px;">&reg; Someone, Somewhere 2024<br><a class="unsub" href="http://www.example.com/" style="color:#cccccc;text-decoration:underline;">Unsubscribe instantly</a></p>
              </td>
            </tr>
          </table>
          <!--[if mso]>
          </td>
          </tr>
          </table>
          <![endif]-->
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

<!-- Section: Design Block -->
<section class="background-radial-gradient overflow-hidden">
  <style>
    .background-radial-gradient {
      background-color: hsl(218, 41%, 15%);
      background-image: radial-gradient(650px circle at 0% 0%,
          hsl(218, 41%, 35%) 15%,
          hsl(218, 41%, 30%) 35%,
          hsl(218, 41%, 20%) 75%,
          hsl(218, 41%, 19%) 80%,
          transparent 100%),
        radial-gradient(1250px circle at 100% 100%,
          hsl(218, 41%, 45%) 15%,
          hsl(218, 41%, 30%) 35%,
          hsl(218, 41%, 20%) 75%,
          hsl(218, 41%, 19%) 80%,
          transparent 100%);
    }

    #radius-shape-1 {
      height: 220px;
      width: 220px;
      top: -60px;
      left: -130px;
      background: radial-gradient(#44006b, #ad1fff);
      overflow: hidden;
    }

    #radius-shape-2 {
      border-radius: 38% 62% 63% 37% / 70% 33% 67% 30%;
      bottom: -60px;
      right: -110px;
      width: 300px;
      height: 300px;
      background: radial-gradient(#44006b, #ad1fff);
      overflow: hidden;
    }

    .bg-glass {
      background-color: hsla(0, 0%, 100%, 0.9) !important;
      backdrop-filter: saturate(200%) blur(25px);
    }
  </style>

  <div class="container px-4 py-5 px-md-5 text-center text-lg-start my-5">
    <div class="row gx-lg-5 align-items-center mb-5">
      <div class="col-lg-6 mb-5 mb-lg-0" style="z-index: 10">
        <h1 class="my-5 display-5 fw-bold ls-tight" style="color: hsl(218, 81%, 95%)">
          The best offer <br />
          <span style="color: hsl(218, 81%, 75%)">for your business</span>
        </h1>
        <p class="mb-4 opacity-70" style="color: hsl(218, 81%, 85%)">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit.
          Temporibus, expedita iusto veniam atque, magni tempora mollitia
          dolorum consequatur nulla, neque debitis eos reprehenderit quasi
          ab ipsum nisi dolorem modi. Quos?
        </p>
      </div>

      <div class="col-lg-6 mb-5 mb-lg-0 position-relative">
        <div id="radius-shape-1" class="position-absolute rounded-circle shadow-5-strong"></div>
        <div id="radius-shape-2" class="position-absolute shadow-5-strong"></div>

        <div class="card bg-glass">
          <div class="card-body px-4 py-5 px-md-5">
            <form>
              <!-- 2 column grid layout with text inputs for the first and last names -->
              <div class="row">
                <div class="col-md-6 mb-4">
                  <div data-mdb-input-init class="form-outline">
                    <input type="text" id="form3Example1" class="form-control" />
                    <label class="form-label" for="form3Example1">First name</label>
                  </div>
                </div>
                <div class="col-md-6 mb-4">
                  <div data-mdb-input-init class="form-outline">
                    <input type="text" id="form3Example2" class="form-control" />
                    <label class="form-label" for="form3Example2">Last name</label>
                  </div>
                </div>
              </div>

              <!-- Email input -->
              <div data-mdb-input-init class="form-outline mb-4">
                <input type="email" id="form3Example3" class="form-control" />
                <label class="form-label" for="form3Example3">Email address</label>
              </div>

              <!-- Password input -->
              <div data-mdb-input-init class="form-outline mb-4">
                <input type="password" id="form3Example4" class="form-control" />
                <label class="form-label" for="form3Example4">Password</label>
              </div>

              <!-- Checkbox -->
              <div class="form-check d-flex justify-content-center mb-4">
                <input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
                <label class="form-check-label" for="form2Example33">
                  Subscribe to our newsletter
                </label>
              </div>

              <!-- Submit button -->
              <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">
                Sign up
              </button>

              <!-- Register buttons -->
              <div class="text-center">
                <p>or sign up with:</p>
                <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
                  <i class="fab fa-facebook-f"></i>
                </button>

                <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
                  <i class="fab fa-google"></i>
                </button>

                <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
                  <i class="fab fa-twitter"></i>
                </button>

                <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
                  <i class="fab fa-github"></i>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Section: Design Block -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<style type='text/css'>
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#000;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#0088ff;}
.random-summary{font-size:13px;color:999}
#random-posts li{margin:0;padding: 0px 0px 10px 0px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 0;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};
function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://2.bp.blogspot.com/-F1lTdmXTr0Y/VmpR_HBcVyI/AAAAAAAAGa8/a2_2T-p3AKM/s1600/bungfrangki_no_image_100.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"https://www.kurazone.net/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
<div class='clear'/>
</div>

<section class="search-bar sb2 section-space">
	<div class="container sb">
		<div class="col-md-8 center-block">
			!-- Search Form -->
			<form action="https://www.iholytech.com/cg/domainchecker.php" method="post">
			<!-- Search Field -->
				<div class="row fadesimple">
					<div  class="default-title">
						<h3 class="text-white">Search your Domain</h3>
					<div class="title-arrow1"></div>
						<p>Register your domain with in short time</p>
					</div>
					<div class="form-group">
						<div class="input-group">
							<input class="form-control bar" name="domain" type="text" placeholder="Enter your domain name" required="">
							<button class="btn button search-button btn-lg" type="submit"> Search Domain </button>
						</div>
						<div class="ltds clearfix">
							<div class="col-sm-3 col-xs-1 border-right1">
								<p class="blue">.com <span>$10.91</span></p>
							</div>
							<div class="col-sm-3 col-xs-1 border-right2">
								<p class="yellow">.org <span>$13.11</span></p>
							</div>
							<div class="col-sm-3 col-xs-1 border-right3">
								<p class="orange">.net <span>$14.95</span></p>
							</div>
							<div class="col-sm-3 col-xs-1 border-right4">
								<p class="green">.info <span>$15.32</span></p>
							</div>
						</div>
					</div>
				</div>
			</form>
			<!-- End of Search Form -->
		</div>
	</div>
</section>	

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minecraft Block Path Finder</title>
  <style>
      .minecraft-block-path-finder-main {
    background: none;
    display: block;
    padding: 0px 0px 0px 0px;
    font: bold 17px/30px Arial, Helvetica, sans-serif;
    min-width: 260px;
    margin: 50px auto 0px auto;
    border: none;
  }

  .minecraft-block-path-finder-main:after {
    content: "";
    clear: both;
  }

  .noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .minecraft-block-path-finder-card {
    padding: 1rem 2rem 1rem 2rem;
    height: 70px;
  }

  .minecraft-block-path-finder-cards {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }

  .minecraft-block-path-finder-card00 {
    padding: 1rem 2rem 1rem 2rem;
    height: 70px;
  }

  
  
  .minecraft-block-path-finder-cards00 {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .minecraft-block-path-finder-blocks {
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: block;
    padding: 10px 10px 10px 10px;
    margin: 10px 0px;
    border: none;
    text-align: center;
    min-height: 50px;
  }

  .minecraft-block-path-finder-click-blocks {
    background: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: block;
    padding: 10px 10px 10px 10px;
    margin: 10px 0px;
    border-width: 2px;
    border-style: solid;
    border-color: #108dc7;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 250px;
    color: #108dc7;
    position: relative !important;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .minecraft-block-path-finder-click-blocks::-webkit-scrollbar {
    display: none;
  }

  .minecraft-block-path-finder-click-blocks:hover {
    background: #24aded;
    color: white;
    text-shadow: 0px 0px 8px rgb(255, 230, 186), 0px 0px 22px rgb(255, 255, 255),
      0px -1px 0px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }

  .minecraft-block-path-finder-cmnd-button {
    transition: color 0.15s ease-in;
    font-size: 35px;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    color: white;
    cursor: pointer;
  }

  .minecraft-block-path-finder-reset-button:hover {
    color: #8d8c85;
    transition: color 0.3s ease-in;
    transition: color 0.3s ease-out;
  }

  .stepper_select {
    display: none;
  }
  
  .tool-input input[type="number"] {
    width: calc(100% - 2px); 
    height: 25px;
    border: none;
    border-radius: 0;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05);
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    line-height: 25px;
    outline: none;
}
  
.tool-input input[type="number"]::placeholder {
    color: #E6E6E6;
}


.tool-input input[type="number"]:focus {
    outline: none;
}

  .stepper-input {
    width: 100%;
    height: 25px;
    border: 0px;
    border-radius: 2px;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin: 0px 0px 5px 0px;
  }

  .stepper-input input {
    display: none;
  }

  .stepper-input .input {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .stepper-input .input :active {
    background: #24aded;
  }

  .stepper-input .input .range {
    overflow: hidden;
    text-align: center;
    flex: 1;
  }

  .stepper-input .input .range .list span {
    display: block;
    width: 100%;
    height: 25px;
    color: #ffffff;
    font-size: 18px;
    line-height: 25px;
  }

  .stepper_btn {
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    height: 100%;
    border-radius: 2px;
    color: #ffffff;
    font-size: 12px;
    line-height: 25px;
    cursor: pointer;
    border: none;
    transition: all 300ms ease-in-out;
    flex: 0.2;
    text-align: center;
  }

  .stepper_btn:active {
    transform: translateY(1px);
  }

  .disabledivclick {
    pointer-events: none;
  }

  .table-fixed {
    width: 100%;
    caption-side: bottom;
  }

  .table-fixed tbody {
    display: block;
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .table-fixed tbody::-webkit-scrollbar {
    display: none;
  }

  .table-fixed thead,
  .table-fixed tbody tr {
    display: table;
    width: 100%;
  }

  .table-fixed td,
  th {
    text-align: center;
    vertical-align: middle;
    width: 33%;
  }

  .table-fixed caption {
    margin-top: 20px;
  }

  .divparenttable {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #startlocations::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px; 
    background-color: #108dc7; 
    z-index: 1;
    margin: -20px 0;
}
  #startlocations::after {
    content: "Start Location";
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #24aded;
    padding: 0 10px; 
    z-index: 2;
    margin: -20px 0;
}
  #endlocations::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px; 
    background-color: #108dc7; 
    z-index: 1;
    margin: -20px 0;
}
  #endlocations::after {
    content: "End Location";
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #24aded;
    padding: 0 10px; 
    z-index: 2;
    margin: -20px 0;
}
	#startlocations,
#endlocations {
  position: relative;
}
  </style>
</head>
<body>
  <div class="minecraft-block-path-finder-main noselect">
    <div style="margin-top:30px; margin-bottom:10px;">
     
      <div id="startlocations" class="minecraft-block-path-finder-cards00">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
            <div class="tool-input">
              <input id="startX" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
          </div>
          <div style="margin-top:-5px; color : white;">X-Coordinate</div>
        </div>
  
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="startY" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Y-Coordinate</div>
        </div>
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="startZ" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Z-Coordinate</div>
        </div>
      </div>
      <div id="endlocations" class="minecraft-block-path-finder-cards00" style="margin: 50px 0px 0px 0px;">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
            <div class="tool-input">
              <input id="endX" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
          </div>
          <div style="margin-top:-5px; color : white;">X-Coordinate</div>
        </div>
  
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="endY" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Y-Coordinate</div>
        </div>
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="endZ" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Z-Coordinate</div>
        </div>
      </div>
      <div class="minecraft-block-path-finder-cards00">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="spacing" type="number" oninput="CalcUpdateOutput()" placeholder="enter value (set to 1 for solid walls/ramps)">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Block Spacing</div>
        </div>
      </div>
    </div>
    <div id="calc-console" oncontextmenu="return false;" class="divparenttable minecraft-block-path-finder-click-blocks ">
    </div>
  </div>
  <script src="script.js">
  	    let startX = parseInt(document.getElementById("startX").value);
        let startY = parseInt(document.getElementById("startY").value);
        let startZ = parseInt(document.getElementById("startZ").value);
        let endX = parseInt(document.getElementById("endX").value);
        let endY = parseInt(document.getElementById("endY").value);
        let endZ = parseInt(document.getElementById("endZ").value);
        let spacing = parseInt(document.getElementById("spacing").value);

  let debounceTimer;

function debounce(func, delay) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(func, delay);
}

function CalcUpdateOutput() {
    debounce(() => {
        let startX = parseInt(document.getElementById("startX").value);
        let startY = parseInt(document.getElementById("startY").value);
        let startZ = parseInt(document.getElementById("startZ").value);
        let endX = parseInt(document.getElementById("endX").value);
        let endY = parseInt(document.getElementById("endY").value);
        let endZ = parseInt(document.getElementById("endZ").value);
        let spacing = parseInt(document.getElementById("spacing").value);

        let calcConsole = document.getElementById("calc-console");
        let blockPositions = '';
        let hasMessage = false;

        if (isNaN(startX) || isNaN(startY) || isNaN(startZ) || isNaN(endX) || isNaN(endY) || isNaN(endZ) || isNaN(spacing)) {
            blockPositions = "Please enter all coordinates and spacing.";
            hasMessage = true;
        } else if (spacing < 1) {
            blockPositions = "Block spacing must be at least 1.";
            hasMessage = true;
        } else {
            let dx = Math.abs(endX - startX);
            let dy = Math.abs(endY - startY);
            let dz = Math.abs(endZ - startZ);
            let maxLength = Math.max(dx, dy, dz);
            let currentStep = 0;

            function calculateNextBlock() {
                if (currentStep <= maxLength) {
                    let x = Math.round(startX + currentStep * (endX - startX) / maxLength);
                    let y = Math.round(startY + currentStep * (endY - startY) / maxLength);
                    let z = Math.round(startZ + currentStep * (endZ - startZ) / maxLength);
                    blockPositions += `#${currentStep / spacing + 1}: ${x}, ${y}, ${z}<br>`;
                    calcConsole.innerHTML = blockPositions;
                    currentStep += spacing;
                    setTimeout(calculateNextBlock, 0);
                }
            }

            calculateNextBlock();
        }

        if (hasMessage) {
            calcConsole.innerHTML = blockPositions;
            calcConsole.classList.add("divparenttable");
        } else {
            calcConsole.classList.remove("divparenttable");
        }
    }, 300);
}

document.addEventListener("DOMContentLoaded", function(event) { CalcUpdateOutput(); });        
  </script>
</body>
</html>

<label for="tempB">Choose a comfortable temperature:</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="very cold!"></option>
  <option value="25" label="cool"></option>
  <option value="50" label="medium"></option>
  <option value="75" label="getting warm!"></option>
  <option value="100" label="hot!"></option>
</datalist>

<div class="enhanceable_content tabs" title="ingesloten inhoud">
    <ul style="list-style-type: none; padding: 0; margin: 0;">
        <li style="display: inline-block; background-color: red; padding: 10px 20px; border-radius: 10px;"><a style="text-decoration: none; color: white; font-family: 'Arial', sans-serif;" href="#fragment-1">Tabblad 1</a></li>
        <li style="display: inline-block; background-color: red; padding: 10px 20px; border-radius: 10px;"><a style="text-decoration: none; color: white; font-family: 'Arial', sans-serif;" href="#fragment-2">Tabblad 2</a></li>
        <li style="display: inline-block; background-color: red; padding: 10px 20px; border-radius: 10px;"><a style="text-decoration: none; color: white; font-family: 'Arial', sans-serif;" href="#fragment-3">Tabblad 3</a></li>
        <li style="display: inline-block; background-color: red; padding: 10px 20px; border-radius: 10px;"><a style="text-decoration: none; color: white; font-family: 'Arial', sans-serif;" href="#fragment-4">Tabblad 4</a></li>
        <li style="display: inline-block; background-color: red; padding: 10px 20px; border-radius: 10px;"><a style="text-decoration: none; color: white; font-family: 'Arial', sans-serif;" href="#fragment-5">Tabblad 5</a></li>
    </ul>
    <div id="fragment-1">
        <p>INHOUD 1</p>
    </div>
    <div id="fragment-2">
        <p>INHOUD 2</p>
    </div>
    <div id="fragment-3">
        <p>INHOUD 3</p>
    </div>
    <div id="fragment-4">
        <p>INHOUD 4</p>
    </div>
    <div id="fragment-5">
        <p>INHOUD 5</p>
    </div>
</div>

<div class="enhanceable_content tabs" title="ingesloten inhoud">
    <ul>
        <li><a href="#fragment-1">Regulier traject</a></li>
        <li><a href="#fragment-2">Afstandstraject</a></li>
    </ul>
    <div id="fragment-1">
        <p>INHOUD REGULIER TRAJECT</p>
    </div>
    <div id="fragment-2">
        <p>INHOUD AFSTANDSTRAJECT</p>
    </div>
</div>

//Groene knop (OLO)
<a href="HIER JOUW LINK" class="btn btn-large btn-primary" style="background-color: #5ab946;">Voorbeeld 1</a>
//Lichtgroen knop (OLO)
<a href="HIER JOUW LINK" class="btn btn-large btn-primary" style="background-color: #bfd200;">Voorbeeld 2</a>
//Donkergroene knop (OSO)
<a href="HIER JOUW LINK" class="btn btn-large btn-success" style="background-color: #008b00;">Voorbeeld 3</a>
//Oranje knop
<a href="HIER JOUW LINK" class="btn btn-large btn-warning" style="background-color: #f26a34;">Voorbeeld 4</a>
//Blauwe knop
<a href="HIER JOUW LINK" class="btn btn-large btn-primary">Voorbeeld 5</a>

@page
@model WebUI.Pages.Shared.ServitörVyModel

@{
    var swedishTimeZone = TimeZoneInfo.FindSystemTimeZoneById("Central European Standard Time");
    var nowSwedishTime = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, swedishTimeZone);
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Välj Bord</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/StyleFoodMenu.css" asp-append-version="true">

    <style>
        .table-button {
            width: 100%;
            margin-bottom: 20px;
            height: 60px;
        }

        .iframe-container {
            width: 100%;
            border: none;
            height: 400px;
        }
    </style>
</head>

<div class="container" style="display:flex; flex-direction:column;" >

    <button class="btn btn-warning" id="offcanvasbutton" style=" color:black;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

    <div id="accordion">
        <div class="card">
            
                    <button class="btn btn-warning" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Välj bord
                    </button>
             
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                    Välj bord

                    <select id="tableSelect" class="form-control">
                        @foreach (var table in Model.TablesProp)
                        {
                            <option value="@table.Number">@table.Number</option>
                        }
                    </select>

                    <button class="btn btn-success" id="confirmButton">Bekräfta </button>
                </div>
            </div>
        </div>
        <div class="card">

            <button class="btn btn-warning collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Beställning
            </button>

            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                <div class="card-body">
                    <button class="btn btn-success" id="orderButton">Ny Beställning </button>
                </div>
            </div>
        </div>
        <div class="card">
           
                    <button class="btn btn-warning collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Välj maträtt
                    </button>
                
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                <div class="card-body">
                    <div class="row special-list">
                        @if (Model.Foods != null)
                        {
                            foreach (var food in Model.Foods)
                            {
                                if ((food.PublishDate == null || food.PublishDate <= nowSwedishTime) &&
                                (food.RemoveDate == null || food.RemoveDate > nowSwedishTime))
                                {
                                    <div class="col-lg-4 col-md-6 special-grid menu-card" data-food-id="@food.Id"
                                         data-food-title="@food.Title" data-food-description="@food.Description"
                                         data-food-price="@food.Price" data-food-category="@food.Category"
                                         data-food-ingredients="@food.Ingredients">
                                        <div class="gallery-single fix">
                                            @if (!string.IsNullOrEmpty(food.ImagePath))
                                            {
                                                <img src="@Url.Content($"~/{food.ImagePath}")" class="img-fluid" alt="Bild av @food.Title">
                                            }
                                            <div class="why-text">
                                                @if (User.IsInRole("Admin") || User.IsInRole("Owner"))
                                                {
                                                    <div class="options-menu" style="display:none;">
                                                    </div>
                                                }
                                                <h4>@food.Title</h4>

                                                <button class="button btn-success add-to-cart" id="addtocart" data-food-id="@food.Id">Lägg till</button>
                                                <h5>@food.Price kr</h5>
                                            </div>
                                        </div>
                                    </div>
                                }
                            }
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<title>Offcanvas Button Example</title>
<!-- Include Bootstrap CSS -->

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body small" id="ordersContainer">
        
    </div>

    

</div>

<button class="btn-btn btn-success" id="confirmorder"> Bekräfta beställning </button>

<!-- Include Bootstrap JavaScript (popper.js and bootstrap.js are also required) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    document.getElementById('confirmButton').addEventListener('click', function () {
        // Get the selected table number
        var selectedTableNumber = document.getElementById('tableSelect').value;

        // Do something with the selected table number
        console.log('Selected table number:', selectedTableNumber);

        // You can perform further actions here, such as sending the selected table number to the server
        // using AJAX or submitting a form.
    });

    let orderId;
    let guest;
    let waiter;
    let date;
    let receit
    let status
    let table;


         //POST Order
        document.getElementById('orderButton').addEventListener('click', function () {
            // Prepare the order data

        const currentDate = new Date();
            const orderData = {
             table:document.getElementById('tableSelect').value
            };
            
            // Send the order data to the server using Fetch API
            fetch('/api/Order/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(orderData)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // Handle the response data if needed
                    console.log('Order created successfully:', data);
                    console.log('Order Id: ', data.id)
                    console.log('Order Guest: ', data.guest)
                    console.log('Order Table: ', data.table )
                    console.log('Order WaiterId: ', data.waiterId)
                    console.log('Order Date: ', data.date)
                    console.log('Order ReceitId: ', data.receitId)
                    console.log('Order Status: ', data.status)

                    date = order.date;
                    orderId = data.id;
                    guest = data.guest;
                    table = data.table;
                    waiter = data.waiterId;
                    receit = data.receitId;
                    status = data.status;

                    // You can redirect or show a success message here
                })
                .catch(error => {
                    console.error('There was a problem with your fetch operation:', error);
                    // Handle errors appropriately, e.g., show an error message to the user
                });
        });

    //POST OrderItem
    document.querySelectorAll('.add-to-cart').forEach(item => {
        item.addEventListener('click', function () {
            var foodId = $(this).data('food-id');
            var data = {
                FoodId: foodId,
                Quantity: 1,
                OrderId: orderId
            };

            fetch('/api/OrderItem/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // Handle success
                    console.log('Success:', data);
                })
                .catch(error => {
                    // Handle error
                    console.error('Error:', error);
                });
        });
    });


    //GET OrderItems
    function fetchOrders() {
        fetch(`/api/OrderItem/?columnName=orderid&columnValue=${orderId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // Work with the JSON data retrieved from the endpoint
                const ordersContainer = document.getElementById('ordersContainer');

                // Clear existing content
                ordersContainer.innerHTML = '';

                // Iterate over the data and append to the container
                data.forEach(order => {
                    const orderElement = document.createElement('div');
                    orderElement.textContent = `Quantity: ${order.quantity} FoodId:${order.foodId}, OrderId: ${order.orderId}`;
                    ordersContainer.appendChild(orderElement);
                });
            })
            console.log()
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
            });
    }



    document.getElementById('confirmorder').addEventListener('click', function () {


        const itemIdToUpdate = orderId; // Example item ID to update
        const updatedData = {
            id : orderId,
            guest : guest,
            table : table,
            waiterId : waiter,
            date : date,
            receitId : receit,
            confirmed : true,
            status : status
            // Example updated data for the item
            
            // Add other fields as needed
        };

        // Construct the URL targeting the specific item
        const url = `/api/Order/${itemIdToUpdate}`;

        // Prepare the request object
        const requestOptions = {
            method: 'PUT', // or 'PATCH' depending on the server's API
            headers: {
                'Content-Type': 'application/json', // Specify content type as JSON
                // Add any other headers if required
            },
            body: JSON.stringify(updatedData), // Convert data to JSON format
        };

        // Send the request
        fetch(url, requestOptions)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); // Parse response JSON if needed
            })
            .then(data => {
                // Handle successful response (if required)
                console.log('Item updated successfully:', data);
            })
            .catch(error => {
                // Handle errors
                console.error('There was a problem updating the item:', error);
            });

        

    });

    // Attach an event listener to the button
    const refreshButton = document.getElementById('addtocart');
    refreshButton.addEventListener('click', fetchOrders);
    const refreshButton2 = document.getElementById('offcanvasbutton');
    refreshButton2.addEventListener('click', fetchOrders);
</script>

"default-src 'none'; frame-src 'self'; frame-ancestors 'self'; connect-src 'self'; font-src 'self'; img-src 'self'; media-src 'self'; base-uri 'self'; object-src 'none'; script-src 'none'; style-src 'self'; mysite.com.au *.mysite.com.au"

<a href="{{ product.url }}"> 
  ...
</a>                

<html>
<body>
	<table border="0" cellspacing="0" cellpadding="0" width="703" style="width:527.25pt">
<tbody>
<tr>
<td width="40%" style="width:40.0%;padding:11.25pt 11.25pt 11.25pt 11.25pt">
<p style="margin-top:0;margin-bottom:0;"><span style="color:#2f5496"><img width="249" height="249" style="width:2.5937in;height:2.5937in" src="https://le-chiffre.be/wp-content/uploads/2024/02/Tatiana-LeChiffre-siganture-copie.png"  tabindex="0"><div style="opacity: 0.01; left: 216px; top: 384.932px;"></div></span></p>
</td>
<td width="40%" style="width:40.0%;padding:11.25pt 11.25pt 11.25pt 11.25pt">
<p style="margin-top:0;margin-bottom:0;"><strong><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:22.5pt;color:#0f3b5a">Tatiana Travieso Torres</span></strong></p>
<p style="margin-top:0;margin-bottom:0;"><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:13.5pt;color:#0f3b5a">Stagiaire Expert-comptable</span></p>
<p style="margin-top:0;margin-bottom:0;height:31px;"><span style="color:#2f5496"><img width="296" height="31" style="width:3.0833in;height:.3229in" src="https://le-chiffre.be/images_signature/new_10.jpg" ></span><span style="color:#2f5496"></span></p>
<p style="margin-top:0;margin-bottom:0;"><span style="color:#2f5496"><a href="https://le-chiffre.be" target="_blank"><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:13.5pt;color:#0f3b5a;text-decoration:none">www.le-chiffre.be</span></a></span></p>
<p style="margin-top:10px;margin-bottom:10px;"><span style="color:#2f5496"><a style="text-decoration: none;" href="tel:+32491735670" target="_blank"><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:13.5pt;color:#0f3b5a;text-decoration:none">+32 491 73 56 70</span></a></span></p>
<p style="margin-top:10px;margin-bottom:10px;"><span style="color:#2f5496"><a style="text-decoration: none;" href="https://goo.gl/maps/7HKJ2DkUjARxSSbw8" target="_blank"><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:13.5pt;color:#0f3b5a;text-decoration:none;">Rue de Goz&#233;e 596,<br> 6110 Montigny-Le-Tilleul</span></a></span></p>
<p style="margin-top:0;margin-bottom:0;"><a href="https://www.facebook.com/lechiffrecomptepourvous" target="_blank"><span style="text-decoration:none"><img border="0" width="27" height="25" style="width:.2812in;height:.2812in" src="https://le-chiffre.be/images_signature/new_17.jpg" ></span></a><a href="https://www.linkedin.com/in/tatiana-travieso-torres-04848712b/" target="_blank"><span style="text-decoration:none"><img border="0" width="26" height="25" style="width:.2708in;height:.2604in" src="https://le-chiffre.be/images_signature/new_18.jpg" ></span></a><span style="color:#2f5496"><img border="0" width="243" height="25" style="width:2.5312in;height:.2604in" src="https://le-chiffre.be/images_signature/new_19.jpg" ></span><span style="color:#2f5496"></span></p>
</td>
<td width="20%" style="width:20.0%;padding:11.25pt 11.25pt 11.25pt 11.25pt">
<p style="margin-top:0;margin-bottom:0;"><span style="color:#2f5496"><img border="0" width="76" height="34" style="width:.7916in;height:.3541in" src="https://le-chiffre.be/images_signature/new_06.jpg" ></span><span style="color:#2f5496"><img border="0" width="76" height="99" style="width:.7916in;height:1.0312in" src="https://le-chiffre.be/images_signature/new_09.jpg" ></span><span style="color:#2f5496"><img border="0" width="76" height="53" style="width:.7916in;height:.552in" src="https://le-chiffre.be/images_signature/new_16.jpg" ></span><span style="color:#2f5496"></span></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

<!--HTML Code-->
  
  <form id="contact_form" method="post">
    <div class="row">
        <div class="col-md-12 form-group g-mb-20">
            <input type="text" class="form-control" id="txtContactName" name="txtContactName" placeholder="Full Name" tabindex="201" required>
            <div class="error-message" id="txtContactName-error"></div>
        </div>

        <div class="col-md-12 form-group g-mb-20">
            <input type="email" class="form-control" id="txtContactEmail" name="txtContactEmail" placeholder="Email Address" tabindex="202" required>
            <div class="error-message" id="txtContactEmail-error"></div>
        </div>

        <div class="col-md-12 form-group g-mb-20">
            <input type="text" class="form-control" id="txtContactPhone" name="txtContactPhone" placeholder="Contact Number" maxlength="10" tabindex="203" required>
            <div class="error-message" id="txtContactPhone-error"></div>
        </div> 

        <div class="col-md-12 form-group g-mb-40">
            <textarea class="form-control" id="txtContactMessage" name="txtContactMessage" rows="7" placeholder="Message" maxlength="160" tabindex="204" required></textarea>
            <div class="error-message" id="txtContactMessage-error"></div>
        </div>
    </div>
    <input type="submit" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-default rounded-0 text-uppercase g-py-15 g-px-30" id="btnContactSubmit" name="btnContactSubmit" value="SUBMIT">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
	
</script>
<script>
    $(document).ready(function() {
        $('#contact_form').validate({
            rules: {
                txtContactName: "required",
                txtContactEmail: {
                    required: true,
                    email: true
                },
                txtContactPhone: {
                    required: true,
                    digits: true,
                    maxlength: 10
                },
                txtContactMessage: "required"
            },
            messages: {
                txtContactName: "Please enter your full name",
                txtContactEmail: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                },
                txtContactPhone: {
                    required: "Please enter your contact number",
                    digits: "Please enter only digits",
                    maxlength: "Please enter a valid 10-digit phone number"
                },
                txtContactMessage: "Please enter your message"
            },
            errorPlacement: function(error, element) {
                error.appendTo(element.closest('.form-group').find('.error-message'));
            },
            submitHandler: function(form) {
                var formData = $(form).serialize();
                $.ajax({
                    type: 'POST',
                    url: 'mail.php',
                    data: formData,
                    success: function(response) {
                        $('#contact_form').append('<div class="success-message" style="color: green;">Message sent successfully!</div>');
                        setTimeout(function() {
                            $('#contact_form')[0].reset();
                        }, 4000);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        alert('Error: ' + xhr.responseText);
                    }
                });
            }
        });
    });
</script>

PHP Miler folder should be there
Create folder name with mail.php and add below code there 
<?php
// Include PHPMailer autoload file

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

// Load Composer's autoloader
require 'phpmailer/vendor/autoload.php';

// Check if the form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Retrieve form data
    $name = $_POST['txtContactName'];
    $email = $_POST['txtContactEmail'];
    $phone = $_POST['txtContactPhone'];
    $message = $_POST['txtContactMessage'];

    // Initialize PHPMailer
    $mail = new PHPMailer(true);
    try {
        // SMTP settings
		$mail->IsSMTP();        // Sets Mailer to send message using SMTP
		$mail->SMTPAuth = true; // Authentication enabled
		$mail->SMTPSecure = 'tls'; // Secure transfer enabled REQUIRED for Gmail
		$mail->Host = 'smtp-relay.brevo.com';
		$mail->Port = 587;
		$mail->Username = 'advanceindiaprojectltd@gmail.com';
		$mail->Password = 'xsmtpsib-e66045ab99d2f28608d548ca33a5a3ac8cc14a6896d682cbdc5418c80154b5eb-6B5QJOyT18GvbzmZ';
		$mail->SMTPOptions = array(
			'ssl' => array(
				'verify_peer' => false,
				'verify_peer_name' => false,
				'allow_self_signed' => true
			)
		);

        // Recipients
        $mail->setFrom($email, $name);
        $mail->addAddress('roshan@teamvariance.com'); // Add recipient email address

        // Content
        $mail->isHTML(true);
        $mail->Subject = 'Contact Form Submission';
		// Construct HTML table for the email body
        $message = '
            <h3 align="center">Details</h3>
            <table border="1" width="100%" cellpadding="5" cellspacing="5">
                <tr>
                    <td width="30%">Name</td>
                    <td width="70%">' . $name . '</td>
                </tr> 
                <tr>
                    <td width="30%">Email</td>
                    <td width="70%">' . $email . '</td>
                </tr>
                <tr>
                    <td width="30%">Phone</td>
                    <td width="70%">' . $phone . '</td>
                </tr>
                <tr>
                    <td width="30%">Message</td>
                    <td width="70%">' . $message . '</td>
                </tr>
            </table>
        ';
        $mail->Body = $message;

        // Send email
        $mail->send();
        
        // Return success message
        echo "success";
    } catch (Exception $e) {
        // Return error message
        echo "error";
    }
}
?>

<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none">
<path d="M1 1.5L6 6.5L11 1.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

<input                       
    type="text" 
    placeholder="Start date" 
    class="px-2 py-1 text-sm rounded text-gray-800" 
    x-init="new Pikaday({ field: $el })"
    x-on:change="$wire.startDate = formatDateToYYYYMMDD(new Date($el.value))"
/>

add_action('rest_api_init', 'register_reset_password_route');

function register_reset_password_route() {
    register_rest_route('wp/v1', '/users/resetpassword', array(
        'methods' => 'POST',
        'callback' => 'reset_password_callback',
        'permission_callback' => '__return_true',
    ));
}

function reset_password_callback($request) {
    $user_data = $request->get_params();

    if (empty($user_data['email'])) {
        return new WP_REST_Response(array(
            'success' => false,
            'message' => 'البريد الإلكتروني مطلوب',
        ), 400);
    }

    $user = get_user_by('email', $user_data['email']);

    if (!$user) {
        return new WP_REST_Response(array(
            'success' => false,
            'message' => 'المستخدم غير موجود',
        ), 404);
    }

    $reset = wp_generate_password(12, false);

    $result = wp_set_password($reset, $user->ID);

    if (is_wp_error($result)) {
        return new WP_REST_Response(array(
            'success' => false,
            'message' => $result->get_error_message(),
        ), 500);
    } else {
        wp_mail($user->user_email, 'إعادة تعيين كلمة المرور', 'تمت إعادة تعيين كلمة مرورك بنجاح. كلمة مرورك الجديدة هي: ' . $reset);

        return new WP_REST_Response(array(
            'success' => true,
            'message' => 'تم إعادة تعيين كلمة المرور بنجاح. يرجى التحقق من بريدك الإلكتروني للحصول على كلمة المرور الجديدة.',
        ), 200);
    }
}

<div class="side-scroll-container container">
    <div class="side-scroll-list-wrapper">
        <ul class="side-scroll-list">
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
        </ul>
    </div>
    <ul class="side-scroll-status">
        <li class="side-scroll-status-item current"><span>1</span></li>
        <li class="side-scroll-status-item"><span>2</span></li>
        <li class="side-scroll-status-item"><span>3</span></li>
        <li class="side-scroll-status-item"><span>4</span></li>
        <li class="side-scroll-status-item"><span>5</span></li>
        <li class="side-scroll-status-item"><span>6</span></li>
        <li class="side-scroll-status-item"><span>7</span></li>
        <li class="side-scroll-status-item"><span>8</span></li>
        <li class="side-scroll-status-item"><span>9</span></li>
    </ul>
</div>

<div id="cursor">

  <div class="cursor__circle"></div>

</div>

​

<section>

  <div class="container">

    <div class="image-container" cursor-class="arrow">

      <img src="https://i.ibb.co/HDvyzVW/vase-2.jpg" alt="minimalist vase">

    </div>

  </div>

</section>

<div class="s_section">

  <div class="gutter">

    <h1>【SimpleBar】<br>スクロールバーを実装する<br>（横スクロール）</h1>

    <div class="scroll__inner" data-simplebar data-simplebar-auto-hide="false">

      <div class="f_area">

        <div class="f_one">

          <a href="https://5naroom.com/web/4" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt=""></a>
8
        </div>

        <div class="f_one">

          <a href="https://125naroom.com/web/44" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt=""></a>

        </div>
12
        <div class="f_one">

          <a href="https://125naroom.com/web/4184" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt=""></a>
14
        </div>

      </div>

    </div>

    <a href="https://125naroom.com/web/4184" target="_blank" class="_a">詳しくはこちら</a>
18
  </div>

</div>

<h4 id="gallery" class="anchor-link">
  Gallery
</h4>

<div class="p-ticker js-ticker">
    <div class="p-ticker__wrapper swiper-wrapper">
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
    </div>
</div>

/**
 * dateUtils
 * Format Date using php's format string.  Date to/From ymd. Get Today's date as ymd or Date, with no time.
 *
 * @type {{todayYMD: (function(): string), ymdToDate: (function(*): Date), is_ymd: ((function(*): boolean)|*), today: (function(): Date), format: ((function((Date|string|number), string=, string=): string)|*), dateToYMD: (function(*): string), dateToDay: (function(*): Date), setLanguage(*): ({shortMonth, shortDay, longMonth, longDay})}}
 */
const dateUtils = {
    version: "2024-02-22",

    dateToDay: function(date){return new Date((new Date(date)).setHours(0, 0, 0, 0) );
    },

    dateToYMD: function date(date) {return this.dateToDay(date).toISOString().split('T')[0];},

    today: function() {return new Date((new Date()).setHours(0, 0, 0, 0) );},

    todayYMD: function() {return this.today().toISOString().split('T')[0];},

    ymdToDate: function(ymd) {return ymd.length === 10 ? this.dateToDay(ymd) : new Date(ymd); },

    is_ymd: function(value, dateOnly = true) {
        if(value === null || !isNaN(value) || typeof value !== 'string')
            return false;
        if(dateOnly) {
            if(value.length !== 10)
                return false;
            const regex = /^\d\d\d\d[-.\\\/_](0[1-9]|1[0-2])[-.\\\/_](0[1-9]|[1-2][0-9]|3[0|1])$/gm;
            return value.match(regex) !== null;
        }
        if(value.length < 10 || value.length > 27)
            return false;
        const regex =
           /^\d\d\d\d[-.\\\/_](0[1-9]|1[0-2])[-.\\\/_](0[1-9]|[1-2][0-9]|3[0|1])($|([ T]([0-1]\d|2[0-4]):[0-5]\d:[0-5]\d))/gm;
        return value.match(regex) !== null;
    },

    /**
     * Formats a date according to the given format string in PHP style
     *
     * @param {Date|string|number} inputDate - The date to be formatted. Can be a Date object, a date string, or a timestamp.
     * @param {string} [formatPhpStyle="d/M/y"] - The format string to be used for formatting the date. Defaults to "d/M/y"
     *  https://www.php.net/manual/en/datetime.format.php.
     * @param {string} [language="en"] - Englinsh en, Spanish es
     * @returns {string} - The formatted date string.
     * @throws {Error} - If an error occurs during the formatting process.
     */
    format: function(inputDate, formatPhpStyle = "d/M/y", language = "en")  {
        let lang = this.setLanguage(language);
        if(inputDate === null)
            return "";
        try {
            function padZero(value) {return value < 10  ? `0${value}` : `${value}`;}
            let date;
            if(inputDate instanceof Date)
                date = inputDate;
            else if(typeof inputDate === 'object')
                return "[object]";
            else if(isNaN(inputDate))
                date = this.is_ymd(inputDate) ?
                    new Date(`${inputDate}T00:00:00`) : new Date(inputDate);
            else
                date = new Date(inputDate);

            const parts = {
                d: padZero(date.getDate()),
                j: date.getDate(),
                D: lang.shortDay[date.getDay()],
                l: lang.longDay[date.getDay()],
                w: date.getDay(),

                m: padZero(date.getMonth() + 1),
                n: date.getMonth() + 1,
                M: lang.shortMonth[date.getMonth()],
                F: lang.longMonth[date.getMonth()],

                Y: date.getFullYear(),
                y: date.getFullYear().toString().slice(-2),

                H: padZero(date.getHours()),
                G: date.getHours(),
                h: padZero(date.getHours() > 12 ? date.getHours() - 12 : date.getHours()),
                g: date.getHours() > 12 ? date.getHours() - 12 : date.getHours(),
                i: padZero(date.getMinutes()),
                s: padZero(date.getSeconds()),

                a: date.getHours() < 12 ? 'am' : 'pm',
                A: date.getHours() < 12 ? 'AM' : 'PM',
            };

            let skip = false;
            let ret = [];
            for(let i = 0, len = formatPhpStyle.length; i < len; ++i) {
                let c = formatPhpStyle[i];
                if(c === "\\") {
                    skip = true;
                    continue;
                }
                if(skip) {
                    skip = false;
                    ret.push(c);
                    continue;
                }
                ret.push(parts.hasOwnProperty(c) ? parts[c] : c);
            }
            return ret.join("");
        } catch(error) {
            console.log("ERROR: fmt.date arguments:", arguments);
            console.log("       fmt.date error:", error);
            return inputDate;
        }
    },

    setLanguage(language) {
        switch(language.toLowerCase()) {
            case 'es':
                return {
                    longMonth: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto',
                        'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    shortMonth: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    longDay: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    shortDay: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
                };
            case 'en':
            default:
                return {
                    longMonth: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
                        'October', 'November', 'December'],
                    shortMonth: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    longDay: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                    shortDay: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                };
        }
    },

};

try {history.replaceState({content: document.title}, document.title, document.location.href);} catch(e) {}

/** Vanilla javascript **/

    // Get the value of the checked radio button, undefined on not checked or not found
   let radioButtonValue = (document.querySelector("input[name='radioName']:checked") || {}).value || undefined

    // Check radio button with value ...
    (document.querySelector("input[name='radioName'][value='A']") || {}).checked=true;

/** jQuery **/

    // Get the value of the checked radio button, undefined on not checked or not found
   let radioButtonValue = $("input[name='radioName']:checked").val();

    // Check radio button with value ...
   $("input[name='radioName'][value='A']").prop('checked',true);

<style> 
  INPUT:checked + label {color: #00F;} 
</style>

<input id="theId" type="checkbox"><label for="theId"> The cat is here</label> 
<fieldset style="width:fit-content"><legend>Where is the Cat?</legend>
	<input id="cat_garden" name="cat_where" type="radio"><label for="cat_garden"> Garden</label> 
	<input id="cat_bed" name="cat_where" type="radio"><label for="cat_bed"> Bed</label> 
	<input id="cat_cushion" name="cat_where" type="radio"><label for="cat_cushion"> Cushion</label> 
</fieldset>

 //HTML





<div class="custom-mouse"></div>





//CSS


.custom-mouse{
    border: none;
    background-color: #fff;
    transform: translate(-50%, -100%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 0;
}



//JS


let customMouse = document.querySelector(".custom-mouse");
window.addEventListener("mousemove", function(details) {
   let xValue = details.clientX;
   let yValue = details.clientY;

   setTimeout(() => {
       customMouse.style.top = `${yValue}px`;
       customMouse.style.left = `${xValue}px`;
         
   }, 100);


});

 
HTML

 <nav>
      <ul>
          <li class="item">Home</li>
          <li class="item">Content</li>
          <li class="item">About</li>
          <li class="item">Contact Us</li>

      </ul>
  </nav>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="script.js"></script>


CSS


body{
    background-color: #fff;
    overflow: hidden;
}
.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.item{
    color: grey;
    font-size: large;
    font-weight: bolder;
    cursor: pointer;
}


JS


let itemList = document.querySelectorAll(".item");


itemList.forEach(function (item, index) {

    let animation = gsap.to(item, {color: "black",x:3,y: -3, ease: "", duration:0.3, paused:true  })
    
    item.addEventListener("mouseenter", function() {
        animation.play()
    })
    item.addEventListener("mouseleave", function() {
        animation.reverse()
    })
})

var number;
Console.WriteLine("Enter a number:");
number = Convert.ToInt32(Console.ReadLine());
if (IsPrime(number))
{
    Console.WriteLine("**" + number + " is a prime number**");
}
else
{
    Console.WriteLine("**" + number + " is not a prime number**");
}

public static bool IsPrime(int number)
{
    if (number <= 1) return false;
    if (number == 2) return true;
    if (number % 2 == 0) return false;
    var boundary = (int)Math.Floor(Math.Sqrt(number));
    for (int i = 3; i <= boundary; i += 2)
        if (number % i == 0)
            return false;
    return true;
}

Clear-Site-Data: "cache", "cookies", "storage"

Here's a guide on how to start developing poker software, outlining key steps and code structure:

1. Define the Scope of Your Project:

    Game Variants: Choose which poker variants you'll include (e.g., Texas Hold'em, Omaha, 5-Card Draw).
    Features: Decide on essential features like player accounts, gameplay, betting, tournaments, chat, and multi-platform compatibility.
    Target Platforms: Determine if you're developing for web, desktop, mobile, or a combination.

2. Choose Your Programming Language and Development Environment:

    Common Languages: Python, Java, C++, C#, and JavaScript are popular choices for game development.
    Development Environments: Select an IDE (Integrated Development Environment) like Visual Studio Code, PyCharm, or Eclipse for efficient coding.

3. Structure Your Code:

    Classes: Create classes for representing cards, decks, hands, players, game tables, and the game logic itself.
    Functions: Write functions to handle shuffling, dealing, betting, evaluating hands, and managing game flow.

4. Implement Core Functionalities:

    Card Deck: Create a class to represent a deck of cards, with methods for shuffling and dealing cards.
    Player Hand: Implement a class to hold a player's hand, with methods for evaluating hand strength.
    Game Logic: Write the core game logic, including betting rounds, hand comparisons, and pot management.

5. Design the User Interface (UI):

    Visual Design: Create visually appealing UI elements using graphics libraries or frameworks.
    User Interaction: Implement intuitive controls for players to interact with the game.

6. Test Thoroughly:

    Unit Testing: Test individual code units to ensure they function as intended.
    Integration Testing: Verify that different parts of the code work together seamlessly.
    User Testing: Gather feedback from real users to identify bugs and areas for improvement.

7. Deploy and Maintain:

    Deployment: Make your poker software available to users on your chosen platforms.
    Maintenance: Address any bugs or issues, and update the software with new features or improvements over time.

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<div id="container" style="--n:5;--d:5s">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div id="container" style="--n:9">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<div id="container" style="--n:5;--d:5s">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div id="container" style="--n:9">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

curl --resolve "redditclone.com:80:<IP of Ingress>" redditclone.com

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-reddit-app
spec:
  rules:
  - host: "domain.com"
    http:
      paths:
      - pathType: Prefix
        path: "/test"
        backend:
          service:
            name: reddit-clone-service
            port:
              number: 3000
  - host: "*.domain.com"
    http:
      paths:
      - pathType: Prefix
        path: "/test"
        backend:
          service:
            name: reddit-clone-service
            port:
              number: 3000

apiVersion: v1
# Indicates this as a service
kind: Service
metadata:
  # Service name
  name: reddit-clone-service
spec:
  selector:
    # Selector for Pods
    app: reddit-clone
  ports:
    # Port Map
  - port: 3000
    targetPort: 3000
    protocol: TCP
  type: LoadBalancer

apiVersion: apps/v1
kind: Deployment
metadata:
  name: reddit-clone-deployment
  labels:
    app: reddit-clone
spec:
  replicas: 2
  selector:
    matchLabels:
      app: reddit-clone
  template:
    metadata:
      labels:
        app: reddit-clone
    spec:
      containers:
      - name: reddit-clone
        image: rohanrustagi18/redditclone
        ports:
        - containerPort: 3000

docker build . -t <username> /reddit-clone:latest

FROM node:19-alpine3.15

WORKDIR /reddit-clone

COPY . /reddit-clone
RUN npm install 

EXPOSE 3000
CMD ["npm","run","dev"]

def is_prime(n):
    
    # Assume the number is prime and try to find counterexamples
    flag = True

    # Deal with special cases
    if n == 0 or n == 1:
        flag = False
    
    # Loop through all numbers between 2 and n - 1, and check if n is NOT prime
    i = 2
    while i < n:
        if n % i == 0:
            flag = False
        i = i + 1
    
    # Output the current value of flag
    return flag

<div class="hero-video text-center">
  <div class="video"><a data-docid="{{ YouTube ID }}" data-toggle="modal" data-modal-type="youtube" href="#mcui-modal"
      aria-label="Watch the Video" class="js-cta">
      <div class="img-wrapper">
        <div class="play-button play-button-wrapper col-12 col-sm-12 col-md-4 col-lg-5 p-0 order-lg-2 order-1">
          <span>Play</span>
          <svg fill="none" viewBox="0 0 7 10" height="10" width="7" xmlns="http://www.w3.org/2000/svg"><path d="M7 5L0.25 9.33013L0.25 0.669872L7 5Z"></path></svg>
        </div><img src="{{ video thumbnail URL }}" height="380" width="540" class="img-fluid" />
      </div>
    </a>
  </div>
</div>

/ip2location 8.8.8.8

/ip2location 8.8.8.8

<wbr>

<div class=" w-full h-screen p-4">

    <div class="h-14 w-full bg-slate-100 rounded-md font-semibold text-gray-800 flex items-center text-center px-2 transition-colors">
        <div class=" basis-1/3 rounded-md bg-white py-2 shadow-sm">New Items</div>
        <div class=" basis-1/3 rounded-md ">Return Items</div>
        <div class=" basis-1/3 rounded-md ">Issue Items</div>
    </div>

</div>

//HTML

<div id="progress-bar"></div>



//CSS

#progress-bar {
  height: 5px;
  background-color: grey;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}




//JS

const progressBar = document.getElementById('progress-bar');

window.addEventListener('scroll', function() {
  const scrollTop = window.scrollY;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = scrollTop / (documentHeight - windowHeight);
  progressBar.style.width = `${progress * 100}%`;
});

<object data="{{ $url }}" width="100%" height="100%">
      <embed src="{{ $url }}" width="100%" height="100%"></embed>
      Error: Embedded data could not be displayed.
</object>

sudo chmod 666 /var/run/docker.sock

ls -l /lib/systemd/system/docker.socket

sudo chgrp docker /lib/systemd/system/docker.socket

sudo chmod g+w /lib/systemd/system/docker.socket

pipeline {
    agent { label 'dev' }
    stages {
        stage('Code') {
            steps {
                git url: 'https://github.com/ishwarshinde041/node-todo-cicd.git', branch: 'master'
            }
        }
        stage('Build') {
            steps {
                sh 'docker build . -t node-app-new'
            }
        }
        stage('Deploy') {
            steps {
                 sh "docker-compose down && docker-compose up -d"
            }
        }
    }
}

pipeline {
    agent any
    stages {
        stage('Code') {
            steps {
                git url: 'https://github.com/ishwarshinde041/node-todo-cicd.git', branch: 'master'
            }
        }
        stage('Build') {
            steps {
                sh 'docker build . -t node-todo-app-new'
            }
        }
        stage ('Deploy') {
            steps {
                sh 'docker run -d -p 8000:8000 node-todo-app-new:latest'
            }
        }
    }
}

pipeline {
    agent any
    stages {
        stage('Code') {
            steps {
                git url: 'https://github.com/ishwarshinde041/node-todo-cicd.git', branch: 'master'
            }
        }
        stage('Build') {
            steps {
                sh 'docker build . -t node-todo-app-new'
            }
        }
        stage ('Deploy') {
            steps {
                sh 'docker run -d -p 8000:8000 node-todo-app-new:latest'
            }
        }
    }
}

sudo usermod -aG docker jenkins
sudo reboot

pipeline {
    agent any
    stages {
        stage('Code') {
            steps {
                git url: 'https://github.com/ishwarshinde041/node-todo-cicd.git', branch: 'master'
            }
        }
        stage('Build') {
            steps {
                sh 'docker build . -t node-app-new'
            }
        }
        stage('Deploy') {
            steps {
                sh sh "docker-compose down && docker-compose up -d"
            }
        }
    }
}

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                //
            }
        }
        stage('Test') {
            steps {
                //
            }
        }
        stage('Deploy') {
            steps {
                //
            }
        }
    }
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>flex yapı</title>
	<style type="text/css">
		.container{
			margin: auto;
			display: flex;
			width: 80%;
			flex-direction: column;
			height: 80%;
			position: relative;

		}
		.header{
			text-align: center;
			background-color: pink;
			width: 100%;
			border: 1px solid black;
			height: 25vh;
			margin-bottom: 5px;
		}
		.middleContainer{
			display:flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}
		.box{
			width: 30%;
			height: 25vh;
			background-image: url(https://r.resimlink.com/fe0sC.png);
			margin-bottom: 2px;
		}
		.footer{
			text-align: center;
			background-color: whitesmoke;
			width: 100%;
			border: 1px solid black;
			height: 15vh;
			margin-bottom: 5px;
			background-image: url(https://r.resimlink.com/KIZis6lGL.png);
		}
		
        .metin2 {
           position: absolute;
           top: 85%;
           left: 32%;
        }
        .deneme{
        	background-image: url(https://r.resimlink.com/WfpQin-wy4Y.png);
        }
        .başlık{
        	background-image: url(https://r.resimlink.com/KIZis6lGL.png);
        }
        .metin3 {
           position: absolute;
           top: 92%;
           left: 32%;  
        }
        .metin4 {
           position: absolute;
           top: 92%;
           left: 53%;  
        }
        .font{
        	position: absolute;
            top: 10%;
            left: 26%;
        	font-size:70px;
        	font-weight: bolder;
        	font-style: Math Sans Bold;
        }
	</style>
 
</head>
<body background="https://r.resimlink.com/rfYMb.png">

    <div class="container">
    	<div class="header">
    		  <div class="başlık" style="height: 100%; width: 100%;">
        <div class="font"><a>KAMP MALZEMELERİ</a></div>
        <a href="https://r.resimlink.com/sGwEMYp9.png">→ site logosu ←</a>
        </div>
    	</div>
    	<div class="middleContainer">
    		<div class="box"><img src="çadır.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="lamba.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="sandalye.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="bıçak.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="ocak.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="masa.png" style="height: 100%; width: 100%;"></div>
        </div>
        <div class="footer"><img src="çerçeve.png" style="height: 100%; width: 100%;"></div>
        <div class="metin2"><a style="font-size:32px" href="https://www.youtube.com/@efeturda6627">→ YOUTUBE ←</a></div>
        <div class="metin3"><a style="font-size:32px" href="mailto:omerfaruksevci1726@gmail.com">→ GMAİL İÇİN ←</a></div>
        <div class="metin4"><a style="font-size:32px" href="https://www.instagram.com/umraniye75cmtal/">→ İNSTAGRAM  ←</a></div>
    </div>
</body>
</html>

<?php

	class GPSSimulation {
		private $conn;
		private $hst = null;
		private $db = null;
		private $usr = null;
		private $pwd = null;
		private $gpsdata = [];
			
		//////////////////////// PRIVATE
		
		private function fillDataTable() {
			$this->initializeDatabase();
			
			$add = $this->conn->prepare("INSERT INTO gpsmsg(dom, wagon, x, y) 
										       VALUES(?, ?, ?, ?)");
			
			
			// voorkom dubbele entries in de database.
			// als satelliet, datum, x en y al voorkomen in de tabel
			// kun je vaststellen dat de huifkar tijdelijk stilstaat
			// voor pauze, lunch of restaurantbezoek
			// en is een nieuwe entry niet nodig.
			$doesRecordExist = $this->conn->prepare(
				"SELECT COUNT(*) FROM gpsmsg 
			     WHERE dom = ? AND wagon = ? AND x = ? AND y = ?"
			);
			
			foreach($this->gpsdata as $ins) {
				
				list($dom, $wagon, $x, $y) = $ins;

				$doesRecordExist->execute([$dom, $wagon, $x, $y]);

				if($doesRecordExist->fetchColumn() == 0) {
					$add->execute([$dom, $wagon, $x, $y]);
				} 
			}
    	}
		
		private function initializeDatabase() {
			$this->conn->query("TRUNCATE TABLE gpsmsg");
			
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      100, 100];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      150, 150];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      230, 310];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",       80, 245];		    
			
			// test dubbelen, worden niet opgenomen in de database
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      100, 100];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      150, 150];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      230, 310];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",       80, 245];		    
					
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",       10,  54];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",       75, 194];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      175, 161];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      134, 280];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      300, 160];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      400, 290];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      544, 222];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      444, 122];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      321,  60];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      200,  88];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",       25,  25];

		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",       50,  50];
		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",      300, 188];
		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",      225,  90];			    
			
			// test dubbelen, worden niet opgenomen in de database
			$this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",       50,  50];
		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",      300, 188];
		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",      225,  90];		    
			
			$this->gpsdata[] = ["2023-10-05", "Red Lobster",          50,  50];
		    $this->gpsdata[] = ["2023-10-05", "Red Lobster",         190, 288];
		    $this->gpsdata[] = ["2023-10-05", "Red Lobster",         260, 122];
		    $this->gpsdata[] = ["2023-10-05", "Red Lobster",         340,  90];
		    $this->gpsdata[] = ["2023-10-05", "Red Lobster",         240,  45];
		}
		
		//////////////////////// PUBLIC

		public function __construct($phst, $pdb, $pusr, $ppwd, $refresh = false) {
			$this->hst = $phst;	// bewaar de verbindingsgegevens
			$this->db  = $pdb;
			$this->hst = $pusr;
			$this->pwd = $ppwd;
			
			$this->conn = new PDO("mysql:host=$phst;dbname=$pdb", $pusr, $ppwd);
			
			if($refresh) $this->fillDataTable();
		}
	
		public function getDataRaw($wagname = null) {
        
			$sql = "SELECT * FROM gpsmsg ";
		
			if($satnm != null) {
				$sql .= "WHERE wagon = :wag";
		
				$stmt = $this->conn->prepare($sql);
        		$stmt->execute([":wag" => $wagname]);
			} else {
				$stmt = $this->conn->query($sql);
			}

			$s = "<table border='1' cellspacing='5' cellpadding='5'>";
        	$s .= "\r<tr><td>Date</td><td>Wagon</td><td>X</td><td>Y</td><tr>";
        	while ($row = $stmt->fetch(PDO::FETCH_OBJ)) {
            	$s .= "\r<tr>"
					."<td>{$row->dom}</td>"
			  	 	."<td>{$row->wagon}</td>"
				 	."<td>{$row->x}</td>"
				 	."<td>{$row->y}</td>"
				 	."</tr>";
        	}
        	$s .= "\r</table><br>";

        	return $s;
    	}

		public function getTraject() {
	
			$stmt = $this->conn->query("SELECT * FROM gpsmsg ");

			$dta = [];
        	while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
				$dta[] = [ 
					"dom"   => $row->dom, 
					"wagon" => $row->wagon, 
					"x"     => $row->x, 
					"y"     => $row->y 
				];
        	}

			return $dta;
    	}

		public function createSelectbox() {
		
			$stmt = $this->conn->query("SELECT DISTINCT wagon FROM gpsmsg");
			$s = "<div id='pleaseChooseWagon'><strong>Wagon</strong>";
			$s .= "<select name='selWagon' id='selWagon' "
			   ."onchange='getWagonSelected(this)'>";
			$s .= "<option value='0'>-- choose wagon --</option>";

			while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
				$s .= "<option value='{$row->wagon}'>{$row->wagon}</option>";
			}
			$s .= "</select></div>";

			return $s;
		}

	}  // einde class GPSSimulation

* {
	font-family: "Lucida Console", "Courier New", monospace;
}

html {
	background: #eee;
	background-image: linear-gradient(#eee, #888);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
}

canvas {
	background: url(achtergrond.jpg);
	background-size: cover;
	padding: 0;
	display: block;
	width: 660px;
	height: 350px;
	margin: 1cm auto;
	border: 5px solid #800;
}

select,
option {
	font-size: 1.2em;
}

#pleaseChooseWagon {
	width: 200px;
	display: block;
	margin: 1cm auto;
}

<?php
// error_reporting(E_ALL);
// ini_set("display_errors", 1);

require('gpssimulation.class.php');
?>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GPS SIMULATION</title>
	<link rel="icon" href="data:,">
	<link rel="stylesheet" href="gpsstyle.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
	<style>
		body {
			font-family: Rubik, sans-serif;
		}
		
		select,
		option {
			font-size: 1.2em;
			font-family: Spectral, serif;
		}
	</style>
</head>

<body>

	<?php

	$gps = new GPSSimulation('localhost', 'gps', 'root', 'root', true); // true=refresh

	echo $gps->createSelectbox();
	echo "<hr>";

	?>
	<canvas id="myCanvas" width="660" height="350"></canvas>

	<script>
		const canvas = document.getElementById("myCanvas");
		const ctx = canvas.getContext("2d");

		function processWagonData(whichWagon) {
			ctx.clearRect(0, 0, 660, 350);
			ctx.moveTo(0, 0);
			ctx.beginPath();

			let locationData = <?php echo json_encode($gps->getTraject()); ?>;
			console.log(locationData);
			let teller = 1;

			ctx.fillStyle = "black"; // toon welke satelliet
			ctx.font = "16px Arial";
			ctx.fillText(whichWagon, canvas.width-120, 18);

			locationData.forEach((elm) => {
				if (elm.wagon === whichWagon) {
					ctx.fillStyle = "green";
					ctx.setLineDash([5, 5]);
					ctx.lineTo(elm.x, elm.y);
					ctx.stroke();

					ctx.fillStyle = "black";
					ctx.font = "11px Arial";
					ctx.fillText("(" + elm.x + "," + elm.y + ") / " + (teller++),
						elm.x - 8, elm.y + 14);

					ctx.beginPath();
					ctx.fillStyle = "red";
					ctx.arc(elm.x - 2, elm.y - 2, 5, 0, 2 * Math.PI, false);
					ctx.fill();
				}
			});
		}

		function getWagonSelected(whichOne) {
			let selvalue = document.getElementById(whichOne.name).value;

			if (selvalue != 0) {
				processWagonData(selvalue);
			}
		}

		let selectedWagon = 'Old Faithful'; // start met deze
		processWagonData(selectedWagon); // laat eventueel weg, dan lege select
	</script>
</body>

</html>

$ docker run –d –p 8000:8000 todo-node-app:latest

docker build . -t todo-node-app 
docker run –d –p 8000:8000 todo-node-app:latest

FROM node:12.2.0-alpine
WORKDIR app
COPY . .
RUN npm install
RUN npm run test
EXPOSE 8000
CMD ["node","app.js"]

sudo apt install docker.io

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top" alt="Skyscrapers"/>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="card-group">
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This content is a little bit longer.
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This card has even longer content than the first to show
        that equal height action.
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

<div class="card-group">
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This content is a little bit longer.
      </p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This card has even longer content than the first to show
        that equal height action.
      </p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/062.webp" class="card-img-top" alt="Chicago Skyscrapers"/>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-light list-group-small">
    <li class="list-group-item px-4">Cras justo odio</li>
    <li class="list-group-item px-4">Dapibus ac facilisis in</li>
    <li class="list-group-item px-4">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

<!DOCTYPE html>
<!-- Created By TopArchives - www.toparchives.us -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Navbar | TopArchives</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <nav>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">TopArchives</label>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>
    <section></section>
  </body>
</html>
<!-- DON'T REMOVE CREDITS -->

<div class="subscribe-wrapper text-center snipcss-EMUGA">
  <h2 class="title">
    Subscribe to Our 
  </h2>
  <p>
    Follow our newsletter to learn more about peace and building a community connection. Stay up to date on various PLC workshops and events. Programs Available to All. Join Us Today. Located in Eagle Creek. We Can Help. Courses: Peace Learning Center, Creating Change.
  </p>
  <form class="subscribe-form mt-4" action="" method="post" id="subscribe">
    <input type="hidden" name="_token" value="McvBWd5pNNin8Ix9Hy2VHnAtxehRNZ8TRznhSNk2" autocomplete="off">
    <input type="email" required="" name="email" class="form-control email" placeholder="Enter email address" autocomplete="off" id="email">
    <button type="submit" class="subscribe-btn">
      Subscribe Now 
      <i class="far fa-paper-plane ms-2">
      </i>
    </button>
  </form>
</div>

<iframe src="https://www.thiscodeworks.com/embed/654605d94b9db40013d5293f" style="width: 100%; height: 1217px;" frameborder="0"></iframe>

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function helloworld(){
            document.write("hello world");
        }
    </script>
    <form>
        <input type="submit" onclick = helloworld()>
    </form>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateform(){
            var name=document.getElementById("name").value;
            var roll=document.getElementById("roll").value;
            if(name==="" || roll===""){
                alert("name and roll required");
                return false
            }
            return true;
            
        }
    </script>

</head>
<body>
    <form >
        <label for ="name">Name</label>
        <input type="txt" id="name">
        <label for ="roll" >roll</label>
        <input type="number" id ="roll">
        <input type="submit"onclick=validateform());
    </form>
    
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <style>
    body {
      background-color: #b0ca9e;
      font-size: 16px;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    form {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background-color: #4caf50;
      color: #fff;
      cursor: pointer;
    }
  </style>
  <script>
    function validateForm() {
      var name = document.forms["registrationForm"]["name"].value;
      var username = document.forms["registrationForm"]["username"].value;
      var password = document.forms["registrationForm"]["password"].value;
      var confirmPassword = document.forms["registrationForm"]["confirmPassword"].value;

      if (name === "" || username === "" || password === "" || confirmPassword === "") {
        alert("All fields must be filled out");
        return false;
      }

      if (username.length < 6) {
        alert("Username should be at least 6 characters");
        return false;
      }

      if (password !== confirmPassword) {
        alert("Passwords do not match");
        return false;
      }

      return true;
    }
  </script>
</head>
<body>
  <form name="registrationForm" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required>

    <input type="submit" value="Register">
  </form>
</body>
</html>

docker run -d --network none my_container_image

docker run -d --network my_macvlan_network --name my_container my_image

docker network create -d macvlan --subnet=192.168.1.0/24 -o parent=eth0 my_macvlan_network

docker run -d --network my_ipvlan_network --name my_container my_image

docker network create -d ipvlan --subnet=192.168.1.0/24 -o parent=eth0 my_ipvlan_network

docker service create --name my_service --network my_overlay_network my_image

docker network create --driver overlay my_overlay_network

docker run -d --network host my_container_image

docker network rm my_custom_network

docker run -d --network my_custom_network --name container1 nginx

docker network create my_custom_network

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB TITLE</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- FONT AWESOME -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- MATERIAL ICON -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
    <!-- AOS LINK -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>


    <!-- WEB CONTENTS GOES HERE -->
    
    

    <!-- JAVASCRIPT -->
    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
      </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Snippet</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- MATERIAL ICON -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
    <!-- AOS LINK -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
    

    <!-- JAVASCRIPT -->
    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
      </script>
</body>
</html>

echo "Code Cloned..."

docker-compose down

docker-compose up -d --no-dep --build web

echo "Code build and Deployed..."

Console Output
Started by user Ishwar Shinde
Running as SYSTEM
Building in workspace /var/lib/jenkins/workspace/django-todo-app-delivery
The recommended git tool is: NONE
No credentials specified
> git rev-parse --resolve-git-dir /var/lib/jenkins/workspace/django-todo-app-delivery/.git # timeout=10
Fetching changes from the remote Git repository
> git config remote.origin.url https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git # timeout=10
Fetching upstream changes from https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git
> git --version # timeout=10
> git --version # 'git version 2.34.1'
> git fetch --tags --force --progress -- https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git +refs/heads/*:refs/remotes/origin/* # timeout=10
> git rev-parse refs/remotes/origin/main^{commit} # timeout=10
Checking out Revision c2dca3f30890792a3f6eb6078f05f4d886b40129 (refs/remotes/origin/main)
> git config core.sparsecheckout # timeout=10
> git checkout -f c2dca3f30890792a3f6eb6078f05f4d886b40129 # timeout=10
Commit message: "Update index.html"
> git rev-list --no-walk c2dca3f30890792a3f6eb6078f05f4d886b40129 # timeout=10
[django-todo-app-delivery] $ /bin/sh -xe /tmp/jenkins4033466684745059068.sh
+ echo Code cloned...
Code cloned...
+ docker build . -t django-app
Sending build context to Docker daemon   2.67MB

Step 1/6 : FROM python:3.9
3.9: Pulling from library/python
de4cac68b616: Pulling fs layer
d31b0195ec5f: Pulling fs layer
9b1fd34c30b7: Pulling fs layer
c485c4ba3831: Pulling fs layer
9c94b131279a: Pulling fs layer
863530a48f51: Pulling fs layer
6738828c119e: Pulling fs layer
d271c014c3a0: Pulling fs layer
c485c4ba3831: Waiting
9c94b131279a: Waiting
863530a48f51: Waiting
6738828c119e: Waiting
d271c014c3a0: Waiting
d31b0195ec5f: Verifying Checksum
d31b0195ec5f: Download complete
de4cac68b616: Verifying Checksum
de4cac68b616: Download complete
9b1fd34c30b7: Verifying Checksum
9b1fd34c30b7: Download complete
9c94b131279a: Verifying Checksum
9c94b131279a: Download complete
863530a48f51: Verifying Checksum
863530a48f51: Download complete
6738828c119e: Verifying Checksum
6738828c119e: Download complete
d271c014c3a0: Verifying Checksum
d271c014c3a0: Download complete
c485c4ba3831: Verifying Checksum
c485c4ba3831: Download complete
de4cac68b616: Pull complete
d31b0195ec5f: Pull complete
9b1fd34c30b7: Pull complete
c485c4ba3831: Pull complete
9c94b131279a: Pull complete
863530a48f51: Pull complete
6738828c119e: Pull complete
d271c014c3a0: Pull complete
Digest: sha256:9bae2a5ce72f326c8136d517ade0e9b18080625fb3ba7ec10002e0dc99bc4a70
Status: Downloaded newer image for python:3.9
---> 8bdfd6cc4bbf
Step 2/6 : WORKDIR app
---> Running in 61650cd643fd
Removing intermediate container 61650cd643fd
---> 976056a2d895
Step 3/6 : COPY . /app
---> 5b94f1ad0061
Step 4/6 : RUN pip install -r requirements.txt
---> Running in c3dacf8bf4ed
Collecting asgiref==3.2.3
Downloading asgiref-3.2.3-py2.py3-none-any.whl (18 kB)
Collecting Django==3.0.3
Downloading Django-3.0.3-py3-none-any.whl (7.5 MB)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7.5/7.5 MB 5.6 MB/s eta 0:00:00
Collecting django-cors-headers==3.2.1
Downloading django_cors_headers-3.2.1-py3-none-any.whl (14 kB)
Collecting djangorestframework==3.11.0
Downloading djangorestframework-3.11.0-py3-none-any.whl (911 kB)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 911.2/911.2 kB 42.1 MB/s eta 0:00:00
Collecting pytz==2019.3
Downloading pytz-2019.3-py2.py3-none-any.whl (509 kB)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 509.2/509.2 kB 45.7 MB/s eta 0:00:00
Collecting sqlparse==0.3.0
Downloading sqlparse-0.3.0-py2.py3-none-any.whl (39 kB)
Installing collected packages: pytz, asgiref, sqlparse, Django, djangorestframework, django-cors-headers
Successfully installed Django-3.0.3 asgiref-3.2.3 django-cors-headers-3.2.1 djangorestframework-3.11.0 pytz-2019.3 sqlparse-0.3.0
[91mWARNING: Running pip as the 'root' user can result in broken permissions and conflicting behaviour with the system package manager. It is recommended to use a virtual environment instead: https://pip.pypa.io/warnings/venv
[0m[91m
[notice] A new release of pip is available: 23.0.1 -> 23.2.1
[notice] To update, run: pip install --upgrade pip
[0mRemoving intermediate container c3dacf8bf4ed
---> 3d6b4bb36bd2
Step 5/6 : EXPOSE 8001
---> Running in 56dd98811220
Removing intermediate container 56dd98811220
---> 96ed2bc70110
Step 6/6 : CMD ["python","manage.py","runserver","0.0.0.0:8001"]
---> Running in 4fd53066b777
Removing intermediate container 4fd53066b777
---> 6b72719ff06c
Successfully built 6b72719ff06c
Successfully tagged django-app:latest
+ echo Code Build...
Code Build...
+ docker run -d -p 8001:8001 django-app:latest
5c625dac7bccf872144dabbd4deff8d6102957cc18652f90950c7fce8694c1e8
+ echo Code Deployed...
Code Deployed...
Finished: SUCCESS

echo "Code Cloned...."

docker build . -t django-app

echo "Code Build...."

docker run -d -p 8001:8001 django-app;latest

echo "Code Deployed...."

Console Output
Started by user Ishwar Shinde
Running as SYSTEM
Building in workspace /var/lib/jenkins/workspace/django-todo-app-delivery
The recommended git tool is: NONE
No credentials specified
 > git rev-parse --resolve-git-dir /var/lib/jenkins/workspace/django-todo-app-delivery/.git # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git # timeout=10
Fetching upstream changes from https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git
 > git --version # timeout=10
 > git --version # 'git version 2.34.1'
 > git fetch --tags --force --progress -- https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git +refs/heads/*:refs/remotes/origin/* # timeout=10
 > git rev-parse refs/remotes/origin/main^{commit} # timeout=10
Checking out Revision c2dca3f30890792a3f6eb6078f05f4d886b40129 (refs/remotes/origin/main)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f c2dca3f30890792a3f6eb6078f05f4d886b40129 # timeout=10
Commit message: "Update index.html"
 > git rev-list --no-walk c2dca3f30890792a3f6eb6078f05f4d886b40129 # timeout=10
[django-todo-app-delivery] $ /bin/sh -xe /tmp/jenkins4033466684745059068.sh
+ echo Code cloned...
Code cloned...
+ docker build . -t django-app
Sending build context to Docker daemon   2.67MB

Step 1/6 : FROM python:3.9
3.9: Pulling from library/python
de4cac68b616: Pulling fs layer
d31b0195ec5f: Pulling fs layer
9b1fd34c30b7: Pulling fs layer
c485c4ba3831: Pulling fs layer
9c94b131279a: Pulling fs layer
863530a48f51: Pulling fs layer
6738828c119e: Pulling fs layer
d271c014c3a0: Pulling fs layer
c485c4ba3831: Waiting
9c94b131279a: Waiting
863530a48f51: Waiting
6738828c119e: Waiting
d271c014c3a0: Waiting
d31b0195ec5f: Verifying Checksum
d31b0195ec5f: Download complete
de4cac68b616: Verifying Checksum
de4cac68b616: Download complete
9b1fd34c30b7: Verifying Checksum
9b1fd34c30b7: Download complete
9c94b131279a: Verifying Checksum
9c94b131279a: Download complete
863530a48f51: Verifying Checksum
863530a48f51: Download complete
6738828c119e: Verifying Checksum
6738828c119e: Download complete
d271c014c3a0: Verifying Checksum
d271c014c3a0: Download complete
c485c4ba3831: Verifying Checksum
c485c4ba3831: Download complete
de4cac68b616: Pull complete
d31b0195ec5f: Pull complete
9b1fd34c30b7: Pull complete
c485c4ba3831: Pull complete
9c94b131279a: Pull complete
863530a48f51: Pull complete
6738828c119e: Pull complete
d271c014c3a0: Pull complete
Digest: sha256:9bae2a5ce72f326c8136d517ade0e9b18080625fb3ba7ec10002e0dc99bc4a70
Status: Downloaded newer image for python:3.9
 ---> 8bdfd6cc4bbf
Step 2/6 : WORKDIR app
 ---> Running in 61650cd643fd
Removing intermediate container 61650cd643fd
 ---> 976056a2d895
Step 3/6 : COPY . /app
 ---> 5b94f1ad0061
Step 4/6 : RUN pip install -r requirements.txt
 ---> Running in c3dacf8bf4ed
Collecting asgiref==3.2.3
  Downloading asgiref-3.2.3-py2.py3-none-any.whl (18 kB)
Collecting Django==3.0.3
  Downloading Django-3.0.3-py3-none-any.whl (7.5 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7.5/7.5 MB 5.6 MB/s eta 0:00:00
Collecting django-cors-headers==3.2.1
  Downloading django_cors_headers-3.2.1-py3-none-any.whl (14 kB)
Collecting djangorestframework==3.11.0
  Downloading djangorestframework-3.11.0-py3-none-any.whl (911 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 911.2/911.2 kB 42.1 MB/s eta 0:00:00
Collecting pytz==2019.3
  Downloading pytz-2019.3-py2.py3-none-any.whl (509 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 509.2/509.2 kB 45.7 MB/s eta 0:00:00
Collecting sqlparse==0.3.0
  Downloading sqlparse-0.3.0-py2.py3-none-any.whl (39 kB)
Installing collected packages: pytz, asgiref, sqlparse, Django, djangorestframework, django-cors-headers
Successfully installed Django-3.0.3 asgiref-3.2.3 django-cors-headers-3.2.1 djangorestframework-3.11.0 pytz-2019.3 sqlparse-0.3.0
[91mWARNING: Running pip as the 'root' user can result in broken permissions and conflicting behaviour with the system package manager. It is recommended to use a virtual environment instead: https://pip.pypa.io/warnings/venv
[0m[91m
[notice] A new release of pip is available: 23.0.1 -> 23.2.1
[notice] To update, run: pip install --upgrade pip
[0mRemoving intermediate container c3dacf8bf4ed
 ---> 3d6b4bb36bd2
Step 5/6 : EXPOSE 8001
 ---> Running in 56dd98811220
Removing intermediate container 56dd98811220
 ---> 96ed2bc70110
Step 6/6 : CMD ["python","manage.py","runserver","0.0.0.0:8001"]
 ---> Running in 4fd53066b777
Removing intermediate container 4fd53066b777
 ---> 6b72719ff06c
Successfully built 6b72719ff06c
Successfully tagged django-app:latest
+ echo Code Build...
Code Build...
+ docker run -d -p 8001:8001 django-app:latest
5c625dac7bccf872144dabbd4deff8d6102957cc18652f90950c7fce8694c1e8
+ echo Code Deployed...
Code Deployed...
Finished: SUCCESS

sudo usermod -aG docker Jenkins
sudo reboot

curl -fsSL https://pkg.jenkins.io/debian/jenkins.io-2023.key | sudo tee \
/usr/share/keyrings/jenkins-keyring.asc > /dev/null

echo deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \
https://pkg.jenkins.io/debian binary/ | sudo tee \
/etc/apt/sources.list.d/jenkins.list > /dev/null

sudo apt-get update
sudo apt-get install jenkins

sudo apt update
sudo apt install openjdk-17-jre
java -version

.text{
    color: var(--black);
}
:root{
    --black: #000;
    --white: #fff;
}

@media (prefers-color-scheme: dark){
    :root{
        --black: #fff;
        --white: #000;
    }
}

<form id="form1" runat="server">
<div id="wrapper">
    <div id="header">
        <h1>Welcome to our Website</h1>

    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div> <!-- end nav-->
    </div> <!-- end header-->
    <div id="content">
        <h2>Page Heading</h2>
        <p>welcome</p>
        <p>welcome</p>
        <p>welcome</p>
    </div> <!-- end content-->
    <div id="footer">
        <p>Copyright 2010</p>
    </div> <!-- end footer-->
</div><!-- end wrapper-->
</form>

/*!
 *  replaceme.js - text rotating component in vanilla JavaScript
 *  @version 1.1.0
 *  @author Adrian Klimek
 *  @link https://adrianklimek.github.io/replaceme/
 *  @copyright Addrian Klimek 2016
 *  @license MIT
 */
!function(a,b){"use strict";function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function d(){"function"==typeof b&&b.fn.extend({ReplaceMe:function(a){return this.each(function(){new e(this,a)})}})}function e(a,b){var d={animation:"animated fadeIn",speed:2e3,separator:",",hoverStop:!1,clickChange:!1,loopCount:"infinite",autoRun:!0,onInit:!1,onChange:!1,onComplete:!1};if("object"==typeof b?this.options=c(d,b):this.options=d,"undefined"==typeof a)throw new Error('ReplaceMe [constructor]: "element" parameter is required');if("object"==typeof a)this.element=a;else{if("string"!=typeof a)throw new Error('ReplaceMe [constructor]: wrong "element" parameter');this.element=document.querySelector(a)}this.init()}e.prototype.init=function(){"function"==typeof this.options.onInit&&this.options.onInit(),this.words=this.escapeHTML(this.element.innerHTML).split(this.options.separator),this.count=this.words.length,this.position=this.loopCount=0,this.running=!1,this.bindAll(),this.options.autoRun===!0&&this.start()},e.prototype.bindAll=function(){this.options.hoverStop===!0&&(this.element.addEventListener("mouseover",this.pause.bind(this)),this.element.addEventListener("mouseout",this.start.bind(this))),this.options.clickChange===!0&&this.element.addEventListener("click",this.change.bind(this))},e.prototype.changeAnimation=function(){this.change(),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.start=function(){this.running!==!0&&(this.running=!0,this.changeWord(this.words[this.position]),this.position++),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.change=function(){return this.position>this.count-1&&(this.position=0,this.loopCount++,this.loopCount>=this.options.loopCount)?void this.stop():(this.changeWord(this.words[this.position]),this.position++,void("function"==typeof this.options.onChange&&this.options.onChange()))},e.prototype.stop=function(){this.running=!1,this.position=this.loopCount=0,this.pause(),"function"==typeof this.options.onComplete&&this.options.onComplete()},e.prototype.pause=function(){clearTimeout(this.loop)},e.prototype.changeWord=function(a){this.element.innerHTML='<span class="'+this.options.animation+'" style="display:inline-block;">'+a+"</span>"},e.prototype.escapeHTML=function(a){var b=/<\/?\w+\s*[^>]*>/g;return b.test(a)===!0?a.replace(b,""):a},a.ReplaceMe=e,d()}(window,window.jQuery);

FROM ubuntu

RUN apt-get update \
 && apt-get install -y apache2

COPY html/* /var/www/html/

WORKDIR /var/www/html

CMD ["apachectl", "-D", "FOREGROUND"]

EXPOSE 80

apiVersion: v1
kind: Service
metadata:
name: taskmaster-svc
spec:
selector:
  app: taskmaster
ports:
  - protocol: TCP
    port: 80
    targetPort: 5000
    nodePort: 30007
type: NodePort

apiVersion: apps/v1
kind: Deployment
metadata:
name: taskmaster
labels:
  app: taskmaster
spec:
replicas: 1
selector:
  matchLabels:
    app: taskmaster
template:
  metadata:
    labels:
      app: taskmaster
  spec:
    containers:
      - name: taskmaster
        image: ishwarshinde041/microservicespythonapp:latest
        ports:
          - containerPort: 5000
        imagePullPolicy: Always

apiVersion: v1
kind: Service
metadata:
labels:
  app: mongo
name: mongo
spec:
ports:
  - port: 27017
    targetPort: 27017
selector:
  app: mongo

apiVersion: apps/v1
kind: Deployment
metadata:
name: mongo
labels:
    app: mongo
spec:
selector:
  matchLabels:
    app: mongo
template:
  metadata:
    labels:
      app: mongo
  spec:
    containers:
      - name: mongo
        image: mongo
        ports:
          - containerPort: 27017
        volumeMounts:
          - name: storage
            mountPath: /data/db
    volumes:
      - name: storage
        persistentVolumeClaim:
          claimName: mongo-pvc

kubectl apply -f mongo-pvc.yml

kubectl apply -f mongo-pvc.yml

kubectl apply -f mongo-pv.yml

apiVersion: v1
kind: PersistentVolume
metadata:
name: mongo-pv
spec:
capacity:
  storage: 512Mi
volumeMode: Filesystem
accessModes:
  - ReadWriteOnce
persistentVolumeReclaimPolicy: Retain
hostPath:
  path: /home/node/mongodata

apiVersion: v1
kind: PersistentVolume
metadata:
name: mongo-pv
spec:
capacity:
  storage: 512Mi
volumeMode: Filesystem
accessModes:
  - ReadWriteOnce
persistentVolumeReclaimPolicy: Retain
hostPath:
  path: /home/node/mongodata

FROM python:alpine3.7

COPY . /app

WORKDIR /app

RUN pip install -r requirements.txt

ENV PORT 5000

EXPOSE 5000

ENTRYPOINT [ "python" ]

CMD [ "app.py" ]

docker build . -t <username>/microserviceflaskpythonapp:latest

FROM python:alpine3.7
COPY . /app
WORKDIR /app
RUN pip install -r requirements.txt
ENV PORT 5000
EXPOSE 5000
ENTRYPOINT [ "python" ]
CMD [ "app.py" ]

docker exec -it "<container ID>" bash

docker run -d --mount source=”<your docker volume>”,target=/”<path of WORKDIR from Dockerfile>”-p 8001:80 “<image>”

git clone https://github.com/ishwarshinde041/docker-projects.git

docker stop “<container-id>”

docker start “<container-id>”

docker pull ishwarshinde041/apache-web

docker-compose up –d

docker-compose down –d

function incrementStats() {
    const counters = document.querySelectorAll('.counter');

    counters.forEach((counter) => {
        counter.innerText = 0;

        const updateCounter = () => {
            const target = +counter.getAttribute('data-target'); // the "+" here casts the returned text to a number
            const c = +counter.innerText;
            const increment = target / 200;

            if (c < target) {
                counter.innerText = Math.ceil(c + increment);
                setTimeout(updateCounter, 1);
                // here the function is calling itself until "c"
                // reaches the "data-target", making it recursive
            } else {
                counter.innerText = target;
            }
        };

        updateCounter();
    });
}

document.addEventListener('DOMContentLoaded', incrementStats);

pnpm add swr
# or
npm i swr
# or
yarn add swr

<body>
   <h2>About</h2>
   <p>
     <!-- Just add text decoration style:None -->
      Our <a href="" style="text-decoration: none;">Team</a>
   </p>
</body>

<div class="myb-SettledBetParticipantRenderer "><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">AC Milan +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName " style="">Borussia Dortmund v AC Milan</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Celtic +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Celtic v Lazio</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.04</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Swansea +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Swansea v Norwich</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Eldense +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Eldense v Valladolid</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.035</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Huesca +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Oviedo v Huesca</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Leganes +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Burgos v Leganes</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.035</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Elche +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Sporting Gijon v Elche</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.04</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Bangkok United +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Bangkok United v Jeonbuk Motors</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.05</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Hartlepool +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Boreham Wood v Hartlepool</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-lost "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Rot-Weiss Essen +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-2 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-2 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-2 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-2 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Unterhaching v Rot-Weiss Essen</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Lumezzane +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Lumezzane v Atalanta U23</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.035</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">AlbinoLeffe +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">AlbinoLeffe v Renate</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.05</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Carrarese +2.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Carrarese v Pontedera</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.055</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">ASD Turris +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">ASD Turris v Audace Cerignola</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Juventus U23 +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Pro Vercelli v Juventus U23</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.05</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">ASD Pineto Calcio +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">U.S. Ancona v ASD Pineto Calcio</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.05</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Brindisi +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Virtus Francavilla v Brindisi</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Chippa United +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Moroka Swallows v Chippa United</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.04</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Polokwane City +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Richards Bay FC v Polokwane City</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.035</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-lost "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">TS Galaxy +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-2 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-2 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-2 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-2 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Stellenbosch FC v TS Galaxy</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.04</div></div></div></div>

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 100px;
    width: 100px;
    outline: black;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 100%, 100%;
    border-radius: 50%;
    border: 1px solid black;
}

// Shortcode [king_events]

function king_events ( $atts, $content = null) {
    $today = date('Ymd');
	$atts = shortcode_atts(
        array(
            'type' => '',
            'number' => '-1',
        ),
        $atts,
        'king_events'
    );
    $args = array(
        'post_type' => 'tkc-event',
		'posts_per_page' => -1,
        'post_status' => 'publish',
        'orderby' => 'event_date',
        'order' => 'ASC',
        'meta_query' => array(
            array(
                'key' => 'event_date',
                'compare' => '>',
                'value' => $today,
                'type' => 'DATE'
            )
        ),
    );

	if( !empty( $atts['type'] ) ) {
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'event_type',
				'field' => 'slug',
				'terms' => $atts['type'],
            )
		);
	}

    $events_query = new WP_Query($args);

    ob_start();
    if($events_query->have_posts()) { ?>

    <div class="events-wrap">

    <?php

    while ($events_query->have_posts()) {
    $events_query->the_post(); ?>

    <div class="belove-event-inner">
        <div class="belove-event-img">
            <a href="<?php echo get_the_post_thumbnail_url(get_the_ID(),'full'); ?>">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail('big-square'); } ?>
            </a>
        </div>
        <div class="belove-event-content">
            <h3><?php echo the_title(); ?></h3>
            <div class="event-details">
                <?php echo the_content(); ?>
            </div>
			<?php if (get_field('event_link')) { ?>
            <div class="belove-event-link">
                <?php if(get_field('button_label')) { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank"><?php echo get_field('button_label'); ?></a>
                <?php }else { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank">Registration</a>
                <?php }?>
            </div>
			<?php } ?>
        </div>
    </div>

    <?php }
    wp_reset_postdata();
    ?>
    </div>

    <?php
    } else { ?>
        <div>No Events found</div>
    <?php }
    return ob_get_clean();
}

add_shortcode('king_events', 'king_events');

.container {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar; 
 }
.item {
  flex: 0 0 auto; 
}

Keystore password = Jubna@123

// Bx Slider 
 
function custom_scripts()
{
    wp_register_script('bxslider', 'https://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js', array(), false, true);
    wp_enqueue_script('bxslider');
}
 
add_action('wp_enqueue_scripts', 'custom_scripts');
 
function bxslider_init() { ?>
    <script>
    (function($){
        $(document).ready(function() {
                $(".image-ticker").show();
                $('.image-ticker').bxSlider({
                    minSlides: 1,
                    maxSlides: 8,
                    slideWidth: 189,
                    slideMargin: 0,
                    ticker: true,
                    speed: 50000
                });
            });
        })(jQuery)   
    </script>
<?php }
 
add_action ('wp_footer', 'bxslider_init');

<!-- MARKUP - Put Codeblock Class as 'slider-logos' -->

<div class="image-ticker" style="display:none">
    <span class="logo-item"><img src="#"></span>

</div>

<!-- STYLE -->

<style>
.bx-wrapper {
    max-width: 100% !important;
}

.logo-item {
    text-align: center;
    display: flex !important;
    align-items: center;
    margin: 0;
    padding: 0 25px;
    height: 80px;
    width: auto !important;
}

.logo-item img {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 80px;
}

.bx-viewport {
    height: auto !important;
}
</style>

<a href='' target='_blank'><img src='https://res.cloudinary.com/dnqgtf0hc/image/upload/v1693147103/apk-download-android_jmucejpng'/></a>

<!DOCTYPE html>
<html>
​
<body>
The content of the body element is displayed in your browser.
</body>
​
</html>
​

/*__Responsive Media Queries __*/

/* Mobile & Small devices */
@media only screen and (max-width: 480px) {...}

/* Portrait Tablets and Ipads devices) */
@media only screen and (max-width: 768px) {...}

/* Laptops and Small screens  */
@media only screen and (max-width: 1024px) {...}

/* Laptops, Desktops Large devices */
@media only screen and (max-width: 1280px) {...}

/* Extra large devices (large laptops and desktops) */
@media only screen and (min-width: 1281px) {...}

Orientações sobre WhatsApp Mensagem Ativa:
-Configurar Canal do WhatsApp, espelhando Prod. C6 Bank - Assessoria Alta Renda(C6BankAssessoriaAltaRenda)
-Relacionar Canal do WhatsApp no Einstenios BOT (Einstenios bots -> MyBots -> Advisory -> (Canto superior esquerdo) -> Overviews -> dentro da página aba Connections - (ADD).
-Configurar Template de WPP. Messaging Templates -> assessoria_reinvestimento_automatico -> definir Texto cadastrado no QUIP.
-Cadastrar valores da Picklist: MessagingChannel__c e Template_Name__c.
- Mudar decision de entrada do flow. Utilizar o Type da oportunidade. Criar novo valor na picklist de Reinvestimento Automático.

- Criar novo campo no objeto MessagingNotification (Nome do contato = ContactName)__c
- Criando novo valor na picklist de TYPE da oportunidade (Reinvestimento automático)
- Criando novo campo no Objeto Messaging Notification (Vencimento dia da semana = WeekDayExpiration)

-----------------------------
  
  Em UAT após alterações estarem no ambiente, cadastrar Template (Messaging Templates) e Canal (Messaging Settings). Verificar também se o AinstenBot Advisor (Assessoria) , está configurado o Canal do whatsApp.
  
  REPRODUZIR ESSES AJUSTES EM PROD TAMBÉM.

<div class="create-account">
  <h2>Create Account</h2>
  <div class="row">
    <div class="col-md-6">
      <form [formGroup]="createAccountForm">
        <div class="form-group">
          <select formControlName="country" class="form-control" (change)="onChangeCountry($event.target.value)">
            <option value="">Select country...</option>
            <option *ngFor="let country of countries" [value]="country.id">{{country.country_name}}</option>
          </select>
        </div>
        <div class="form-group">
          <select formControlName="state" class="form-control" (change)="onChangeState($event.target.value)">
            <option value="">Select state...</option>
            <option *ngFor="let state of states" [value]="state.id">{{state.state_name}}</option>
          </select>
        </div>
        <div class="form-group">
          <select formControlName="city" class="form-control">
            <option value="">Select city...</option>
            <option *ngFor="let city of cities" [value]="city.id">{{city.city_name}}</option>
          </select>
        </div>
      </form>
    </div>
  </div>
</div>

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Froms</title>
</head>
<body>

    <h1>HTML Forms</h1>

    <form>
        <label for="username">Enter username:</label>
        <input type="text" id="username" name="username" placeholder="your name" required>
        <br><br>
        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" placeholder="your email" required>
        <br><br>
        <label for="password">password:</label>
        <input type="password" name="password" placeholder="choose a password" required>

        <p>Select your age:</p>

        <input type="radio" name="age" value="0-25" id="option-1">
        <label for="option-1">0-25</label>
        <input type="radio" name="age" value="26-50" id="option-2">
        <label for="option-2">26-50</label>
        <input type="radio" name="age" value="51+" id="option-3">
        <label for="option-3">51+</label>

        <br><br>

        <label for="question">Security questions:</label>
        <select name="question" id="question">
            <option value="q1">What colour are your favourit pair of socks?</option>
            <option value="q2">If you could be a vegetable, what it could be?</option>
            <option value="q3">what is your best ever security question?</option>
        </select>

        <br><br>

        <label for="answer">Scurity question answer</label>
        <input type="text" name="answer" id="answer">

        <br><br>

        <label for="bio">Your bio:</label><br>
        <textarea name="bio" id="bio" cols="30" rows="10" placeholder="about you..."></textarea>

        <br><br>
        <input type="submit" value="Submit the form">

    </form>

</body>
</html>

<a href="example.com" target="_blank">New Tab</a>

<div style="padding: 15px; background-color: white; margin-bottom: 25px;">
    <details>
        <summary style="border: 4px solid #f3f7d7; background-color: #f3f7d7; color: #126369; font-size: 18pt; cursor: pointer;"><strong>TITEL 1</strong></summary>
        <div style="border: 4px solid #f3f7d7; padding: 5px 15px;">
        INHOUD 1
		</div>
    </details>
    <details>
        <summary style="border: 4px solid #f3f7d7; background-color: #f3f7d7; color: #126369; font-size: 18pt; cursor: pointer;"><strong>TITEL 2</strong></summary>
        <div style="border: 4px solid #f3f7d7; padding: 5px 15px;">
        INHOUD 2
		</div>
    </details>
    <details>
        <summary style="border: 4px solid #f3f7d7; background-color: #f3f7d7; color: #126369; font-size: 18pt; cursor: pointer;"><strong>TITEL 3</strong></summary>
        <div style="border: 4px solid #f3f7d7; padding: 5px 15px;">
        INHOUD 3
		</div>
    </details>
</div>

console.log('Welcome to HomePage!')

  <script src="https://unpkg.com/htmx.org@1.9.4"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

<?php
// error_reporting(E_ALL);
// ini_set('display_errors', 1);
error_reporting(0);
date_default_timezone_set('Asia/Kolkata');
function get($url)
{
  // Initialize a CURL session.
  $ch = curl_init();

  // Return Page contents.
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  //grab URL and pass it to the variable.
  curl_setopt($ch, CURLOPT_URL, $url);

  $result = curl_exec($ch);

  return $result;
}

$user = $_POST['user'];
$offer = $_POST['offer'];
$cname = $_POST['cname'];
$event = $_POST['event'];

$rp = get('https://nextpower.cashinmedia.in/api/v1/checkRefer/0a51d09c-f329-4436-89d5-bdbb52bea07c/' . $offer . '?number=' . $user . '');

// JSON response from the URL
$response = $rp;

// Decode the JSON response
$response_data = json_decode($response, true);

$totalClicks = $response_data['clicks'];

$count = $response_data['count'];

// Extract the 'data' section from the response
$data = $response_data['data'];

// Check if there's any data to display
if (count($data) > 0) {
  // Echo the table header
//     echo '<table border="1">
//         <tr>
//             <th>Click</th>
//             <th>User Amount</th>
//             <th>Refer Amount</th>
//             <th>User</th>
//             <th>Refer</th>
//             <th>Event</th>
//             <th>Status</th>
//             <th>Payment Status</th>
//             <th>Payment Message</th>
//             <th>Created At</th>
//         </tr>';

  //     // Loop through each data entry and display in table rows
//     foreach ($data as $entry) {
//     $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);

  //     echo '<tr>';
//     echo '<td>' . $entry['click'] . '</td>';
//     echo '<td>' . $entry['userAmount'] . '</td>';
//     echo '<td>' . $entry['referAmount'] . '</td>';
//     echo '<td>' . $userEncoded . '</td>'; // Display encoded user
//     echo '<td>' . $entry['refer'] . '</td>';
//     echo '<td>' . $entry['event'] . '</td>';
//     echo '<td>' . $entry['status'] . '</td>';
//     echo '<td>' . $entry['referPaymentStatus'] . '</td>';
//     echo '<td>' . $entry['payMessage'] . '</td>';
//     echo '<td>' . $entry['createdAt'] . '</td>';
//     echo '</tr>';
// }

  //     // Close the table
//     echo '</table>';
// } else {
//     // If there's no data, show a JavaScript alert
//     echo '<script>alert("No data found.");</script>';
// }
  ?>
  <html lang="en" dir="ltr">


  <head>
    <meta charset="utf-8">
    <title>FokatCash</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
    <link rel="stylesheet" href="report.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width">
  </head>
  <style>
    .data-table td,
    .data-table th {
      font-size: 17px;
      /* Adjust the value as needed */
    }

    .credited {
      color: #FFA500;
      /* Orange color */
    }
  </style>

  <body>
    <center>
      <div class="login-form">
        <h1>
          <font color='#0f0f0f'>REPORT
        </h1>
        <center>

  </body>

  </html>

  <div class="statics">
    <center><br>
      <fieldset>Refferer:
        <?php echo $user; ?>
        <hr>Camp:
        <?php echo $cname; ?>
        <hr>Total Clicks:
        <?php echo $totalClicks; ?>
        <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
        <hr>
        <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
        <!-- Placeholder for total refer amount -->
        <hr>
        <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
        <hr>
      </fieldset><br><br>
      <table class="data-table">
        <tr>

          <th>Camp Name</th>
          <th>Refer Amount</th>
          <!--<th>Refer Status</th>-->
          <th>Cashback Status</th>
          <th>Time</th>
        </tr>
        <?php
        foreach ($data as $entry) {
          $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);
          $dateTime = new DateTime($entry['createdAt']);

          // Convert to IST timezone
          $dateTime->setTimezone(new DateTimeZone('Asia/Kolkata'));

          // Format the time in desired format
          $istTimeFormatted = $dateTime->format('Y-m-d H:i:s');

          if ($entry['referPaymentStatus'] === 'REJECTED' || $entry['referPaymentStatus'] === 'BLOCKED') {
            continue;
          }

          if ($entry['referPaymentStatus'] == 'ACCEPTED' || $entry['referPaymentStatus'] == 'UNKNOWN' || $entry['referPaymentStatus'] == 'FAILURE') {
            $cashbackStatus = '<b><span style="color: #198754;">Credited</span></b>';
          } elseif ($entry['referPaymentStatus'] == 'PENDING') {
            $cashbackStatus = '<b><span style="color: #FFA500;">Processing</span></b>';
          } else {
            // Handle other cases or set a default value for $cashbackStatus
            // For example: $cashbackStatus = 'Unknown Status';
            $cashbackStatus = $entry['referPaymentStatus'];
          }


          if ($entry['referAmount'] > 0) {
            echo '<tr>';
            // echo '<td>' . $entry['click'] . '</td>';
            // echo '<td>' . $entry['userAmount'] . '</td>';
            echo '<td>' . $cname . '</td>';
            echo '<td>' . $entry['referAmount'] . '</td>';
            // echo '<td>' . $userEncoded . '</td>'; // Display encoded user
            // echo '<td>' . $entry['refer'] . '</td>';
            // echo '<td>' . $entry['event'] . '</td>';
            // echo '<td>' . $entry['status'] . '</td>';
            echo '<td>' . $cashbackStatus . '</td>';
            // echo '<td>' . $entry['payMessage'] . '</td>';
            echo '<td>' . $istTimeFormatted . '</td>';
            echo '</tr>';
          }
        }
        // Close the table
        echo '</table>';
} else {
  // If there's no data, show a JavaScript alert
  ?>
        <html lang="en" dir="ltr">


        <head>
          <meta charset="utf-8">
          <title>FokatCash</title>
          <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
          <link rel="stylesheet" href="report.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
          <meta name="viewport" content="width=device-width">
        </head>
        <style>
          .data-table td,
          .data-table th {
            font-size: 17px;
            /* Adjust the value as needed */
          }

          .credited {
            color: #FFA500;
            /* Orange color */
          }
        </style>

        <body>
          <center>
            <div class="login-form">
              <h1>
                <font color='#0f0f0f'>REPORT
              </h1>
              <center>

        </body>

        </html>

        <div class="statics">
          <center><br>
            <fieldset>Refferer:
              <?php echo $user; ?>
              <hr>Camp:
              <?php echo $cname; ?>
              <hr>Total Clicks:
              <?php echo $totalClicks; ?>
              <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
              <hr>
              <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
              <!-- Placeholder for total refer amount -->
              <hr>
              <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
              <hr>
            </fieldset><br><br>

            <h5>No data Found</h5>
            <?php


}
?>
    </table>
    <!-- ... Your existing code ... -->
    <script>
  // JavaScript to calculate and display the total leads count and total refer amounts
  document.addEventListener("DOMContentLoaded", function () {
    // Calculate the total leads count and total refer amounts based on the payment statuses and refer amount conditions
    var totalLeads = 0;
    var totalAcceptedReferAmount = 0;
    var totalPendingReferAmount = 0;
    var totalFailedReferAmount = 0;
    var totalUnknownReferAmount = 0;
    var event = "<?php echo $event; ?>";

    <?php foreach ($data as $entry): ?>
      <?php if ($entry['referPaymentStatus'] !== 'REJECTED' && $entry['referPaymentStatus'] !== 'BLOCKED' && $entry['referAmount'] > 0): ?>
        totalLeads++;
        <?php if ($entry['referPaymentStatus'] === 'ACCEPTED'): ?>
          totalAcceptedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'PENDING'): ?>
          totalPendingReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'FAILURE'): ?>
          totalFailedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'UNKNOWN'): ?>
          totalUnknownReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php endif; ?>
      <?php endif; ?>
    <?php endforeach; ?>

    // Update the HTML content to display the calculated totals
    var totalLeadsElement = document.getElementById("totalLeads");
    totalLeadsElement.textContent = totalLeads;

    var totalAcceptedReferAmountElement = document.getElementById("totalAcceptedReferAmount");
    totalAcceptedReferAmountElement.textContent = totalAcceptedReferAmount.toFixed(2);

    var totalPendingReferAmountElement = document.getElementById("totalPendingReferAmount");
    totalPendingReferAmountElement.textContent = totalPendingReferAmount.toFixed(2);

    var totalFailedReferAmountElement = document.getElementById("totalFailedReferAmount");
    totalFailedReferAmountElement.textContent = totalFailedReferAmount.toFixed(2);

    var totalUnknownReferAmountElement = document.getElementById("totalUnknownReferAmount");
    totalUnknownReferAmountElement.textContent = totalUnknownReferAmount.toFixed(2);
  });
</script>



    <br><br><br>
    <footer id="footer">
      <div class="copyright">
        &copy; Copyright <strong><span>FokatCash</span></strong>
      </div>
    </footer><!-- End Footer -->
</div><!-- End statics div -->
</center><!-- End center div -->
</body><!-- End body tag -->

</html><!-- End HTML document -->

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

npm install sass-loader sass webpack --save-dev

watch: {
    "user.name": function (newVal, oldVal) {
      this.newDisplay = newVal;
      this.oldDisplay = oldVal;
    },

<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">

There are several issues with your code that could be causing the failed checks. Here are some potential problems:

Buffer Size: The function takes size_r as an argument, representing the size of the buffer r to store the result. However, it seems that you are not properly handling the case when the result cannot fit within the provided buffer size. You need to check if the length of the result exceeds the buffer size and return 0 in such cases.

Buffer Manipulation: There are multiple instances in your code where you increment and decrement the r pointer without considering the buffer boundaries. This can lead to incorrect memory access and unexpected behavior. Make sure to handle the buffer correctly throughout the function.

String Length Calculation: The current implementation of calculating the lengths of n1 and n2 by incrementing the pointers is incorrect. You are modifying the original pointers, which makes it difficult to traverse the strings later. Consider using separate variables to calculate the lengths without modifying the original pointers.

Handling Carry: When performing addition, if the sum of digits exceeds 9, you need to carry over the value to the next position. It seems that you are correctly calculating the remainder (rem) and the carry (div), but you need to handle the carry properly to ensure accurate addition.

Returning the Result: After performing the addition, you need to return the pointer to the result. However, the current implementation does not correctly determine the final result pointer. Ensure that you properly adjust the pointer to the correct position before returning it.

Here's a modified version of your code that addresses these issues:

c
Copy code
#include <stdlib.h>

char *infinite_add(char *n1, char *n2, char *r, int size_r)
{
    int len1 = 0, len2 = 0, i = 0, div = 0, rem;
    char val = '0';

    // Calculate lengths of n1 and n2
    while (n1[len1] != '\0')
        len1++;
    while (n2[len2] != '\0')
        len2++;

    // Check if result can fit in buffer
    if (len1 > size_r || len2 > size_r)
        return 0;

    // Move pointers to the end of the strings
    n1 += len1 - 1;
    n2 += len2 - 1;

    while (i < size_r - 1)
    {
        if (len1 >= 0 || len2 >= 0)
        {
            // Get the digits from n1 and n2
            int digit1 = (len1 >= 0) ? *n1 - '0' : 0;
            int digit2 = (len2 >= 0) ? *n2 - '0' : 0;

            // Calculate sum and carry
            rem = (digit1 + digit2 + div) % 10;
            div = (digit1 + digit2 + div) / 10;

            // Store the sum digit in the result buffer
            r[i] = rem + '0';

            // Move the pointers and decrement lengths
            n1 = (len1 > 0) ? n1 - 1 : &val;
            n2 = (len2 > 0) ? n2 - 1 : &val;
            len1--;
            len2--;
        }
        else if (div > 0)
        {
            // Handle remaining carry
            r[i] = div + '0';
            div = 0;
        }
        else
        {
            // Reached the end of both strings and carry is 0

<h1>Best movie according to me</h1>
<h2>My top 3 movies of all-time.</h2> 
<hr />
<h2>3 Idiots</h2>
<p>Old is gold.</p>
<h2>RRR</h2>
<p>Really cool historical fantacy.</p>
<h2>Kantara</h2>
<p>All about last scene.</p>

<p><script>
    var video1 = document.getElementById("thebpresident");
    video1.style.opacity = 1;
    video1.addEventListener("loadedmetadata", function() {
setTimeout(function() {        video1.play();<br />
      }, 1000);
    });
   slidein.className = "slidein";
});
setTimeout(function() {
video1.style.display = "block";
  }, 4000);
});
var video2 = document.getElementById("majorcities");
setTimeout(function() {
video2.style.display = "block";
video2.className = "wp-block-video MajorCities video2";
        video2.addEventListener("animationend", function() {
          video2.style.opacity = 1;
          video2.addEventListener("loadedmetadata", function() {
            setTimeout(function() {
              video2.play();
            }, 4000);
          });
        });
      }, 156000);
    });
  });  document.addEventListener("DOMContentLoaded", function() {
    var videos = document.getElementsByClassName("onPause");
    for (var i = 0; i < videos.length; i++) {
      var video = videos[i];
      video.addEventListener("click", function() {
        if (this.paused) {
          this.play();
        } else {
          this.pause();
        }
      });
    }
  });
</script></p>

<a href= "https://github.com/philipyoo/holbertonschool-low_level_programming/blob/master/0x04-pointers_arrays_strings/100-atoi.c"> </a>
<a href ="https://github.com/monoprosito/holbertonschool-low_level_programming/blob/master/0x05-pointers_arrays_strings/100-atoi.c"> </a>

#include <stdio.h>
/**
 * _atoi - converts string to integer
 *@s: pointer to char
 * Return: int
 */

int _atoi(char *s)
{
int res = 0;
int nb  = 0;
int cpt = 0;
int i =0;
for (i = 0; s[i] != '\0' ; ++i)
{
if (s[i] == '-')
nb++;
if (s[i] >= '0' && s[i] <= '9')
{
cpt++;
res = res * 10 + s[i] - '0';
}
if (cpt >= 1 && !(s[i] >= '0' && s[i] <= '9'))
break;
}
if (nb % 2 != 0)
{
res = res * -1;
}
return (res);
} /*end method*/

#include <stdio.h>
/**
 * _atoi - converts string to integer
 *@s: pointer to char
 * Return: int
 */


int _atoi(char *s)
{
int nb_sign_minus = 0;
char *s2 ;
int res  = 0;
int  *ptres = &res; 
while (*s)
{
/*test first character */

if (*s == '-')
nb_sign_minus++;
if(*s >= '0' && *s <= '9') /*ifx1*/
{ s2 = s;
if (nb_sign_minus % 2 != 0 )
{
*ptres = '-'; /*printf("%c", '-');*/
ptres++;
}
while (*s2 != '\0' && (*s2 >= '0' && *s2 <= '9'))
{
*ptres = *s2 ; /*printf("%c", *s2);*/
s2++;
ptres++;
} /* end while loop*/
s  = s2  ;
s2 = '\0';
nb_sign_minus = 0;
} /*end ifx1 */   
} /*principal while */
return res;
} /*end method*/

<a href= "https://intranet.alxswe.com/auth/sign_in"> </a>
https://gitlab.com/Hraesvel/holbertonschool-low_level_programming/-/blob/master/0x13-bit_manipulation/5-flip_bits.c

<a href="https://www.purebasic.com/french/documentation/reference/ascii.html"></a>
<a href="https://cse.engineering.nyu.edu/~mleung/CS1114/f05/ch10/MDmemory.htm">
  multi array at memory</a>

<!doctype html>

  <head>
    <!-- CSS CODE -->
   <style>
    #pdf_renderer {
      display: block;
      margin: 0 auto;
    }
    </style>
  
  </head>
<body>
     <div id="my_pdf_viewer">
        <div id="canvas_container">
            <canvas id="pdf_renderer"></canvas>
        </div>

        <center>
            <div id="navigation_controls">
                <button id="go_previous">Previous</button>
                <input id="current_page" value="1" type="number"/>
                <button id="go_next">Next</button>
            </div>

            <a href="Resume_14.docx.pdf" download="Resume_14.docx.pdf">
            Download PDF</a>
        </center>
    </div>
    <script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }
     
        pdfjsLib.getDocument('./Resume_14.docx.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();
        });

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
         
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');
     
                var viewport = page.getViewport(myState.zoom);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
         
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        document.getElementById('go_previous').addEventListener('click', (e) =>
        {
          if(myState.pdf == null || myState.currentPage == 1) 
            return;
          myState.currentPage -= 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('go_next').addEventListener('click', (e) => {
          if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) 
             return;
          myState.currentPage += 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('current_page').addEventListener('keypress', (e) => {
          if(myState.pdf == null) return;
         
          // Get key code 
          var code = (e.keyCode ? e.keyCode : e.which);
         
          // If key code matches that of the Enter key 
          if(code == 13) {
            var desiredPage = document.getElementById('current_page').valueAsNumber;
                                 
            if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
                myState.currentPage = desiredPage;
                document.getElementById("current_page").value = desiredPage;
                render();
            }
           }
        });

    </script>
  </body>
</html>
HTML, XML

<!-- Add a file input to your template -->
<input type="file" (change)="onFileChange($event)" />

<!-- Add a button to trigger the file input -->
<button (click)="fileInput.click()">Upload File</button>

<link href="https://fonts.cdnfonts.com/css/ds-digital" rel="stylesheet">
                

function digital() {
    let laHora = new Date();

    let horas = laHora.getHours();

    if (horas < 10) {
        horas = "0" + horas;
    }


    let minutos = laHora.getMinutes();

    if (minutos < 10) {
        minutos = "0" + minutos;
    }


    let segundos = laHora.getSeconds();

    if (segundos < 10) {
        segundos = "0" + segundos;
    }


    const reloj = `<aside id="relojillo"><h1>${horas} : </h1> <h2>${minutos}</h2><sup><h3> : ${segundos}</h3></sup></aside>`;

    const salida = document.getElementById("elReloj").innerHTML = reloj;

    setTimeout(digital, 1000);


    return salida;
}
digital();

<body>
    <aside id="elReloj"></aside>
    <script src="js/digital02.js"></script>
</body>

  <style>
      * {
          box-sizing: border-box;
      }
      
      @font-face {
          font-family: 'ds-digital';
          src: url('./ds_digital/DS-DIGII.TTF');
      }
      body {
          
      }
      #relojillo {
          width: fit-content;
          height: auto;
          position: relative;
          background-image: linear-gradient(232deg, #888, #888, #888);
          margin: auto auto;
          text-align: center;
          background-color: transparent;
          padding: 10% 10%;
      }
      
      #relojillo h1,
      #relojillo h2,
      #relojillo h3 {
          display: inline-block;
          font-family: 'ds-digital';
          font-size: 43pt;
          text-shadow: 0vw -3vw .1vw #999, -.3vw 4vw .1vw #f0f8ff;
          color: khaki;
          padding: 0vw .2vw;
      }
      #relojillo h3 {
          font-size: 21pt !important;
          text-shadow: 0vw -3vw .1vw orange, -.3vw 4vw .1vw orange;
      }
  </style>

<div class="form-group">
    <label>Ngày Lập: </label>
    <input type="date" class="form-control" th:field="*{ngayLap}" />
    <!-- get field in object -->
    <div th:if="${#fields.hasErrors('ngayLap')}" class="errors text-danger form-text" th:errors="*{ngayLap}"></div>
    <!-- validate form  -->
    <!-- table  -->

    <tr th:each="hoadon : ${list}">
        <td th:text="${hoadon.id}"></td>
        <td th:text="${hoadon.trangThai}"></td>
        <td>
            <a th:href="@{/hoadon/detail(id=${hoadon.id})}" class="btn btn-success ">detail</a>
            <a th:href="@{/hoadon/delete(id=${hoadon.id})}" class="btn btn-danger">Delete</a>
            <a th:href="@{/hoadon/update(id=${hoadon.id})}" class="btn btn-warning">Update</a>
        </td>
    </tr>
    <!-- table  -->
    <!-- combooboxx -->
    <div class="form-group">
        <label for="sanPham">Sản Phẩm:</label>
        <select class="form-control" th:field="*{sanPham}">
            <option value="">Chọn SanPham</option>
            <option th:each="sp : ${sanPhams}" th:value="${{sp}}" th:text="${sp.ten}">
            </option>
        </select>
        <div th:if="${#fields.hasErrors('sanPham')}" class="errors text-danger form-text" th:errors="*{sanPham}"></div>
    </div>
    <!-- combooboxx -->
    <!-- form  -->
    <form enctype="multipart/form-data" th:action="@{/manager/chitietsanpham/store}" th:object="${chitietsanpham}"
        method="post" class="form">
    </form>
    <!-- form -->
</div>




<!-- paniagation -->
              <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" th:href="@{/khachhang/pre}">Previous</a>
            </li>
            <li th:each="index : ${panigation}" class="page-item"><a class="page-link"
                    th:href="@{/khachhang/pageno(pageno=${index})}" th:text="${index+1}"></a></li>
            <li class="page-item">
                <a class="page-link" th:href="@{/khachhang/next}">Next</a>
            </li>
        </ul>
    </nav>

<div class="form-group">
    <label>Ngày Lập: </label>
    <input type="date" class="form-control" th:field="*{ngayLap}" />
    <!-- get field in object -->
    <div th:if="${#fields.hasErrors('ngayLap')}" class="errors text-danger form-text" th:errors="*{ngayLap}"></div>
    <!-- validate form  -->
    <!-- table  -->

    <tr th:each="hoadon : ${list}">
        <td th:text="${hoadon.id}"></td>
        <td th:text="${hoadon.trangThai}"></td>
        <td>
            <a th:href="@{/hoadon/detail(id=${hoadon.id})}" class="btn btn-success ">detail</a>
            <a th:href="@{/hoadon/delete(id=${hoadon.id})}" class="btn btn-danger">Delete</a>
            <a th:href="@{/hoadon/update(id=${hoadon.id})}" class="btn btn-warning">Update</a>
        </td>
    </tr>
    <!-- table  -->
    <!-- combooboxx -->
    <div class="form-group">
        <label for="sanPham">Sản Phẩm:</label>
        <select class="form-control" th:field="*{sanPham}">
            <option value="">Chọn SanPham</option>
            <option th:each="sp : ${sanPhams}" th:value="${{sp}}" th:text="${sp.ten}">
            </option>
        </select>
        <div th:if="${#fields.hasErrors('sanPham')}" class="errors text-danger form-text" th:errors="*{sanPham}"></div>
    </div>
    <!-- combooboxx -->
    <!-- form  -->
    <form enctype="multipart/form-data" th:action="@{/manager/chitietsanpham/store}" th:object="${chitietsanpham}"
        method="post" class="form">
    </form>
    <!-- form -->
</div>

<div class="p-8">
  <div class="shadow-xl rounded-lg">
    <div style="background-image: url('https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260')" class="h-64 bg-gray-200 bg-cover bg-center rounded-t-lg flex items-center justify-center">
      <p class="text-white font-bold text-4xl">Profile</p>
    </div>
    <div class="bg-white rounded-b-lg px-8">
      <div class="relative">
            <img class="right-0 w-16 h-16 rounded-full mr-4 shadow-lg absolute -mt-8 bg-gray-100" src="" alt="Avatar">
      </div>
      <div class="pt-8 pb-8">
        <h1 class="text-2xl font-bold text-gray-700">Link</h1>
        <p class="text-sm text-gray-600">From hyrule</p>

        <p class="mt-6 text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a sem varius, fringilla sapien at, sollicitudin risus.</p>

        <div class="flex justify-around mt-8">
          <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
          </button>
          <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
          </button>
          <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="w-80 bg-white shadow rounded">
  <div
    class="h-48 w-full bg-gray-200 flex flex-col justify-between p-4 bg-cover bg-center"
    style="background-image: url('https://images.pexels.com/photos/7989741/pexels-photo-7989741.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"
  >
    <div class="flex justify-between">
      <input type="checkbox" />
      <button class="text-white hover:text-blue-500">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 4v16m8-8H4"
          />
        </svg>
      </button>
    </div>
    <div>
      <span
        class="uppercase text-xs bg-green-50 p-0.5 border-green-500 border rounded text-green-700 font-medium select-none"
      >
        available
      </span>
    </div>
  </div>
  <div class="p-4 flex flex-col items-center">
    <p class="text-gray-400 font-light text-xs text-center">Hammond robotics</p>
    <h1 class="text-gray-800 text-center mt-1">Item name</h1>
    <p class="text-center text-gray-800 mt-1">€1299</p>
    <div class="inline-flex items-center mt-2">
      <button
        class="bg-white rounded-l border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M20 12H4"
          />
        </svg>
      </button>
      <div
        class="bg-gray-100 border-t border-b border-gray-100 text-gray-600 hover:bg-gray-100 inline-flex items-center px-4 py-1 select-none"
      >
        2
      </div>
      <button
        class="bg-white rounded-r border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 4v16m8-8H4"
          />
        </svg>
      </button>
    </div>

    <button
      class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 mt-4 w-full flex items-center justify-center"
    >
      Add to order
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 ml-2"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
        />
      </svg>
    </button>
  </div>
</div>

<body>
    <!-- Contenido de la página -->
    <button id="myButton">Haz clic</button>
</body>

document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        alert('¡Haz hecho clic en el botón!');
    });
});

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}

h1 {
    color: #333333;
}

p {
    color: #666666;
}

ul {
    color: #777777;
}

<body>
    <h1>Bienvenido a mi página web</h1>
    <p>¡Hola a todos! Esta es mi primera página web.</p>
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
    </ul>
</body>

<!DOCTYPE html>
<html>
<head>
      <title>Mi Página Web</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
      <script src="script.js"></script>
</head>
<body>
      <!-- Contenido de la página -->
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>keuze deel portfolio</title>
  <meta charset="UTF-8">
</head>
<body>
  <header>
    <h1>Hey im your new web-developer</h1>
     <a> href="#"> class="call-to-action>Contact me for a little chat</a>
  </header>
  <nav>
    <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </nav>
  <main>
    <h2>about me</h2>
    <p> Hello, I am a web developer passionate about creating awesome websites.</p>
     <h2>Wat gaat het kosten</h2>
     <p>Duis arcu massa, scelerisque vitae,
         consequat in,
          pretium a, enim. Pellentesque congue.
           Ut in risus volutpat libero pharetra tempor.
            Cras vestibulum bibendum augue. Praesent egestas leo in pede.
             Praesent blandit odio eu enim.
     </p>
<ul>
    <li>kostem 1</li>  
    <li>kosten 2</li>
    <li>kosten 3</li>
    <li>kosten 3</li>
    <li>kosten 3</li>
    <li>kosten 3</li>
</ul>

<form action="/submit-contact-form" method="POST">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email:</label>
      <input type="text" id="email" name="email" required>

      <label for="message">Message:</label>
      <textarea id="message" name="message" rows="5" required></textarea>

      <input type="submit" value="Submit">

<!-- Include the library. -->
<script
  src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js"
></script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
   rel="stylesheet"
   href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css"
/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    GitHubCalendar(".calendar", "your-username");
    // or enable responsive functionality
    GitHubCalendar(".calendar", "your-username", { responsive: true });
</script>
            

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

// JavaScript const variables must be assigned a value when 
//   they are declared : 

// Correct
const PI = 3.14159265359;

// Incorrect
const PI;
PI = 3.14159265359;

// Always declare a variable with const when you know that 
// the value should not be changed.
// Use const when you declare:
// * A new Array
// * A new Object
// * A new Function
// * A new RegExp

//You can change the elements of a constant array :
// You can create a constant array :
const cars = ["Saab", "Volvo", "BMW"];
// You can change an element :
cars[0] = "Toyota";
// You can add an element :
cars.push("Audi");

// But you can NOT reassign the array :
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; 
// This creates an ERROR

// You can create a const object :
const car = {type:"Fiat", model:"500", color:"white"};
// You can change a property:
car.color = "red";
// You can add a property:
car.owner = "Johnson";

// But you can NOT reassign the object :
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};   
// ERROR

// Declaring a variable with const is similar to let when it
// comes to Block Scope. The x declared in the block, in this
// example, is not the same as the x declared outside the
// block:
const x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10

// Declaring a variable with const is similar to let when it 
// comes to Block Scope. The x declared in the block, in this
// example, is not the same as the x declared outside the
// block:
var x = 2;     // Allowed
var x = 3;     // Allowed
x = 4;         // Allowed

// New Example
var x = 2;     // Allowed
const x = 2;   // Not allowed

{
let x = 2;     // Allowed
const x = 2;   // Not allowed
}

{
const x = 2;   // Allowed
const x = 2;   // Not allowed

  //New Example
const x = 2;     // Allowed
x = 2;           // Not allowed
var x = 2;       // Not allowed
let x = 2;       // Not allowed
const x = 2;     // Not allowed

{
  const x = 2;   // Allowed
  x = 2;         // Not allowed
  var x = 2;     // Not allowed
  let x = 2;     // Not allowed
  const x = 2;   // Not allowed

//New Example
const x = 2;       // Allowed
{
  const x = 3;   // Allowed
}
{
  const x = 4;   // Allowed
}

//Example Variables
var x = 5;
var y = 6;
var z = x + y; // or 11

// Same result, but "let"
let x = 5;
let y = 6;
let z = x + y;

// Again, but "const"
const x = 5;
const y = 6;
const z = x + y;

//Mixed Concept
const price1 = 5;
const price2 = 6;
let total = price1 + price2;

// You can declare many variables in one statement.
// Start the statement with let and separate the variables by comma:
let person = "John Doe", carName = "Volvo", price = 200;

// A declaration can span multiple lines:
let person = "John Doe",
carName = "Volvo",
price = 200;

// JavaScript Dollar Sign $
// Since JavaScript treats a dollar sign as a letter, identifiers containing 
// $ are valid variable names:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

//In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator.
//This is different from algebra. The following does not make sense in algebra:
x = x + 
  
// JavaScript variables can hold numbers like 100 and text values like "John Doe".
// In programming, text values are called text strings.
// JavaScript can handle many types of data, but for now, just think of numbers and strings.
// Strings are written inside double or single quotes. Numbers are written without quotes.
// If you put a number in quotes, it will be treated as a text string. Example :
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

// As with algebra, you can do arithmetic with JavaScript variables, using operators like = and + :
let x = 5 + 2 + 3;
// You can also add strings, but strings will be concatenated:
let x = "Venus" + " " + "Martinez";
// Also try this : 
let x = "5" + 2 + 3; // Hint #523 

<!DOCTYPE html>
<html>
<body>

<h2>Practicing HTML</h2>
<h3>My JavaScript Lesson</h3>

<p>You can use document.write to calculate numbers and add words in to fill in the information outside of it.</p>

<script>
document.write(176 + 323 + " have officially rsvp'd, " + 325 * 3 + " people have indicated possibly rsvping. Another " + 34 + " haven't responded.");
</script>

</body>
</html> 

//This is a bunch of JavaScript Code to be used in HTML

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

//This section follows the html tags up until <head> this goes in head & body both
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
//Add more body text here if you'd like finish up with footer possibly,
//   and close it all up


//This one is similar the the last except this one, JavaScript goes in the
// <body> instead of the <head> 
<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>


//This one is the External Version Of The Above Two
//  Make a file labeled "anything.js" {literally anything}
//    Insert This Inside
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
//Now you'll need to put something like this inside your .html document
<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>
//This ^^^ is the most essential of these lines in this example

// "Placing scripts in external files has some advantages:
//   * It separates HTML and code
//   * It makes HTML and JavaScript easier to read and maintain
//   * Cached JavaScript files can speed up page loads"
//The above notes quoted directly from :
<a href="https://www.w3schools.com/Js/js_whereto.asp">This Site</a>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!">"Click Me!"</button>

*,
body {
    box-sizing: border-box;
}

body {
    width: 96%;
    margin: auto;
    margin-top: 5%;
    text-align: center;
}

fieldset {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    padding: 5vw;
    height: 6vw;
    display: flex;
    flex-direction: column;
    justify-content:center;
    
}


#formContent {
    width: 25%;
    background-color: lightslategray;
}

::placeholder {
    text-align: center;
}

function formularioIMC() {
    // Caja formulario o etiqueta padre. Hija de un