Transcriptic Pricing Cards

Developer
Alexander Hadik
Size
11,150 Kb
Views
24,288
  1. Transcriptic Pricing Cards Previews
  2. Transcriptic Pricing Cards HTML Codes
  3. Transcriptic Pricing Cards CSS Codes
  4. Transcriptic Pricing Cards JS Codes

How do I make an transcriptic pricing cards?

What is a transcriptic pricing cards? How do you make a transcriptic pricing cards? This script and codes were developed by Alexander Hadik on 16 September 2022, Friday.

Transcriptic Pricing Cards Previews
IQ Test

Transcriptic Pricing Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Transcriptic Pricing Cards</title> <link rel='stylesheet prefetch' href='css/https___gist_githubuserco.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Transcriptic Pricing Cards - Script Codes CSS Codes

html, body { width: 100%; min-height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: -webkit-linear-gradient(bottom right, #0E202E, #142e42); background: linear-gradient(bottom right, #0E202E, #142e42);
}
header, footer { width: 100%; height: 75px; box-sizing: border-box; padding: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: #EFF1F2;
}
header p, footer p { margin: 0 !important;
}
header { border-bottom: 1px solid #c3c3c3;
}
footer { border-top: 1px solid #c3c3c3;
}
.modal { width: 960px; margin: 50px;
}
.btn { height: 50px; line-height: 50px; width: 180px; padding: 0;
}
.btn--primary { background: #4DA4E3;
}
.pricing-cards { -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; background: -webkit-linear-gradient(bottom right, #EFF1F2, #fff); background: linear-gradient(bottom right, #EFF1F2, #fff); width: 960px; position: relative; height: 600px; overflow-x: auto; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -ms-perspective: 1000; perspective: 1000;
}
.card-container { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 60px 20px; padding-left: 60px;
}
.card-container__card { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: auto 15px; margin-top: 0; display: inline-block; -webkit-transition: margin-top .5s, box-shadow .5s, -webkit-transform .5s; transition: margin-top .5s, box-shadow .5s, -webkit-transform .5s; transition: transform .5s, margin-top .5s, box-shadow .5s; transition: transform .5s, margin-top .5s, box-shadow .5s, -webkit-transform .5s; -webkit-transform: scale(1); transform: scale(1); box-shadow: 0px 8px 18px 3px rgba(0, 0, 0, 0.3);
}
.card-container__card:not(.card-container__card--selected):hover { cursor: pointer;
}
.card-container__card:last-child { margin-right: 60px;
}
.card-container__card--selected { -webkit-transform: scale(1.1); transform: scale(1.1); z-index: 1; box-shadow: 0px 12px 48px 12px rgba(0, 0, 0, 0.4); cursor: default;
}
.card-container__card--hover { margin-top: -20px;
}
.card-container__card--hover .tabs, .card-container__card--hover .selector { pointer-events: none;
}
.card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; border-radius: 5px; width: 250px; height: 420px; padding: 35px 20px 20px 20px; overflow: hidden; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; background: -webkit-linear-gradient(bottom right, #5d5d5d, #0E202E); background: linear-gradient(bottom right, #5d5d5d, #0E202E);
}
.card h1, .card p { margin: 0;
}
.card p { color: #fff;
}
.card__tabs { width: 100%;
}
.card__data { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.card__banner { position: absolute; padding: .25em; left: 0; top: 0; right: 0; background: #4DA4E3; color: #fff; text-align: center;
}
.card--current { background: -webkit-linear-gradient(bottom right, #FFC40C, #F7941E); background: linear-gradient(bottom right, #FFC40C, #F7941E);
}
.tabs { margin-bottom: 1em;
}
.tabs__bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.tabs__tab { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; cursor: pointer; font-size: .875em;
}
.tabs__content { position: relative; background-color: #0E202E; margin: 15px -20px auto -20px; border-left: 20px solid rgba(255, 255, 255, 0); border-right: 20px solid rgba(255, 255, 255, 0); padding: 10px 0;
}
.tabs__indicator { position: absolute; -webkit-transform: translatex(-50%); transform: translatex(-50%); top: -9px; left: 0; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0E202E; -webkit-transition: left .5s; transition: left .5s;
}
.selector { position: relative;
}
.selector--dark .selector__checkbox { background: -webkit-linear-gradient(bottom right, #5d5d5d, #0E202E); background: linear-gradient(bottom right, #5d5d5d, #0E202E);
}
.selector--dark .selector__input:checked + .selector__checkbox { border: 2px solid #0e202e;
}
.selector--dark .selector__check { color: #0E202E;
}
.selector__text { white-space: nowrap;
}
.selector__checkbox { border-radius: 5px; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.3); position: relative; display: block; width: 150px; height: 50px; -webkit-transition: width .3s, height .3s, border .3s, background .3s, border-radius .3s, box-shadow .3s, -webkit-transform .2s; transition: width .3s, height .3s, border .3s, background .3s, border-radius .3s, box-shadow .3s, -webkit-transform .2s; transition: width .3s, height .3s, border .3s, background .3s, border-radius .3s, box-shadow .3s, transform .2s; transition: width .3s, height .3s, border .3s, background .3s, border-radius .3s, box-shadow .3s, transform .2s, -webkit-transform .2s; -webkit-transform: scale(1); transform: scale(1); padding: 15px 25px; box-sizing: border-box; background: -webkit-linear-gradient(bottom right, #FFC40C, #F7941E); background: linear-gradient(bottom right, #FFC40C, #F7941E); cursor: pointer;
}
.selector__checkbox:hover { -webkit-transform: scale(0.95); transform: scale(0.95); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
}
.selector__input { display: none;
}
.selector__input:checked + .selector__checkbox { width: 4em; height: 4em; box-shadow: 0px 0px 0px transparent; border-radius: 2em; background: rgba(255, 255, 12, 0); border: 2px solid #ffc40c; pointer-events: none;
}
.selector__input:checked + .selector__checkbox .selector__text { display: none;
}
.selector__input:checked ~ .selector__check { position: absolute; top: 0; font-size: 2em; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.selector__check { display: none; color: #FFC40C;
}
.big-num { width: 100%; font-size: 3em; font-weight: 700; line-height: 1em; margin-bottom: .5em;
}
.big-stat { font-size: 2em; margin-bottom: 1em;
}
.big-stat--small { font-size: .4em;
}

Transcriptic Pricing Cards - Script Codes JS Codes

"use strict";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Selector = function Selector(props) { return React.createElement( "div", { className: "card__selector selector " + (props.style ? props.style : '') }, React.createElement("input", { type: "checkbox", onChange: function onChange() { props.selectCard(props.index); }, className: "selector__input", id: props.index, value: props.index, checked: props.selectedCard }), React.createElement( "label", { htmlFor: props.index, className: "selector__checkbox" }, React.createElement( "span", { className: "selector__text" }, "Select Tier" ) ), React.createElement("i", { className: "selector__check fa fa-check" }) );
};
var PricingCard = function (_React$Component) { _inherits(PricingCard, _React$Component); _createClass(PricingCard, null, [{ key: "propTypes", get: function get() { return { currentTier: React.PropTyes.Bool, level: React.PropTypes.Number.isRequired, lagTime: React.PropTypes.String.isRequired, accessFee: React.PropTypes.Number.isRequired, annualDiscount: React.PropTypes.Number.isRequired, prepaidDiscount: React.PropTypes.Number.isRequired, focusCard: React.PropTypes.func.isRequired, setHover: React.PropTypes.func.isRequired, selectCard: React.PropTypes.func.isRequired, selectedCard: React.PropTypes.bool, index: React.PropTypes.Number.isRequired, currTierIndex: React.PropTypes.Number.isRequired, className: React.PropTypes.String, currentPaymentSchedule: React.PropTypes.String }; } }]); function PricingCard(props) { _classCallCheck(this, PricingCard); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.tabReporter = _this.tabReporter.bind(_this); _this.paymentSchedToIndex = { "monthly": 0, "annual": 1, "prepaid annual": 2 }; _this.indexToPaymentSched = ["monthly", "annual", "prepaid annual"]; _this.renderSelector = _this.renderSelector.bind(_this); _this.state = { selectedPaymentSchedule: _this.props.currentPaymentSchedule }; return _this; } //Passed to the Tabs component to report back the selected tab from Tabs internal state PricingCard.prototype.tabReporter = function tabReporter(activeIndex) { this.setState({ selectedPaymentSchedule: this.indexToPaymentSched[activeIndex] }); }; PricingCard.prototype.renderSelector = function renderSelector() { if (this.props.index < this.props.currTierIndex) { return React.createElement( "p", null, "Email ", React.createElement( "a", { href: "mailto:[email protected]" }, "[email protected]" ), " to request a lower tier." ); } if (this.props.index === this.props.currTierIndex) { if (this.state.selectedPaymentSchedule === this.props.currentPaymentSchedule) { return React.createElement( "p", null, "This is your current payment schedule." ); } return React.createElement(Selector, { index: this.props.index, selectCard: this.props.selectCard, style: "selector--dark", selectedCard: this.props.selectedCard }); } return React.createElement(Selector, { index: this.props.index, selectCard: this.props.selectCard, selectedCard: this.props.selectedCard }); }; PricingCard.prototype.render = function render() { var _this2 = this; var className = 'card' + (this.props.currentTier ? ' card--current' : '') + (this.props.className ? ' ' + this.props.className : ''); return React.createElement( "article", { onClick: function onClick() { _this2.props.focusCard(_this2.props.index); }, onMouseEnter: function onMouseEnter() { _this2.props.setHover(_this2.props.index); }, onMouseLeave: function onMouseLeave() { _this2.props.setHover(undefined); }, className: className }, this.props.currentTier && React.createElement( "div", { className: "card__banner" }, React.createElement( "span", null, "Current Tier" ) ), React.createElement( "h4", null, "Tier" ), React.createElement( "span", { className: "big-num" }, this.props.level ), React.createElement( "p", { className: "paragraph--black" }, "Current Average Lag Time" ), React.createElement( "span", { className: "big-stat" }, this.props.lagTime ), React.createElement(Tabs, { tabReporter: this.tabReporter, tabNames: ['Monthly', 'Annual Commitment', 'Pre-paid Annual'], initialTabIndex: this.props.currTierIndex === this.index ? this.paymentSchedToIndex[this.props.currentPaymentSchedule] : 0, tabContents: [React.createElement( "span", null, '$' + Number(this.props.accessFee).toFixed(2), React.createElement( "span", { className: "big-stat--small" }, "/mon" ) ), React.createElement( "span", null, '$' + Number(this.props.accessFee * (1 - this.props.annualDiscount)).toFixed(2), React.createElement( "span", { className: "big-stat--small" }, "/mon" ) ), React.createElement( "span", null, '$' + Number(this.props.accessFee * (1 - this.props.prepaidDiscount)).toFixed(2), React.createElement( "span", { className: "big-stat--small" }, "/mon" ) )] }), this.renderSelector() ); }; return PricingCard;
}(React.Component);
var Tabs = function (_React$Component2) { _inherits(Tabs, _React$Component2); _createClass(Tabs, null, [{ key: "propTypes", get: function get() { return { tabNames: React.PropTypes.instanceOf(Array), tabContents: React.PropTypes.instanceOf(Array) }; } }]); function Tabs(props) { _classCallCheck(this, Tabs); var _this3 = _possibleConstructorReturn(this, _React$Component2.call(this, props)); _this3.state = { activeIndex: 0 }; return _this3; } Tabs.prototype.calcIndicatorPosition = function calcIndicatorPosition() { return ((this.state.activeIndex + 1) / this.props.tabNames.length - 1 / this.props.tabNames.length / 2) * 100 + '%'; }; Tabs.prototype.render = function render() { var _this4 = this; var indicatorPos = this.calcIndicatorPosition(); return React.createElement( "div", { className: "tabs" }, React.createElement( "div", { className: "tabs__bar" }, this.props.tabNames.map(function (tabName, tabIndex) { return React.createElement( "span", { className: "tabs__tab", onClick: function onClick() { _this4.props.tabReporter(tabIndex); _this4.setState({ activeIndex: tabIndex }); } }, tabName ); }) ), React.createElement( "div", { className: "tabs__content" }, React.createElement("div", { className: "tabs__indicator", style: { left: indicatorPos } }), React.createElement( "span", { className: "big-stat" }, this.props.tabContents[this.state.activeIndex] ) ) ); }; return Tabs;
}(React.Component);
var PricingCards = function (_React$Component3) { _inherits(PricingCards, _React$Component3); function PricingCards(props) { _classCallCheck(this, PricingCards); var _this5 = _possibleConstructorReturn(this, _React$Component3.call(this, props)); _this5.focusCard = _this5.focusCard.bind(_this5); _this5.setHover = _this5.setHover.bind(_this5); _this5.selectCard = _this5.selectCard.bind(_this5); _this5.state = { focusedCardIndex: _this5.props.currTierIndex }; return _this5; } PricingCards.prototype.focusCard = function focusCard(index) { this.setState({ focusedCardIndex: index }); }; PricingCards.prototype.setHover = function setHover(index) { this.setState({ hoveredIndex: index }); }; PricingCards.prototype.selectCard = function selectCard(index) { this.setState({ selectedCardIndex: index }); }; PricingCards.prototype.render = function render() { var _this6 = this; return React.createElement( "div", { className: "pricing-cards" }, React.createElement( "div", { className: "card-container" }, React.Children.map(this.props.children, function (child, index) { var className = 'card-container__card ' + (index === _this6.state.hoveredIndex && index !== _this6.state.focusedCardIndex ? ' card-container__card--hover' : '') + (index === _this6.state.focusedCardIndex ? ' card-container__card--selected' : ''); return React.cloneElement(child, { currTierIndex: _this6.props.currTierIndex, focusCard: _this6.focusCard, setHover: _this6.setHover, selectCard: _this6.selectCard, selectedCard: _this6.state.selectedCardIndex === index, index: index, className: className, currentTier: _this6.props.currTierIndex === index }); }) ) ); }; return PricingCards;
}(React.Component);
var CardWrapper = React.createElement( "div", { className: "modal" }, React.createElement( "header", null, React.createElement( "p", { className: "paragraph--large" }, "Change Tier" ) ), React.createElement( PricingCards, { currTierIndex: 2 }, React.createElement(PricingCard, { level: 1, lagTime: "1 Week", accessFee: 1000, annualDiscount: 0.18, prepaidDiscount: 0.25 }), React.createElement(PricingCard, { level: 2, lagTime: "5 Days", accessFee: 1240, annualDiscount: 0.18, prepaidDiscount: 0.25 }), React.createElement(PricingCard, { currentPaymentSchedule: "monthly", level: 3, lagTime: "3 Days", accessFee: 1750, annualDiscount: 0.18, prepaidDiscount: 0.25 }), React.createElement(PricingCard, { level: 4, lagTime: "1 Day", accessFee: 1500, annualDiscount: 0.18, prepaidDiscount: 0.25 }), React.createElement(PricingCard, { level: 5, lagTime: "8 Hours", accessFee: 2500, annualDiscount: 0.18, prepaidDiscount: 0.25 }) ), React.createElement( "footer", null, React.createElement( "button", { className: "btn" }, "Back" ), React.createElement( "button", { className: "btn btn--primary" }, "Next" ) )
);
ReactDOM.render(CardWrapper, document.querySelector('body'));
Transcriptic Pricing Cards - Script Codes
Transcriptic Pricing Cards - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded September 16, 2022
Rating 3
Size 11,150 Kb
Views 24,288
Do you need developer help for Transcriptic Pricing Cards?

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!

Alexander Hadik (ahadik) Script Codes
Name
Transcriptic Typography
D3 Learnings
HSL SVG Gradient
Transcriptic Node Graph
Transcriptic Header
Welcome to Transcriptic
Ops Implementation
Workcell
IOPS Selector
Loader
Create amazing love letters 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!