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

357 lines
9.1 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: #79e670;' 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: #79e670' 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: #79e670;' 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: #79e670;' 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>
</div>
<div class="links">
<a class="button" style='color: #c984f7;' href="https://github.com/Tencent/omi/tree/master/packages/preact-css" 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 + Preact</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: #42b983;' href="https://github.com/Tencent/omi/tree/master/packages/omiv" 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>Omiv + Vue</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">2019</span> Tencent
</p>
</div>
</div>
<pre style="position:absolute;left:40px;top:40px;transform:rotateZ(5deg);pointer-events: none;text-transform:none;">
<code>
import { define, render } from 'omi'
class Store {
data = {
count: 1
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
}
define('my-counter', _ => (
&lt;div&gt;
&lt;button onClick={_.store.sub}&gt;-&lt;/button&gt;
&lt;span&gt;{_.store.data.count}&lt;/span&gt;
&lt;button onClick={_.store.add}&gt;+&lt;/button&gt;
&lt;/div&gt;, {
use: ['count']
}
))
render(&lt;my-counter /&gt;, 'body', new Store)
</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 - 800) / 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