-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
65 lines (60 loc) · 4.54 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<title>Schema.org Microdata Creator</title>
</head>
<body class="bg-light">
<div class="container">
<h1>Schema.org Microdata Creator</h1>
<div class="alert alert-secondary alert-dismissible fade show" role="alert" id="welcome_box">
<strong>Hi there!</strong> This tool helps put together <a href="https://schema.org">Schema.org</a> markup for your website.
<button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="hide_welcome_box();">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-inline">
<h2>Type</h2>
<div class="input-group mb-2 mr-sm-2">
<select id="types0" class="type_select form-select" size="10">
<option value="schema:Thing" onclick="set_selected_type('schema:Thing');">Thing</option>
</select>
<button type="button" class="type_next_button btn btn-primary" id="types0_next" onclick="next_level_types(1,document.querySelector('#types0').value);">></button>
<select id="types1" class="type_select form-select" size="10"></select>
<button type="button" class="type_next_button btn btn-primary" id="types1_next" onclick="next_level_types(2,document.querySelector('#types1').value);">></button>
<select id="types2" class="type_select form-select" size="10"></select>
<button type="button" class="type_next_button btn btn-primary" id="types2_next" onclick="next_level_types(3,document.querySelector('#types2').value);">></button>
<select id="types3" class="type_select form-select" size="10"></select>
<button type="button" class="type_next_button btn btn-primary" id="types3_next" onclick="next_level_types(4,document.querySelector('#types3').value);">></button>
<select id="types4" class="type_select form-select" size="10"></select>
<button type="button" class="type_next_button btn btn-primary" id="types4_next" onclick="next_level_types(5,document.querySelector('#types4').value);">></button>
<select id="types5" class="type_select form-select" size="10"></select>
</div>
<p class="text-muted">Description: <span id="type_description"></span></p>
<h2>Properties</h2>
<div class="form-check"><input type="checkbox" class="form-check-input" id="include_parent_types" checked="true" onclick="show_type_properties(selected_type);"><label class="form-check-label" for="include_parent_types">Include properties of parent types</label></div>
<div class="input-group mb-2 mr-sm-2">
<select id="properties" multiple class="form-select"></select>
<button type="button" id="add_property_button" class="btn btn-primary" onclick="add_property_to_markup();">Add</button>
</div>
<p class="text-muted">Description: <span id="property_description"></span></p>
<h2>Markup</h2>
<div class="input-group mb-2 mr-sm-2">
<textarea id="markup" class="form-control"></textarea>
<button type="button" id="copy_button" class="btn btn-primary" onclick="copy();">Copy</button>
<button type="button" id="reset_button" class="btn btn-danger" onclick="reset2();">Reset</button>
</div>
</form>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Check out <a href="https://schema.org">Schema.org</a>. Built by <a href="https://nicolaus.xyz">Nicolaus</a>.</span>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="scripts.js"></script>
</body>
</html>