Registration

Developer
Tim Guo
Size
6,361 Kb
Views
72,864
  1. Registration Previews
  2. Registration HTML Codes
  3. Registration CSS Codes
  4. Registration JS Codes

How do I make an registration?

What is a registration? How do you make a registration? This script and codes were developed by Tim Guo on 03 September 2022, Saturday.

Registration Previews
IQ Test

Registration - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Registration</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/ipiz/md-steppers/master/dist/md-steppers.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app="app" ng-controller="MainCtrl as vm" layout="row"> <md-content class="registration-container" layout layout-align="center center" flex> <md-card class="md-whiteframe-8dp"> <md-card-content> <md-stepper-card-content> <md-steppers md-dynamic-height md-stretch-steppers="always" md-selected="vm.selectedStep"> <md-step label="Authentication" md-complete="true"></md-step> <md-step label="Login" name="step1" md-complete="vm.stepData[0].data.completed" ng-disabled="vm.stepProgress < 1"> <md-step-body> <form class="md-padding" name="step1" ng-submit="vm.submitCurrentStep(vm.stepData[0].data)"> <h2>Login with a service account</h2> <p class="md-caption">Don't have a service account? <a href="#">Create one now.</a></p> <md-content class="md-hue-2" layout-margin style="height: 200px; border: 1px solid rgba(0,0,0,.12)"> <p>{{vm.stepData[0].data.term}} </p> </md-content> <div layout-margin layout="column" style="width: 530px;"> <md-checkbox ng-model="vm.stepData[0].data.termChecked">I agree to the term of service</md-checkbox> <md-button type="submit" ng-disabled="!vm.stepData[0].data.termChecked" class="md-accent md-hue-1 md-raised" flex>NEXT</md-button> <p class="md-caption">You are giving us credentials to log in with a service account that has Global Administrator Access.</p> <p class="md-caption">By logging in to BetterCloud you agree to approve the following permissions for us to manage your domain on your behalf:</p> <ul class="md-caption md-body-2"> <li>Scope 1</li> <li>Scope 2</li> <li>Scope 3</li> </ul> </div> </form> </md-step-body> </md-step> <md-step label="Registration" md-complete="vm.stepData[1].data.completed" ng-disabled="vm.stepProgress < 2"> <md-step-body> <form name="step2"> <h2>Tell us a little bit about yourself</h2> <div layout="column" layout-align="top center"> <div style="width: 530px"> <md-input-container class="md-block"> <label>Email</label> <md-icon>mail_outline</md-icon> <input type="email" name="email" ng-model="vm.stepData[1].data.email" required /> <div class="hint">Enter an email address that we can contact you at</div> </md-input-container> <div layout="row"> <md-input-container class="md-block" flex> <label>First Name</label> <md-icon>person</md-icon> <input name="firsname" ng-model="vm.stepData[1].data.firstname" required /> </md-input-container> <md-input-container class="md-block" flex> <label>Last Name</label> <input name="lastname" ng-model="vm.stepData[1].data.lastname" required /> <div ng-messages="step2.firstname.$error"> <div ng-message="required"> This is required </div> </div> </md-input-container> </div> <md-input-container class="md-block" flex> <label>Company</label> <md-icon>domain</md-icon> <input name="company" ng-model="vm.stepData[1].data.company" required /> </md-input-container> <md-input-container class="md-block" flex> <label>Phone</label> <md-icon>phone</md-icon> <input name="phone" ng-model="vm.stepData[1].data.phone" required /> </md-input-container> </div> </div> <md-step-actions layout="row"> <div flex layout="column"> <md-button ng-disabled="!vm.stepData[1].data.email || !vm.stepData[1].data.firstname || !vm.stepData[1].data.lastname || !vm.stepData[1].data.company || !vm.stepData[1].data.phone" ng-click="vm.submitCurrentStep(vm.stepData[1].data)" class="md-accent md-hue-1 md-raised"> NEXT </md-button> </div> </md-step-actions> </form> </md-step-body> </md-step> <md-step label="BetterCloud" md-complete="vm.stepData[2].data.completed" ng-disabled="vm.stepProgress < 3"> <md-step-body> <form name="step2"> <div layout="column" layout-align="center center" style="min-height: 200px"> <h4>Login Successfully!</h4> </div> </form> </md-step-body> </md-step> </md-steppers> </md-stepper-card-content> </md-card-content> </md-card> </md-content>
</body> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js'></script>
<script src='https://cdn.rawgit.com/ipiz/md-steppers/master/dist/md-steppers.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Registration - Script Codes CSS Codes

