Merge remote-tracking branch 'origin/databank'

src/main/java/com/lemon/lifecenter/common/LifeCenterErrorController.java

@@ -0,0 +1,40 @@
+package com.lemon.lifecenter.common;
+
+import javax.servlet.RequestDispatcher;
+import javax.servlet.http.HttpServletRequest;
+
+import org.springframework.boot.web.servlet.error.ErrorController;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller 
+public class LifeCenterErrorController implements ErrorController { 
+    private String VIEW_PATH = "/common/";
+    
+    @RequestMapping(value = "/error")
+    public String handleError(HttpServletRequest request) { 
+        Object status = request.getAttribute(RequestDispatcher.ERROR_STATUS_CODE);
+        
+        if(status != null){ 
+            int statusCode = Integer.valueOf(status.toString()); 
+            if( statusCode == HttpStatus.NOT_FOUND.value() ){ 
+                return VIEW_PATH + "404";
+            } else if( statusCode == HttpStatus.INTERNAL_SERVER_ERROR.value() ){ 
+                return VIEW_PATH + "500"; 
+            } else if( statusCode == HttpStatus.BAD_REQUEST.value() ) {
+                return VIEW_PATH + "400";
+            }
+        }
+        
+        return VIEW_PATH + "404";
+    }
+
+    @Override
+    public String getErrorPath() {
+        // TODO Auto-generated method stub
+        return null;
+    }
+}
+
+

src/main/java/com/lemon/lifecenter/common/LifeCenterFunction.java

@@ -191,6 +191,36 @@ public class LifeCenterFunction {
 
         return dateFormat.format(date);
     }
