diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..f1de1fd --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + presets: ['es2015', 'react'] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..e3aada2 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +root = true + +[*] +charset = utf-8 +indent_size = 2 +end_of_line = lf +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore index e43b0f9..8d67a86 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .DS_Store +node_modules +dist diff --git a/README.md b/README.md new file mode 100644 index 0000000..18796ac --- /dev/null +++ b/README.md @@ -0,0 +1,17 @@ +# Clipy + +## Setup +``` +$ npm install +``` + +## Development +``` +$ npm start +$ open http://localhost:8080 +``` + +## Production +``` +$ npm run build +``` diff --git a/css/common.css b/css/common.css deleted file mode 100644 index 38a8d47..0000000 --- a/css/common.css +++ /dev/null @@ -1,109 +0,0 @@ -@charset "utf-8"; -@import url( 'http://fonts.googleapis.com/css?family=Montserrat' ); - -*{ - font-family: 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic ProN' , 'Montserrat' , sans-serif; -} - -html , body , div , span , object , iframe , -h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , -abbr , address , cite , code , -del , dfn , em , img , ins , kbd , q , samp , -small , strong , sub , sup , var , -b , i , -dl , dt , dd , ol , ul , li , -fieldset , form , label , legend , -table , caption , tbody , tfoot , thead , tr , th , td , -article , aside , canvas , details , figcaption , figure , -footer , header , hgroup , menu , nav , section , summary , -time , mark , audio , video{ - margin:0; - padding:0; - border:0; - outline:0; - font-size:100%; - vertical-align:baseline; - background:transparent; -} - -body{ - line-height:1; -} - -article,aside,details,figcaption,figure , -footer,header,hgroup,menu,nav,section{ - display:block; -} - -ol , ul{ - list-style:none; -} - -blockquote , q{ - quotes:none; -} - -blockquote:before , blockquote:after , -q:before , q:after{ - content:''; - content:none; -} - -a{ - margin:0; - padding:0; - font-size:100%; - vertical-align:baseline; - background:transparent; - text-decoration: none; - color: #3999D8; -} -a:hover{ - text-decoration: underline; -} - -ins{ - background-color:#ff9; - color:#000; - text-decoration:none; -} - -mark{ - background-color:#ff9; - color:#000; - font-style:italic; - font-weight:bold; -} - -del{ - text-decoration: line-through; -} - -abbr[title] , dfn[title]{ - border-bottom:1px dotted; - cursor:help; -} - -table{ - border-collapse:collapse; - border-spacing:0; -} - -hr{ - display:block; - height:1px; - border:0; - border-top:1px solid #cccccc; - margin:1em 0; - padding:0; -} - -input , select{ - vertical-align:middle; -} - -img{ - vertical-align: top; - font-size:0; - line-height: 0; -} \ No newline at end of file diff --git a/css/main.css b/css/main.css deleted file mode 100644 index 04fb949..0000000 --- a/css/main.css +++ /dev/null @@ -1,292 +0,0 @@ -@charset "utf-8"; -@import './common.css'; - -section , footer{ - background-color: white; - min-width: 100%; -} -section > div , footer > div{ - background-color: inherit; - width: 600px; - margin: 0px auto; - overflow: hidden; -} -.text-color{ - color: #071E2E; -} -.title{ - color: #3999D8; - font-size: 28px; - text-align: center; - font-weight: normal; - padding: 48px 0px 58px; -} - -/***** application *****/ -#application > div{ - margin-top: 60px; - min-height: 360px; -} -#application-image{ - width: 214px; - height: 288px; - float: left; - margin-left: 68px; -} -#application-contents{ - float: right; - width: 252px; - margin: 34px 0px 80px; -} -#application-name{ - width: 176px; - height: 70px; -} -#application-description{ - font-size: 16px; - margin-top: 24px; -} -#application-contents #application-download{ - display: block; - width: 134px; - font-family: 'Montserrat' , sans-serif; - color: #061E2E; - font-size: 18px; - border-radius: 3px; - border: 1px solid #3A1200; - text-align: center; - margin-top: 44px; - padding: 13px 0px; - - -webkit-transition: - color 0.42s cubic-bezier(.42,.17,.45,.98), - background-color 0.42s cubic-bezier(.42,.17,.45,.98), - border 0.3s ease-out; - -moz-transition: - color 0.42s cubic-bezier(.42,.17,.45,.98), - background-color 0.42s cubic-bezier(.42,.17,.45,.98), - border 0.3s ease-out; - -ms-transition: - color 0.42s cubic-bezier(.42,.17,.45,.98), - background-color 0.42s cubic-bezier(.42,.17,.45,.98), - border 0.3s ease-out; - transition: - color 0.42s cubic-bezier(.42,.17,.45,.98), - background-color 0.42s cubic-bezier(.42,.17,.45,.98), - border 0.3s ease-out; -} -#application-contents #application-download:hover{ - text-decoration: none; - background-color: #3999D8; - color: #FFFFFF; - border: 1px solid #3999D8; -} -#application-condition{ - font-size: 16px; - margin-top: 30px; -} - -/***** screenshots *****/ -#screenshots{ - background-color: #3999D8; - height: 522px; -} -#screenshots > div{ - overflow: none !important; - min-width: 600px; - width: 100%; -} -#screenshots-contents{ - overflow: auto; - position: relative; - margin-top: 10px; - text-align: center; - width: 100% !important; -} -#screenshots-contents ul li{ - width: 538px; - height: 378px; - float: left; -} -#screenshots-contents ul li img{ - width: 538px; - height: 378px; -} -#screenshots-controls{ - width: 600px; - text-align: center; - margin: 10px auto; -} -#screenshots-controls > *{ - display: inline-block; -} -.control-button{ - position: relative; - width: 40px; - height: 40px; - bottom: 20px; - background-repeat: no-repeat;; -} -#control-left{ - margin-right: 16px; - background-image: url( '../img/button-off-left.png' ); - width: 40px; - height: 40px; - background-size: cover; - background-repeat: no-repeat; - background-position: center center; -} -.control-on-button{ - width: 40px; - height: 40px; - background-repeat: no-repeat;; - opacity: 0; -} -#control-on-left{ - background-image: url( '../img/button-on-left.png' ); - background-size: cover; - background-repeat: no-repeat; - background-position: center center; -} -#control-right{ - margin-left: 16px; - background-image: url( '../img/button-off-right.png' ); - background-size: cover; - background-repeat: no-repeat; - background-position: center center; -} -#control-on-right{ - background-image: url( '../img/button-on-right.png' ); - background-size: cover; - background-repeat: no-repeat; - background-position: center center; -} -.control-position{ - margin: 0px 6px; - width: 98px; - height: 78px; - border: 1px solid rgba( 255 , 255 , 255 , 0.5 ); - background-repeat: no-repeat; - background-size: cover; - background-position: center center; -} -.control-active{ - border: 1px solid rgba( 255 , 255 , 255 , 1 ); -} -.dots{ - display: none !important; -} -#thumbnail1{ - background-image: url( '../img/thumbnail1.png' ); -} -#thumbnail2{ - background-image: url( '../img/thumbnail2.png' ); -} -#thumbnail3{ - background-image: url( '../img/thumbnail3.png' ); -} - -/***** function *****/ -#function{ - min-height: 410px; -} -#function-image{ - width: 136px; - height: 161px; - float: left; - margin: 22px 0px 0px 70px; -} -#function-contents{ - float: right; - width: 300px; - margin-right: 20px; -} -.function-list{ - list-style: none; - font-size: 14px; - line-height: 28px; - margin-bottom: 26px; - position: relative; -} -.function-list:before{ - position: absolute; - top: 8px; - left: -19px; - content: ''; - display: block; - height: 10px; - width: 10px; - background-image: url( '../img/function-list.png' ); - background-size: cover; - background-repeat: no-repeat; - background-position: center center; -} -@-moz-document url-prefix() { - .function-list:before{ - top: 9px; - } -} - -/***** opensource *****/ -#opensource{ - min-height: 320px; -} -#opensource-detail{ - font-size: 16px; - line-height: 32px; -} -#opensource-link{ - display: block; - width: 144px; - height: 50px; - margin: 30px auto 42px; - background-image: url( '../img/opensource.png' ); - background-size: cover; - background-repeat: no-repeat; - background-position: center center; -} - -/***** thanks *****/ -#thanks{ - min-height: 450px; -} -#thanks-details{ - width: 300px; - margin: 0px 0px 42px 10px; - float: left; - font-size: 16px; - line-height: 32px; -} -#thanks-image{ - width: 148px; - height: 166px; - float: left; - margin: 30px 0px 0px 90px; -} - -/***** footer *****/ -footer{ - height: 114px; - background-color: #F3F6F7; -} -footer > div { - overflow: visible !important; -} -#social{ - margin: 0 2em 2em; - padding-top: 2em; - text-align: center; - height: 22px; - overflow: visible; -} -#social > *{ - max-width: 90px; - margin: 0px 5px; - vertical-align: top; - overflow: visible; -} -#copyright{ - color: #526E79; - font-size: 13px; - text-align: center; -} diff --git a/images/button_github.png b/images/button_github.png new file mode 100644 index 0000000..f10e903 Binary files /dev/null and b/images/button_github.png differ diff --git a/images/clipmenu-logo.png b/images/clipmenu-logo.png new file mode 100644 index 0000000..abf21b6 Binary files /dev/null and b/images/clipmenu-logo.png differ diff --git a/images/clipy_logo.png b/images/clipy_logo.png new file mode 100644 index 0000000..9acd1f9 Binary files /dev/null and b/images/clipy_logo.png differ diff --git a/images/icon_copy.png b/images/icon_copy.png new file mode 100644 index 0000000..42bf131 Binary files /dev/null and b/images/icon_copy.png differ diff --git a/images/icon_github.png b/images/icon_github.png new file mode 100644 index 0000000..45b8462 Binary files /dev/null and b/images/icon_github.png differ diff --git a/images/icon_shortcut.png b/images/icon_shortcut.png new file mode 100644 index 0000000..7b1bcb7 Binary files /dev/null and b/images/icon_shortcut.png differ diff --git a/images/icon_snipet.png b/images/icon_snipet.png new file mode 100644 index 0000000..7e2708c Binary files /dev/null and b/images/icon_snipet.png differ diff --git a/images/image_copy.png b/images/image_copy.png new file mode 100644 index 0000000..5b1ff13 Binary files /dev/null and b/images/image_copy.png differ diff --git a/images/image_repository.png b/images/image_repository.png new file mode 100755 index 0000000..6824e85 Binary files /dev/null and b/images/image_repository.png differ diff --git a/images/image_shortcut.png b/images/image_shortcut.png new file mode 100644 index 0000000..f93c51a Binary files /dev/null and b/images/image_shortcut.png differ diff --git a/images/image_snipet.png b/images/image_snipet.png new file mode 100644 index 0000000..6d5f3fb Binary files /dev/null and b/images/image_snipet.png differ diff --git a/index.html b/index.html index e838495..c7b2a6f 100644 --- a/index.html +++ b/index.html @@ -1,139 +1,29 @@ - - - - - - - - Clipy - Clipboard extension app for Mac OS X - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + Clipy - Clipboard extension app for Mac OS X + + + + + + -
- - - Fork me on GitHub - -
-
- -
- -

