-
Notifications
You must be signed in to change notification settings - Fork 0
/
season.html
112 lines (106 loc) · 5.7 KB
/
season.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Kimono Play</title>
<link rel="stylesheet" type="text/css" href="css/fonts/fonts.css" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/scenario-builder.css" rel="stylesheet">
<link href="css/scenario-nav.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<nav id="nav-bar" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ScenarioNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="ScenarioNav">
<ul class="nav navbar-nav navbar-right">
<li><a id="SeasonNav" class="current">SEASON</a></li>
<li><a id="FormalityNav" class="locked">FORMALITY</a></li>
<li><a id="MaritalNav" class="locked">MARITAL STATUS</a></li>
<li><a id="MaterialNav" class="locked">MATERIAL</a></li>
<li><a id="ObiNav" class="locked">OBI</a></li>
<li><a id="PatternNav" class="locked">PATTERN</a></li>
</ul>
</div>
</div>
</nav>
<body class="text-center">
<h1>SEASON</h1>
<div id="season-container" class="container-fluid">
<div class="row row-eq-height">
<div class="col-xs-2 card-holder"></div>
<div id="spring-card" class="season col-xs-2 card" style="display:none;" onClick="SetBuilderValue('Season', 'Spring')">
<img class="scene-icon img-responsive" src="Images/General/spring_icon.png" />
<p class="text-center scene-label">SPRING</p>
</div>
<div id="summer-card" class="season col-xs-2 card" style="display:none;" onClick="SetBuilderValue('Season', 'Summer')">
<img class="scene-icon img-responsive" src="Images/General/summer_icon.png"/>
<p class="text-center scene-label">SUMMER</p>
</div>
<div id="autumn-card" class="season col-xs-2 card" style="display:none;" onClick="SetBuilderValue('Season', 'Autumn')">
<img class="scene-icon img-responsive" src="Images/General/autumn_icon.png"/>
<p class="text-center scene-label">AUTUMN</p>
</div>
<div id="winter-card" class="season col-xs-2 card" style="display:none;" onClick="SetBuilderValue('Season', 'Winter')">
<img class="scene-icon img-responsive" src="Images/General/winter_icon.png"/>
<p class="text-center scene-label">WINTER</p>
</div>
</div>
</div>
<div class="nav-btns container-fluid">
<div class="row row-eq-height buttons">
<img class="btn-arrow" src="Images/General/arrow_left.png" disabled />
<img class="next-btn btn-arrow" src="Images/General/arrow_right.png" onclick="ForwardTo('formality.html', 'Formality');" disabled />
</div>
</div>
<div class="modal fade" id="AlertModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header correct">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">GAMEPLAY RULES</h4>
</div>
<div class="modal-body">
<h4>SELECT YOUR SCENE</h4>
<p>
Kimono traditions correspond to seasons, formality of occasion, and marital status. Select your scene to determine what type of kimono to wear.
</p>
<h4>KIMONO KITSUKE</h4>
<p>
Kitsuke is the art of wearing kimono by knowing which shape, colour, thickness, pattern and design is appropriate for any situation.
You will need to choose the correct kimono fabric thickness, colour, obi, and pattern based on your scene selection.
</p>
<p>
Learn as you choose ‑ follow the tips to learn how marriage status, season, and formality affect the type
of kimono you should wear. If you make an incorrect choice, read the information bubbles to learn more and try again!
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn end-btn" data-dismiss="modal" onClick="TurnOffRulesAlert('Season');">LET'S GO!</button>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/common-fn.js"></script>
<script src="js/common-builder-fn.js"></script>
</body>
</html>