+    
+    public static String changeJuminToBirthday(String dateStr) {
+        String resDate = "";
+        try {
+          SimpleDateFormat df = new SimpleDateFormat("yymmdd");
+          Date date = date = df.parse(dateStr);
+          SimpleDateFormat df1 = new SimpleDateFormat("yyyy년 mm월 dd일");
+          resDate = df1.format(date);
+        } catch (ParseException e) {
+          e.printStackTrace();
+        }
+        return resDate;
+    }
+    
+    public static String removeStringChar(String str, String c) {
+        str = str.replace(c, "");
+        return str;
+    }
+    
+    public static boolean validationDate(String checkDate){
+        try{
+            SimpleDateFormat  dateFormat = new  SimpleDateFormat("yyyy-MM-dd");
+            dateFormat.setLenient(false);
+            dateFormat.parse(checkDate);
+            return  true;
+
+        }catch (ParseException  e){
+            return  false;
+        }
+     }
 
     public static long getNowUnixTimeStamp() {
         return System.currentTimeMillis() / 1000;

src/main/java/com/lemon/lifecenter/controller/MobileHistoryController.java

@@ -108,18 +108,14 @@ public class MobileHistoryController  extends LifeCenterController {
         String cDate = dto.getConfirmationDate();
         String sDate = dto.getSymptomStartDate();
         String jumin = dto.getJumin();
-        
-        if (!jumin.equals("")) {
-            jumin = jumin.substring(0, 4) + "년 " + jumin.substring(4, 6) + "월 " + jumin.substring(6, 8) + "일";
-        }
+        jumin = LifeCenterFunction.changeJuminToBirthday(jumin);
+        dto.setJumin(jumin);
         
         dto.setHospitalizationDate(hDate);
         dto.setConfirmationDate(cDate);
         dto.setSymptomStartDate(sDate);
-        dto.setJumin(jumin);
         
         String bloodPress = dto.getBloodPressureLevel();
-        logger.error("bloodPress -- > " + bloodPress);
         if (!bloodPress.equals("")) {
             String[] bloodPressureLevel = dto.getBloodPressureLevel().split("[|]");
             dto.setBloodPressureLevelCon(bloodPressureLevel[0]);
@@ -236,7 +232,7 @@ public class MobileHistoryController  extends LifeCenterController {
         
         strSymptom = strSymptom.trim();
         if (!strSymptom.equals("")) {
-            strSymptom = strSymptom.substring(0, strSymptom.length() - 1);            
+            strSymptom = strSymptom.substring(0, strSymptom.length() - 1);
         }
         
         

src/main/java/com/lemon/lifecenter/controller/MobileServeyController.java

@@ -41,7 +41,7 @@ public class MobileServeyController extends LifeCenterController {
         patientDTO.setPatientIdx(Integer.parseInt(sesMpIdx));
         patientDTO = patientService.selectPatientOne( patientDTO );
         String jumin = patientDTO.getJumin();
-        jumin = jumin.substring(0, 4) + "년 " + jumin.substring(4, 6) + "월 " + jumin.substring(6, 8) + "일";
+        jumin = LifeCenterFunction.changeJuminToBirthday(jumin);
         patientDTO.setJumin(jumin);
         
         ModelAndView mv = setMobileMV("servey/servey");
@@ -93,9 +93,11 @@ public class MobileServeyController extends LifeCenterController {
             @ModelAttribute("dto") final PatientDTO dto,
             HttpServletRequest request,HttpServletResponse response) {
         String sesMpIdx  = LifeCenterSessionController.getSession( request, "sesMpIdx" );
-        String jumin = dto.getJumin().replace( "-" , "" );
-        dto.setPatientIdx(Integer.parseInt(sesMpIdx));
+        String jumin = dto.getJumin();
+        jumin = LifeCenterFunction.removeStringChar(jumin, "-");
+        
         dto.setJumin(jumin);
+        dto.setPatientIdx(Integer.parseInt(sesMpIdx));
         
         String bloodPressureLevelCon = dto.getBloodPressureLevelCon();
         String bloodPressureLevelRel = dto.getBloodPressureLevelRel();

src/main/java/com/lemon/lifecenter/controller/PatientController.java

@@ -146,14 +146,15 @@ public class PatientController extends LifeCenterController {
         
         //patientCare Insert
         //System.out.println( "dto.getJumin().substring(2) : " + dto.getJumin().replace( "-" , "" ).substring(2) );
-        String jumin = dto.getJumin().replace( "-" , "" );
+        String jumin = dto.getJumin();
+        jumin = LifeCenterFunction.removeStringChar(jumin, "-");
+        dto.setJumin( jumin );
         
         dto.setId( dto.getWardNumber().trim() + dto.getRoomNumber().trim() );
         
         // 환자 password는 생년월일(yyyymmdd)을 암호화
 //        dto.setPw( LifeCenterFunction.aesEncrypt( config.aesKey, config.IV, jumin ) );
         dto.setPw( LifeCenterFunction.sha256Encrypt( jumin ) );
-        dto.setJumin( jumin );
         dto.setCenterCode( sesCenterCode );
         dto.setState( "H" ); // H : 입소
         dto.setCreateBy( sesId );
@@ -196,7 +197,7 @@ public class PatientController extends LifeCenterController {
         dto = patientService.selectPatientOne(dto);
         
         String jumin = dto.getJumin();
-        jumin = jumin.substring(0, 4) + "년 " + jumin.substring(4, 6) + "월 " + jumin.substring(6, 8) + "일";
+        jumin = LifeCenterFunction.changeJuminToBirthday(jumin);
         dto.setJumin(jumin);
         
         dto.setPatientPhone(LifeCenterFunction.phone(dto.getPatientPhone()));
@@ -216,7 +217,6 @@ public class PatientController extends LifeCenterController {
             strDisease = LifeCenterFunction.getDisease(dto);
         }
         
-        
         mv.addObject( "disease", strDisease );
         mv.addObject( "symptom", strSymptom );
         mv.addObject( "patientIdx", patientIdx );
@@ -254,45 +254,51 @@ public class PatientController extends LifeCenterController {
     public ModelAndView patientEdit( 
             @ModelAttribute("dto") PatientDTO patientDTO,
             HttpServletRequest request,HttpServletResponse response ) {
+        
+        ModelAndView mv = setMV("patient/edit");
+        
         String sesCenterCode  = LifeCenterSessionController.getSession( request, "sesCenterCode" );
         String sesId  = LifeCenterSessionController.getSession( request, "sesId" );
         
         int patientIdx = patientDTO.getPatientIdx();
-        patientDTO = patientService.selectPatientOne( patientDTO );
-        
-        
-        // 세션의 센터코드 들고와서 치료센터명 조회후 view 전달
-        // 센터가 존재하는지 체크
-        CenterInfoDTO dto = new CenterInfoDTO();
-        dto.setCenterCode( Integer.valueOf( sesCenterCode ) );
-        dto.setStaffId( sesId );
-        String centerName = "";
-        int centerCount   = centerService.selectCenterCount( dto );
-        
-        if( centerCount > 0 ) {
-            centerName = centerService.selectCenterInfoOne( dto ).getCenterName();
+        int cnt = patientService.selectPatientOneCount(patientDTO);
+        if (cnt > 0) {
+            patientDTO = patientService.selectPatientOne( patientDTO );
+            
+            // 세션의 센터코드 들고와서 치료센터명 조회후 view 전달
+            // 센터가 존재하는지 체크
+            CenterInfoDTO dto = new CenterInfoDTO();
+            dto.setCenterCode( Integer.valueOf( sesCenterCode ) );
+            dto.setStaffId( sesId );
+            String centerName = "";
+            int centerCount   = centerService.selectCenterCount( dto );
+            
+            if( centerCount > 0 ) {
+                centerName = centerService.selectCenterInfoOne( dto ).getCenterName();
+            } else {
+                LifeCenterFunction.scriptMessage(response, "alertBox({ txt : '문진이 정상적으로 제출되었습니다.', callBack : function(){ history.back(); } });" );
+                // return ""; 아직처리안함
+            }
+            
+            String bloodPress = patientDTO.getBloodPressureLevel();
+            
+            if (!bloodPress.equals("") && !bloodPress.equals("|")) {
+                String[] bloodPressureLevel = bloodPress.split("[|]");
+                patientDTO.setBloodPressureLevelCon(bloodPressureLevel[0]);
+                patientDTO.setBloodPressureLevelRel(bloodPressureLevel[1]);
+            }
+            
+            mv.addObject( "centerName", centerName );
+            mv.addObject( "centerCount", centerCount );
+            
+            mv.addObject( "patientIdx", patientIdx );
+            mv.addObject( "patientData", patientDTO );
+            mv.addObject( "actionType", "edit" );
         } else {
-            LifeCenterFunction.scriptMessage(response, "alertBox({ txt : '문진이 정상적으로 제출되었습니다.', callBack : function(){ history.back(); } });" );
-            // return ""; 아직처리안함
+            mv.addObject( "error", "error" );
+            mv.addObject( "message", "삭제되었거나 존재하지 않는 환자입니다." );
         }
         
-        String bloodPress = patientDTO.getBloodPressureLevel();
-        
-        if (!bloodPress.equals("") && !bloodPress.equals("|")) {
-            String[] bloodPressureLevel = bloodPress.split("[|]");
-            patientDTO.setBloodPressureLevelCon(bloodPressureLevel[0]);
-            patientDTO.setBloodPressureLevelRel(bloodPressureLevel[1]);
-        }
-        
-        ModelAndView mv = setMV("patient/edit");
-        
-        mv.addObject( "centerName", centerName );
-        mv.addObject( "centerCount", centerCount );
-        
-        mv.addObject( "patientIdx", patientIdx );
-        mv.addObject( "patientData", patientDTO );
-        mv.addObject( "actionType", "edit" );
-        
         return mv;
     }
     
@@ -308,11 +314,13 @@ public class PatientController extends LifeCenterController {
         dto.setPatientIdx( patientIdx );
         
         //patientCare Update
-        String jumin = dto.getJumin().replace( "-" , "" );
+        String jumin = dto.getJumin();
+        jumin = LifeCenterFunction.removeStringChar(jumin, "-");
+        dto.setJumin( jumin );
         
         dto.setId( dto.getWardNumber().trim() + dto.getRoomNumber().trim() );
         dto.setPw( LifeCenterFunction.sha256Encrypt( jumin ) );
-        dto.setJumin( jumin );
+        
         dto.setCenterCode( sesCenterCode );
         dto.setUpdateBy( sesId );
         

src/main/webapp/WEB-INF/jsp/common/400.jsp

@@ -0,0 +1,29 @@
+<%@ page session="false" %>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<html>
+<head>
+<link rel="shortcut icon" href="/images/common/favicon.ico" type="image/x-icon">
+<link rel="icon" href="/images/common/favicon.ico" type="image/x-icon">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<title>생활치료센터 비대면 진료시스템 - 문제가 발생하였습니다</title>
+<link rel="stylesheet" type="text/css" href="/resources/css/common/error.css"> 
+</head>
+<body>
+  <div id="clouds">
+    <div class="cloud x1"></div>
+    <div class="cloud x1_5"></div>
+    <div class="cloud x2"></div>
+    <div class="cloud x3"></div>
+    <div class="cloud x4"></div>
+    <div class="cloud x5"></div>
+  </div>
+  <div class='c'>
+    <div class='_404'>400</div>
+    <hr>
+    <div class='_1'>문제가 발생 하였습니다.<br/>동일한 문제가 지속적으로 발생하는 경우는 고객센터로 문의하세요</div>
+    <div class='_2'>Bad Request</div>
+    <a class='btn' href='javascript:;' onclick="history.back();">돌아가기</a>
+  </div>
+</body>
+</html>

src/main/webapp/WEB-INF/jsp/common/404.jsp

@@ -0,0 +1,29 @@
+<%@ page session="false" %>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<html>
+<head>
+<link rel="shortcut icon" href="/images/common/favicon.ico" type="image/x-icon">
+<link rel="icon" href="/images/common/favicon.ico" type="image/x-icon">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<title>생활치료센터 비대면 진료시스템 - 문제가 발생하였습니다</title>
+<link rel="stylesheet" type="text/css" href="/resources/css/common/error.css">
+</head>
+<body>
+  <div id="clouds">
+    <div class="cloud x1"></div>
+    <div class="cloud x1_5"></div>
+    <div class="cloud x2"></div>
+    <div class="cloud x3"></div>
+    <div class="cloud x4"></div>
+    <div class="cloud x5"></div>
+  </div>
+  <div class='c'>
+    <div class='_404'>404</div>
+    <hr>
+    <div class='_1'>요청하신 페이지가 존재하지 않거나, 잘못된 경로입니다<br/>동일한 문제가 지속적으로 발생하는 경우는 고객센터로 문의하세요</div>
+    <div class='_2'>WAS ERROR</div>
+    <a class='btn' href='javascript:;' onclick="history.back();">돌아가기</a>
+  </div>
+</body>
+</html>

src/main/webapp/WEB-INF/jsp/common/500.jsp

@@ -0,0 +1,29 @@
+<%@ page session="false" %>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<html>
+<head>
+<link rel="shortcut icon" href="/images/common/favicon.ico" type="image/x-icon">
+<link rel="icon" href="/images/common/favicon.ico" type="image/x-icon">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<title>생활치료센터 비대면 진료시스템 - 문제가 발생하였습니다</title>
+<link rel="stylesheet" type="text/css" href="/resources/css/common/error.css">
+</head>
+<body>
+  <div id="clouds">
+    <div class="cloud x1"></div>
+    <div class="cloud x1_5"></div>
+    <div class="cloud x2"></div>
+    <div class="cloud x3"></div>
+    <div class="cloud x4"></div>
+    <div class="cloud x5"></div>
+  </div>
+  <div class='c'>
+    <div class='_404'>500</div>
+    <hr>
+    <div class='_1'>서버가 동작하는 중 예측하지 못한 에러가 발생하였습니다.</div>
+    <div class='_2'>Internal Server Error / 내부 서버 오류</div>
+    <a class='btn' href='javascript:;' onclick="history.back();">돌아가기</a>
+  </div>
+</body>
+</html>

src/main/webapp/WEB-INF/jsp/patient/edit.jsp

@@ -113,67 +113,72 @@ function stateCheck(){
 }
 
 $( function(){
-    patientNewInit();
-    setEventHandler();
-    stateCheck();
-    $( ".hospitalizationDate" ).trigger( "change" );
-//     $( ".select-date" ).trigger( "change" );
-    
-    $( "#patientForm" ).validate({
-        rules: {
-            hospitalizationDate : {
-                minDate : true,
-                date : true,
-                maxDate : true
+    var error = "<c:out value='${error}'/>";
+    if (error != "") {
+        var message = "<c:out value='${message}'/>";
+        alertBox({ txt : message, callBack : function(){ location.href = './list' } });
+    } else {
+        patientNewInit();
+        setEventHandler();
+        stateCheck();
+        $( ".hospitalizationDate" ).trigger( "change" );
+//         $( ".select-date" ).trigger( "change" );
+        
+        $( "#patientForm" ).validate({
+            rules: {
+                hospitalizationDate : {
+                    minDate : true,
+                    date : true,
+                    maxDate : true
+                },
+                patientPhone : {
+                    phoneValid : true
+                },
+                guardianPhone : {
+                    phoneValid : true
+                },
+                jumin : {
+                    minDate : true,
+                    date : true,
+                    maxDate : true
+                },
+                symptomStartDate : {
+                    minDate : true,
+                    maxDate : true,
+                    date : true
+                },
+                disisolationDate : {
+                    minDate : true,
+                    date : true,
+                    maxDate : true
+                }
             },
-            patientPhone : {
-                phoneValid : true
+            messages : {
+//                 jumin : "생년월일을 모두 선택해주세요",
+                gender: "성별을 선택해주세요",
+//                 wardNumber : "동을 입력해주세요",
+                roomNumber : "호실을 입력해주세요",
+                hospitalizationDate : "입소일시를 선택해주세요"
             },
-            guardianPhone : {
-                phoneValid : true
+            onkeyup: function( element, event ) {
+                $( element ).valid();
             },
-            jumin : {
-                minDate : true,
-                date : true,
-                maxDate : true
+            onfocusout: function (element) {
+                $( element ).val( $.trim( $( element ).val() ) );
+                $( element ).valid();
             },
-            symptomStartDate : {
-                minDate : true,
-                maxDate : true,
-                date : true
+            errorPlacement: function(error, element) {
+                if (element.attr("type") == "radio") {
+                    error.insertBefore(element);
+                } else {
+                    error.insertAfter(element);
+                }
             },
-            disisolationDate : {
-                minDate : true,
-                date : true,
-                maxDate : true
-            }
-        },
-        messages : {
-//             jumin : "생년월일을 모두 선택해주세요",
-            gender: "성별을 선택해주세요",
-//             wardNumber : "동을 입력해주세요",
-            roomNumber : "호실을 입력해주세요",
-            hospitalizationDate : "입소일시를 선택해주세요"
-        },
-        onkeyup: function( element, event ) {
-            $( element ).valid();
-        },
-        onfocusout: function (element) {
-            $( element ).val( $.trim( $( element ).val() ) );
-            $( element ).valid();
-        },
-        errorPlacement: function(error, element) {
-            if (element.attr("type") == "radio") {
-                error.insertBefore(element);
-            } else {
-                error.insertAfter(element);
+            submitHandler: function(form) {
+                form.submit();
             }
-        },
-        submitHandler: function(form) {
-            form.submit();
-        }
-    });
-    
+        });
+    }
 });
 </script>
 </head>

src/main/webapp/resources/css/common/error.css

@@ -0,0 +1,221 @@
+body{
+  background: #4A89DC;
+  color:#fff;
+  font-family: 'Open Sans', sans-serif;
+  max-height:700px;
+  overflow: hidden;
+}
+.c{
+  text-align: center;
+  display: block;
+  position: relative;
+  width:80%;
+  margin:100px auto;
+}
+._404{
+  font-size: 10rem;
+  position: relative;
+  display: inline-block;
+  z-index: 2;
+  height: 250px;
+  letter-spacing: 15px;
+}
+._1{
+  text-align:center;
+  display:block;
+  position:relative;
+  letter-spacing: 12px;
+  font-size: 2em;
+}
+._2{
+  text-align:center;
+  display:block;
+  position: relative;
+  font-size: 20px;
+}
+.text{
+  font-size: 70px;
+  text-align: center;
+  position: relative;
+  display: inline-block;
+  margin: 19px 0px 0px 0px;
+  /* top: 256.301px; */
+  z-index: 3;
+  width: 100%;
+  line-height: 1.2em;
+  display: inline-block;
+}
+
+
+.btn{
+  background-color: rgb( 255, 255, 255 );
+  position: relative;
+  display: inline-block;
+/*   width: 358px; */
+  padding: 5px;
+  padding-left:10px;
+  padding-right:10px;
+  z-index: 5;
+  font-size: 25px;
+  margin:0 auto;
+  color:#4A89DC;
+  text-decoration: none;
+  margin-right: 10px
+}
+.right{
+  float:right;
+  width:60%;
+}
+
+hr{
+  padding: 0;
+  border: none;
+  border-top: 5px solid #fff;
+  color: #fff;
+  text-align: center;
+  margin: 0px auto;
+/*   width: 420px; */
+  height:10px;
+  z-index: -10;
+}
+
+hr:after {
+  content: "\2022";
+  display: inline-block;
+  position: relative;
+  top: -0.75em;
+  font-size: 2em;
+  padding: 0 0.2em;
+  background: #4A89DC;
+}
+
+.cloud {
+  width: 350px; height: 120px;
+
+  background: #FFF;
+  background: linear-gradient(top, #FFF 100%);
+  background: -webkit-linear-gradient(top, #FFF 100%);
+  background: -moz-linear-gradient(top, #FFF 100%);
+  background: -ms-linear-gradient(top, #FFF 100%);
+  background: -o-linear-gradient(top, #FFF 100%);
+
+  border-radius: 100px;
+  -webkit-border-radius: 100px;
+  -moz-border-radius: 100px;
+
+  position: absolute;
+  margin: 120px auto 20px;
+  z-index:-1;
+  transition: ease 1s;
+}
+
+.cloud:after, .cloud:before {
+  content: '';
+  position: absolute;
+  background: #FFF;
+  z-index: -1
+}
+
+.cloud:after {
+  width: 100px; height: 100px;
+  top: -50px; left: 50px;
+
+  border-radius: 100px;
+  -webkit-border-radius: 100px;
+  -moz-border-radius: 100px;
+}
+
+.cloud:before {
+  width: 180px; height: 180px;
+  top: -90px; right: 50px;
+
+  border-radius: 200px;
+  -webkit-border-radius: 200px;
+  -moz-border-radius: 200px;
+}
+
+.x1 {
+  top:-50px;
+  left:100px;
+  -webkit-transform: scale(0.3);
+  -moz-transform: scale(0.3);
+  transform: scale(0.3);
+  opacity: 0.9;
+  -webkit-animation: moveclouds 15s linear infinite;
+  -moz-animation: moveclouds 15s linear infinite;
+  -o-animation: moveclouds 15s linear infinite;
+}
+
+.x1_5{
+  top:-80px;
+  left:250px;
+  -webkit-transform: scale(0.3);
+  -moz-transform: scale(0.3);
+  transform: scale(0.3);
+  -webkit-animation: moveclouds 17s linear infinite;
+  -moz-animation: moveclouds 17s linear infinite;
+  -o-animation: moveclouds 17s linear infinite; 
+}
+
+.x2 {
+  left: 250px;
+  top:30px;
+  -webkit-transform: scale(0.6);
+  -moz-transform: scale(0.6);
+  transform: scale(0.6);
+  opacity: 0.6; 
+  -webkit-animation: moveclouds 25s linear infinite;
+  -moz-animation: moveclouds 25s linear infinite;
+  -o-animation: moveclouds 25s linear infinite;
+}
+
+.x3 {
+  left: 250px; bottom: -70px;
+
+  -webkit-transform: scale(0.6);
+  -moz-transform: scale(0.6);
+  transform: scale(0.6);
+  opacity: 0.8; 
+
+  -webkit-animation: moveclouds 25s linear infinite;
+  -moz-animation: moveclouds 25s linear infinite;
+  -o-animation: moveclouds 25s linear infinite;
+}
+
+.x4 {
+  left: 470px; botttom: 20px;
+
+  -webkit-transform: scale(0.75);
+  -moz-transform: scale(0.75);
+  transform: scale(0.75);
+  opacity: 0.75;
+
+  -webkit-animation: moveclouds 18s linear infinite;
+  -moz-animation: moveclouds 18s linear infinite;
+  -o-animation: moveclouds 18s linear infinite;
+}
+
+.x5 {
+  left: 200px; top: 300px;
+
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  transform: scale(0.5);
+  opacity: 0.8; 
+
+  -webkit-animation: moveclouds 20s linear infinite;
+  -moz-animation: moveclouds 20s linear infinite;
+  -o-animation: moveclouds 20s linear infinite;
+}
+@-webkit-keyframes moveclouds {
+  0% {margin-left: 1000px;}
+  100% {margin-left: -1000px;}
+}
+@-moz-keyframes moveclouds {
+  0% {margin-left: 1000px;}
+  100% {margin-left: -1000px;}
+}
+@-o-keyframes moveclouds {
+  0% {margin-left: 1000px;}
+  100% {margin-left: -1000px;}
+}