Skip to content
Snippets Groups Projects
Commit a9488d3a authored by Oliver Schneider's avatar Oliver Schneider
Browse files

some GUI on Publicpage

parent 0ac7d4e0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/css/cards.css
+ 3
− 3
View file @ a9488d3a
......@@ -9,7 +9,7 @@
background-clip: padding-box;
}
.card span.card-title {
color: #fff;
color: #E8452B;
font-size: 24px;
font-weight: 300;
text-transform: uppercase;
......@@ -49,12 +49,12 @@
padding: 16px;
}
.card .card-action a {
color: #ffab40;
color: #414d70;
margin-right: 16px;
transition: color 0.3s ease;
text-transform: uppercase;
}
.card .card-action a:hover {
color: #ffd8a6;
color: #1f2d54;
text-decoration: none;
}
\ No newline at end of file
public/index.html
+ 144
− 92
View file @ a9488d3a
......@@ -68,7 +68,7 @@
<p>Note: AMIV is awesome</p>
<!-- A Card -->
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png">
......@@ -87,7 +87,7 @@
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
......@@ -107,7 +107,7 @@
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
......@@ -127,108 +127,160 @@
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<p>
<a data-chrome="noheader" class="twitter-timeline" href="https://twitter.com/AMIV_ETHZ/amiv" data-widget-id="389682176024784896">Tweets from @AMIV_ETHZ</a>
</p>
<script type="text/javascript">
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</div>
</div>
<!-- A Card -->
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png">
<span class="card-title">Jarcakebakery @ FoodLab</span>
</div>
<div class="card-content">
<p>This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself. </p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Zum Event</a>
<a href="#" target="new_blank">Anmeldung</a>
<a href="#" target="new_blank">Im kalender speichern</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
<span class="card-title">Eishockey mit OpenSystems</span>
</div>
<div class="card-content">
<p>The Playoffs have begun. ANo tooth will stay at its place! </p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Zum Event</a>
<a href="#" target="new_blank">Anmeldung</a>
<a href="#" target="new_blank">Im kalender speichern</a>
<a href="#" target="new_blank">OpenSystems</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
<span class="card-title">Eishockey mit OpenSystems</span>
</div>
<div class="card-content">
<p>The Playoffs have begun. ANo tooth will stay at its place! </p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Zum Event</a>
<a href="#" target="new_blank">Anmeldung</a>
<a href="#" target="new_blank">Im Kalender speichern</a>
<a href="#" target="new_blank">OpenSystems</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<a data-chrome="noheader" class="twitter-timeline" href="https://twitter.com/AMIV_ETHZ/amiv" data-widget-id="389682176024784896">Tweets from @AMIV_ETHZ</a>
<script type="text/javascript">
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</div>
</div>
<!-- A Card -->
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png">
<span class="card-title">Jarcakebakery @ FoodLab</span>
</div>
<div class="card-content">
<p>This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself. </p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Zum Event</a>
<a href="#" target="new_blank">Anmeldung</a>
<a href="#" target="new_blank">Im kalender speichern</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
<span class="card-title">Eishockey mit OpenSystems</span>
</div>
<div class="card-content">
<p>The Playoffs have begun. ANo tooth will stay at its place! </p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Zum Event</a>
<a href="#" target="new_blank">Anmeldung</a>
<a href="#" target="new_blank">Im kalender speichern</a>
<a href="#" target="new_blank">OpenSystems</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
<span class="card-title">Eishockey mit OpenSystems</span>
</div>
<div class="card-content">
<p>The Playoffs have begun. ANo tooth will stay at its place! </p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Zum Event</a>
<a href="#" target="new_blank">Anmeldung</a>
<a href="#" target="new_blank">Im Kalender speichern</a>
<a href="#" target="new_blank">OpenSystems</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card">
<a data-chrome="noheader" class="twitter-timeline" href="https://twitter.com/AMIV_ETHZ/amiv" data-widget-id="389682176024784896">Tweets from @AMIV_ETHZ</a>
<script type="text/javascript">
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form role="form">
<div class="form-group">
<label for="email">nethz-Login:</label>
<input type="email" class="form-control loginField" id="email" name="user">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control loginField" id="pwd" name="password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default" id="loginButton">Submit</button>
</form>
</div>
<div class="col-sm-3"></div>
</div>
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="bs/js/bootstrap.min.js"></script>
<!--
<script>
'use strict';
var core_lib = {
api_url: 'https://amiv-apidev.vsos.ethz.ch',
};
function log(msg, type){
console.log(msg);
}
$('#loginButton').click(function(e){
e.preventDefault();
getTkn();
});
/*
Request Function
Attr: data, path, method.
Callback: function that gets calle
*/
function req(attr, callback) {
callback = callback || function(msg) {
console.log(msg);
};
$.ajax({
url: core_lib.api_url + attr.path,
data: attr.data,
method: attr.method,
dataType: 'json',
timeout: 3000,
headers: attr.headers,
success: function(res) {
callback(res);
return true;
},
error: function(res) {
if (core_lib.show_errors) console.log(res);
callback(res);
return false;
},
});
}
function getTkn(){
var curData = {};
$('.loginField').each(function(){
curData[$(this).attr('name')] = $(this).val();
});
req({
path: '/sessions/',
method: 'POST',
data: JSON.stringify(curData),
headers: {
'Content-Type': 'application/json',
}
}, function(ret){
console.log(ret);
});
}
</script>
-->
</body>
</html>
\ No newline at end of file
public/js/color.js 0 → 100644
+ 49
− 0
View file @ a9488d3a
// coloraverager for Cardtitles
function getAverageRGB(imgEl) {
var blockSize = 5, // only visit every 5 pixels
defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
canvas = document.createElement('canvas'),
context = canvas.getContext && canvas.getContext('2d'),
data, width, height,
i = -4,
length,
rgb = {r:0,g:0,b:0},
count = 0;
if (!context) {
return defaultRGB;
}
height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
context.drawImage(imgEl, 0, 0);
try {
data = context.getImageData(0, 0, width, height);
} catch(e) {
/* security error, img on diff domain */
return defaultRGB;
}
length = data.data.length;
while ( (i += blockSize * 4) < length ) {
++count;
rgb.r += data.data[i];
rgb.g += data.data[i+1];
rgb.b += data.data[i+2];
}
// ~~ used to floor values
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);
//Farbe in cards.css ändern
document.getElementById("cardtitle").style.color = rgb;
return rgb;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment