Archiv-Modus von Basti1012 Lösungspage

Hier kannst du nach Scripte , Plugins und andere Toolssuchen die man für eine Homepage gebrauchen kann
Code

                                    
                                <!doctype html>
<html>
<head>

<script src="/js_webseite/jquery.js"></script>
<style>

    body {
    font-family: Arial;
    background: #fff;
	color: #555;
}

a {
	color: #2994FF;
}

input,select {
	border: 1px solid #ccc;
	background: #fff;
	color: #555;
	padding: 5px 10px;
}

pre.prettyprint {
	padding: 5px;
	margin: 0;
}

#search {
	background: #eee;
	cursor: pointer;
}

#demo {
	width: auto;
	max-width: 1150px;
	margin: 30px auto;
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

li {
	padding: 10px 0;
	border-top: 1px solid #ccc;
}

.description {
	margin: 10px 0;
}

.repo {
	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
	color: #ccc;
}

.repo span {
	color: #555;
}

.activity,.last_activity {
	font-size: 90%;
	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
	float: right;
	background: salmon;
	color: #fff;
	text-decoration: none;
}

.activity,.last_activity,code {
	border-radius: 2px;
	padding: 2px 4px;
}

code {
	background: #eee;
	color: #555;
}

code.update {
	background: #888;
}

table {
	margin: 10px 0;
	color: #ccc;
}

td {
	padding: 5px 10px 5px 0;
}

thead {
	border-bottom: 1px solid #ccc;
}

tbody td {
	background: #8FFF8F;
	text-align: right;
}

tbody td code {
	background: #8FFF8F;
	color: #fff;
}

tbody td.title {
	background: #fff;
	text-align: left;
	color: #AD5CFF;
	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}

tbody td.title.min {
	width: auto;
	min-width: 100px;
}

.last_activity,#more {
	display: none;
}

#more {
	border-top: 1px solid #ccc;
	padding-top: 20px;
}
  
</style>