OS X スニペットアプリ

- Download - -

OS X 10.9以降

-
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-

主な機能

- - -
-
- -
-
-

オープンソース

-

Clipyはオープンソースで公開されています。バグや不具合、要望等ありましたら、Issue、PullRequestなどお待ちしています！日本語でも大丈夫です！

- -
-
- -
-
-

スペシャルサンクス

-

- Clipmenuをオープンソースとして公開していただき@naotaka氏に感謝いたします。このコードがなければリメイクという形で公開はありえませんでした。
-
- 現状機能が被ってしまっていますが、独自機能を追加してさらなる機能向上を目指していきます。本当にありがとうございました。 -

- -
-
- - - - - +
+ + diff --git a/js/common.js b/js/common.js deleted file mode 100644 index 1a5e8d5..0000000 --- a/js/common.js +++ /dev/null @@ -1,25 +0,0 @@ -// window.fbAsyncInit = function() { -// FB.init({ -// appId : '752550624866720', -// xfbml : true, -// version : 'v2.3' -// }); -// }; - -// var facebook = function(d, s, id) { -// var js, fjs = d.getElementsByTagName(s)[0]; -// if (d.getElementById(id)) return; -// js = d.createElement(s); js.id = id; -// js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3"; -// fjs.parentNode.insertBefore(js, fjs); -// }; - -var twitter = function(d,s,id){ - var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; - if(!d.getElementById(id)){ - js=d.createElement(s); - js.id=id; - js.src=p+'://platform.twitter.com/widgets.js'; - fjs.parentNode.insertBefore(js,fjs); - } -}; diff --git a/js/main.js b/js/main.js deleted file mode 100644 index 4a48ddc..0000000 --- a/js/main.js +++ /dev/null @@ -1,66 +0,0 @@ -var unslider; - -var slider = function(){ - var onSlided = function(){ - var index = $('.dots .active').text(); - var object; - if( object = $('.control-active') ){ - object.removeClass( 'control-active' ); - if( object = $('[index='+index+']') ){ - object.addClass( 'control-active' ); - } - } - return; - }; - var parameters = { - speed: 500 , - delay: 3000 , - complete: onSlided , - keys: false , - dots: true , - fluid: false - }; - unslider = $('#screenshots-contents').unslider( parameters ).data( 'unslider' ); - return; -} - -var show = function(){ - $(this).css( 'opacity' , '1' ); - return; -} - -var hide = function(){ - $(this).css( 'opacity' , '0' ); - return; -} - -var nextSlide = function(){ - unslider.next(); - return; -} - -var previousSlide = function(){ - unslider.prev(); - return; -} - -var moveSlide = function(){ - var index = $(this).attr( 'index' ); - if( isFinite( index ) ){ - unslider.move( index - 1 ); - } - return; -} - -var initialize = function(){ - // facebook(document, 'script', 'facebook-jssdk'); - twitter(document, 'script', 'twitter-wjs'); - slider(); - $('#control-on-left, #control-on-right').hover( show , hide ); - $('#control-on-left').click( previousSlide ); - $('#control-on-right').click( nextSlide ); - $('[index]').click( moveSlide ); - return; -} - -$(document).ready( initialize ); \ No newline at end of file diff --git a/js/unslider.min.js b/js/unslider.min.js deleted file mode 100644 index 4298701..0000000 --- a/js/unslider.min.js +++ /dev/null @@ -1 +0,0 @@ -(function(e,t){if(!e)return t;var n=function(){this.el=t;this.items=t;this.sizes=[];this.max=[0,0];this.current=0;this.interval=t;this.opts={speed:500,delay:3e3,complete:t,keys:!t,dots:t,fluid:t};var n=this;this.init=function(t,n){this.el=t;this.ul=t.children("ul");this.max=[t.outerWidth(),t.outerHeight()];this.items=this.ul.children("li").each(this.calculate);this.opts=e.extend(this.opts,n);this.setup();return this};this.calculate=function(t){var r=e(this),i=r.outerWidth(),s=r.outerHeight();n.sizes[t]=[i,s];if(i>n.max[0])n.max[0]=i;if(s>n.max[1])n.max[1]=s};this.setup=function(){this.el.css({overflow:"hidden",width:n.max[0],height:this.items.first().outerHeight()});this.ul.css({width:this.items.length*100+"%",position:"relative"});this.items.css("width",100/this.items.length+"%");if(this.opts.delay!==t){this.start();this.el.hover(this.stop,this.start)}this.opts.keys&&e(document).keydown(this.keys);this.opts.dots&&this.dots();if(this.opts.fluid){var r=function(){n.el.css("width",Math.min(Math.round(n.el.outerWidth()/n.el.parent().outerWidth()*100),100)+"%")};r();e(window).resize(r)}if(this.opts.arrows){this.el.parent().append('

