SadhulaSaiKumar
/
AI


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
							<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,400;0,500;1,200;1,400;1,500;1,600&display=swap');
        *,*::after,*::before{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body{
            overflow-x: hidden;
            font-family: 'Source Code Pro', monospace;
        }
        .container_scan{
            background-color: #7ee8fa;
            background-image: linear-gradient(315deg, #7ee8fa 0%, #80ff72 74%);
            width: 100vw;
            min-height: 100vh;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            overflow-y: auto;


        }

        .headingCard{
            padding: 15px 0;
        }

        .card{
            background-color: #fff;
            width: 400px;
            height: 500px;
            border-radius: 25px;
            border: 5px dashed #B8F1B0 ;
        }

        .file {
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  position: absolute;
}

.file-input label {
  display: block;
  position: relative;
  width: 200px;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(40deg, #ff6ec4, #7873f5);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: transform .2s ease-out;
}

.btn{
    padding: 10px 50px;
    border-radius: 25px;
    width: 250px;
  height: 50px;

    border: none;
    background: linear-gradient(40deg, #f56effa6, #7873f5);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);

    transition: all .2s ease;
}

.btn:hover{
    transform: translateY(5px);
    background: linear-gradient(40deg, #f56eff63, #73a3f5);
}
h1 {
  font-size: 40px;
}

.formSubmit{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

   .button {
  background: linear-gradient(40deg, #f56effa6, #7873f5); /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}


.button1 {font-size: 10px;}
.button2 {font-size: 12px;border-radius: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 50px;}
.button5 {font-size: 24px;border-radius: 12px;}
    </style>
</head>

<body>

 <div class="container_scan">
    <h1 class="headingCard">Visiting Card Parser</h1>
     <div class="card">


<form class="formSubmit" action="/submit" method="POST" enctype="multipart/form-data">
        <div class="form-group">
          <div class="custom-file">


        <div class="file-input">
                        <input type="file" id="image" name="image"  class="button button2">

                      </div>


          </div>
        </div>
         <input type="submit" class="btn btn-submit">
    </form>


</body>
</html>