</head>
<body>
<div id="demo">
<p>Hier kannst du nach  Scripte , Plugins und andere Toolssuchen die man für eine Homepage gebrauchen kann</p>
Language: 
<select id="language">
    <option value="javascript">JavaScript</option>
	<option value="java">Java</option>
	<option value="ruby">Ruby</option>
	<option value="python">Python</option>
	<option value="php">PHP</option>
	<option value="css">CSS</option>
	<option value="c++">C++</option>
	<option value="c">C</option>
	<option value="c#">C#</option>
	<option value="objective-c">Objective-C</option>
	<option value="shell">Shell</option>
	<option value="r">R</option>
	<option value="perl">Perl</option>
	<option value="go">Go</option>
	<option value="viml">VimL</option>
	<option value="coffeescript">CoffeeScript</option>
	<option value="scala">Scala</option>
	<option value="haskell">Haskell</option>
	<option value="clojure">Clojure</option>
	<option value="tex">TeX</option>
	<option value="emacs lisp">Emacs Lisp</option>
	<option value="lua">Lua</option>
	<option value="puppet">Puppet</option>
	<option value="groovy">Groovy</option>
	<option value="arduino">Arduino</option>
	<option value="swift">Swift</option>
	<option value="matlab">Matlab</option>
	<option value="erlang">Erlang</option>
	<option value="actionscript">ActionScript</option>
	<option value="visual basic">Visual Basic</option>
	<option value="processing">Processing</option>
	<option value="powershell">PowerShell</option>
	<option value="typescript">TypeScript</option>
	<option value="rust">Rust</option>
	<option value="assembly">Assembly</option>
	<option value="common lisp">Common Lisp</option>
	<option value="d">D</option>
	<option value="asp">ASP</option>
	<option value="dart">Dart</option>
	<option value="ocaml">OCaml</option>
	<option value="scheme">Scheme</option>
	<option value="xslt">XSLT</option>
	<option value="makefile">Makefile</option>
	<option value="fortran">FORTRAN</option>
	<option value="f#">F#</option>
	<option value="julia">Julia</option>
	<option value="elixir">Elixir</option>
	<option value="haxe">Haxe</option>
	<option value="pascal">Pascal</option>
	<option value="racket">Racket</option>
	<option value="vhdl">VHDL</option>
	<option value="prolog">Prolog</option>
	<option value="verilog">Verilog</option>
	<option value="logos">Logos</option>
	<option value="coldfusion">ColdFusion</option>
	<option value="tcl">Tcl</option>
	<option value="apex">Apex</option>
	<option value="delphi">Delphi</option>
	<option value="autohotkey">AutoHotkey</option>
	<option value="idl">IDL</option>
	<option value="applescript">AppleScript</option>
	<option value="vala">Vala</option>
	<option value="objective-c++">Objective-C++</option>
	<option value="standard ml">Standard ML</option>
	<option value="livescript">LiveScript</option>
	<option value="openedge abl">OpenEdge ABL</option>
	<option value="m">M</option>
	<option value="pure data">Pure Data</option>
	<option value="cuda">Cuda</option>
	<option value="sql">SQL</option>
	<option value="dm">DM</option>
	<option value="coq">Coq</option>
	<option value="kotlin">Kotlin</option>
	<option value="mathematica">Mathematica</option>
	<option value="xml">XML</option>
	<option value="openscad">OpenSCAD</option>
	<option value="supercollider">SuperCollider</option>
	<option value="haxe">HaXe</option>
	<option value="smalltalk">Smalltalk</option>
	<option value="ada">Ada</option>
	<option value="max">Max</option>
	<option value="gosu">Gosu</option>
	<option value="blitzbasic">BlitzBasic</option>
	<option value="xquery">XQuery</option>
	<option value="sqf">SQF</option>
	<option value="objective-j">Objective-J</option>
	<option value="dot">DOT</option>
	<option value="ags script">AGS Script</option>
	<option value="game maker language">Game Maker Language</option>
	<option value="lasso">Lasso</option>
	<option value="autoit">AutoIt</option>
	<option value="elm">Elm</option>
	<option value="nesc">nesC</option>
	<option value="awk">Awk</option>
	<option value="sourcepawn">SourcePawn</option>
	<option value="nix">Nix</option>
	<option value="nimrod">Nimrod</option>
	<option value="eiffel">Eiffel</option>
	<option value="perl6">Perl6</option>
	<option value="purescript">PureScript</option>
	<option value="io">Io</option>
	<option value="scilab">Scilab</option>
	<option value="stata">Stata</option>
	<option value="agda">Agda</option>
	<option value="xtend">Xtend</option>
	<option value="rebol">Rebol</option>
	<option value="nemerle">Nemerle</option>
	<option value="labview">LabVIEW</option>
	<option value="squirrel">Squirrel</option>
	<option value="mercury">Mercury</option>
	<option value="netlogo">NetLogo</option>
	<option value="ooc">ooc</option>
	<option value="xc">XC</option>
	<option value="idris">Idris</option>
	<option value="gap">GAP</option>
	<option value="unrealscript">UnrealScript</option>
	<option value="dylan">Dylan</option>
	<option value="systemverilog">SystemVerilog</option>
	<option value="gnuplot">Gnuplot</option>
	<option value="sas">SAS</option>
	<option value="ceylon">Ceylon</option>
	<option value="html">HTML</option>
	<option value="antlr">ANTLR</option>
	<option value="boo">Boo</option>
	<option value="moonscript">MoonScript</option>
	<option value="augeas">Augeas</option>
	<option value="clips">CLIPS</option>
	<option value="factor">Factor</option>
	<option value="vcl">VCL</option>
	<option value="xbase">xBase</option>
	<option value="aspectj">AspectJ</option>
	<option value="pawn">PAWN</option>
	<option value="bro">Bro</option>
	<option value="dcpu-16 asm">DCPU-16 ASM</option>
	<option value="slash">Slash</option>
	<option value="monkey">Monkey</option>
	<option value="cobol">COBOL</option>
	<option value="bison">Bison</option>
	<option value="brightscript">Brightscript</option>
	<option value="arc">Arc</option>
	<option value="inform 7">Inform 7</option>
	<option value="forth">Forth</option>
	<option value="piglatin">PigLatin</option>
	<option value="oxygene">Oxygene</option>
	<option value="propeller spin">Propeller Spin</option>
	<option value="opa">Opa</option>
	<option value="krl">KRL</option>
	<option value="ragel in ruby host">Ragel in Ruby Host</option>
	<option value="flux">FLUX</option>
	<option value="nu">Nu</option>
	<option value="crystal">Crystal</option>
	<option value="abap">ABAP</option>
	<option value="parrot">Parrot</option>
	<option value="mirah">Mirah</option>
	<option value="j">J</option>
	<option value="pike">Pike</option>
	<option value="realbasic">REALbasic</option>
	<option value="bitbake">BitBake</option>
	<option value="ecl">Ecl</option>
	<option value="bluespec">Bluespec</option>
	<option value="hy">Hy</option>
	<option value="frege">Frege</option>
	<option value="turing">Turing</option>
	<option value="lsl">LSL</option>
	<option value="hack">Hack</option>
	<option value="component pascal">Component Pascal</option>
	<option value="pogoscript">PogoScript</option>
	<option value="glyph">Glyph</option>
	<option value="fantom">Fantom</option>
	<option value="xojo">Xojo</option>
	<option value="alloy">Alloy</option>
	<option value="self">Self</option>
	<option value="robotframework">RobotFramework</option>
	<option value="isabelle">Isabelle</option>
	<option value="blitzmax">BlitzMax</option>
	<option value="pan">Pan</option>
	<option value="wisp">wisp</option>
	<option value="xproc">XProc</option>
	<option value="ats">ATS</option>
	<option value="zephir">Zephir</option>
	<option value="gams">GAMS</option>
	<option value="red">Red</option>
	<option value="ioke">Ioke</option>
	<option value="ec">eC</option>
	<option value="chapel">Chapel</option>
	<option value="gdscript">GDScript</option>
	<option value="fancy">Fancy</option>
	<option value="volt">Volt</option>
	<option value="clean">Clean</option>
	<option value="papyrus">Papyrus</option>
	<option value="lookml">LookML</option>
	<option value="powershell">Powershell</option>
	<option value="logtalk">Logtalk</option>
	<option value="grammatical framework">Grammatical Framework</option>
	<option value="igor pro">IGOR Pro</option>
	<option value="emberscript">EmberScript</option>
	<option value="oz">Oz</option>
	<option value="thrift">Thrift</option>
	<option value="rouge">Rouge</option>
	<option value="jsoniq">JSONiq</option>
	<option value="loomscript">LoomScript</option>
	<option value="shen">Shen</option>
	<option value="harbour">Harbour</option>
	<option value="purebasic">PureBasic</option>
	<option value="dogescript">Dogescript</option>
	<option value="apl">APL</option>
	<option value="golo">Golo</option>
	<option value="zimpl">Zimpl</option>
	<option value="cirru">Cirru</option>
	<option value="cycript">Cycript</option>
	<option value="jasmin">Jasmin</option>
	<option value="txl">TXL</option>
	<option value="ox">Ox</option>
	<option value="lolcode">LOLCODE</option>
	<option value="cool">Cool</option>
	<option value="omgrofl">Omgrofl</option>
	<option value="grace">Grace</option>
	<option value="batchfile">Batchfile</option>
	<option value="nit">Nit</option>
	<option value="e">E</option>
	<option value="opal">Opal</option>
	<option value="moocode">Moocode</option>
	<option value="cmake">CMake</option>
	<option value="protocol buffer">Protocol Buffer</option>
	<option value="webidl">WebIDL</option>
	<option value="apacheconf">ApacheConf</option>
	<option value="brainfuck">Brainfuck</option>
	<option value="plsql">PLSQL</option>
