Folding Ticket Detail

folding-ticket-detail.markdown

Folding Ticket Detail

Inspired from https://github.com/Ramotion/folding-cell

A Pen by Yugam on CodePen.

License.

DEMO https://codemyui.com/?p=29923

index.html

<div id='root'></div>

script.babel

const { useState } = React;
const rootElement = document.getElementById("root");

const Flight = [
  {
    src: "https://beebom.com/wp-content/uploads/2018/12/Lufthansa-Logo.jpg",
    style: {
      height: "51px",
      margin: "22px 12px"
    },
    label: "rgb(13, 28, 83)"
  },
  {
    src:
      "https://beebom.com/wp-content/uploads/2015/02/airline-logos-qatar-e1424574584611.png",
    style: {
      height: "26px",
      margin: "34px 16px"
    },
    label: "rgb(90, 5, 49)"
  },
  {
    src:
      "https://beebom.com/wp-content/uploads/2015/02/airline-logos-swiss.png",
    style: {
      height: "23px",
      margin: "41px 12px"
    },
    label: "rgb(230, 26, 56)"
  },
  {
    src:
      "https://beebom.com/wp-content/uploads/2018/12/Singapore-Airlines-logo.jpg",
    style: {
      height: "46px",
      margin: "22px 15px"
    },
    label: "rgb(252, 178, 50)"
  },
  {
    src: "https://beebom.com/wp-content/uploads/2018/12/Lufthansa-Logo.jpg",
    style: {
      height: "51px",
      margin: "22px 12px"
    },
    label: "rgb(13, 28, 83)"
  },
  {
    src:
      "https://beebom.com/wp-content/uploads/2015/02/airline-logos-qatar-e1424574584611.png",
    style: {
      height: "26px",
      margin: "34px 16px"
    },
    label: "rgb(90, 5, 49)"
  },
  {
    src:
      "https://beebom.com/wp-content/uploads/2015/02/airline-logos-swiss.png",
    style: {
      height: "23px",
      margin: "41px 12px"
    },
    label: "rgb(230, 26, 56)"
  },
  {
    src:
      "https://beebom.com/wp-content/uploads/2018/12/Singapore-Airlines-logo.jpg",
    style: {
      height: "46px",
      margin: "22px 15px"
    },
    label: "rgb(252, 178, 50)"
  }
];

