Browse Source

login page 80%

master
RENOX 5 months ago
parent
commit
3c77881220
6 changed files with 201 additions and 21 deletions
  1. +1
    -1
      pom.xml
  2. +64
    -0
      src/main/resources/static/css/style.css
  3. BIN
      src/main/resources/static/imgs/background.jpg
  4. BIN
      src/main/resources/static/imgs/logo.png
  5. +60
    -20
      src/main/resources/static/index.html
  6. +76
    -0
      src/main/resources/static/js/filmgrain.js

+ 1
- 1
pom.xml View File

@@ -10,7 +10,7 @@
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
<relativePath/>
</parent>




+ 64
- 0
src/main/resources/static/css/style.css View File

@@ -0,0 +1,64 @@
body
{
background-image: url("/imgs/background.jpg");
background-position: center;
background-size: cover;
}

#img-logo
{
min-width: 310px;
max-width: 60%
}

#name, #password
{
font-family: Candara;
text-align: center;
background: transparent;
border-style: none;
border-color: #005151;
color: #00565d;
font-size: 14px;
padding: 10px;
}

#name
{
border-top-style: groove;
}



#password
{
border-bottom-style: groove;
}

#btn-login
{
visibility: hidden;
}

#div-login
{
width: 36%;
border: 1px groove rgb(0, 8, 13, .25);
border-radius: 25px;
padding-top: 50px;
padding-bottom: 30px;
background-color: rgb(0, 8, 13, .3);
box-shadow: 0px 0px 55px black;
margin-top: 33%;
}

/* filmgrain.js dep */
#canvas
{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}



BIN
src/main/resources/static/imgs/background.jpg View File

Before After
Width: 2000  |  Height: 1125  |  Size: 48KB

BIN
src/main/resources/static/imgs/logo.png View File

Before After
Width: 753  |  Height: 152  |  Size: 29KB

+ 60
- 20
src/main/resources/static/index.html View File

@@ -3,36 +3,76 @@

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'self'">-->
<title>Text Dungeon</title>
<link rel="stylesheet" type="text/css" href="/webjars/Semantic-UI/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>src="/webjars/Semantic-UI/2.4.1/semantic.min.js"</script>
<script>src = "/webjars/Semantic-UI/2.4.1/semantic.min.js"</script>

</head>
<!-- <link rel="stylesheet" href="/webjars/uikit/dist/css/uikit.min.css" />
<script src="webjars/uikit/dist/js/uikit.min.js"></script>
<script src="webjars/uikit/dist/js/uikit-icons.min.js"></script>-->

<body>
</head>

<div>
<input id="name" type="text" name="name">
<br>
<input id="password" type="password" name="password">
<br>
<input id="btn-login" type="button">
</div>
<body>

<div>
<textarea id="textarea" rows="4" cols="50"></textarea>
<br>
<input id="btn-save" type="button">
</div>
<!-- filmgrain.js dep -->
<canvas id="canvas"></canvas>

<!-- logo -->
<div class="ui center aligned container">
<img id="img-logo" src="imgs/logo.png" alt="logo">
</div>

<script src="js/post.js"></script>
</body>
<!-- login -->
<div class="ui center aligned container">
<div id="div-login" class="ui center aligned container basic segment" >
<div class="ui left attached rail">
<div class="ui basic segment">
<!-- seg -->
<div class="ui large inverted vertical pointing menu" style="background: transparent;">
<a class="active item">
<span style="color: #007373; font-weight: bold;">Enter</span>
</a>
<a class="item">
<span style="color: #005151;">Create</span>
</a>
<a class="item">
<span style="color: #005151;">About</span>
</a>
</div>
<!-- seg -->
</div>
</div>
<input id="name" type="text" name="name" placeholder="Name">
<br>
<input id="password" type="password" name="password" placeholder="Password">
<br>
<input id="btn-login" type="button">
</div>
</div>

</html>




<!--
<div>
<textarea id="textarea" rows="4" cols="50"></textarea>
<br>
<input id="btn-save" type="button">
</div>
-->


<script src="js/post.js"></script>
<script src="js/filmgrain.js"></script>
</body>

</html>

+ 76
- 0
src/main/resources/static/js/filmgrain.js View File

@@ -0,0 +1,76 @@
// Credit: Szenia Zadvornykh

var viewWidth,
viewHeight,
canvas = document.getElementById("canvas"),
ctx;

// change these settings
var patternSize = 144,
patternScaleX = 1,
patternScaleY = 1,
patternRefreshInterval = 10,
patternAlpha = 14; // int between 0 and 255,

var patternPixelDataLength = patternSize * patternSize * 4,
patternCanvas,
patternCtx,
patternData,
frame = 0;

window.onload = function() {
initCanvas();
initGrain();
requestAnimationFrame(loop);
};

// create a canvas which will render the grain
function initCanvas() {
viewWidth = canvas.width = canvas.clientWidth;
viewHeight = canvas.height = canvas.clientHeight;
ctx = canvas.getContext('2d');

ctx.scale(patternScaleX, patternScaleY);
}

// create a canvas which will be used as a pattern
function initGrain() {
patternCanvas = document.createElement('canvas');
patternCanvas.width = patternSize;
patternCanvas.height = patternSize;
patternCtx = patternCanvas.getContext('2d');
patternData = patternCtx.createImageData(patternSize, patternSize);
}

// put a random shade of gray into every pixel of the pattern
function update() {
var value;

for (var i = 0; i < patternPixelDataLength; i += 4) {
value = (Math.random() * 255) | 0;

patternData.data[i ] = value;
patternData.data[i + 1] = value;
patternData.data[i + 2] = value;
patternData.data[i + 3] = patternAlpha;
}

patternCtx.putImageData(patternData, 0, 0);
}

// fill the canvas using the pattern
function draw() {
ctx.clearRect(0, 0, viewWidth, viewHeight);

ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillRect(0, 0, viewWidth, viewHeight);
}

function loop() {
if (++frame % patternRefreshInterval === 0) {
update();
draw();
}

requestAnimationFrame(loop);
}

Loading…
Cancel
Save