Before applying the style guide

100%

Before applying the style guide

✓ Published0🌍 Public

Last edited Dec 24, 2013

Created on Dec 24, 2013

This example shows an Objective-C iOS view controller that manages a sign-in form, demonstrating how UI state updates based on text-field validation. It uses UIKit’s `UITextField` targets and `IBAction` to trigger validation on each edit, while the `updateUIState` method toggles background colors (yellow for invalid) and disables the sign-in button until both username and password exceed three characters. The code relies on `RWDummySignInService` to simulate asynchronous sign-in, which disables all controls during the request and hides or shows a failure label upon completion. It does not use any charting or visualization libraries, instead illustrating a simple state-driven interface pattern with native Cocoa Touch APIs.

AI-generated description

Similar vizzes

Loading thumbnail…

After applying the style guide

This example shows an Objective-C view controller that validates a sign-in form, enabling the sign-in button and clearing the background color of text fields only when both username and password exceed three characters. The code uses Cocoa Touch’s `UITextField` and `UIButton` within a storyboard-based view, along with target-action methods for editing changes. It relies on a custom `RWDummySignInService` to simulate asynchronous sign-in, and `performSegueWithIdentifier:` to navigate on success, while failing input is highlighted with a yellow background.

CColinEberhardt

90% match

Loading thumbnail…

Login & Registration Form

This example presents an interactive login and registration form built with HTML and CSS, featuring a toggle between two views. The interface uses a hidden checkbox (`#check`) to switch between the login and signup forms, with CSS transitions on the submit buttons for hover feedback. The design is styled with the Poppins font from Google Fonts, and the form inputs are purely presentational, with no backend or validation logic. The implementation relies on vanilla JavaScript only for the checkbox interaction, while the visual styling and layout are handled entirely through the included stylesheet.

SSriyaI

55% match

Loading thumbnail…

Gist 611b52546f9a7b7b6c57

This example demonstrates UIKit physics-based animation on iOS, where a small red square falls under simulated gravity within a 300-by-100-point view. It shows how a UIView child is added to a parent container, given a red background color, and then subjected to a UIGravityBehavior from the UIDynamicAnimator class. The code initializes the animator with the parent view as its reference view, then attaches the gravity behavior to the subview, causing it to accelerate downward. The rendering stays within the standard UIKit view hierarchy, with no external data sources involved.

CColinEberhardt

55% match

Loading thumbnail…

interesting quartz tricks

This example demonstrates how to draw a social-media-style post card using Core Graphics and Quartz 2D on iOS. It shows a rounded container with a gradient “Like” bar at the bottom, which includes text labels (“Like,” “Comment”) and vertical dividers, plus a placeholder for an avatar. The code uses `UIBezierPath` for shapes, `CGGradientCreateWithColors` for the bar’s linear gradient, and shadow declarations via `CGContextSetShadowWithColor`. The rendering is entirely procedural, with no external data source, focusing on manual layout and styling through Core Graphics calls.

CCaged

55% match

Loading thumbnail…

Stack view example

This example demonstrates an NSStackView managing three colored radio buttons arranged vertically, showing how Auto Layout constraints position the stack view within an NSPanel window. The code creates a floating panel using AppKit classes like NSPanel and NSStackView, configuring the buttons with system blue, red, and green backgrounds. It sets orientation to vertical and applies spacing and alignment settings, then adds horizontal and vertical constraints to pin the stack view to the panel’s content view. The example also toggles a user default to visualize mutually exclusive constraints during layout debugging.

KKevinGutowski

55% match

Loading thumbnail…

Login-Box

This interactive login form demonstrates a form-validation and animation sequence. It presents a centered login box where users enter a username and password; blank fields receive a red error box-shadow. Upon successful submission, the dark background layer slides in, the form animates off-screen to the right, and a personalized greeting in the "Rock Salt" font fades in from the top. The implementation uses jQuery `.animate()` for the CSS-based motion, while the D3.js library (v5) is loaded but not directly used; the page structure and styling rely on HTML, CSS, and JavaScript.

AAndrew-Kiwa

54% match

Loading thumbnail…

Form Login

This example shows a basic login form with email, password, and submit fields on a muted gray background. The form is styled with CSS, including a light purple background, rounded corners, and a border, while the heading and inputs are centered. The page is built with plain HTML and CSS only, using no JavaScript or external libraries. The form does not include any submission handling or validation, making it a static visual demonstration of form layout and styling.

VVictor Gonzalez

53% match

Loading thumbnail…

Layout Example

A layout example approximating a multi-step sign-up UI from Dribbble shots, using a flexbox layout for a split-screen interface. The left sidebar contains page numbers and a bottom section with step details plus a progress bar made of four rounded divs, while the right side is an empty flex-grow area. The code uses plain HTML and CSS, including `display: flex`, `flex-direction: column`, `justify-content: space-between`, and `flex-grow` to arrange the elements. No external libraries are used, and the markup is static with no interaction or data binding.

CCurran Kelleher

53% match