</select>
Query: 
<input type="text" id="query" placeholder="Title..." />
Sort: 
<select id="sort">
	<option value="stars">Stars</option>
	<option value="forks">Forks</option>
	<option value="updated">Updated</option>
</select>
Order:  
<select id="order">
	<option value="desc">DESC</option>
	<option value="asc">ASC</option>
</select>
<input type="submit" id="search" value="Search" />

<p align="right">Total result: <code id="total">0</code></p>
<ul id="repositories"></ul>
<p align="center"><a href="#" id="more">More</a></p>
</div>


<script>
$(function() {
	$('#search').click(function(){
		$('#repositories').html('');
		repositories(
			$('#language').val(),
			$('#query').val(),
			$('#sort').val(),
			$('#order').val(),
			1
		);
		return false;
	});
});

function repositories(language, query, sort, order, page) {
	var lang = (language != '' ? (query == '' ? '' : '+') + 'language:' + language : '');
    $.ajax({
        url: 'https://api.github.com/search/repositories?q=' + query + lang + '&sort=' + sort + '&order=' + order + '&page=' + page,
        dataType: 'json'
    }).done(function(data) {
		if(data.total_count == undefined){
			$('#more').css('display', 'none');
		} else {
			var html = '',
				description = '';
			$('#total').html(data.total_count);
			$.each(data.items, function(i, item) {
				if (data.items[i].description != '' && data.items[i].description != null && data.items[i].description != undefined) {
					description = strip_tags(data.items[i].description);
				}
				html += '<li>';
				html += '	<a target="_BLANK" href="' + data.items[i].svn_url + '">' + data.items[i].name + '</a>';
				html += '	<a href="#" class="activity" data-ids="' + data.items[i].id + '" data-repo="' + data.items[i].full_name + '">view last activity</a>';
				html += '	<a href="#" class="last_activity" data-ids="' + data.items[i].id + '" data-repo="' + data.items[i].full_name + '">view last activity</a>';
				html += '	<div class="description">' + description + '</div>';
				html += '	<div class="repo">';
				html += '		<span>Language:</span> <code>' + data.items[i].language + '</code> | ';
				html += '		<span>Watchers:</span> <code>' + koma(data.items[i].watchers_count) + '</code> | ';
				html += '		<span>Stars:</span> <code>' + koma(data.items[i].stargazers_count) + '</code> | ';
				html += '		<span>Forks:</span> <code>' + koma(data.items[i].forks_count) + '</code> | ';
				html += '		<span>Issues:</span> <code>' + koma(data.items[i].open_issues_count) + '</code> | ';
				html += '		<span>Created:</span> <code>' + relative_time(data.items[i].created_at) + ' ago</code> | ';
				html += '		<span>Updated:</span> <code>' + relative_time(data.items[i].updated_at) + ' ago</code>';
				html += '	</div>';
				html += '	<div class="statistics" id="' + data.items[i].id + '"></div>';
				html += '</div>';
				html += '</li>';
			});
			$('#repositories').append(html);
			$('.activity').click(function(){
				var id = $(this).data('ids'),
					repo = $(this).data('repo');
				statistics(repo, id);
				$(this).next('.last_activity').css('display', 'inline-block');
				$(this).remove();
				return false;
			});
			$('.last_activity').click(function(){
				var id = $(this).data('ids');
				$('#' + id).toggle();
				return false;
			});
			$('#more').css('display', 'block');
			$('#more').click(function(){
				repositories(language, query, sort, order, (page + 1));
				return false;
			});
		}
    }).fail(function() {
		$('#repositories').append('<h2>API rate limit exceeded.</h2>');
	});
}