←→

').find(".arrows span").click(function(){e.isFunction(n[this.className])&&n[this.className]()})}if(e.event.swipe){this.el.on("swipeleft",n.prev).on("swiperight",n.next)}};this.move=function(t,r){if(!this.items.eq(t).length)t=0;if(t<0)t=this.items.length-1;var i=this.items.eq(t);var s={height:i.outerHeight()};var o=r?5:this.opts.speed;if(!this.ul.is(":animated")){n.el.find(".dot:eq("+t+")").addClass("active").siblings().removeClass("active");this.el.animate(s,o)&&this.ul.animate(e.extend({left:"-"+t+"00%"},s),o,function(i){n.current=t;e.isFunction(n.opts.complete)&&!r&&n.opts.complete(n.el)})}};this.start=function(){n.interval=setInterval(function(){n.move(n.current+1)},n.opts.delay)};this.stop=function(){n.interval=clearInterval(n.interval);return n};this.keys=function(t){var r=t.which;var i={37:n.prev,39:n.next,27:n.stop};if(e.isFunction(i[r])){i[r]()}};this.next=function(){return n.stop().move(n.current+1)};this.prev=function(){return n.stop().move(n.current-1)};this.dots=function(){var t='
    ';e.each(this.items,function(e){t+='
  1. '+(e+1)+"
    2. "});t+="