const Cell = (props)=> {
  const { index } = props;
  const [active, handleActive] = useState(false);
	
  return (
    <div
      id="cardContainer"
      style={{
        height: active ? `300px` : `100px`,
        transition: "0.9s"
      }}
      onClick={() => {
        handleActive(!active);
      }}
    >
      <div id="firstDisplay">
        <div id="flightDetail">
          <div
            id="detailLabel"
            style={{ fontWeight: "bold", color: Flight[index].label }}
          >
            From
          </div>
          BLR
          <div id="detailLabel">Kempegowda International</div>
        </div>
        <div
          id="flightDetail"
          style={{
            marginTop: "15px"
          }}
        >
          <div id="animContainer">
            <div id="anim">
              <div id="circle" />
              <div id="circle" />
              <div id="circle" />
            </div>
          </div>
          <div id="animContainer" style={{ left: "62px" }}>
            <div id="anim">
              <div id="circle" />
              <div id="circle" />
              <div id="circle" />
            </div>
          </div>
          <img
            style={{ width: "30px" }}
            src="https://github.com/pizza3/asset/blob/master/airplane2.png?raw=true"
          />
        </div>
        <div id="flightDetail">
          <div
            id="detailLabel"
            style={{ fontWeight: "bold", color: Flight[index].label }}
          >
            To
          </div>
          DEL
          <div id="detailLabel">Indira Gandhi International</div>
        </div>
      </div>
      <div
        id="first"
        style={{
          transform: active
            ? `rotate3d(1, 0, 0, -180deg)`
            : `rotate3d(1, 0, 0, 0deg)`,
          transitionDelay: active ? "0s" : "0.3s"
        }}
      >
        <div id="firstTop">
          <img style={Flight[index].style} src={Flight[index].src} />
          <div id="timecontainer">
            <div id="detailDate">
              Bengaluru
              <div id="detailTime">6:20</div>
              June 12
            </div>
            <img
              style={{
                width: "30px",
                height: "26px",
                marginTop: "22px",
                marginLeft: "16px",
                marginRight: "16px"
              }}
              src="https://github.com/pizza3/asset/blob/master/airplane2.png?raw=true"
            />
            <div id="detailDate">
              New Delhi
              <div id="detailTime">8:45</div>
              June 12
            </div>
          </div>
        </div>
        <div id="firstBehind">
          <div id="firstBehindDisplay">
            <div id="firstBehindRow">
              <div id="detail">
                6:20 - 8:45
                <div id="detailLabel">Flight Time</div>
              </div>
              <div id="detail">
                No
                <div id="detailLabel">Transfer</div>
              </div>
            </div>
            <div id="firstBehindRow">
              <div id="detail">
                2h 25 min
                <div id="detailLabel">Duration</div>
              </div>
              <div id="detail">
                8<div id="detailLabel">Gate</div>
              </div>
            </div>
            <div id="firstBehindRow">
              <div id="detail">
                5:35
                <div id="detailLabel">Boarding</div>
              </div>
              <div id="detail">
                20A
                <div id="detailLabel">Seat</div>
              </div>
            </div>
          </div>
          <div
            id="second"
            style={{
              transform: active
                ? `rotate3d(1, 0, 0, -180deg)`
                : `rotate3d(1, 0, 0, 0deg)`,
              transitionDelay: active ? "0.2s" : "0.2s"
            }}
          >
            <div id="secondTop" />
            <div id="secondBehind">
              <div id="secondBehindDisplay">
                <div id="price">
                  $100
                  <div id="priceLabel">Price</div>
                </div>
                <div id="price">
                  Economy
                  <div id="priceLabel">Class</div>
                </div>
                <img
                  id="barCode"
                  src="https://github.com/pizza3/asset/blob/master/barcode.png?raw=true"
                />
              </div>
              <div
                id="third"
                style={{
                  transform: active
                    ? `rotate3d(1, 0, 0, -180deg)`
                    : `rotate3d(1, 0, 0, 0deg)`,
                  transitionDelay: active ? "0.4s" : "0s"
                }}
              >
                <div id="thirdTop" />
                <div id="secondBehindBottom">
                  <button
                    id="button"
                    style={{
                      color: Flight[index].label,
                      border: `1px solid ${Flight[index].label}`
                    }}
                  >
                    Pay
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}


const Header = (
  <div>
    <svg
      id="back"
      xmlns="http://www.w3.org/2000/svg"
      width="512"
      height="512"
      viewBox="0 0 512 512"
    >
      <polyline
        points="244 400 100 256 244 112"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "48px"
        }}
      />
      <line
        x1="120"
        y1="256"
        x2="412"
        y2="256"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "48px"
        }}
      />
    </svg>
    <div id="headerText">Select Flight</div>
    <div id="tripDetail">
      Your Trip
      <div id="tripDest">
        BLR - DEL<div id="oneWay">One Way</div>
        <div />
      </div>
      12th June, 2020
    </div>
    <svg
      id="settings"
      xmlns="http://www.w3.org/2000/svg"
      width="512"
      height="512"
      viewBox="0 0 512 512"
    >
      <line
        x1="368"
        y1="128"
        x2="448"
        y2="128"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "32px"
        }}
      />
      <line
        x1="64"
        y1="128"
        x2="304"
        y2="128"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "32px"
        }}
      />
      <line
        x1="368"
        y1="384"
        x2="448"
        y2="384"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "32px"
        }}
      />
      <line
        x1="64"
        y1="384"
        x2="304"
        y2="384"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "32px"
        }}
      />
      <line
        x1="208"
        y1="256"
        x2="448"
        y2="256"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "32px"
        }}
      />
      <line
        x1="64"
        y1="256"
        x2="144"
        y2="256"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "32px"
        }}
      />
      <circle
        cx="336"
        cy="128"
        r="32"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "32px"
        }}
      />
      <circle
        cx="176"
        cy="256"
        r="32"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "32px"
        }}
      />
      <circle
        cx="336"
        cy="384"
        r="32"
        style={{
          fill: "none",
          stroke: "#000",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "32px"
        }}
      />
    </svg>
  </div>
);

