mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-12 16:28:06 +00:00
349 lines
9.8 KiB
Vue
349 lines
9.8 KiB
Vue
<template>
|
|
<div>
|
|
<div style="padding: 30px">
|
|
<header>
|
|
<nav>
|
|
<p>HEADER</p>
|
|
<menu id="navmenu" type="context">
|
|
<menuitem label="Home" icon="icon.png">
|
|
<a href="#">Home</a>
|
|
</menuitem>
|
|
</menu>
|
|
</nav>
|
|
</header>
|
|
</div>
|
|
<slot></slot>
|
|
<div style="padding: 30px">
|
|
<main>
|
|
<h1>Heading...</h1>
|
|
<h2>Heading...</h2>
|
|
<h3>Heading...</h3>
|
|
<h4>Heading...</h4>
|
|
<h5>Heading...</h5>
|
|
<h6>Heading...</h6>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
|
|
nisi lacus, auctor sit amet purus vel, gravida luctus lectus. Aenean
|
|
rhoncus dapibus enim, sit amet faucibus leo ornare vitae. <br />
|
|
<span> span </span>
|
|
<b>Bold word</b>
|
|
<i>italic</i>
|
|
<em>emphasis</em>
|
|
<mark>mark</mark>
|
|
<small> small </small>
|
|
<sub> sub </sub>
|
|
<sup> sup </sup>
|
|
<u> Statements... </u>
|
|
<abbr title="National Aeronautics and Space Administration"
|
|
>NASA</abbr
|
|
>
|
|
<strike> strikethrough </strike>
|
|
<span><del> deprecated info </del> <ins> new info </ins> </span>
|
|
<s> not relevant </s>
|
|
<a href="#link">link</a>
|
|
<time datetime="2020-08-17 08:00">Monday at 8:00 AM</time>
|
|
<br />
|
|
<kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>CANC</kbd>
|
|
</p>
|
|
</main>
|
|
|
|
<p>This is a <q>short quote</q></p>
|
|
<blockquote>
|
|
This instead is a long quote that is going to use a lot of words and
|
|
also cite who said that. —<cite>Some People</cite>
|
|
</blockquote>
|
|
|
|
<ol>
|
|
<li><data value="21053">data tag</data></li>
|
|
<li><data value="23452">data tag</data></li>
|
|
<li><data value="42545">data tag</data></li>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
</ol>
|
|
|
|
<ul>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
</ul>
|
|
|
|
<hr />
|
|
|
|
<video
|
|
width="100%"
|
|
height="480"
|
|
style="max-width: 100%"
|
|
src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4"
|
|
controls
|
|
>
|
|
<track kind="subtitles" src="subtitles_de.vtt" srclang="de" />
|
|
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" />
|
|
<track kind="subtitles" src="subtitles_ja.vtt" srclang="ja" />
|
|
Sorry, your browser doesn't support HTML5 <code>video</code>, but you
|
|
can download this video from the
|
|
<a
|
|
href="https://archive.org/details/Popeye_forPresident"
|
|
target="_blank"
|
|
>Internet Archive</a
|
|
>.
|
|
</video>
|
|
|
|
<object
|
|
data="flashmovie.swf"
|
|
width="600"
|
|
height="800"
|
|
type="application/x-shockwave-flash"
|
|
>
|
|
Please install the Shockwave plugin to watch this movie.
|
|
</object>
|
|
|
|
<pre style="max-width: 100%; overflow: scroll">
|
|
|
|
_,'/
|
|
_.-''._:
|
|
,-:`-.-' .:.|
|
|
;-.'' .::.|
|
|
_..------.._ / (:. .:::.|
|
|
,'. .. . . .`/ : :. .::::.|
|
|
,'. . . . ./ \ ::. .::::::.|
|
|
,'. . . . . / `.,,::::::::.;\
|
|
/ . . / ,',';_::::::,:_:
|
|
/ . . . . / ,',','::`--'':;._;
|
|
: . . / ,',',':::::::_:'_,'
|
|
|.. . . . / ,',','::::::_:'_,'
|
|
|. /,-. /,',':::::_:'_,'
|
|
| .. . . /) /-:/,'::::_:',-'
|
|
: . . . // / ,'):::_:',' ;
|
|
\ . . // /,' /,-.',' ./
|
|
\ . . `::./,// ,'' ,' . /
|
|
`. . . `;;;,/_.'' . . ,'
|
|
,`. . :;;' `:. . ,'
|
|
/ `-._,' .. ` _.-'
|
|
( _,'``------''
|
|
`--''
|
|
|
|
</pre>
|
|
<p>
|
|
<var> variable </var> = 1000;
|
|
<samp
|
|
>Traceback (most recent call last):<br />NameError: name 'variabl' is
|
|
not defined</samp
|
|
>
|
|
</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Numbers</th>
|
|
<th>Letters</th>
|
|
<th>Colors</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td>123</td>
|
|
<td>ABC</td>
|
|
<td>RGB</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>A</td>
|
|
<td>Red</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>B</td>
|
|
<td>Green</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>C</td>
|
|
<td>Blue</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>
|
|
A <dfn>definition</dfn> is an explanation of the meaning of a word or
|
|
phrase.
|
|
</p>
|
|
|
|
<details>
|
|
<summary>Summary of content below</summary>
|
|
<p>Content 1</p>
|
|
<p>Content 2</p>
|
|
<p>Content 3</p>
|
|
<p>Content 4</p>
|
|
</details>
|
|
<section>
|
|
<h1>Content</h1>
|
|
<p>Informations about content.</p>
|
|
</section>
|
|
|
|
<progress value="33" max="100"></progress>
|
|
<meter value="11" min="0" max="45" optimum="40">25 out of 45</meter>
|
|
|
|
<p>2+2 = <output>4</output></p>
|
|
|
|
<select>
|
|
<optgroup label="Choice [1-3]">
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</optgroup>
|
|
<optgroup label="Choice [4-6]">
|
|
<option value="4">Four</option>
|
|
<option value="5">Five</option>
|
|
<option value="6">Six</option>
|
|
</optgroup>
|
|
</select>
|
|
|
|
<div>
|
|
<div>
|
|
<p>div > div > p</p>
|
|
</div>
|
|
|
|
<br />
|
|
</div>
|
|
<svg width="100" height="100">
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r="40"
|
|
stroke="green"
|
|
stroke-width="4"
|
|
fill="yellow"
|
|
/>
|
|
</svg>
|
|
|
|
<br />
|
|
|
|
<textarea
|
|
id="textarea"
|
|
name="textarea"
|
|
rows="4"
|
|
cols="50"
|
|
style="max-width: 100%"
|
|
>
|
|
Write something in here
|
|
</textarea>
|
|
|
|
<br />
|
|
|
|
<audio controls>
|
|
I'm sorry. You're browser doesn't support HTML5 <code>audio</code>.
|
|
<source
|
|
src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.ogg"
|
|
type="audio/ogg"
|
|
/>
|
|
<source
|
|
src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.mp3"
|
|
type="audio/mpeg"
|
|
/>
|
|
</audio>
|
|
<p>
|
|
This is a recording of a talk called <cite>Reclaim HTML5</cite> which
|
|
was orinally delieved in Vancouver at a
|
|
<a
|
|
href="http://www.meetup.com/vancouver-javascript-developers/"
|
|
taget="_blank"
|
|
>Super VanJS Meetup</a
|
|
>. It is hosted by
|
|
<a href="https://archive.org/details/ReclaimHtml5" target="_blank"
|
|
>The Internet Archive</a
|
|
>
|
|
and licensed under
|
|
<a
|
|
href="http://creativecommons.org/licenses/by/3.0/legalcode"
|
|
target="_blank"
|
|
>CC 3.0</a
|
|
>.
|
|
</p>
|
|
|
|
<iframe
|
|
src="https://open.spotify.com/embed?uri=spotify%3Atrack%3A67HxeUADW4H3ERfaPW59ma?si=PogFcGg9QqapyoPbn2lVOw"
|
|
width="300"
|
|
height="380"
|
|
frameborder="0"
|
|
allowtransparency="true"
|
|
></iframe>
|
|
|
|
<article>
|
|
<header>
|
|
<h2>Title of Article</h2>
|
|
<span>by Arthur T. Writer</span>
|
|
</header>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
|
|
volutpat sollicitudin nisi, at convallis nunc semper et. Donec
|
|
ultrices odio ac purus facilisis, at mollis urna finibus.
|
|
</p>
|
|
<figure>
|
|
<img
|
|
src="https://placehold.it/600x300"
|
|
alt="placeholder-image"
|
|
style="max-width: 100%"
|
|
/>
|
|
<figcaption>Caption.</figcaption>
|
|
</figure>
|
|
<footer>
|
|
<dl>
|
|
<dt>Published</dt>
|
|
<dd>17 August 2020</dd>
|
|
<dt>Tags</dt>
|
|
<dd>Sample Posts, html example</dd>
|
|
</dl>
|
|
</footer>
|
|
</article>
|
|
|
|
<form>
|
|
<fieldset>
|
|
<legend>Personal Information</legend>
|
|
<label for="name">Name</label><br />
|
|
<input id="name" name="name" /><br />
|
|
<label for="dob">Date of Birth</label><br />
|
|
<input id="dob" name="dob" type="date" />
|
|
</fieldset>
|
|
</form>
|
|
|
|
<aside>
|
|
<p>P inside ASIDE tag</p>
|
|
</aside>
|
|
<map name="shapesmap">
|
|
<area shape="rect" coords="29,32,230,215" href="#square" alt="Square" />
|
|
<area shape="circle" coords="360,130,100" href="#circle" alt="Circle" />
|
|
</map>
|
|
|
|
<img
|
|
src="https://placehold.it/100x100"
|
|
alt="placeholder-image"
|
|
style="max-width: 100%"
|
|
/>
|
|
|
|
<form action="" method="get">
|
|
<label for="browser">Choose your browser from the list:</label>
|
|
<input id="browser" list="browsers" name="browser" />
|
|
<datalist id="browsers">
|
|
<option value="Edge" />
|
|
<option value="Firefox" />
|
|
<option value="Chrome" />
|
|
<option value="Opera" />
|
|
<option value="Safari" />
|
|
</datalist>
|
|
<input type="submit" />
|
|
</form>
|
|
|
|
<footer>
|
|
<address>
|
|
relevant contacts <a href="mailto:mail@example.com">mail</a>.
|
|
</address>
|
|
<div>created by <a href="https://blazardsky.space">@blazardsky</a></div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|