-
Notifications
You must be signed in to change notification settings - Fork 0
/
builder.php
71 lines (71 loc) · 3.4 KB
/
builder.php
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
<html>
<head>
<title>KO Bootstrap Builder</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://git.iddkingsonline.com/designsystem-dev/css/main.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<main>
<h1>King's Online Single-platform Bootstrap Builder (KO-BB)</h1>
<div class="tooltip">
<span class="tooltiptext">The KO-BB is a simple tool that uses
visual selectors to generate frontend code for Bootstrap components
and is designed for use with the King's Online Design System.</span>
</div>
<div>
<div class="alert alert-btw hide-for-chrome" role="alert">
<p>As the Builder performs best on Google Chrome, it would be
advisable to switch to this browser if possible. If you continue
to encounter any problems whilst on Chrome, view the FAQ tab to
find out how to report an issue.</p>
</div>
</div>
<p class="header select-intro">Select the component you wish to
build:</p>
<ul class="nav nav-tabs">
<?php
$components = array('Carousel', 'Collapse', 'Timeline', 'Table',
'Transcript', 'Card', 'List', 'Blockquote', 'Infobox',
'View/hide', 'Academic note', 'Audio', 'Video', 'Download',
'Float box');
sort($components);
foreach ($components as $component) {
$id = strtolower(str_replace(' ','',str_replace('/','',$component)));
echo "<li class=\"nav-item\"><a class=\"nav-link\" href=\"#\" id=\"link-$id\">$component</a></li>";
}
?>
<li class="nav-item">
<a class="nav-link" href="#" id="link-faqs">FAQs</a>
</li>
</ul>
</div>
<section id="region-main">
<div id="component-builder">
<?php include('components/academicnote.php'); ?>
<?php include('components/audio.php'); ?>
<?php include('components/blockquote.php'); ?>
<?php include('components/card.php'); ?>
<?php include('components/carousel.php'); ?>
<?php include('components/collapse.php'); ?>
<?php include('components/download.php'); ?>
<?php include('components/floatbox.php'); ?>
<?php include('components/infobox.php'); ?>
<?php include('components/list.php'); ?>
<?php include('components/table.php'); ?>
<?php include('components/timeline.php'); ?>
<?php include('components/transcript.php'); ?>
<?php include('components/video.php'); ?>
<?php include('components/viewhide.php'); ?>
<?php include('components/faqs.php'); ?>
</div>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/ea529b88ed.js"></script>
<script src="https://git.iddkingsonline.com/designsystem-dev/js/main.js"></script>
<script src="js/script.js"></script>
</body>
</html>