const DataArr = Array(8)
  .fill(0)
  .map(Number.call, Number);
const App = () => {
  return (
    <div className="App">
      {Header}
     {DataArr.map((val, i) => (
        <Cell key={i} index={i} />
      ))}
    </div>
  );
}

ReactDOM.render(<div><App/></div>,rootElement);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  perspective: 700px;
  font-family: Roboto-Regular, HelveticaNeue, Arial, sans-serif;
}

#root {
  display: flex;
  align-items: center;
  justify-content: center;
	background: #ededed;
}

#back {
  width: 26px;
  height: 26px;
  position: absolute;
  z-index: 10;
  left: -4px;
  top: 29px;
}

#settings {
  width: 26px;
  height: 26px;
  position: absolute;
  z-index: 10;
  top: 117px;
  right: 0px;
}

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  box-shadow: 0px 0px 41px -7px rgba(0, 0, 0, 0.15);
  width: 400px;
  height: auto;
	background: #f3f3f3;
}

#headerText {
  color: rgb(34, 34, 34);
  font-weight: bold;
  font-size: 20px;
  width: 340px;
  height: 46px;
  text-align: center;
  margin-top: 30px;
  word-spacing: 2px;
  letter-spacing: 1px;
}

#tripDetail {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: #747474;
  font-size: 10px;
  margin-top: 26px;
  letter-spacing: 2px;
  margin-bottom: 26px;
}

#tripDest {
  color: #141414;
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 1px;
  display: flex;
}

#oneWay {
  font-size: 10px;
  font-weight: 100;
  background: #498eff;
  border: 1px solid #0061ff;
  color: #fff;
  position: relative;
  height: 20px;
  padding: 3px 5px;
  margin-top: 7px;
  border-radius: 3px;
  margin-left: 7px;
}

#headerInput {
  width: 340px;
  height: 40px;
  border: none;
  background: #262626;
  border-radius: 5px;
  border: 1px solid rgb(81, 81, 81);
  padding-top: 8px;
  padding-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#cardContainer {
  position: relative;
  width: 340px;
  height: 100px;
  /* background: rgb(194, 194, 194); */
  border-radius: 5px;
  transform-origin: bottom;
  margin: 20px;
	cursor: pointer;
}

#first {
  width: 340px;
  height: 100px;
  position: absolute;
  border-radius: 5px;
  color: #000;
  transform-origin: bottom;
  transform-style: preserve-3d;
  transition: 0.5s;
  border-radius: 8px;
  display: flex;
  /* backface-visibility: hidden; */
}

#detailDate {
  color: #a09a9a;
  font-size: 9px;
  padding-top: 11px;
}

#detailTime {
  font-weight: bold;
  font-size: 21px;
  color: #000;
}

#detailSub {
  width: 200px;
  height: 100px;
  position: relative;
  border-radius: 0px 8px 8px 0px;
  background: #0a0a0a;
}
#firstDisplay {
  width: 100%;
  height: 100px;
  position: absolute;
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 18px 23px;
  flex-wrap: wrap;
  backface-visibility: hidden;
  box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.17);
}

#info {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #b2b2b2;
  font-size: 10px;
}

#flightDetail {
  font-size: 23px;
  font-weight: bold;
  color: #3f3f3f;
  flex: 0.5;
}

