ba/SMK_Kelulusan
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Creating view [undone]

Browse Source
This commit is contained in:
Gregorio Chiko
2019-05-08 16:18:09 +07:00
parent a8dfeff1ad
commit 530a73ed34
11 changed files with 45131 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/app.js vendored
View File

@@ -1,32 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});

60
resources/sass/main.scss vendored Normal file
View File

@@ -0,0 +1,60 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body {
@apply bg-gray-300 text-teal-800;
font-family: 'Source Sans Pro', sans-serif;
}
h1 {
@apply text-5xl font-bold mb-8 mt-4;
}
.container {
@apply bg-white w-3/4 mx-auto h-full mt-8 p-12;
}
.form {
@apply w-full mt-6;
.form-grid {
@apply flex flex-wrap justify-center -mx-3 mb-6;
.form-group {
@apply w-full px-3 mb-6;
.form-label {
@apply block uppercase tracking-wide text-sm font-bold mb-2;
}
.form-input {
@apply appearance-none block w-full bg-gray-200 border border-gray-200 rounded py-3 px-4 leading-tight;
&:focus {
@apply outline-none bg-white border-gray-500;
}
}
.input-helper {
@apply text-gray-600 text-sm italic;
}
}
.form-submit {
@apply text-white font-bold bg-indigo-400 rounded py-3 px-4 leading-tight uppercase self-center;
&:hover {
@apply bg-indigo-500;
}
&:focus {
@apply outline-none bg-indigo-600;
}
}
}
}
.btn-primary {
@apply py-2 px-4 bg-indigo-400 text-white border border-white rounded;
}

37
resources/views/main.blade.php Normal file
View File

@@ -0,0 +1,37 @@
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<h1 class="title">Pengumuman Kelulusan SMK Bhakti Anindya</h1>
<span>Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini:</span>
<form class="form">
<div class="form-grid">
<div class="form-group">
<label class="form-label">Nama Lengkap</label>
<input class="form-input input-text" type="text">
<p class="input-helper">Nama lengkap sesuai dengan absensi.</p>
</div>
<div class="form-group">
<label class="form-label">NISN</label>
<input class="form-input input-text" type="text">
<!-- <p class="input-helper">Nama lengkap sesuai dengan absensi.</p> -->
</div>
<button type="submit" class="form-submit">Lihat</button>
</div>
</form>
</div>
</body>
</html>