body { font-size: 14px; line-height: 1.4;
}
.m0 { margin: 0;
}
a { color: #00abe4; text-decoration: none;
}
ul { padding-left: 0; list-style: none;
}
.mb10 { margin-bottom: 10px;
}
.md-button { font-weight: bold;
}
.md-button.md-raised:not(.md-hue-1):not(.md-primary):not(.md-icon-button) { border: 1px solid currentColor;
}
.md-button.md-raised { box-shadow: none !important;
}
.md-step { pointer-events: none; padding: 12px 0;
}
.md-step:first-child { padding-left: 12px;
}
.md-step:last-child { padding-right: 12px;
}
md-steppers md-pagination-wrapper { height: 48px; background: #eee; border-radius: 24px;
}
md-steppers-canvas { height: 48px;
}
.md-step.md-active md-step-label-wrapper:before,
.md-step.md-success md-step-label-wrapper:before { background: transparent; border: 2px solid #106cc8; height: 20px; width: 20px; line-height: 20px; min-width: 20px; color: #106cc8;
}
.registration-container { background: url("https://x-holding.devbettercloud.com/assets/images/login_bg.jpg"); background-size: cover;
}
.registration-container md-card { width: 600px;
}

Registration - Script Codes JS Codes

var app = angular.module('app', ['ngMaterial','ngMessages', 'md-steppers']);
app.controller('MainCtrl', function ($scope) { var vm = this; // Start from step 2 vm.selectedStep = 1; vm.stepProgress = 1; vm.stepData = [ { step: 1, completed: false, data: { term:'1.\u00A0 Do not use legal argot in an effort to \"sound like a lawyer.\" There are many words and phrases one might associate with legal writing but which have a tendency to obscure the meaning of a sentence. Although you will see that some of these words are used by judges and authors of legal texts, particularly in older texts, you should not use them yourself. The rule of thumb of modern legal writing is that a lawyer\'s language, whenever possible, must be clear and concise enough to be understood by a lay client. Do not use so-called legal terminology unless general terminology would be less precise.\r\nUndesirable:\r\n\r\nAs stated heretofore, the landlord\'s conduct created, caused, and resulted in serious bodily harm and massive injuries, to wit: a broken and mangled left leg, lacerations to the aforementioned leg, and several broken digits on the foot attached to said leg, in witness whereof was the spouse of the injured party.\r\nBetter: As stated, the landlord inflicted serious injuries on the tenant, including a broken left leg, lacerations to that leg, and several broken toes on the left foot. The altercation was witnessed by the tenant\'s spouse.\r\n\r\n2.\u00A0 Do not use long introductory (throat clearing) phrases that add no special meaning. Use of phrases such as \"the defense contends\" and \"it is important to emphasize that\" generally add no substantive meaning to a sentence. Making matters worse, they prevent the reader from quickly reaching the important part of the sentence and may result in a loss of emphasis. As a general rule, one should get to the important point quickly.\r\n\r\nUndesirable:\r\n\r\nThe plaintiff contends that the landlord caused her injury by leaving a large ditch in the backyard.\r\nBetter: The landlord injured the plaintiff by leaving a large ditch in the backyard. \rOf course, if you wish to emphasize that this is only a contention, not a fact, then the first usage is acceptable. However, if you represent the plaintiff, it does your client a disservice to suggest this is only a contention. If it\'s a fact, state it without introduction. \r\n \r\n3.\u00A0 Do use well-understood terms of art if they are more precise than general terminology and if you are writing to a professional audience. The beginning law student will have difficulty knowing when a term of art is likely to be well understood, as they all are new to the beginner. However, as time progresses, new law students will develop an easy familiarity with terms of art and the decision whether to use them will be less difficult.' } }, { step: 2, completed: false, data: {} }, { step: 3, completed: false, data: {} }, ]; vm.enableNextStep = function nextStep() { vm.stepProgress = vm.stepProgress + 1; vm.selectedStep = vm.selectedStep + 1; } vm.submitCurrentStep = function submitCurrentStep(stepData) { stepData.completed = true; vm.enableNextStep(); }
});
// Config Custom Theme
app.config(function($mdThemingProvider) { app.createCustomTheme($mdThemingProvider);
});
app.createCustomTheme = function(mdThemingProvider) { var customPrimary = { '50': '#4a799b', '100': '#426c8a', '200': '#3a5e79', '300': '#4a7b9e', // hue-1 '400': '#294356', '500': '#203544', // default '600': '#192834', '700': '#111b22', '800': '#030406', // hue-2 '900': '#000000', 'A100': '#5387ac', // hue-3 'A200': '#6493b5', 'A400': '#759fbd', 'A700': '#000000', 'contrastDefaultColor': 'light' // whether, by default, text (contrast) // on this palette should be dark or light }; var customAccent = { '50': '#64d8ff', '100': '#4bd2ff', '200': '#31ccff', '300': '#18c5ff', '400': '#00befd', '500': '#00abe4', '600': '#0098ca', '700': '#45d494', '800': '#007297', '900': '#005e7e', 'A100': '#34a673', // hue-1 'A200': '#007da7', // default 'A400': '#b1ebff', // hue-2 'A700': '#004b64', // hue-3 'contrastDefaultColor': 'light' // whether, by default, text (contrast) // on this palette should be dark or light }; var customWarn = { '50': '#fbb4af', '100': '#f99d97', '200': '#f8877f', '300': '#f77066', // hue-1 '400': '#f55a4e', '500': '#f44336', // default '600': '#f32c1e', '700': '#ea1c0d', '800': '#d2190b', // hue-2 '900': '#ba160a', 'A100': '#fccbc7', // hue-3 'A200': '#fde1df', 'A400': '#fff8f7', 'A700': '#a21309', 'contrastDefaultColor': 'light' // whether, by default, text (contrast) // on this palette should be dark or light }; var customBackground = { '50': '#ffffff', // autocomplete background '100': '#ffffff', '200': '#eee', // autocomplete selected item background '300': '#213645', // hue-1 '400': '#ffffff', '500': '#9e9e9e', '600': '#919191', '700': '#848484', '800': '#f8f8f8', // hue-2 '900': '#6b6b6b', // hue-3 'A100': '#ffffff', // default 'A200': '#f7f7f7', 'A400': '#ffffff', 'A700': '#5e5e5e' }; mdThemingProvider.definePalette('customPrimary', customPrimary); mdThemingProvider.definePalette('customAccent', customAccent); mdThemingProvider.definePalette('customWarn', customWarn); mdThemingProvider.definePalette('customBackground', customBackground); mdThemingProvider.theme('default') .primaryPalette('customPrimary') .accentPalette('customAccent') .warnPalette('customWarn') .backgroundPalette('customBackground');
};
Registration - Script Codes
Registration - Script Codes
Home Page Home
Developer Tim Guo
Username timothyguo
Uploaded September 03, 2022
Rating 3
Size 6,361 Kb
Views 72,864
Do you need developer help for Registration?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Guo (timothyguo) Script Codes
Name
Pong
A Pen by Tim Guo
Create User
Pacman loading animation
Pumpkin Animation on one Div
Responsive holy grail layout with Flexbox
Checkbox Table with Tree Structure
Responsive Merge Identities Flyout
Css Transition
Sticky Footer with Flexbox
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!