mirror of
https://github.com/Raghu-Ch/TurtleFactsQuiz.git
synced 2026-02-10 03:33:01 -05:00
94 lines
4.7 KiB
HTML
94 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" ng-app = "turtleFacts">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>Turtel Fact Quiz</title>
|
||
<!-- Bootstrap css and my own css -->
|
||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<h1>Turtle Facts Quiz</h1>
|
||
<h3>Learn about all the turtles below before you decide to take on the
|
||
<strong>TURTLE QUIZ</strong>
|
||
</h3>
|
||
</div>
|
||
<!-- Hook on the controller for this view and specify when to show it using ng-hide -->
|
||
<div ng-controller = "listCtrl as list">
|
||
<div class="row">
|
||
<div class="col-sm-6" ng-repeat = "turtle in list.data">
|
||
<div class="well well-sm">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<img ng-src ="{{turtle.image_url}}" class = "img-rounded img-responsive well-image">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h4>{{turtle.type}}</h4>
|
||
|
||
<p><strong>Locations:</strong>{{turtle.locations}}</p>
|
||
<p><strong>Size:</strong>{{turtle.size}}</p>
|
||
<p><strong>Average Lifespan:</strong>{{turtle.lifespan}}</p>
|
||
<p><strong>Dite:</strong>{{turtle.dite}}</p>
|
||
|
||
<button class = "btn btn-primary pull-right"
|
||
data-toggle= "modal"
|
||
data-target = "#turtle-info"
|
||
ng-click = "list.changeActiveTurtle(turtle)">Learn More</button>
|
||
|
||
</div>
|
||
</div> <!-- row -->
|
||
</div> <!-- well -->
|
||
</div> <!-- col-sm-6 -->
|
||
</div>
|
||
|
||
<!-- the markup for the modal -->
|
||
<div class= "modal" id = "turtle-info">
|
||
<div class= "modal-dialog">
|
||
<div class= "modal-content">
|
||
<div class= "modal-header">
|
||
<h2>{{list.activeTurtle.type}}</h2>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="col-xs-8 col-xs-offset-2">
|
||
<img ng-src="{{list.activeTurtle.image_url}}" class = "img-rounded img-responsive well-image">
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<p><strong>locations:</strong>{{list.activeTurtle.locations}}</p>
|
||
<p><strong>Size:</strong>{{list.activeTurtle.size}}</p>
|
||
<p><strong>Average: Lifespan</strong>{{list.activeTurtle.lifespan}}</p>
|
||
<p><strong>Dite:</strong>{{list.activeTurtle.dite}}</p>
|
||
</div>
|
||
<div class="col-xs-12 top-buffer">
|
||
<p>{{list.activeTurtle.description}}</p>
|
||
|
||
<button class="btn btn-danger pull-right"
|
||
data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- modal markup ends -->
|
||
|
||
</div> <!-- container -->
|
||
</div>
|
||
<!-- third party scripts -->
|
||
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script> -->
|
||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
|
||
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
|
||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||
<!-- application scripts -->
|
||
<script src ="js/app.js"></script>
|
||
<script src ="js/controllers/list.js"></script>
|
||
</body>
|
||
</html>
|