Skip to content

Commit

Permalink
とｐ
Browse files Browse the repository at this point in the history
  • Loading branch information
@kurohune538
kurohune538 committed Mar 5, 2016
1 parent 5d76712 commit 7909878
Show file tree
Hide file tree
Showing 6 changed files with 287 additions and 3 deletions.
Binary file added src/images/My page.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/big-cursor.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/confirm.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/nursery-thumbnail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
156 changes: 155 additions & 1 deletion src/sass/main.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
html, body {
html, body,p {
margin: 0;
padding: 0;
}
Expand Down Expand Up @@ -156,6 +156,160 @@ ul, li, a {
background: #f5a623;
border-radius: 10px;
text-align: center;
}
}

.calendar {
float: left;
margin-left: 5%;
margin-right: 5%;
margin-top: 80px;
width: 40%;
}

.select-detail {
float: left;
margin-left: 5%;
margin-right: 5%;
width: 40%;
margin-top: 80px;
}

.big-cursor {
clear: both;
text-align: center;
img {
margin-top: 30px;
width: 30%;
}
}
.regions {
clear: both;
float: left;
margin-left: 5%;
width: 20%;
margin-top: 30px;
}

.nurseries-list {
border: solid 3px #f5a623;
border-radius: 10px;
float: left;
margin-top: 30px;
margin-bottom: 50px;
width: 50%;
padding: 10px;
.nursery {
height: auto;
margin-right: 10px;
margin-top: 10px;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.4);
border-radius: 5px;
clear: both;
width: 100%;
.nursery-description {
margin-left: 10px;
padding-top: 5px;
padding-bottom: 5px;

}
h2 {
margin: 0;
font-size: 20px;
}
p {
font-size: 14px;

}
.nursery-thumbnail {
width: 100px;
float: left;
border-radius: 5px 0 0 5px;

}
.reserve-btn {
color: #fff;
float: right;
display: inline;
width: 100px;
text-align: center;
padding: 5px 5px;
border-radius: 5px;
background: #f5a623;
margin-top: -35px;
margin-right: 10px;
cursor: pointer;
}
}
}
.section-title {
border-bottom: 2px solid #f5a623;
}
.region {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
border-bottom: dashed 1px #f5a623;
&:hover {
color: #fff;
font-weight: bold;
background: #f5a623;
cursor: pointer;
}
}

table {
width: 100%;
}

td {
text-align: center;
&:hover {
background: #f5a623;
color: #fff;
}
}
.select-detail {
input {
width: 30%;
height: 25px;
font-size: 20px;
border: #f5a623 solid 2px;
border-radius: 5px;
clear: both;
}
}
.detail-name {
margin-left: 20px;
margin-top: 20px;
margin-bottom: 10px;
font-weight: bold;
clear: both;
}

.detail-form {
margin-left: 20px;
}
.childa {
font-size: 18px;
display: inline;
margin-left: 10px;
margin-right: 10px;
}
.detail-content-left {
margin-left: 20px;
}
.detail-content {
float: left;
width: 40%;
background: #fff;
border: solid #f5a623 2px;
padding: 10px;
text-align: center;
color: #f5a623;
font-weight: bold;
&:hover {
background: #f5a623;
color: #fff;
}
}
134 changes: 132 additions & 2 deletions src/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,137 @@ const Index = React.createClass({
render() {
return (
<section>

<section className="calendar">
<p className="section-title">まず日付を選びましょう</p>
<table border="0" cellSpacing="1" cellPadding="1" backgroundColor="#CCCCCC" style={["font: 12px, color: #666666"]}>
<tr>
<td align="center" colSpan="7" backgroundColor="#EEEEEE" height="18" style={["color: #666666"]}>2016年3月</td></tr>
<tr>
<td align="center" width="20" height="18" backgroundColor="#FF3300" style={["color: #FFFFFF"]}>日</td>
<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>月</td>
<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>火</td>
<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>水</td>
<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>木</td>
<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>金</td>
<td align="center" width="20" backgroundColor="#A6C0E1" style={["color: #666666;"]}>土</td>
</tr>
<tr>
<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>　</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>　</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>1</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>2</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>3</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>4</td>
<td align="center" backgroundColor="#FF3300" style={["color: #FFFFFF"]}>5</td>
</tr>
<tr>
<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>6</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>7</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>8</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>9</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>10</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>11</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>12</td>
</tr>
<tr>
<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>13</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>14</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>15</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>16</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>17</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>18</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>19</td>
</tr>
<tr>
<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>20</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>21</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>22</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>23</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>24</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>25</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>26</td>
</tr>
<tr>
<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>27</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>28</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>29</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>30</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>31</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>　</td>
<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>　</td>
</tr>
<tr>
<td backgroundColor="#FFFFFF" height="18">&nbsp;</td>
<td backgroundColor="#FFFFFF">&nbsp;</td>
<td backgroundColor="#FFFFFF">&nbsp;</td>
<td backgroundColor="#FFFFFF">&nbsp;</td>
<td backgroundColor="#FFFFFF">&nbsp;</td>
<td backgroundColor="#FFFFFF">&nbsp;</td>
<td backgroundColor="#FFFFFF">&nbsp;</td>
</tr>
</table>
</section>
<section className="select-detail">
<p className="section-title">条件を選びましょう</p>
<p className="detail-name">利用料金</p>
<input type="text" className="detail-form" />
<p className="childa">~</p>
<input type="text" />
<p className="detail-name">利用条件</p>
<p className="detail-content-left detail-content">病児</p>
<p className="detail-content">病後</p>
<p className="detail-name">キャンセル待ち</p>
<p className="detail-content-left detail-content">あり</p>
<p className="detail-content">なし</p>
<p className="detail-name">救急体制</p>
<p className="detail-content-left detail-content">あり</p>
<p className="detail-content">なし</p>
</section>
<div className="big-cursor">
<img src="images/big-cursor.png" />
</div>
<section className="regions">
<p className="section-title">地域一覧</p>
<p className="region">鳥取市</p>
<p className="region">鳥取市</p>
<p className="region">鳥取市</p>

</section>
<section className="nurseries-list">
<div className="nursery">
<img src="images/nursery-thumbnail.png" className="nursery-thumbnail" />
<div className="nursery-description">
<h2>キッズルームこぐま</h2>
<p>末広温泉町566せいきょうこどもクリニック内</p>
<p>1000円/人</p>
<p>8:00~18:00</p>
<div className="reserve-btn">予約する</div>
</div>
</div>
<div className="nursery">
<img src="images/nursery-thumbnail.png" className="nursery-thumbnail" />
<div className="nursery-description">
<h2>キッズルームこぐま</h2>
<p>末広温泉町566せいきょうこどもクリニック内</p>
<p>1000円/人</p>
<p>8:00~18:00</p>
<div className="reserve-btn">予約する</div>
</div>
</div>
<div className="nursery">
<img src="images/nursery-thumbnail.png" className="nursery-thumbnail" />
<div className="nursery-description">
<h2>キッズルームこぐま</h2>
<p>末広温泉町566せいきょうこどもクリニック内</p>
<p>1000円/人</p>
<p>8:00~18:00</p>
<div className="reserve-btn">予約する</div>
</div>
</div>
</section>
<section className="recent-nurseries">

</section>
</section>
);
}
Expand All @@ -95,7 +225,7 @@ const Login = React.createClass({
render() {
return (
<section>
<form action="http://localhost/index" method="">
<form action="http://localhost/#/index" method="">
<h1 className="page-title">ログイン</h1>
<div className="form-box">
<div className="form-contents">
Expand Down

0 comments on commit 7909878

Please sign in to comment.