function statistics(repo, id) {
    $.ajax({
        url: 'https://api.github.com/repos/' + repo + '/stats/punch_card',
        dataType: 'json'
    }).done(function(data) {
        var sunday = 0,
			monday = 0,
			tuesday = 0,
			wednesday = 0,
			thursday = 0,
			friday = 0,
			saturday = 0;
        $.each(data, function(i, item) {
			if(item[0] == 0){
				sunday += item[2];
			}else if(item[0] == 1){
				monday += item[2];
			}else if(item[0] == 2){
				tuesday += item[2];
			}else if(item[0] == 3){
				wednesday += item[2];
			}else if(item[0] == 4){
				thursday += item[2];
			}else if(item[0] == 5){
				friday += item[2];
			}else if(item[0] == 6){
				saturday += item[2];
			}
        });
		var html = '<table>';
		html += '<thead><tr><td>sunday</td><td>monday</td><td>tuesday</td><td>wednesday</td><td>thursday</td><td>friday</td><td>saturday</td></tr><thead>';
		html += '<tbody><tr>';
		html += '<td><code>' + sunday + '</code></td>';
		html += '<td><code>' + monday + '</code></td>';
		html += '<td><code>' + tuesday + '</code></td>';
		html += '<td><code>' + wednesday + '</code></td>';
		html += '<td><code>' + thursday + '</code></td>';
		html += '<td><code>' + friday + '</code></td>';
		html += '<td><code>' + saturday + '</code></td>';
		html += '</tr><tbody>';
		html += '</table>';
		$('#' + id).append(html);
		commits(repo, id);
    }).fail(function() {
		alert('API rate limit exceeded.');
	});
}

function commits(repo, id) {
    $.ajax({
        url: 'https://api.github.com/repos/' + repo + '/commits',
        crossDomain: true,
        dataType: 'json'
    }).done(function(b) {
        var html = '<table>';
        $.each(b, function(i, a) {
			html += '<tr><td class="title min">' + relative_time(b[i].commit.committer.date) + ' ago</td><td class="title"><pre class="prettyprint">' + strip_tags(b[i].commit.message) + '</pre></td></tr>'
		});
		html += '</table>';
		$('#' + id).append(html);
		var prt = document.createElement('script'); prt.async = true;
		prt.type = 'text/javascript';
		prt.src = 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert';
		(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(prt);
    })
}
	
function strip_tags(input, allowed) {
    allowed = (((allowed || '') + '')
            .toLowerCase()
            .match(/<[a-z][a-z0-9]*>/g) || [])
        .join('');
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
        commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
    return input.replace(commentsAndPhpTags, '')
        .replace(tags, function($0, $1) {
            return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
        });
}

function relative_time(a) {
    if (!a) {
        return
    }
    a = $.trim(a);
    a = a.replace(/\.\d\d\d+/, "");
    a = a.replace(/-/, "/").replace(/-/, "/");
    a = a.replace(/T/, " ").replace(/Z/, " UTC");
    a = a.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2");
    var b = new Date(a);
    var c = (arguments.length > 1) ? arguments[1] : new Date();
    var d = parseInt((c.getTime() - b) / 1000);
    d = (d < 2) ? 2 : d;
    var r = '';
    if (d < 60) {
        r = 'jst now'
    } else if (d < 120) {
        r = 'a min'
    } else if (d < (45 * 60)) {
        r = (parseInt(d / 60, 10)).toString() + ' mns'
    } else if (d < (2 * 60 * 60)) {
        r = 'an hr'
    } else if (d < (24 * 60 * 60)) {
        r = (parseInt(d / 3600, 10)).toString() + ' hrs'
    } else if (d < (48 * 60 * 60)) {
        r = 'a day'
    } else {
        dd = (parseInt(d / 86400, 10)).toString();
        if (dd <= 30) {
            r = dd + ' dys'
        } else {
            mm = (parseInt(dd / 30, 10)).toString();
            if (mm <= 12) {
                r = mm + ' mon'
            } else {
                r = (parseInt(mm / 12, 10)).toString() + ' yrs'
            }
        }
    }
    return r
}

function koma(a) {
    var b = parseInt(a, 10);
    if (b === null) {
        return 0
    }
    if (b >= 1000000000) {
        return (b / 1000000000).toFixed(1).replace(/\.0$/, "") + "G"
    }
    if (b >= 1000000) {
        return (b / 1000000).toFixed(1).replace(/\.0$/, "") + "M"
    }
    if (b >= 1000) {
        return (b / 1000).toFixed(1).replace(/\.0$/, "") + "K"
    }
    return b
}
  
</script>


</body>
</html>
basti1012.bplaced.net

Plugin scripte suche

Code