#animContainer {
  padding-left: 0px;
  position: absolute;
  width: 19px;
  height: 10px;
  top: 10px;
  left: 15px;
  overflow: hidden;
}

#anim {
  width: 54px;
  position: absolute;
  display: flex;
  animation: slidein 1s infinite linear;
}

@keyframes slidein {
  to {
    transform: translateX(-18px);
  }

  from {
    transform: translateX(0px);
  }
}

#circle {
  width: 5px;
  height: 5px;
  background: #707070;
  border-radius: 50%;
  margin-right: 13px;
}
#firstTop {
  width: 340px;
  height: 100px;
  position: absolute;
  background: #ffffff;
  backface-visibility: hidden;
  border-radius: 8px;
  border-radius: 8px;
  box-shadow: 0px 0px 3px 0px rgba(132, 132, 132, 0.15);
  display: flex;
  justify-content: space-around;
}

#timecontainer {
  display: flex;
  padding-right: 10px;
  padding-top: 14px;
}

#firstBehind {
  width: 340px;
  height: 100px;
  position: absolute;
  background: #fff;
  transform-origin: center;
  transform: rotate3d(1, 0, 0, -180deg);
  backface-visibility: hidden;
  border-radius: 8px;
  border: 1px dashed #d1d1d1;
  border-left: none;
  border-right: none;
}

#firstBehindDisplay {
  width: 100%;
  height: 100px;
  position: absolute;
  background: #fff;
  border-radius: 8px;
  padding: 12px 23px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
}

#firstBehindRow {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 7px;
  text-align: left;
}

#detail {
  font-size: 15px;
  color: rgb(69, 69, 69);
  font-weight: bold;
}

#detailLabel {
  color: #686868;
  font-size: 10px;
  font-weight: 100;
}

#second {
  width: 340px;
  height: 50px;
  position: absolute;
  bottom: -2px;
  transform-origin: bottom;
  transform-style: preserve-3d;
  transition: 0.2s;
  border-radius: 8px;
}

#secondTop {
  width: 340px;
  height: 50px;
  position: absolute;
  background: rgb(231, 231, 231);
  backface-visibility: hidden;
  border-radius: 8px;
}

#thirdTop {
  width: 340px;
  height: 50px;
  position: absolute;
  background: rgb(190, 190, 190);
  backface-visibility: hidden;
  border-radius: 8px;
}

#secondBehind {
  width: 340px;
  height: 50px;
  position: absolute;
  background: #fff;
  transform-origin: center;
  transform: rotate3d(1, 0, 0, -180deg);
  backface-visibility: hidden;
  border-radius: 8px;
  border: 1px dashed #d1d1d1;
  border-left: none;
  border-right: none;
}

#secondBehindDisplay {
  width: 100%;
  height: 50px;
  position: absolute;
  background: #fff;
  border-radius: 8px;
  border-bottom: 1px dashed #d1d1d1;
  display: flex;
  justify-content: space-between;
  padding: 10px 23px;
  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
}

#secondBehindBottom {
  width: 340px;
  height: 50px;
  position: absolute;
  background: #fff;
  transform-origin: center;
  transform: rotate3d(1, 0, 0, -180deg);
  backface-visibility: hidden;
  border-radius: 0px 0px 8px 8px;
  border-radius: 8px;
  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
}

#third {
  width: 340px;
  height: 50px;
  position: absolute;
  transform-origin: bottom;
  transform-style: preserve-3d;
  transition: 0.2s;
  border-radius: 8px;
}

#button {
  color: #2d2d2d;
  font-size: 19px;
  font-weight: bold;
  padding: 4px 124px;
  border: 1px solid #2d2d2d;
  background: #fff;
  border-radius: 4px;
  margin-top: 9px;
}

#price {
  color: #2d2d2d;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  margin-top: -2px;
}

#priceLabel {
  color: #747474;
  font-weight: 100;
  font-size: 10px;
  text-align: left;
}

#barCode {
  width: 98px;
  height: 30px;
}