DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
omi/index.html

410 lines
12 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Omi - Front End Cross-Frameworks Framework</title>
<link rel="shortcut icon" href="https://tencent.github.io/omi/packages/omiu/examples/build/favicon.ico">
<style>
html,
body {
padding: 0;
margin: 0;
overflow-x: hidden;
}
canvas {
padding: 0;
margin: 0;
border: 0;
}
#container {
text-align: center;
}
</style>
<style>
body {
background-color: #302f33;
/*opacity: 0;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*body.ready { opacity: 1; }*/
.icon-text path,
.icon-text polygon {
/*opacity: 0;*/
}
.info {
text-align: center;
}
.description {
/*opacity: 0;*/
color: white;
margin-top: 20px;
}
.links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (min-width: 700px) {
.links {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
.button {
/*opacity: 0;*/
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 180px;
height: 60px;
text-decoration: none;
}
.button.blue {
color: #5E89FB;
}
.button.green {
color: #07C160;
}
.button.red {
color: #F95050;
}
.button svg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
stroke-width: 1;
fill: none;
fill-rule: evenodd;
stroke: currentColor;
}
.button.green svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.button path {
scale: .9;
transform-origin: 50% 50%;
}
.credits {
/*opacity: 0;*/
margin-top: 20px;
color: #979797;
}
.credits a {
position: relative;
color: currentColor;
text-decoration: none;
}
.credits a:after {
content: "";
/*opacity: 0;*/
display: block;
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
border-bottom: 1px solid currentColor;
transition: opacity .75s ease;
}
/*.credits a:hover:after {
opacity: 1;
transition: opacity .25s ease;
}*/
.credits a,
.credits span {
transition: color .75s ease;
}
.credits a:hover,
.highlighted {
color: white;
transition: color .25s ease;
}
#container {
margin-top: 100px;
}
#container img {
width: 150px;
}
@media only screen and (max-width: 500px) {
#container canvas {
width: 100%;
}
#container img {
width: 80px;
}
#container {
margin-top: 25px;
}
}
#wp {
z-index: 10;
}
</style>
</head>
<body>
<div id="wp">
<div id="container">
<img src="https://tencent.github.io/omi/assets/omi-logo2019.svg">
</div>
<div class="info">
<p class="description">
Front End Cross-Frameworks Framework
</p>
<div class="links">
<a class="button" style='color: #07c160;' href="https://tencent.github.io/omi/site/docs/index.html"
target="_blank">
<svg viewBox="0 0 180 60">
<path
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
</path>
</svg>
<span>Omi Docs</span>
</a>
<a class="button" style='color: #07c160;' href="https://tencent.github.io/omi/components/docs/" target="_blank">
<svg viewBox="0 0 180 60">
<path
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
</path>
</svg>
<span>Omiu Docs</span>
</a>
<a class="button" style='color: #5bbebd;' href="https://components.studio/" target="_blank">
<svg viewBox="0 0 180 60">
<path
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
</path>
</svg>
<span style="transform:scale(0.9) ">Components.Studio</span>
</a>
<a class="button " style='color: #42b983;' href="https://webcomponents.dev/" target="_blank">
<svg viewBox="0 0 180 60">
<path
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
</path>
</svg>
<span style="transform: scale(0.9);">webcomponents.dev</span>
</a>
</div>
<div class="links">
<a class="button" style='color: #07c160;' href="https://github.com/Tencent/omi/tree/master/packages/omi-kbone"
target="_blank">
<svg viewBox="0 0 180 60">
<path
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
</path>
</svg>
<span>Omi + Kbone</span>
</a>
<a class="button" style='color: #07c160;' href="https://github.com/Tencent/omi/tree/master/packages/omix"
target="_blank">
<svg viewBox="0 0 180 60">
<path
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
</path>
</svg>
<span>Omix + 小程序</span>
</a>
<!--
<a class="button" style='color: #6cb0f5'
href="https://tencent.github.io/omi/packages/omim/docs/build/index.html" target="_blank">
<svg viewBox="0 0 180 60">
<path
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
</path>
</svg>
<span>Omim Docs</span>
</a> -->
<a class="button" style='color: #61dafb;' href="https://github.com/Tencent/omi/tree/master/packages/omis"
target="_blank">
<svg viewBox="0 0 180 60">
<path
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
</path>
</svg>
<span>Omis + React</span>
</a>
<a class="button" style='color:white;' href="https://github.com/Tencent/omi" target="_blank">
<svg viewBox="0 0 180 60">
<path
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
</path>
</svg>
<span>GitHub</span>
</a>
</div>
<p class="credits">
Copyright<span class="version"></span> © <span class="date">2021</span> Tencent
</p>
</div>
</div>
<pre style="position:absolute;left:40px;top:40px;transform:rotateZ(5deg);pointer-events: none;text-transform:none;">
<code>
import { tag, WeElement, h, extractClass } from 'omi'
import * as css from './index.scss'
interface Props {
size?: 'medium' | 'small' | 'mini',
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
plain?: boolean,
round?: boolean,
circle?: boolean,
loading?: boolean,
disabled?: boolean,
icon?: string,
autofocus?: boolean,
nativeType?: 'button' | 'submit' | 'reset',
block?: boolean
text?: string
}
@tag('o-button')
export default class Button extends WeElement&lt;Props&gt;{
static css = css
static defaultProps = {
plain: false,
round: false,
circle: false,
loading: false,
disabled: false,
autofocus: false,
nativeType: 'button',
block: false
}
static propTypes = {
size: String,
type: String,
plain: Boolean,
round: Boolean,
circle: Boolean,
loading: Boolean,
disabled: Boolean,
icon: String,
autofocus: Boolean,
nativeType: String,
block: Boolean,
text: String
}
render(props) {
return &lt;button disabled={props.disabled} {...extractClass(props, 'o-button', {
['o-button-' + props.type]: props.type,
['o-button-' + props.size]: props.size,
'is-plain': props.plain,
'is-round': props.round,
'is-circle': props.circle,
'is-disabled': props.disabled,
'is-block': props.block
})} type={props.nativeType} &gt;
{props.loading && &lt;i class='icon-loading'&gt;&lt;/i&gt;}
{props.text}
&lt;slot&gt;&lt;/slot&gt;
&lt;/button&gt;
}
}</code>
</pre>
<script>
function detectMobile() {
if (window.innerWidth <= 800 && window.innerHeight <= 900) {
return true;
} else {
return false;
}
}
if (detectMobile()) {
document.getElementById('wp').style.marginTop = (window.innerHeight - 600) / 2 + 'px'
} else {
document.getElementById('wp').style.marginTop = (window.innerHeight - 700) / 2 + 'px'
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink