<div id="display-container">
<div class="page-title"><div class="flag-border" id="flag-border-0"></div><h2>WORLD CUP 2018</h2><div class="flag-border" id="flag-border-1"></div></div>
<div id="field-container">
<div id="group-AG" class="round-column">
<div id="AC" class="doublet">
<div id="groupA" class="group-select">
<select id="A1" class="team-select group1 groupteam">
<option value="" selected>Group A</option>
<option value="Russia">Russia</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Egypt">Egypt</option>
<option value="Uruguay">Uruguay</option>
</select>
<select id="A2" class="team-select group2 groupteam">
<option value="" selected></option>
<option value="Russia">Russia</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Egypt">Egypt</option>
<option value="Uruguay">Uruguay</option>
</select>
<select id="A3" class="team-select groupteam">
<option value="" selected></option>
<option value="Russia">Russia</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Egypt">Egypt</option>
<option value="Uruguay">Uruguay</option>
</select>
<select id="A4" class="team-select groupteam">
<option value="" selected></option>
<option value="Russia">Russia</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Egypt">Egypt</option>
<option value="Uruguay">Uruguay</option>
</select>
</div>
<div id="groupC" class="group-select">
<select id="C1" class="team-select group1 groupteam">
<option value="" selected>Group C</option>
<option value="France">France</option>
<option value="Australia">Australia</option>
<option value="Peru">Peru</option>
<option value="Denmark">Denmark</option>
</select>
<select id="C2" class="team-select group2 groupteam">
<option value="" selected></option>
<option value="France">France</option>
<option value="Australia">Australia</option>
<option value="Peru">Peru</option>
<option value="Denmark">Denmark</option>
</select>
<select id="C3" class="team-select groupteam">
<option value="" selected></option>
<option value="France">France</option>
<option value="Australia">Australia</option>
<option value="Peru">Peru</option>
<option value="Denmark">Denmark</option>
</select>
<select id="C4" class="team-select groupteam">
<option value="" selected></option>
<option value="France">France</option>
<option value="Australia">Australia</option>
<option value="Peru">Peru</option>
<option value="Denmark">Denmark</option>
</select>
</div>
</div>
<div id="EG" class="doublet">
<div id="groupE" class="group-select">
<select id="E1" class="team-select group1 groupteam">
<option value="" selected>Group E</option>
<option value="Brazil">Brazil</option>
<option value="Switzerland">Switzerland</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Serbia">Serbia</option>
</select>
<select id="E2" class="team-select group2 groupteam">
<option value="" selected></option>
<option value="Brazil">Brazil</option>
<option value="Switzerland">Switzerland</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Serbia">Serbia</option>
</select>
<select id="E3" class="team-select groupteam">
<option value="" selected></option>
<option value="Brazil">Brazil</option>
<option value="Switzerland">Switzerland</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Serbia">Serbia</option>
</select>
<select id="E4" class="team-select groupteam">
<option value="" selected></option>
<option value="Brazil">Brazil</option>
<option value="Switzerland">Switzerland</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Serbia">Serbia</option>
</select>
</div>
<div id="groupG" class="group-select">
<select id="G1" class="team-select group1 groupteam">
<option value="" selected>Group G</option>
<option value="Belgium">Belgium</option>
<option value="Panama">Panama</option>
<option value="Tunisia">Tunisia</option>
<option value="England">England</option>
</select>
<select id="G2" class="team-select group2 groupteam">
<option value="" selected></option>
<option value="Belgium">Belgium</option>
<option value="Panama">Panama</option>
<option value="Tunisia">Tunisia</option>
<option value="England">England</option>
</select>
<select id="G3" class="team-select groupteam">
<option value="" selected></option>
<option value="Belgium">Belgium</option>
<option value="Panama">Panama</option>
<option value="Tunisia">Tunisia</option>
<option value="England">England</option>
</select>
<select id="G4" class="team-select groupteam">
<option value="" selected></option>
<option value="Belgium">Belgium</option>
<option value="Panama">Panama</option>
<option value="Tunisia">Tunisia</option>
<option value="England">England</option>
</select>
</div>
</div>
</div>
<div id="sixteen-AH">
<div id="ABCD" class="sixteen-quarter select-correct">
<div class="sixteen-select">
<div class="team-container">
<input type="text" class="selected entry left-team" name="A1" id="xA1" placeholder="A1"/>
</div>
<div class="team-container">
<select id="AB" class="team-select right-team teenteam entry">
<option value="" selected>A1vB2</option>
<option id="xxA1" value=""></option>
<option id="xxB2" value=""></option>
</select>
</div>
<div class="team-container">
<input type="text" class="selected entry left-team" name="B2" id="xB2" placeholder="B2"/>
</div>
</div>
<div class="sixteen-select">
<div class="team-container">
<input type="text" class="selected entry left-team" name="C1" id="xC1" placeholder="C1"/>
</div>
<div class="team-container">
<select id="CD" class="team-select right-team teenteam entry">
<option value="" selected>C1vD2</option>
<option id="xxC1" value=""></option>
<option id="xxD2" value=""></option>
</select>
</div>
<div class="team-container">
<input type="text" class="selected entry left-team" name="D2" id="xD2" placeholder="D2"/>
</div>
</div>
</div>
<div id="EFGH" class="sixteen-quarter select-correct">
<div class="sixteen-select">
<div class="team-container">
<input type="text" class="selected entry left-team" name="E1" id="xE1" placeholder="E1"/>
</div>
<div class="team-container">
<select id="EF" class="team-select right-team teenteam entry">
<option value="" selected>E1vF2</option>
<option id="xxE1" value=""></option>
<option id="xxF2" value=""></option>
</select>
</div>
<div class="team-container">
<input type="text" class="selected entry left-team" name="F2" id="xF2" placeholder="F2"/>
</div>
</div>
<div class="sixteen-select">
<div class="team-container">
<input type="text" class="selected entry left-team" name="G1" id="xG1" placeholder="G1"/>
</div>
<div class="team-container">
<select id="GH" class="team-select right-team teenteam entry">
<option value="" selected>G1vH2</option>
<option id="xxG1" value=""></option>
<option id="xxH2" value=""></option>
</select>
</div>
<div class="team-container">
<input type="text" class="selected entry left-team" name="H2" id="xH2" placeholder="H2"/>
</div>
</div>
</div>
</div>
<div id="four-AH" class="overlap four-round">
<div class="four-center">
<div class="four-select select-correct">
<div class="team-container">
<select id="ABCD" class="team-select left-team quarteam entry">
<option value="" selected>QUARTERFINALIST</option>
<option id="xAB" value=""></option>
<option id="xCD" value=""></option>
</select>
</div>
<div class="team-container left-final">
<select id="ABCDEFGH" class="team-select right-team semiteam entry">
<option value="" selected>SEMIFINALIST</option>
<option id="xABCD" value=""></option>
<option id="xEFGH" value=""></option>
</select>
</div>
<div class="team-container">
<select id="EFGH" class="team-select left-team quarteam entry">
<option value="" selected>QUARTERFINALIST</option>
<option id="xEF" value=""></option>
<option id="xGH" value=""></option>
</select>
</div>
</div>
</div>
</div>
<div id="winner" class="overlap">
<div class="winner-center">
<select id="cup-winner" class="team-select winteam">
<option value="" selected>WINNER</option>
<option id="xABCDEFGH" value=""></option>
<option id="xBADCFEHG" value=""></option>
</select>
</div>
</div>
<div id="four-BG" class="overlap four-round">
<div class="four-center">
<div class="four-select select-correct">
<div class="team-container">
<select id="BADC" class="team-select right-team quarteam entry">
<option value="" selected>QUARTERFINALIST</option>
<option id="xBA" value=""></option>
<option id="xDC" value=""></option>
</select>
</div>
<div class="team-container right-final">
<select id="BADCFEHG" class="team-select left-team semiteam entry">
<option value="" selected>SEMIFINALIST</option>
<option id="xBADC" value=""></option>
<option id="xFEHG" value=""></option>
</select>
</div>
<div class="team-container">
<select id="FEHG" class="team-select right-team quarteam entry">
<option value="" selected>QUARTERFINALIST</option>
<option id="xFE" value=""></option>
<option id="xHG" value=""></option>
</select>
</div>
</div>
</div>
</div>
<div id="sixteen-BG" class="overlap">
<div id="BADC" class="sixteen-quarter select-correct">
<div class="sixteen-select">
<div class="team-container">
<input type="text" class="selected entry right-team" name="B1" id="xB1" placeholder="B1"/>
</div>
<div class="team-container">
<select id="BA" class="team-select left-team teenteam entry">
<option value="" selected>B1vA2</option>
<option id="xxB1" value=""></option>
<option id="xxA2" value=""></option>
</select>
</div>
<div class="team-container">
<input type="text" class="selected entry right-team" name="A2" id="xA2" placeholder="A2"/>
</div>
</div>
<div class="sixteen-select">
<div class="team-container">
<input type="text" class="selected entry right-team" name="D1" id="xD1" placeholder="D1"/>
</div>
<div class="team-container">
<select id="DC" class="team-select left-team teenteam entry">
<option value="" selected>D1vC2</option>
<option id="xxD1" value=""></option>
<option id="xxC2" value=""></option>
</select>
</div>
<div class="team-container">
<input type="text" class="selected entry right-team" name="C2" id="xC2" placeholder="C2"/>
</div>
</div>
</div>
<div id="FEHG" class="sixteen-quarter select-correct">
<div class="sixteen-select">
<div class="team-container">
<input type="text" class="selected entry right-team" name="F1" id="xF1" placeholder="F1"/>
</div>
<div class="team-container">
<select id="FE" class="team-select left-team teenteam entry">
<option value="" selected>F1vE2</option>
<option id="xxF1" value=""></option>
<option id="xxE2" value=""></option>
</select>
</div>
<div class="team-container">
<input type="text" class="selected entry right-team" name="E2" id="xE2" placeholder="E2"/>
</div>
</div>
<div class="sixteen-select">
<div class="team-container">
<input type="text" class="selected entry right-team" name="H1" id="xH1" placeholder="H1"/>
</div>
<div class="team-container">
<select id="HG" class="team-select left-team teenteam entry">
<option value="" selected>H1vG2</option>
<option id="xxH1" value=""></option>
<option id="xxG2" value=""></option>
</select>
</div>
<div class="team-container">
<input type="text" class="selected entry right-team" name="G2" id="xG2" placeholder="G2"/>
</div>
</div>
</div>
</div>
<div id="group-BH" class="round-column">
<div id="BD" class="doublet">
<div id="groupB" class="group-select">
<select id="B1" class="team-select group1 groupteam">
<option value="" selected>Group B</option>
<option value="Portugal">Portugal</option>
<option value="Spain">Spain</option>
<option value="Morocco">Morocco</option>
<option value="Iran">Iran</option>
</select>
<select id="B2" class="team-select group2 groupteam">
<option value="" selected></option>
<option value="Portugal">Portugal</option>
<option value="Spain">Spain</option>
<option value="Morocco">Morocco</option>
<option value="Iran">Iran</option>
</select>
<select id="B3" class="team-select groupteam">
<option value="" selected></option>
<option value="Portugal">Portugal</option>
<option value="Spain">Spain</option>
<option value="Morocco">Morocco</option>
<option value="Iran">Iran</option>
</select>
<select id="B4" class="team-select groupteam">
<option value="" selected></option>
<option value="Portugal">Portugal</option>
<option value="Spain">Spain</option>
<option value="Morocco">Morocco</option>
<option value="Iran">Iran</option>
</select>
</div>
<div id="groupD" class="group-select">
<select id="D1" class="team-select group1 groupteam">
<option value="" selected>Group D</option>
<option value="Argentina">Argentina</option>
<option value="Iceland">Iceland</option>
<option value="Croatia">Croatia</option>
<option value="Nigeria">Nigeria</option>
</select>
<select id="D2" class="team-select group2 groupteam">
<option value="" selected></option>
<option value="Argentina">Argentina</option>
<option value="Iceland">Iceland</option>
<option value="Croatia">Croatia</option>
<option value="Nigeria">Nigeria</option>
</select>
<select id="D3" class="team-select groupteam">
<option value="" selected></option>
<option value="Argentina">Argentina</option>
<option value="Iceland">Iceland</option>
<option value="Croatia">Croatia</option>
<option value="Nigeria">Nigeria</option>
</select>
<select id="D4" class="team-select groupteam">
<option value="" selected></option>
<option value="Argentina">Argentina</option>
<option value="Iceland">Iceland</option>
<option value="Croatia">Croatia</option>
<option value="Nigeria">Nigeria</option>
</select>
</div>
</div>
<div id="FH" class="doublet">
<div id="groupF" class="group-select">
<select id="F1" class="team-select group1 groupteam">
<option value="" selected>Group F</option>
<option value="Germany">Germany</option>
<option value="Mexico">Mexico</option>
<option value="Sweden">Sweden</option>
<option value="Korea Republic">Korea Republic</option>
</select>
<select id="F2" class="team-select group2 groupteam">
<option value="" selected></option>
<option value="Germany">Germany</option>
<option value="Mexico">Mexico</option>
<option value="Sweden">Sweden</option>
<option value="Korea Republic">Korea Republic</option>
</select>
<select id="F3" class="team-select groupteam">
<option value="" selected></option>
<option value="Germany">Germany</option>
<option value="Mexico">Mexico</option>
<option value="Sweden">Sweden</option>
<option value="Korea Republic">Korea Republic</option>
</select>
<select id="F4" class="team-select groupteam">
<option value="" selected></option>
<option value="Germany">Germany</option>
<option value="Mexico">Mexico</option>
<option value="Sweden">Sweden</option>
<option value="Korea Republic">Korea Republic</option>
</select>
</div>
<div id="groupH" class="group-select">
<select id="H1" class="team-select group1 groupteam">
<option value="" selected>Group H</option>
<option value="Poland">Poland</option>
<option value="Senegal">Senegal</option>
<option value="Colombia">Colombia</option>
<option value="Japan">Japan</option>
</select>
<select id="H2" class="team-select group2 groupteam">
<option value="" selected></option>
<option value="Poland">Poland</option>
<option value="Senegal">Senegal</option>
<option value="Colombia">Colombia</option>
<option value="Japan">Japan</option>
</select>
<select id="H3" class="team-select groupteam">
<option value="" selected></option>
<option value="Poland">Poland</option>
<option value="Senegal">Senegal</option>
<option value="Colombia">Colombia</option>
<option value="Japan">Japan</option>
</select>
<select id="H4" class="team-select groupteam">
<option value="" selected></option>
<option value="Poland">Poland</option>
<option value="Senegal">Senegal</option>
<option value="Colombia">Colombia</option>
<option value="Japan">Japan</option>
</select>
</div>
</div>
</div>
</div>
<div id="button-box">
<button id="test-btn">RANDOM</button>
</div>
<div id="button-box">
<button id="com-btn">COMMIT</button>
</div>
<div id="pocket-ref">
<div id="fc-1" class="flag-col flag-32">
<div class="flag-group">
<div id="fA1" class="aflag gflag"></div>
<div id="fA2" class="aflag gflag"></div>
<div id="fA3" class="aflag gflag"></div>
<div id="fA4" class="aflag gflag"></div>
</div>
<div class="flag-group">
<div id="fC1" class="aflag gflag"></div>
<div id="fC2" class="aflag gflag"></div>
<div id="fC3" class="aflag gflag"></div>
<div id="fC4" class="aflag gflag"></div>
</div>
<div class="flag-group">
<div id="fE1" class="aflag gflag"></div>
<div id="fE2" class="aflag gflag"></div>
<div id="fE3" class="aflag gflag"></div>
<div id="fE4" class="aflag gflag"></div>
</div>
<div class="flag-group">
<div id="fG1" class="aflag gflag"></div>
<div id="fG2" class="aflag gflag"></div>
<div id="fG3" class="aflag gflag"></div>
<div id="fG4" class="aflag gflag"></div>
</div>
</div>
<div id="fc-2" class="flag-col flag-16">
<div class="flag-knock1">
<div id="fA1k" class="aflag"></div>
<div id="fB2k" class="aflag"></div>
</div>
<div class="flag-knock1">
<div id="fC1k" class="aflag"></div>
<div id="fD2k" class="aflag"></div>
</div>
<div class="flag-knock1">
<div id="fE1k" class="aflag"></div>
<div id="fF2k" class="aflag"></div>
</div>
<div class="flag-knock1">
<div id="fG1k" class="aflag"></div>
<div id="fH2k" class="aflag"></div>
</div>
</div>
<div id="fc-3" class="flag-col flag-8">
<div class="flag-knock2">
<div id="fAB" class="aflag"></div>
<div id="fCD" class="aflag"></div>
<div id="fEF" class="aflag"></div>
<div id="fGH" class="aflag"></div>
</div>
</div>
<div id="fc-4" class="flag-col flag-4 flag-over">
<div class="flag-knock3 left-3">
<div id="fABCD" class="aflag"></div>
<div id="fEFGH" class="aflag"></div>
</div>
</div>
<div id="fc-5" class="flag-col flag-2 flag-over">
<div class="flag-knock4 left-4">
<div id="fABCDEFGH" class="aflag"></div>
</div>
</div>
<div id="fc-6" class="flag-col flag-1 flag-over">
<div id="fcup-winner" class="flag-win aflag"></div>
</div>
<div id="fc-7" class="flag-col flag-2 flag-over">
<div class="flag-knock4 right-4">
<div id="fBADCFEHG" class="aflag"></div>
</div>
</div>
<div id="fc-8" class="flag-col flag-4 flag-over">
<div class="flag-knock3 right-3">
<div id="fBADC" class="aflag"></div>
<div id="fFEHG" class="aflag"></div>
</div>
</div>
<div id="fc-9" class="flag-col flag-8 flag-over">
<div class="flag-knock2">
<div id="fBA" class="aflag"></div>
<div id="fDC" class="aflag"></div>
<div id="fFE" class="aflag"></div>
<div id="fHG" class="aflag"></div>
</div>
</div>
<div id="fc-10" class="flag-col flag-16">
<div class="flag-knock1">
<div id="fB1k" class="aflag"></div>
<div id="fA2k" class="aflag"></div>
</div>
<div class="flag-knock1">
<div id="fD1k" class="aflag"></div>
<div id="fC2k" class="aflag"></div>
</div>
<div class="flag-knock1">
<div id="fF1k" class="aflag"></div>
<div id="fE2k" class="aflag"></div>
</div>
<div class="flag-knock1">
<div id="fH1k" class="aflag"></div>
<div id="fG2k" class="aflag"></div>
</div>
</div>
<div id="fc-11" class="flag-col flag-32">
<div class="flag-group">
<div id="fB1" class="aflag gflag"></div>
<div id="fB2" class="aflag gflag"></div>
<div id="fB3" class="aflag gflag"></div>
<div id="fB4" class="aflag gflag"></div>
</div>
<div class="flag-group">
<div id="fD1" class="aflag gflag"></div>
<div id="fD2" class="aflag gflag"></div>
<div id="fD3" class="aflag gflag"></div>
<div id="fD4" class="aflag gflag"></div>
</div>
<div class="flag-group">
<div id="fF1" class="aflag gflag"></div>
<div id="fF2" class="aflag gflag"></div>
<div id="fF3" class="aflag gflag"></div>
<div id="fF4" class="aflag gflag"></div>
</div>
<div class="flag-group">
<div id="fH1" class="aflag gflag"></div>
<div id="fH2" class="aflag gflag"></div>
<div id="fH3" class="aflag gflag"></div>
<div id="fH4" class="aflag gflag"></div>
</div>
</div>
</div>
</div>
<!-- FLAG INSERTION SYNTAX
<span class="flag-icon flag-icon-de"></span>
-->
body{
overflow: hidden;
overflow-y: auto;
background: #113559;
font-family: Verdana, Geneva, sans-serif;
}
#display-container{
color: black;
margin-top: 20px;
}
#button-box{
max-width: 1190px;
display: flex;
margin: auto;
padding-top: 20px;
}
.flag-border{
display: flex;
margin: auto;
flex-wrap: wrap;
}
.flagspace{
margin: 1px 2px 1px 2px;
}
.page-title{
display: flex;
flex-direction: column;
margin: auto;
max-width: 1190px;
text-align: center;
color: silver;
padding-bottom: 20px;
}
.page-title h2{
width: 280px;
margin: auto;
}
button{
width: 50%;
margin: auto;
border-radius: 8px;
}
#field-container{
max-width: 1190px;
display: flex;
margin: auto;
padding: 10px 10px 10px 10px;
border-radius: 15px;
border: solid 1px #2B7ED1;
box-shadow: 0px 5px 10px 4px black;
background: #2264A5;
}
.round-column{
min-height: 800px;
}
.overlap{
margin-left: -46px;
}
.four-round{
min-height: 100%; /*RESPONSIVE*/
background: none;
display: flex;
flex-direction: column;
}
.four-center{
background: none;
margin: auto;
display: flex;
flex-direction: column;
}
.four-select{
min-height: 500px;
background: none;
width: 200px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.doublet{
min-height: 50%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.sixteen-quarter{
min-height: 50%;
width: 200px;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
background: none;
}
.group-select{
height: 180px;
width: 144px;
padding: 6px, 0px, 6px, 0px;
display: flex;
flex-direction: column;
justify-content: space-around;
background: none;
border-radius: 5px;
}
.sixteen-select{
min-height: 180px;
min-width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#winner{
background: none;
display: flex;
flex-direction: column;
}
.winner-center{
width: 180px;
min-height: 100%;
background: none;
display: flex;
}
#cup-winner{
text-align: center;
}
.left-final{
padding-bottom: 160px;
}
.right-final{
padding-top: 160px;
}
.team-select{
width: 8em;
font-size: 0.9em;
height: 2em;
margin: auto;
border: none;
border-radius: 8px;
text-align: center;
box-shadow: 0px 0px 5px 1px black;
background: #ced6c5;
font-family: Verdana, Geneva, sans-serif;
}
.selected{
text-align: center;
width: 7em;
font-size: 0.92em;
height: 2em;
padding: 0 0 0 10px;
border: none;
border-radius: 8px;
box-shadow: 0px 0px 5px 1px black;
background: #ced6c5;
}
.team-container{
width: 100%;
}
.left-team{
float: left;
}
.right-team{
float: right;
}
.select-correct{
padding-right: 10px;
padding-left: 5px;
}
#group-AG{
z-index: 7;
}
#sixteen-AH{
padding-left: 10px;
z-index: 6;
}
#four-AH{
z-index: 5;
}
#winner{
z-index: 4;
}
#four-BG{
z-index: 3;
}
#sixteen-BG{
padding-right: 10px;
z-index: 2;
}
#group-BH{
z-index: 1;
}
#pocket-ref{
visibility: hidden;
margin: 40px auto 50px auto;
width: 352px;
padding: 10px 10px 10px 10px;
display: flex;
background: #3366ff;
border-radius: 16px;
box-shadow: 0px 0px 8px 3px black, 0px 0px 200px 5px indigo inset;
/*
-webkit-transform: rotateX(15deg) rotateZ(-5deg) rotateY(10deg) scale3d(1, 1, 1);
transform: rotateX(15deg) rotateZ(-5deg) rotateY(10deg) scale3d(1, 1, 1);
*/
}
.flag-col{
font-size: 1.4em;
width: 50px;
height: 480px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.flag-knock1{
height: 120px;
display: flex;
flex-direction: column;
justify-content: space-around;
border-radius: 20px;
margin-top: 4px;
margin-bottom: 4px;
background: rgba(0, 68, 204, 0.4);
box-shadow: 0px 0px 8px 3px rgba(0, 68, 204, 0.5);
}
.flag-knock2{
height: 476px;
display: flex;
flex-direction: column;
justify-content: space-around;
border-radius: 10px;/*
background: rgba(0, 45, 179, 0.2);
box-shadow: 0px 0px 5px 2px rgba(0, 45, 179, 0.3);*/
}
.flag-knock3{
height: 440px;
display: flex;
flex-direction: column;
justify-content: space-around;
border-radius: 20px;/*
background: rgba(41, 41, 163, 0.4);
box-shadow: 0px 0px 7px 4px rgba(41, 41, 163, 0.4);*/
}
.left-3{
padding-bottom: 24px;
}
.right-3{
padding-top: 24px;
}
.flag-knock4{
height: 398px;
display: flex;
flex-direction: column;
justify-content: space-around;
border-radius: 20px;/*
background: rgba(41, 41, 163, 0.4);
box-shadow: 0px 0px 7px 5px rgba(41, 41, 163, 0.4);*/
}
.left-4{
padding-bottom: 72px;
}
.right-4{
padding-top: 72px;
}
.flag-win{
border-radius: 20px;
background: rgba(255, 71, 26, 0.4);
box-shadow: 0px 0px 30px 20px rgba(255, 71, 26, 0.7);
}
.flag-group{
margin: auto;
border-radius: 5px;
background: rgba(230, 0, 172, 0.4);
box-shadow: 0px 0px 7px 3px rgba(230, 0, 172, 0.4);
}
.flag-over{
margin-left: -24px;
}
.aflag{
margin: auto;
z-index: 2;
}
.gflag{
padding-top: 2px;
padding-bottom: 2px;
}
.flagbox{
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
min-width: 32px;
min-height: 24px;
border-radius: 8px;
box-shadow: 0px 0px 8px 1px gold;
}
@media (max-width: 1199px){
#field-container{
max-width: 460px;
flex-wrap: wrap;
justify-content: space-around;
}
.overlap{
margin-left: 0px;
}
.four-select{
min-height: 180px;
}
.left-final{
padding-bottom: 0px;
}
.right-final{
padding-top: 0px;
}
}
@media (max-width: 610px){
.flag-border{
width: 290px;
}
}
@media (max-width: 509px){
#field-container{
width: 80%;
max-width: 400px;
}
}
var firstList, secondList, knockOutList = [];
var flagLib = {'Russia': "ru",
'Saudi Arabia': "sa",
'Egypt': "eg",
'Uruguay': "uy",
'Portugal': "pt",
'Spain' : "es",
'Morocco': "ma",
'Iran': "ir",
'France':"fr",
'Australia':"au",
'Peru':"pe",
'Denmark':"dk",
'Argentina':"ar",
'Iceland':"is",
'Croatia':"hr",
'Nigeria':"ng",
'Brazil':"br",
'Switzerland':"ch",
'Costa Rica':"cr",
'Serbia':"rs",
'Germany':"de",
'Mexico':"mx",
'Sweden':"se",
'Korea Republic':"kr",
'Belgium':"be",
'Panama':"pa",
'Tunisia':"tn",
'England':"gb",
'Poland':"pl",
'Senegal':"sn",
'Colombia':"co",
'Japan':"jp"};
// RESPONSIVE FUNCTIONS
var smallScreen = window.matchMedia("(max-width: 1199px)");
var maxScreen = window.matchMedia("(min-width: 1200px)");
function moveNode(k){
var kid = document.getElementById(k);
var par = kid.parentNode;
par.appendChild(par.removeChild(kid));
}
function respondScreenMin(mini){
if (mini.matches){
moveNode("sixteen-AH");
moveNode("sixteen-BG");
moveNode("four-AH");
moveNode("four-BG");
moveNode("winner");
}
}
function respondScreenMax(maxi){
if (maxi.matches){
moveNode("four-BG");
moveNode("sixteen-BG");
moveNode("group-BH");
}
}
function testSelect(e){
return e.nodeName === 'SELECT';
}
function getGroupLeaders(){
var jsReturn = document.getElementsByClassName('group1');
firstList = Array.prototype.filter.call(jsReturn, testSelect);
jsReturn = document.getElementsByClassName('group2');
secondList = Array.prototype.filter.call(jsReturn, testSelect);
jsReturn = document.getElementsByClassName('entry');
knockOutList = Array.prototype.filter.call(jsReturn, testSelect);
}
function getAllSelections(){
var jsClasses = document.getElementsByClassName('team-select');
return Array.prototype.filter.call(jsClasses, testSelect);
}
function makeFlag(country){
return "flag-icon-background flag-icon-" + flagLib[country] + " flagbox";
}
function flagBorder(){
var locate0 = document.getElementById("flag-border-0");
var locate1 = document.getElementById("flag-border-1");
var tElem;
var flagLibKeys = Object.keys(flagLib);
for (var m=0; m<32; m++){
tElem = document.createElement('div');
tElem.className = makeFlag(flagLibKeys[m]) + " flagspace";
if (m<16){
locate0.appendChild(tElem);
} else { locate1.appendChild(tElem); }
}
}
function makeNewOption(self=this){
var ufElement;
if (self.type == "change"){
ufElement = self.target;
} else {
ufElement = self;
}
var xDest = document.getElementById("x"+ufElement.id);
if (ufElement.value != ""){
xDest.value = ufElement.value;
xDest.innerHTML = ufElement.value;
}
}
function fillGroupLeaders(){
var x1, x2, xx1, xx2 = document.createElement('option');
for (var i=0; i<firstList.length; i++){
if (firstList[i].value != secondList[i].value){
x1 = document.getElementById("x"+firstList[i].id);
x2 = document.getElementById("x"+secondList[i].id);
xx1 = document.getElementById("x"+x1.id);
xx2 = document.getElementById("x"+x2.id);
if (firstList[i].value != "" && firstList[i].value != x2.value){
x1.value = firstList[i].value;
xx1.value=firstList[i].value;
xx1.innerHTML=firstList[i].value;
}
if (secondList[i].value != "" && secondList[i].value != x1.value){
x2.value = secondList[i].value;
xx2.value=secondList[i].value;
xx2.innerHTML=secondList[i].value;
}
}
}
}
function countryToFlag(elem){
var span = document.createElement('div');
span.className = makeFlag(elem.value);
var destElem1 = document.getElementById("f"+elem.id);
destElem1.appendChild(span);
if (elem.id.search(/1|2/)>-1){
document.getElementById(destElem1.id+"k").appendChild(span.cloneNode());
}
}
function getCountries(){
var selectList = getAllSelections();
for (var o=0; o<selectList.length; o++){
countryToFlag(selectList[o]);
}
}
function makeRandSelTool(num){
var nums = [];
var randNums = [];
var randVal = 0;
for (var n=0; n<num; n++){
nums.push(n+1);
}
for (var t=0; t<num-1; t++){
randVal = Math.floor(Math.random()*nums.length);
randNums.push(nums[randVal]);
nums.splice(randVal, 1);
}
randNums.push(nums[0]);
return randNums;
}
function playOffAuto(classname){
var allBox = document.getElementsByClassName(classname);
var allSel = Array.prototype.filter.call(allBox, testSelect);
for (var y=0; y<allSel.length; y++){
if (allSel[y].hasChildNodes()){
allSel[y].children[0].removeAttribute('selected');
allSel[y].children[Math.floor(Math.random()*2)+1].setAttribute('selected', "");
if (classname != "winteam"){
makeNewOption(allSel[y]);
}
}
}
}
function fillForm(){
var allGroupTeams = document.getElementsByClassName('groupteam');
var allSelect = Array.prototype.filter.call(allGroupTeams, testSelect);
var randSel= makeRandSelTool(4);
for (var x=0; x<allSelect.length; x++){
if (allSelect[x].hasChildNodes()){
allSelect[x].children[0].removeAttribute('selected');
allSelect[x].children[randSel[x%4]].setAttribute('selected', "");
}
if ((x+1)%4==0){
randSel=makeRandSelTool(4);
}
}
fillGroupLeaders();
playOffAuto('teenteam');
playOffAuto('quarteam');
playOffAuto('semiteam');
playOffAuto('winteam');
}
document.addEventListener("DOMContentLoaded", function(){
getGroupLeaders();
respondScreenMin(smallScreen);
respondScreenMax(maxScreen);
maxScreen.addListener(respondScreenMax);
smallScreen.addListener(respondScreenMin);
flagBorder();
firstList.forEach(function(n){
n.onchange=fillGroupLeaders;
})
secondList.forEach(function(n){
n.onchange=fillGroupLeaders;
})
knockOutList.forEach(function(n){
n.onchange=makeNewOption;
})
document.getElementById('com-btn').addEventListener('click', function(){
getCountries();
document.getElementById('pocket-ref').setAttribute('style', 'visibility: visible');
}, {once:true});
document.getElementById('test-btn').addEventListener('click', function(){
fillForm();
}, {once:true});
});