";this.el.addClass("has-dots").append(t).find(".dot").click(function(){n.move(e(this).index())})}};e.fn.unslider=function(t){var r=this.length;return this.each(function(i){var s=e(this);var u=(new n).init(s,t);s.data("unslider"+(r>1?"-"+(i+1):""),u)})}})(window.jQuery,false) \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..283177c --- /dev/null +++ b/package.json @@ -0,0 +1,41 @@ +{ + "name": "clipy.github.io", + "version": "1.0.0", + "description": "a site of clipy", + "main": "src/javascripts/index.js", + "scripts": { + "build": "webpack -p", + "start": "webpack-dev-server", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Clipy/clipy.github.io.git" + }, + "author": "abouthiroppy (http://about-hiroppy.com)", + "license": "MIT", + "bugs": { + "url": "https://github.com/Clipy/clipy.github.io/issues" + }, + "homepage": "https://github.com/Clipy/clipy.github.io#readme", + "devDependencies": { + "babel-core": "^6.11.4", + "babel-loader": "^6.2.4", + "babel-preset-es2015": "^6.9.0", + "babel-preset-react": "^6.11.1", + "css-loader": "^0.23.1", + "react-hot-loader": "^1.3.0", + "style-loader": "^0.13.1", + "url-loader": "^0.5.7", + "webpack": "^1.13.1", + "webpack-dev-server": "^1.14.1" + }, + "dependencies": { + "bootstrap": "^3.3.6", + "normalize.css": "^4.2.0", + "react": "^15.3.0", + "react-bootstrap": "^0.30.0", + "react-dom": "^15.3.0", + "rect": "^1.2.1" + } +} diff --git a/src/javascripts/components/DownloadBar.js b/src/javascripts/components/DownloadBar.js new file mode 100644 index 0000000..abbe6b0 --- /dev/null +++ b/src/javascripts/components/DownloadBar.js @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from '../../stylesheets/download-bar'; + +export default class extends React.Component { + render() { + return ( +
+ +
+ ); + } +} diff --git a/src/javascripts/components/Footer.js b/src/javascripts/components/Footer.js new file mode 100644 index 0000000..4a32cc2 --- /dev/null +++ b/src/javascripts/components/Footer.js @@ -0,0 +1,13 @@ +import React from 'react'; +import styles from '../../stylesheets/footer'; + +export default class extends React.Component { + render() { + return ( +
+
SNS
+ 2015-2016 Clipy Project +
+ ); + } +} diff --git a/src/javascripts/components/Hero.js b/src/javascripts/components/Hero.js new file mode 100644 index 0000000..66fd41d --- /dev/null +++ b/src/javascripts/components/Hero.js @@ -0,0 +1,30 @@ +import React from 'react'; +import styles from '../../stylesheets/hero'; + +export default class extends React.Component { + render() { + return ( +
+
+
+
+
+
+
+
+

Clipy

+ + クリップボード拡張・
スニペット機能を搭載 + +
+
+ + Mac 版(OS X 10.9以降) +
+
+
+
+
+ ); + } +} diff --git a/src/javascripts/components/Navbar.js b/src/javascripts/components/Navbar.js new file mode 100644 index 0000000..821ef6a --- /dev/null +++ b/src/javascripts/components/Navbar.js @@ -0,0 +1,23 @@ +import React from 'react'; +import {Navbar, Nav, NavItem} from 'react-bootstrap'; +import styles from '../../stylesheets/navbar'; + +export default class extends React.Component { + render() { + return( + + + + Clipy + + + + + ); + } +} diff --git a/src/javascripts/components/OpenSource.js b/src/javascripts/components/OpenSource.js new file mode 100644 index 0000000..b8a9407 --- /dev/null +++ b/src/javascripts/components/OpenSource.js @@ -0,0 +1,21 @@ +import React from 'react'; +import styles from '../../stylesheets/open-source'; + +export default class extends React.Component { + render() { + return ( +
+
+

オープンソース

+

+ Clipyはオープンソースで公開されています。 + バグや不具合、要望等ありましたら、Issue、PullRequestなどお待ちしています！ + 日本語でも大丈夫です！ +

+ +
+
+
+ ); + } +} diff --git a/src/javascripts/components/SaveHistory.js b/src/javascripts/components/SaveHistory.js new file mode 100644 index 0000000..2b440e2 --- /dev/null +++ b/src/javascripts/components/SaveHistory.js @@ -0,0 +1,23 @@ +import React from 'react'; +import styles from '../../stylesheets/save-history'; + +export default class extends React.Component { + render() { + return ( +
+
+
+

コピーをクリップ
ボードに履歴保存

+

+ コピーしたテキスト、画像などを履歴としてクリップボードに保存することができます。 + ペーストしたい場所にいつでも呼び出し利用できます。 +

+
+
+
+
+
+
+ ); + } +} diff --git a/src/javascripts/components/Shortcut.js b/src/javascripts/components/Shortcut.js new file mode 100644 index 0000000..f7e911c --- /dev/null +++ b/src/javascripts/components/Shortcut.js @@ -0,0 +1,23 @@ +import React from 'react'; +import styles from '../../stylesheets/shortcut'; + +export default class extends React.Component { + render() { + return ( +
+
+
+

ショートカットで自由に呼び出し

+

+ メインメニュー、履歴メニュー、スニペットメニューなどをショートカットキーを各々に + 設定する事で利用したい時にいつでも呼び出す事が出来ます。 +

+
+
+
+
+
+
+ ); + } +} diff --git a/src/javascripts/components/Snippet.js b/src/javascripts/components/Snippet.js new file mode 100644 index 0000000..d79fd0d --- /dev/null +++ b/src/javascripts/components/Snippet.js @@ -0,0 +1,23 @@ +import React from 'react'; +import styles from '../../stylesheets/snippet'; + +export default class extends React.Component { + render() { + return ( +
+
+
+
+
+
+

スニペットを設定

+

+ 保存しておきたい定型文、テンプレートを管理、編集が出来ます。 + よく使う定型文を必要な時に呼び出し、利用出来ます。 +

+
+
+
+ ); + } +} diff --git a/src/javascripts/components/SpecialThanks.js b/src/javascripts/components/SpecialThanks.js new file mode 100644 index 0000000..c4446cb --- /dev/null +++ b/src/javascripts/components/SpecialThanks.js @@ -0,0 +1,22 @@ +import React from 'react'; +import styles from '../../stylesheets/special-thanks'; + +export default class extends React.Component { + render() { + return ( +
+
+

スペシャルサンクス

+
+

+ Clipmenuをオープンソースとして公開していただき + @naotaka氏に感謝いたします。このコードがなければ + リメイクという形で公開はありえませんでした。現状機能が + 被ってしまっていますが、独自機能を追加してさらなる + 機能向上を目指していきます。本当にありがとうございました。 +

+
+
+ ); + } +} diff --git a/src/javascripts/index.js b/src/javascripts/index.js new file mode 100644 index 0000000..b4c75ff --- /dev/null +++ b/src/javascripts/index.js @@ -0,0 +1,36 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Navbar from './components/Navbar'; +import Hero from './components/Hero'; +import SaveHistory from './components/SaveHistory'; +import Snippet from './components/Snippet'; +import Shortcut from './components/Shortcut'; +import OpenSource from './components/OpenSource'; +import SpecialThanks from './components/SpecialThanks'; +import DownloadBar from './components/DownloadBar'; +import Footer from './components/Footer'; + +class Root extends React.Component { + render() { + return ( +
+ +
+ + + + + + +
+ +
+
+ ); + } +} + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/src/stylesheets/common.css b/src/stylesheets/common.css new file mode 100644 index 0000000..d7f3853 --- /dev/null +++ b/src/stylesheets/common.css @@ -0,0 +1,24 @@ +.container { + height: 100vh; + display: flex; + align-items: center; +} + +.mainColor { + color: #3f9ad6; +} + +.blueButton { + outline: none; + background: rgba(0, 0, 0, 0); + border-radius: 10px; + border: solid 3px #3f9ad6; +} + +.whiteButton { + color: #fff; + outline: none; + background: rgba(0, 0, 0, 0); + border-radius: 10px; + border: solid 3px #ffffff; +} diff --git a/src/stylesheets/download-bar.css b/src/stylesheets/download-bar.css new file mode 100644 index 0000000..97da610 --- /dev/null +++ b/src/stylesheets/download-bar.css @@ -0,0 +1,19 @@ +.container { + width: 100vw; + height: 223px; + display: flex; + align-items: center; + justify-content: center; + background-color: #3d90c9; +} + +.button { + composes: whiteButton from './common.css'; + height: 82px; + width: 282px; + font-family: HiraKakuProN-W6; + font-size: 29.7px; + font-weight: 400; + text-align: center; + color: #fff; +} diff --git a/src/stylesheets/footer.css b/src/stylesheets/footer.css new file mode 100644 index 0000000..c0fdcae --- /dev/null +++ b/src/stylesheets/footer.css @@ -0,0 +1,15 @@ +.container { + height: 129px; + text-align: center; + background: #f3f6f7; +} + +.sns { +} + +.copyright { + font-family: .HelveticaNeueDeskInterface; + font-size: 14px; + font-weight: 400; + color: #4a4a4a; +} diff --git a/src/stylesheets/hero.css b/src/stylesheets/hero.css new file mode 100644 index 0000000..b75120c --- /dev/null +++ b/src/stylesheets/hero.css @@ -0,0 +1,45 @@ +.container { + height: calc(100vh - 50px); + display: flex; + align-items: center; +} + +.icon { + width: 170px; + height: 230px; + margin: auto; + box-shadow: -13px 13px 7px 0 rgba(20, 35, 53, 0.31); + background: url("../../images/clipy_logo.png"); + background-size: cover; +} + +.description { + margin-top: 10px; + height: 50px; + font-family: HiraKakuPro-W3; + font-size: 15px; + font-weight: 400; + line-height: 1.44; + color: #4a4a4a; +} + +.downloadButton { + composes: blueButton from './common.css'; + composes: mainColor from './common.css'; + width: 140px; + height: 40px; + font-family: HiraKakuProN-W6; + font-size: 15px; + font-weight: 400; + text-align: center; +} + +.downloadDescription { + font-size: 9px; +} + +.name { + composes: mainColor from './common.css'; + font-size: 45px; + margin: 0 0 15px 0; +} diff --git a/src/stylesheets/navbar.css b/src/stylesheets/navbar.css new file mode 100644 index 0000000..212ca09 --- /dev/null +++ b/src/stylesheets/navbar.css @@ -0,0 +1,13 @@ +.clipy-brand { + float: left; + font-size: 42px; +} + +.nav-item { + font-family: HiraKakuProN-W3; + font-size: 20px; + font-weight: normal; + letter-spacing: 0.6px; + text-align: center; + color: #4a4a4a; +} diff --git a/src/stylesheets/open-source.css b/src/stylesheets/open-source.css new file mode 100644 index 0000000..8426865 --- /dev/null +++ b/src/stylesheets/open-source.css @@ -0,0 +1,12 @@ +.container { + text-align: center; + composes: container from './common.css'; +} + +.image { + width: 430px; + height: 270px; + margin: auto; + background: url("../../images/image_repository.png"); + background-size: cover; +} diff --git a/src/stylesheets/save-history.css b/src/stylesheets/save-history.css new file mode 100644 index 0000000..04c1adc --- /dev/null +++ b/src/stylesheets/save-history.css @@ -0,0 +1,10 @@ +.container { + composes: container from './common.css'; +} + +.image { + background: url("../../images/image_copy.png"); + width: 626px; + height: 386px; + object-fit: contain; +} diff --git a/src/stylesheets/shortcut.css b/src/stylesheets/shortcut.css new file mode 100644 index 0000000..d341fe6 --- /dev/null +++ b/src/stylesheets/shortcut.css @@ -0,0 +1,10 @@ +.container { + composes: container from './common.css'; +} + +.image { + width: 430px; + height: 270px; + background: url("../../images/image_shortcut.png"); + background-size: cover; +} diff --git a/src/stylesheets/snippet.css b/src/stylesheets/snippet.css new file mode 100644 index 0000000..12f72cd --- /dev/null +++ b/src/stylesheets/snippet.css @@ -0,0 +1,10 @@ +.container { + composes: container from './common.css'; +} + +.image { + width: 430px; + height: 270px; + background: url("../../images/image_snipet.png"); + background-size: cover; +} diff --git a/src/stylesheets/special-thanks.css b/src/stylesheets/special-thanks.css new file mode 100644 index 0000000..ea45a48 --- /dev/null +++ b/src/stylesheets/special-thanks.css @@ -0,0 +1,24 @@ +.container { + text-align: center; + composes: container from './common.css'; +} + +.image { + width: 146px; + height: 164px; + margin: auto; + background: url("../../images/clipmenu-logo.png"); + background-size: cover; +} + +.description { + max-width: 585px; + height: 160px; + font-family: HiraKakuProN-W3; + font-size: 18px; + font-weight: 400; + line-height: 1.78; + text-align: center; + color: #4a4a4a; + margin: auto; +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..0683a76 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,49 @@ +const path = require('path'); +const webpack = require('webpack'); + +module.exports = { + cache: true, + target: 'web', + entry: [ + path.resolve(__dirname, 'src', 'javascripts', 'index.js'), + 'webpack-dev-server/client?http://0.0.0.0:8080', + 'webpack/hot/only-dev-server', + ], + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'bundle.js', + publicPath: '/dist/' + }, + module: { + loaders: [ + { + test: /\.js$/, + exclude: /node_modules/, + loader: 'react-hot!babel', + }, + { + test: /\.css$/, + loader: 'style!css?modules&importLoaders=1&localIdentName=[path]__[name]__[local]__[hash:base64:5]' + }, + { + test: /\.png$/, + loader: 'url?mimetype=image/png' + } + ] + }, + devtool: 'source-map', + resolve: { + extensions: ['', '.js', '.css'] + }, + plugins: [ + new webpack.HotModuleReplacementPlugin(), // if you don't specify `--hot` + ], + devServer: { + hot: true, + port: 8080, + cache: true, + inline: true, + colors: true, + contentBase: '.' + } +};