Skip to content

Instantly share code, notes, and snippets.

@aldomendez

aldomendez/index.html

Forked from anonymous/index.html
Created April 5, 2016 16:08
Show Gist options
  • Save aldomendez/af6dddcfabe8e0f2bbd293986794a696 to your computer and use it in GitHub Desktop.
Save aldomendez/af6dddcfabe8e0f2bbd293986794a696 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/cuxitag
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.ui.card>.progress {
background:rgba(120, 202, 41, 1);
top:0px;
display: none;
padding:0px;
height:100%;
width:100%;
position:absolute;
margin:0px;
/* z-index:0; */
}
.ui.card>.progress.active {
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation:2.5s cubic-bezier(0.29, 0.04, 0.65, 0.92) 0s infinite normal oven-active ;
display: block;
}
@keyframes oven-active{
0%{
width:0%;
opacity: 0.3;
margin-left:0%;
}
50%{
width:30%;
}
100%{
width:0%;
opacity: 0.3;
margin-left:100%;
}
}
</style>
</head>
<body>
<div class="ui grig container">
<div class="ui secondary pointing menu">
<a class="item">
FIT
</a>
<a class="active item">
Ovens
</a>
<a class="item">
Trays
</a>
<a class="item">
Oven usage
</a>
<a href="http://learnlayout.com/position-example.html" class="item">
CSS
</a>
<div class="right menu">
<a class="ui item">
<i class="icon setting"></i>
</a>
</div>
</div>
<div class="ui segment">
<h2><i class="icon cube"></i>Ovens</h2>
<div class="ui relaxed link cards">
<div class="ui card">
<div class="content">
<!-- <a class="ui green right ribbon label"><i class="icon play"></i> Running</a> -->
<div class="header">Votch</div>
<div class="meta">Running program 58 since 4h ago</div>
<div class="description">
<p>
<div class="ui list horizontal">
<li class="item"><div class="header">CM1</div>50</li>
<li class="item"><div class="header">B3</div>30</li>
<li class="item"><div class="header">A4</div>20</li>
<li class="item"><div class="header">Gen2.5</div>8</li>
<li class="item"><div class="header">Gen3</div>8</li>
</div>
</p>
</div>
</div>
<div class="progress active"></div>
<div class="extra content">
<div class="label">6h left to <b>2:35</b></div>
</div>
</div>
<div class="ui card">
<div class="content">
<!-- <a class="ui green right ribbon label"><i class="icon play"></i> Running</a> -->
<div class="header">Spec</div>
<div class="meta">Running program 6 since 7h ago</div>
<div class="description">
<p>
<div class="ui list horizontal">
<li class="item"><div class="header">CM1</div>50</li>
<li class="item"><div class="header">B3</div>30</li>
<li class="item"><div class="header">A4</div>20</li>
<li class="item"><div class="header">2.5</div>8</li>
</div>
</p>
</div>
</div>
<div class="progress active"></div>
<div class="extra content">
<div class="label">6h left to <b>2:35</b></div>
</div>
</div>
<div class="ui card">
<div class="content">
<!-- <a class="ui green right ribbon label"><i class="icon play"></i> Running</a> -->
<div class="header">Spec 2</div>
<div class="meta">Detenido</div>
<div class="description">
<p>
<div class="ui list horizontal">
<li class="item"><div class="header">Vacio</div></li>
</div>
</p>
</div>
</div>
<div class="progress"></div>
<!-- <div class="extra content">
<div class="label"></div>
</div> -->
</div>
</div>
</div>
<div class="ui segment">
<div class="ui grid">
<div class="row">
<div class="column">
<h2><i class="icon inbox"></i> Trays</h2>
<div class="ui column very relaxed stackable grid">
<div class="ten wide column">
<form class="ui form">
<radiogroup class="inline fields">
<label>Tipo de demanda:</label>
<div class="field">
<div class="">
<input type="radio" id="CM1" name="fruit" checked="" accesskey="R" tabindex="0">
<label for="CM1">CM1</label>
</div>
</div>
<div class="field">
<div class="">
<input type="radio" id="B3" name="fruit" tabindex="0">
<label for="B3">B3</label>
</div>
</div>
<div class="field">
<div class="">
<input type="radio" id="A4" name="fruit" tabindex="0">
<label for="A4">A4</label>
</div>
</div>
<div class="field">
<div class="">
<input type="radio" id="Gen2.5" name="fruit" tabindex="0">
<label for="Gen2.5">Gen2.5</label>
</div>
</div>
<div class="field">
<div class="">
<input type="radio" id="Gen3" name="fruit" tabindex="0">
<label for="Gen3">Gen3</label>
</div>
</div>
</radiogroup>
<div class="inline fields">
<div class="field"><label for="carrier">Carrier</label><input id="carrier" type="text"></div>
<div class="field"><input class="ui button" type="submit" value="agregar"></div>
</div>
</form>
</div>
<div class="ui vertical divider"></div>
<div class="six wide column">
<div class="ui compact menu">
<div class="ui simple dropdown item">
<i class="sign in icon"></i>
Load 4 demands to Oven
<div class="menu">
<div class="header">
<i class="info circle icon"></i>
Select oven
</div>
<a href="#" class="item">Votch: Program 89</a>
<a href="#" class="item">Spec: Program 6</a>
</div>
</div>
</div>
</div>
</div>
</div></div>
<div class="row"><div class="column">
<h4 class="ui horizontal divider header">Content</h4>
<div class="ui six doubling stackable cards">
<div class="card">
<div class="ui active inverted dimmer">
<div class="ui indeterminate text loader">Loading</div>
</div>
<div class="content">
<div class="header">167103990</div>
<div class="meta">CM1 - 9pz</div>
</div>
<div class="extra content">
<div class="ui fluid compact two buttons">
<div class="ui inverted green button"><i class="icon sign in"></i></div>
<div class="ui inverted compact red button"><i class="icon delete"></i></div>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="header">167103990</div>
<div class="meta">CM1 - 9pz</div>
</div>
<div class="extra content">
<div class="ui fluid compact two buttons">
<div class="ui inverted green button"><i class="icon sign in"></i></div>
<div class="ui inverted compact red button"><i class="icon delete"></i></div>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="header">167103990</div>
<div class="meta">CM1 - 9pz</div>
</div>
<div class="extra content">
<div class="ui fluid compact two buttons">
<div class="ui inverted green button"><i class="icon sign in"></i></div>
<div class="ui inverted compact red button"><i class="icon delete"></i></div>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="header">167103990</div>
<div class="meta">CM1 - 9pz</div>
</div>
<div class="extra content">
<ui class="ui comments">
<div class="comment">
<div class="content">
<div class="actions"><a href="" class="reply"><i class="icon sign in"></i></a></div>
</div>
</div>
</ui>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">.ui.card>.progress {
background:rgba(120, 202, 41, 1);
top:0px;
display: none;
padding:0px;
height:100%;
width:100%;
position:absolute;
margin:0px;
/* z-index:0; */
}
.ui.card>.progress.active {
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation:2.5s cubic-bezier(0.29, 0.04, 0.65, 0.92) 0s infinite normal oven-active ;
display: block;
}
@keyframes oven-active{
0%{
width:0%;
opacity: 0.3;
margin-left:0%;
}
50%{
width:30%;
}
100%{
width:0%;
opacity: 0.3;
margin-left:100%;
}
}
</script>
</body>
</html>
Raw
jsbin.cuxitag.css
.ui.card>.progress {
background:rgba(120, 202, 41, 1);
top:0px;
display: none;
padding:0px;
height:100%;
width:100%;
position:absolute;
margin:0px;
/* z-index:0; */
}
.ui.card>.progress.active {
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation:2.5s cubic-bezier(0.29, 0.04, 0.65, 0.92) 0s infinite normal oven-active ;
display: block;
}
@keyframes oven-active{
0%{
width:0%;
opacity: 0.3;
margin-left:0%;
}
50%{
width:30%;
}
100%{
width:0%;
opacity: 0.3;
margin-left:100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment