Added Matrix and CSS
This commit is contained in:
TylerByte
parent
568662fc44
commit
c84a521b86
|
|
@ -120,6 +120,67 @@
|
||||||
<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>
|
<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>
|
||||||
<script src="{{AppSubUrl}}/vendor/plugins/clipboard/clipboard.min.js"></script>
|
<script src="{{AppSubUrl}}/vendor/plugins/clipboard/clipboard.min.js"></script>
|
||||||
<script src="{{AppSubUrl}}/vendor/plugins/vue/vue.min.js"></script>
|
<script src="{{AppSubUrl}}/vendor/plugins/vue/vue.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//Matrix canvas
|
||||||
|
var c = document.getElementById("c");
|
||||||
|
var ctx = c.getContext("2d");
|
||||||
|
//Get client offsets
|
||||||
|
var my_height = document.getElementById("main_doc").offsetHeight;
|
||||||
|
var my_width = document.getElementById("home").offsetWidth;
|
||||||
|
|
||||||
|
//making the canvas full screen
|
||||||
|
c.height = my_height;
|
||||||
|
c.width = my_width;
|
||||||
|
|
||||||
|
//latin characters - taken from the unicode charset
|
||||||
|
var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
|
||||||
|
//converting the string into an array of single characters
|
||||||
|
matrix = matrix.split("");
|
||||||
|
|
||||||
|
var font_size = 10;
|
||||||
|
var columns = c.width/font_size; //number of columns for the rain
|
||||||
|
//an array of drops - one per column
|
||||||
|
var drops = [];
|
||||||
|
//x below is the x coordinate
|
||||||
|
//1 = y co-ordinate of the drop(same for every drop initially)
|
||||||
|
for(var x = 0; x < columns; x++)
|
||||||
|
drops[x] = 1;
|
||||||
|
|
||||||
|
//drawing the characters
|
||||||
|
function draw()
|
||||||
|
{
|
||||||
|
//Black BG for the canvas
|
||||||
|
//translucent BG to show trail
|
||||||
|
ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
|
||||||
|
ctx.fillRect(0, 0, c.width, c.height);
|
||||||
|
|
||||||
|
ctx.fillStyle = "#5AA509";// Gitea green
|
||||||
|
//ctx.fillStyle = "red";
|
||||||
|
ctx.font = font_size + "px arial";
|
||||||
|
//looping over drops
|
||||||
|
for(var i = 0; i < drops.length; i++)
|
||||||
|
{
|
||||||
|
//a random chinese character to print
|
||||||
|
var text = matrix[Math.floor(Math.random()*matrix.length)];
|
||||||
|
//x = i*font_size, y = value of drops[i]*font_size
|
||||||
|
ctx.fillText(text, i*font_size, drops[i]*font_size);
|
||||||
|
|
||||||
|
//sending the drop back to the top randomly after it has crossed the screen
|
||||||
|
//adding a randomness to the reset to make the drops scattered on the Y axis
|
||||||
|
|
||||||
|
if(drops[i]*font_size > c.height && Math.random() > 0.975){
|
||||||
|
drops[i] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//incrementing Y coordinate
|
||||||
|
drops[i]++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(draw, 35);
|
||||||
|
</script>
|
||||||
|
|
||||||
<!-- JavaScript -->
|
<!-- JavaScript -->
|
||||||
<script src="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.js"></script>
|
<script src="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<footer>
|
<footer id="footer" style="position:relative;margin-bottom:0px">
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<div class="ui left">
|
<div class="ui left">
|
||||||
© Gitea {{if (or .ShowFooterVersion .PageIsAdmin)}}{{.i18n.Tr "version"}}: {{AppVer}}{{end}} {{if ShowFooterTemplateLoadTime}}{{.i18n.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong> {{.i18n.Tr "template"}}: <strong>{{call .TmplLoadTimes}}</strong>{{end}}
|
© Gitea {{if (or .ShowFooterVersion .PageIsAdmin)}}{{.i18n.Tr "version"}}: {{AppVer}}{{end}} {{if ShowFooterTemplateLoadTime}}{{.i18n.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong> {{.i18n.Tr "template"}}: <strong>{{call .TmplLoadTimes}}</strong>{{end}}
|
||||||
|
|
|
||||||
|
|
@ -82,6 +82,7 @@
|
||||||
<link rel="preload" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
|
<link rel="preload" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
|
||||||
<noscript><link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css"></noscript>
|
<noscript><link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css"></noscript>
|
||||||
<link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/octicons/octicons.min.css">
|
<link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/octicons/octicons.min.css">
|
||||||
|
|
||||||
|
|
||||||
{{if .RequireSimpleMDE}}
|
{{if .RequireSimpleMDE}}
|
||||||
<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/simplemde/simplemde.min.css">
|
<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/simplemde/simplemde.min.css">
|
||||||
|
|
@ -99,6 +100,7 @@
|
||||||
<!-- Stylesheet -->
|
<!-- Stylesheet -->
|
||||||
<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.css">
|
<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.css">
|
||||||
<link rel="stylesheet" href="{{AppSubUrl}}/css/index.css?v={{MD5 AppVer}}">
|
<link rel="stylesheet" href="{{AppSubUrl}}/css/index.css?v={{MD5 AppVer}}">
|
||||||
|
<link rel="stylesheet" href="{{AppSubUrl}}/css/gitea-matrix-theme.css">
|
||||||
<noscript>
|
<noscript>
|
||||||
<style>
|
<style>
|
||||||
.dropdown:hover > .menu { display: block; }
|
.dropdown:hover > .menu { display: block; }
|
||||||
|
|
@ -160,7 +162,7 @@
|
||||||
<body>
|
<body>
|
||||||
{{template "custom/body_outer_pre" .}}
|
{{template "custom/body_outer_pre" .}}
|
||||||
|
|
||||||
<div class="full height">
|
<div id="main_doc" class="full height">
|
||||||
<noscript>{{.i18n.Tr "enable_javascript"}}</noscript>
|
<noscript>{{.i18n.Tr "enable_javascript"}}</noscript>
|
||||||
|
|
||||||
{{template "custom/body_inner_pre" .}}
|
{{template "custom/body_inner_pre" .}}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="ui container" id="navbar">
|
<div class="ui container" id="navbar">
|
||||||
<div class="item brand" style="justify-content: space-between;">
|
<div class="item brand" style="justify-content: space-between;">
|
||||||
<a href="{{AppSubUrl}}/">
|
<a href="{{AppSubUrl}}/">
|
||||||
<img class="ui mini image" src="{{AppSubUrl}}/img/gitea-sm.png">
|
<i class="octicon octicon-flame gitea-matrix-primary-color brand-logo"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
|
<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
|
||||||
<i class="sidebar icon"></i>
|
<i class="sidebar icon"></i>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
.gitea-matrix-active-color{color:#83f20d}
|
||||||
|
.gitea-matrix-primary-color{color:#76da0b}
|
||||||
|
.gitea-matrix-secondary-color{color:#5AA509}
|
||||||
|
|
||||||
|
.ui.secondary.menu .active.item{color:#83f20d !important}
|
||||||
|
.ui.secondary.menu .item{color:#5AA509 !important}
|
||||||
|
.ui.secondary.menu .active.item:hover,.ui.secondary.menu .dropdown.item:hover,.ui.secondary.menu .link.item:hover,.ui.secondary.menu a.item:hover{color:#83f20d !important}
|
||||||
|
|
||||||
|
|
||||||
|
.brand-logo{font-size:35px;}
|
||||||
|
body{
|
||||||
|
background-color: black !important;
|
||||||
|
color: #83f20d !important;
|
||||||
|
}
|
||||||
|
|
@ -1,13 +1,16 @@
|
||||||
{{template "base/head" .}}
|
{{template "base/head" .}}
|
||||||
<div class="home">
|
<div id="home" class="home">
|
||||||
|
<div style="margin:auto; width:100%; position: fixed; padding-top:14px">
|
||||||
|
<canvas id="c"></canvas>
|
||||||
|
</div>
|
||||||
<div class="ui stackable middle very relaxed page grid">
|
<div class="ui stackable middle very relaxed page grid">
|
||||||
<div class="sixteen wide center aligned centered column">
|
<div class="sixteen wide center aligned centered column">
|
||||||
<div>
|
<div>
|
||||||
<img class="logo" src="{{AppSubUrl}}/img/gitea-lg.png" />
|
<i class="octicon octicon-flame gitea-matrix-primary-color" style="font-size:180px;"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
<h1 class="ui icon header title">
|
<h1 class="ui icon header title">
|
||||||
{{AppName}}
|
<span class="gitea-matrix-primary-color">{{AppName}}</span>
|
||||||
</h1>
|
</h1>
|
||||||
<h2>{{.i18n.Tr "app_desc"}}</h2>
|
<h2>{{.i18n.Tr "app_desc"}}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue