refactor the GUI generation for user interaction

1 files changed, 625 insertions, 0 deletions

diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css b/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css
new file mode 100644
index 000000000..a8735be60
--- /dev/null
+++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css
@@ -0,0 +1,625 @@
+@charset "utf-8";
+	@media screen and (min-width: 650px) {
+			
+				body {
+					margin:0;
+					padding:0;
+					color : #000;
+					background-color : #fff;
+			  	text-align: center;
+			  	background-color: #6B7B8B;
+				}
+                
+                .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+				
+        #localBKU p {
+          font-size: 0.7em;
+        } 
+        
+        #localBKU input{
+          font-size: 0.85em;
+          /*border-radius: 5px;*/
+        }
+        
+         #bkuselectionarea input[type=button] {
+          font-size: 0.85em;
+          /*border-radius: 7px;*/
+          margin-bottom: 25px;
+          min-width: 80px;
+         }
+        
+        #mandateLogin {
+          font-size: 0.85em;
+        }
+        
+        #bku_header h2 {
+          font-size: 0.8em;
+        } 
+        
+        
+			  #page {
+			    display: block;
+			    border: 2px solid rgb(0,0,0);
+			    width: 650px;
+			    height: 460px;
+			    margin: 0 auto;
+			    margin-top: 5%;
+			    position: relative;
+			    border-radius: 25px;
+			    background: rgb(255,255,255);
+			  }
+			  
+			  #page1 {
+			    text-align: center;
+			  }
+			  
+			  #main {
+			    /*	clear:both; */
+				  position:relative;
+			    margin: 0 auto;
+			    width: 250px;
+			    text-align: center;
+			  }
+			  
+			  .OA_header {
+			/*	  background-color: white;*/
+			    font-size: 20pt;
+			    margin-bottom: 25px;
+			    margin-top: 25px;
+			  }
+			
+			  #leftcontent {
+			    /*float:left; */
+				  width:250px;
+				  margin-bottom: 25px;
+			    text-align: left;
+			    border: 1px solid rgb(0,0,0);
+			  }
+			  			  
+			  #selectArea {
+				 font-size: 15px;
+				 padding-bottom: 65px;
+			  }
+			
+			  #leftcontent {
+				 width: 300px;
+				 margin-top: 30px;
+			  }
+			
+        #bku_header {
+          height: 5%;
+          padding-bottom: 3px;
+          padding-top: 3px;
+        }
+      
+        #bkulogin {
+				  overflow:hidden;	
+          min-width: 190px;
+          min-height: 180px;
+          /*height: 260px;*/	
+			  }
+      
+        h2#tabheader{
+				  font-size: 1.1em; 
+          padding-left: 2%;
+          padding-right: 2%;
+          position: relative;
+			  }
+      	
+        #stork h2 {
+          font-size: 1.0em;
+          margin-bottom: 2%;
+        }
+        		  
+			  .setAssertionButton_full {
+			  	background: #efefef;
+				  cursor: pointer;
+				  margin-top: 15px;
+			    width: 100px;
+			    height: 30px
+			  }
+			
+			  #leftbutton  {
+				 width: 30%; 
+				 float:left; 
+				 margin-left: 40px;
+			  }
+			
+			  #rightbutton {
+				 width: 30%; 
+				 float:right; 
+				 margin-right: 45px; 
+				 text-align: right;
+			  }
+        
+        button {
+          height: 25px;
+          width: 75px;
+          margin-bottom: 10px;
+        }
+        
+        
+        
+       #validation {
+        position: absolute;
+        bottom: 0px;
+        margin-left: 270px;
+        padding-bottom: 10px;
+      }
+			
+			}
+
+      @media screen and (max-width: 205px) {
+        #localBKU p {
+          font-size: 0.6em;
+        }
+       .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+        
+        #localBKU input {
+          font-size: 0.6em;
+          min-width: 60px;
+         /* max-width: 65px; */
+          min-height: 1.0em;
+         /* border-radius: 5px; */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 0.7em;
+          min-width: 55px;
+          /*min-height: 1.1em;
+          border-radius: 5px;*/
+          margin-bottom: 2%
+        }
+        
+        #mandateLogin {
+          font-size: 0.65em;
+        }
+        
+        #bku_header h2 {
+          font-size: 0.8em;
+          margin-top: -0.4em;
+          padding-top: 0.4em;
+        }
+        
+        #bkulogin {
+        min-height: 150px;
+        } 
+      }
+
+      @media screen and (max-width: 249px) and (min-width: 206px) {
+        #localBKU p {
+          font-size: 0.7em;
+        } 
+        .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+        
+        #localBKU input {
+          font-size: 0.7em;
+          min-width: 70px;
+       /*    max-width: 75px;    */
+          min-height: 0.95em;
+        /*  border-radius: 6px;    */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 0.75em;
+          min-width: 60px;
+      /*    min-height: 0.95em;
+          border-radius: 6px;    */
+          margin-bottom: 5%
+        }
+        
+        #mandateLogin {
+          font-size: 0.75em;
+        }
+        
+        #bku_header h2 {
+          font-size: 0.9em;
+          margin-top: -0.45em;
+          padding-top: 0.45em;
+        }
+        
+        #bkulogin {
+          min-height: 180px;
+        }  
+      }
+
+      @media screen and (max-width: 299px) and (min-width: 250px) {
+        #localBKU p {
+          font-size: 0.9em;
+        } 
+        .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+        
+        #localBKU input {
+          font-size: 0.8em;
+          min-width: 70px;
+       /*    max-width: 75px;      */
+      /*    border-radius: 6px;  */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 0.85em;
+     /*     min-height: 1.05em;
+          border-radius: 7px;        */
+          margin-bottom: 10%;
+        }
+        
+        #mandateLogin {
+          font-size: 1em;
+        }
+        
+        #bku_header h2 {
+          font-size: 1.0em;
+          margin-top: -0.50em;
+          padding-top: 0.50em;
+        } 
+      }
+
+      @media screen and (max-width: 399px) and (min-width: 300px) {
+        #localBKU p {
+          font-size: 0.9em;
+        } 
+        .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+        #localBKU input {
+          font-size: 0.8em;
+          min-width: 70px;
+      /*     max-width: 75px;     */
+      /*    border-radius: 6px;       */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 0.9em;
+   /*       min-height: 1.2em;
+          border-radius: 8px;          */
+          margin-bottom: 10%;
+          max-width: 80px;
+        }
+        
+        #mandateLogin {
+          font-size: 1em;
+        }
+        
+        #bku_header h2 {
+          font-size: 1.1em;
+          margin-top: -0.55em;
+          padding-top: 0.55em;
+        } 
+      }
+      
+      @media screen and (max-width: 649px) and (min-width: 400px) {
+        #localBKU p {
+          font-size: 0.9em;
+        } 
+       .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        } 
+        #localBKU input {
+          font-size: 0.8em;
+          min-width: 70px;
+      /*     max-width: 80px;       */
+     /*     border-radius: 6px;          */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 1.0em;
+     /*      min-height: 1.3em;
+         border-radius: 10px;         */
+          margin-bottom: 10%;
+          max-width: 85px;
+        }
+        
+        #mandateLogin {
+          font-size: 1.2em;
+        }
+        
+        #bku_header h2 {
+          font-size: 1.3em;
+          margin-top: -0.65em;
+          padding-top: 0.65em;
+        } 
+      }
+
+
+			
+			@media screen and (max-width: 649px) {
+				
+        body {
+					margin:0;
+					padding:0;
+					color : #000;
+			  	text-align: center;
+          font-size: 100%;
+			  	background-color: $MAIN_BACKGOUNDCOLOR;
+				}
+        		.browserInfoButton{
+                    color: rgb(128, 128, 128); 
+                }		
+			  #page {
+			     visibility: hidden;
+			     margin-top: 0%;
+			  }
+			  
+			  #page1 {
+			    visibility: hidden;
+			  }
+			  
+			  #main {
+			    visibility: hidden;
+			  }
+        
+        #validation {
+          visibility: hidden;
+          display: none;
+        }
+			  
+			  .OA_header {
+			    margin-bottom: 0px;
+			    margin-top: 0px;
+			    font-size: 0pt;
+			    visibility: hidden;
+			  }
+			
+			  #leftcontent {
+			    visibility: visible;
+			    margin-bottom: 0px;
+			    text-align: left;
+			    border:none;
+          vertical-align: middle;
+          min-height: 173px;
+          min-width: 204px;
+          
+			  }
+			  
+        #bku_header {
+          height: 10%;
+          min-height: 1.2em;
+          margin-top: 1%;
+        }
+        
+        h2#tabheader{
+          padding-left: 2%;
+          padding-right: 2%;
+          position: relative;
+          top: 50%;
+			  }
+        
+        #stork h2 {
+          font-size: 0.9em;
+          margin-bottom: 2%;
+        }
+        
+       	#bkulogin {	
+          min-width: 190px;
+          min-height: 155px;	
+			 }
+        
+			 .setAssertionButton_full {
+			     	background: #efefef;
+				    cursor: pointer;
+				    margin-top: 15px;
+			      width: 70px;
+			      height: 25px;
+			 }
+       
+        input[type=button] {
+/*          height: 11%;  */
+          width: 70%;
+        }
+			}
+			      
+			* {
+				margin: 0;
+				padding: 0;
+				#if($FONTTYPE)
+        	font-family: $FONTTYPE;
+        #end
+			}
+							      			
+			#selectArea {
+				padding-top: 10px;
+				padding-bottom: 55px;
+				padding-left: 10px;
+			}
+			
+			.setAssertionButton {
+				background: #efefef;
+				cursor: pointer;
+				margin-top: 15px;
+			  width: 70px;
+			  height: 25px;
+			}
+			
+			#leftbutton  {
+				width: 35%; 
+				float:left; 
+				margin-left: 15px;
+			}
+			
+			#rightbutton {
+				width: 35%; 
+				float:right; 
+				margin-right: 25px; 
+				text-align: right;
+			}
+			
+			#stork {
+			    /*margin-bottom: 10px;*/
+			   /* margin-top: 5px; */
+			}
+      			
+      #mandateLogin {
+        padding-bottom: 4%;
+        padding-top: 4%;
+        height: 10%;
+        position: relative;
+        text-align: center;
+			}
+      
+      .verticalcenter {
+        vertical-align: middle;
+      }
+      
+      #mandateLogin div {
+        clear: both;
+        margin-top: -1%;
+        position: relative;
+        top: 50%;
+      }
+      
+      #bkuselectionarea {
+          position: relative;
+          display: block;
+      }
+      
+      #localBKU {
+        padding-bottom: 4%;
+        /*padding-top: 4%;*/
+        position: relative;
+        clear: both;     
+        text-align: center;
+			}
+          			
+			#bkukarte {
+				float:left;
+				text-align:center;
+				width:40%;
+        min-height: 70px;
+        padding-left: 5%;
+        padding-top: 2%;
+			}
+			
+			#bkuhandy {
+				float:right;
+				text-align:center;
+				width:40%;
+        min-height: 90px;
+        padding-right: 5%;
+        padding-top: 2%;
+			}
+			
+      .bkuimage {
+        width: 90%;
+        height: auto;
+      }
+      
+			#mandate{
+				text-align:center;
+				padding : 5px 5px 5px 5px;
+			}
+      
+/*		input[type=button], .sendButton {
+				background: $BUTTON_BACKGROUNDCOLOR;
+        color: $BUTTON_COLOR;
+/*				border:1px solid #000;  */
+/*				cursor: pointer;
+/*        box-shadow: 3px 3px 3px #222222;  */
+/*			}
+			
+/*      button:hover, button:focus, button:active, 
+      .sendButton:hover , .sendButton:focus, .sendButton:active,
+      #mandateCheckBox:hover, #mandateCheckBox:focus, #mandateCheckBox:active {
+				background: $BUTTON_BACKGROUNDCOLOR_FOCUS;
+        color: $BUTTON_COLOR;
+/*				border:1px solid #000;                */
+/*				cursor: pointer;
+/*        box-shadow: -1px -1px 3px #222222;  */
+/*			}
+      
+*/      
+			input {
+				/*border:1px solid #000;*/
+				cursor: pointer;
+			}
+      
+      #localBKU input {
+/*        color: $BUTTON_COLOR;  */
+        /*border: 0px;*/
+        display: inline-block;
+        
+      }
+			
+      #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
+        /*text-decoration: underline;*/
+      }
+      
+			#installJava, #BrowserNOK {
+				clear:both;
+				font-size:0.8em;
+				padding:4px;
+			}
+						
+			.selectText{
+			
+			}
+			
+			.selectTextHeader{
+			
+			}
+			
+			.sendButton {
+        width: 30%;
+        margin-bottom: 1%;	
+			}
+			
+			#leftcontent a {
+				text-decoration:none; 
+				color: #000;
+			/*	display:block;*/
+				padding:4px;	
+			}
+			
+			#leftcontent a:hover, #leftcontent a:focus, #leftcontent a:active {
+				text-decoration:underline;
+				color: #000;	
+			}
+						
+			.infobutton {
+				background-color: #005a00;
+				color: white;
+				font-family: serif;
+				text-decoration: none;
+				padding-top: 2px;
+				padding-right: 4px;
+				padding-bottom: 2px;
+				padding-left: 4px;
+				font-weight: bold;
+			}
+			
+			.hell {
+				background-color : $MAIN_BACKGOUNDCOLOR;
+        color: $MAIN_COLOR;	
+			}
+			
+			.dunkel {
+				background-color: $HEADER_BACKGROUNDCOLOR;
+        color: $HEADER_COLOR;
+			}
+			      
+			.main_header {
+			   color: black;
+			    font-size: 32pt;
+			    position: absolute;
+			    right: 10%;
+			    top: 40px;
+				
+			}
+      
+      #ssoSessionTransferBlock {
+        font-size: 0.8em;
+        margin-left: 5px;
+        margin-bottom: 5px;
+      }
+      
+      #alert_area {
+        width: 500px;
+        padding-left: 80px;
+      }
\ No newline at end of file