Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html data-ng-app="iid">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>תעודת זהות ישראל</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="app.min.css">
- <script src="bower_components/angular/angular.min.js"></script>
- <style>
- *,
- *::after,
- *::before {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
- font-size: 62,5%;
- }
- body {
- height: 100vh;
- width: 100%;
- background: #0f2027; /* fallback for old browsers */
- background: linear-gradient(to right,#2c5364, #203a43, #0f2027);
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- color: #fff;
- }
- .form__label {
- font-family: 'Roboto', sans-serif;
- font-size: 1.2rem;
- margin-left: 2rem;
- margin-top: 0.7rem;
- display: block;
- transition: all 0.3s;
- transform: translateY(0rem);
- }
- .form__input {
- font-family: 'Roboto', sans-serif;
- color: #333;
- font-size: 1.2rem;
- margin: 0 auto;
- padding: 1.5rem 2rem;
- border-radius: 0.2rem;
- background-color: rgb(255, 255, 255);
- border: none;
- width: 90%;
- display: block;
- border-bottom: 0.3rem solid transparent;
- transition: all 0.3s;
- }
- .form__input:placeholder-shown + .form__label {
- opacity: 0;
- visibility: hidden;
- -webkit-transform: translateY(-4rem);
- transform: translateY(-4rem);
- }
- .button {
- position: relative;
- background-color: #cc0099;
- border: none;
- font-size: 28px;
- color: #FFFFFF;
- padding: 20px;
- width: 200px;
- text-align: center;
- transition-duration: 0.4s;
- text-decoration: none;
- overflow: hidden;
- cursor: pointer;
- }
- .button:after {
- content: "";
- background: #f1f1f1;
- display: block;
- position: absolute;
- padding-top: 300%;
- padding-left: 350%;
- margin-left: -20px !important;
- margin-top: -120%;
- opacity: 0;
- transition: all 0.8s
- }
- .button:active:after {
- padding: 0;
- margin: 0;
- opacity: 1;
- transition: 0s
- }
- body{
- font-family: monospace;
- font-size: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100vh;
- margin:0;
- padding: 0;
- width: 100%;
- }
- #toggle{
- visibility: hidden;
- opacity: 0;
- position: relative;
- z-index: -1;
- }
- #toggle:checked ~ dialog {
- display: block;
- }
- label{
- background: skyblue;
- color: white;
- padding: .5em 1em;
- border-radius: 4px;
- }
- @keyframes appear {
- 0%{
- opacity: 0;
- transform: translateY(-10px);
- }
- }
- dialog{
- animation: appear 350ms ease-in 1;
- max-width: 500px;
- }
- </style>
- </head>
- <body data-ng-controller="mainCtrl">
- <div class="container">
- <h1>תעודת זהות ישראל - גנרטור ומאמת</h1>
- <input type="text" data-ng-model="iid" id="iid" data-ng-change="check() id="nme">
- <button class="button" data-ng-click="generate()">צור</button>
- <p data-ng-if="checkStatus" class="status valid"> תקף</p>
- <p data-ng-if="!checkStatus" class="status invalid">לא תקף</p>
- <input type="checkbox" id="toggle">
- <label for="toggle">צור קשר</label>
- <dialog>
- <p>
- לתרומות ויצירת קשר, דיסקורד :hydro#1111
- </p>
- <label for="toggle">סגור</label>
- </dialog>
- </div>
- <script src="app.min.js"></script>
- <style>
- body {
- background-image: url('bc.png');
- }
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement