Plugin scripte suche
Hier kannst du nach Scripte , Plugins und andere Toolssuchen die man für eine Homepage gebrauchen kann
Der hier verwendete 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>