오윤석 / maplespec.ga

Go to a project
Toggle navigation Toggle navigation pinning
오윤석
75ea2ad7 2 parents c98d2f65 63caa073

Merge branch 'feature/1-search_page' into develop

Expand all
Inline Side-by-side
Showing 9 changed files with 76 additions and 46 deletions
This diff is collapsed. Click to expand it.
......@@ -10,7 +10,6 @@
"@rollup/plugin-commonjs": "11.0.2",
"@rollup/plugin-node-resolve": "^7.0.0",
"rollup": "^1.20.0",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^5.1.2",
"svelte": "^3.0.0"
......
html, body {
html,
body {
position: relative;
width: 100%;
height: 100%;
background-color: #ffebee;
}
body {
color: #333;
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
a {
color: rgb(0,100,200);
color: rgb(0, 100, 200);
text-decoration: none;
}
......@@ -22,14 +23,17 @@ a:hover {
}
a:visited {
color: rgb(0,80,160);
color: rgb(0, 80, 160);
}
label {
display: block;
}
input, button, select, textarea {
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<title>::메이플스토리 스펙 계산기::</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
......
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import copy from 'rollup-plugin-copy';
......@@ -38,8 +37,8 @@ export default {
commonjs(),
copy({
targets:[
{ src:'src/images', dest:'public' }
targets: [
{ src: 'src/images', dest: 'public' }
]
}),
......@@ -47,10 +46,6 @@ export default {
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
......
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
target: document.body
});
export default app;
\ No newline at end of file
......
import Home from './routes/Home.svelte';
import Search from './routes/Search.svelte';
const routes = {
'/': Home,
'/': Search,
};
export default routes;
\ No newline at end of file
......
<main>
<h1>Hello, This is Home!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
\ No newline at end of file
<script>
import {push} from 'svelte-spa-router';
let character;
function searchCharacter() {
if(!character) {
M.toast({html:"닉네임을 입력해주세요."});
return false;
}
push('/character/' + character);
}
</script>
<svelte:head>
</svelte:head>
<section>
<article class="search-box row">
<div class="col l4 m6 s12 offset-l4 offset-m3">
<div class="card">
<div class="card-stacked">
<div class="card-content">
<h4>내 캐릭터 분석하기</h4>
<form class="search-form" on:submit={searchCharacter} onsubmit="return false;">
<div class="input-field">
<label>캐릭터명</label>
<input type="text" bind:value={character}>
<button class="btn waves-effect waves-light red darken-1">확인</button>
</div>
</form>
</div>
<div class="card-action">
<p class="teal-text text-lighten-2">
메이플스토리 스펙 계산기를 이용하기 위해서는 캐릭터 정보 공개(기본정보, 장비, 스킬)가 필요합니다.
</p>
<p>
<a href="https://maplestory.nexon.com/MyMaple/Account/Character/Visibility" target="_BLANK">공개설정하러 가기</a>
</p>
</div>
</div>
</div>
</div>
</article>
</section>
<style>
section { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }
.search-box { width:100%; }
h4 { font-size:20px; text-align:center; }
.input-field { padding-right:70px; }
.input-field button { position:absolute; right:0; top:7px; }
</style>
\ No newline at end of file