master

分支 (3)

管理

管理

master

develop

feature

testing
/
index.html


<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="1.0">
    <meta name="author" content="浙江省文成中学程慧敏">
    <title>OpenBlock-Sample</title>

    <!-- Bootstrap core CSS -->
<link href="static/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="static/css/bootstrap-icons.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .large-header {
            background: url(static/images/apic26689.jpg);
            /*position: fixed;*/
            width: 100%;
            background-size: cover;
            background-position: 50% 50%;
            top: 0px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            background-repeat: no-repeat;
            z-index: 10;
            text-align: center;

        }
    </style>
    <script>

        function openProject(jsonPatn) {
            let IDE_PATH = 'https://www.makeredu.net/openblock/'
            let url =
                IDE_PATH +
                'frontpage/index.html#%7B%22proj%22:%22/testing/' +
                jsonPatn +
                '%22%7D'
            window.open(url)
        }
        $(document).ready(function () {
            var txt=[
            {"name":"打地鼠","url":"canvas/打地鼠/project.json","img":"static/images/dds.png"},{"name":"气候变化","url":"canvas/气候变化可视化/project.json","img":"static/images/qhbh.png"},{"name":"绘制图片","url":"canvas/蹦蹦吹牛/project.json","img":"static/images/20220427-1445.png"},{"name":"可视化数据","url":"canvas/life-expectancy/project.json","img":"static/images/20220427-1446.png"}, {"name":"人生重启模拟器","url":"canvas/lifeRestart/project.json","img":"static/images/lifeRestart.png"},{"name":"越障游戏","url":"canvas/bird/project.json","img":"static/images/bird.png"},{"name":"123木头人", "url":"123woodenboy/123woodenboy.json","img":"static/images/123woodenboy.png"},{"name":"过马路","url":"cross/cross.json","img":"static/images/20220427-1447.png"},{"url":"canvas/反应游戏/project.json","name":"反应游戏","img":"static/images/20220427-1449.png"},{"url":"canvas/stream/project.json","name":"字符串流处理"},{"url":"text.json","name":"文本合成"},{"url":"fsm-door.json","name":"门的状态切换","img":"static/images/20220427-1451.png"},{"url":"text_join/project.json","name":"文本连接"},{"url":"canvas/chart/project.json","name":"柱状图","img":"static/images/20220427-1456.png"},{"url":"canvas/Canvas坐标.json","name":"canvas坐标"},{"url":"function.json","name":"函数样例"},{"url":"函数调用.json","name":"函数样例二"},{"url":"canvas/fillRect/colorRect.json","name":"矩形和文字"},{"url":"delayPrint/project.json","name":"延时消息"},{"url":"changeState.json","name":"状态切换"},{"url":"canvas/chart1/project.json","name":"散点图","img":"static/images/20220427-1501.png"},{"url":"canvas/jump.json","name":"跳一跳","img":"static/images/20220427-1452.png"},{"url":"canvas/Canvas宽高.json","name":"画板宽高","img":"static/images/20220427-1503.png"},{"url":"canvas/fillRect/fillRect.json","name":"矩形动画","img":"static/images/20220427-1502.png"},{"url":"messageArgument/project.json","name":"附加数据"},{"url":"pingpong/project.json","name":"状态机通信","img":"static/images/20220427-1457.png"},{"url":"network/network1.json","name":"多机消息模拟"},{"url":"network/draw.json","name":"协作画板","img":"static/images/20220427-1444.png"}];
            let htmlstr="";
            let imgstr='';
            for(let i in txt){
                if(txt[i]['img']){
                    imgstr='<img src="'+txt[i]['img']+'" class="" height="225" width="100%">';
                }else{
                    imgstr='<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title></title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">'+txt[i]['name']+'</text></svg>';
                }
                htmlstr+='<div class="col-md-3" onclick="openProject(\''+txt[i]['url']+'\')" style="cursor:pointer;"><div class="card mb-3 shadow-sm" onmouseover="this.className=\'card mb-3 shadow-lg\';$(\'.id'+i+'\').addClass(\'bg-info text-white\');" onmouseout="this.className=\'card mb-3 shadow-sm\';$(\'.id'+i+'\').removeClass(\'bg-info text-white\');">'+imgstr+'<div class="card-body text-center id"'+i+' id=""><h5 class="card-text">'+txt[i]['name']+'</h5></div></div> </div>';
            }
            $('.openblocklist').html(htmlstr);
            $(window).scroll(function(){
                var $scroll = $(document).scrollTop()
                if($scroll>30){
                    $(".scrollTo").css('display','');
                }else{
                    $(".scrollTo").css('display','none');
                }

              });
            $('.scrollTo').click(function(){
                scrollTo(0,0);
            })
            })

    </script>
  </head>
  <body>
<header>
  <div class="collapse bg-dark" id="navbarHeader">
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-md-7 py-4">
          <h4 class="text-white">关于OpenBlock</h4>
          <p class="text-muted">OpenBlock是一种专为没有技术背景的非研发人员设计的图形化脚本语言。OpenBlock借鉴少儿编程语言 Scratch 的图形化设计，以完全图形化的方式展现逻辑，并提供大量的图形方式展示逻辑内容，好学、好理解。</p>
        </div>
        <div class="col-sm-4 offset-md-1 py-4">
          <h4 class="text-white">联系我们</h4>
          <ul class="list-unstyled">
            <li><a href="#" class="text-white">duzc2dtw(微信)</a></li>
            <li><a href="https://gitee.com/openblock/openblock/" target="_blank" class="text-white">项目主页</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container d-flex justify-content-between">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <img src="static/images/Open.png" height="40" />
        <!--<strong>Album</strong>-->
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </div>
</header>

<main role="main">
    <div class=" large-header">

  <section class="jumbotron text-center bg-light" style="margin-bottom:0px;background-color:#fff;opacity:0.9">
    <div class="container">
      <h1>OpenBlock</h1>
      <p class="lead text-muted">OpenBlock是一种专为没有技术背景的非研发人员设计的图形化脚本语言。OpenBlock借鉴少儿编程语言 Scratch 的图形化设计，以完全图形化的方式展现逻辑，并提供大量的图形方式展示逻辑内容，好学、好理解。</p>
      <p>
        <a href="https://www.makeredu.net/openblock/frontpage/" target="_blank" class="btn btn-primary btn-lg margin-right-lg"><span class="bi-layout-text-window-reverse"></span> 打开编辑器</a>
        <a href="https://www.makeredu.net/docs/" target="_blank" class="btn btn-info btn-lg"><span class="bi-book"></span> 打开文档</a>
      </p>
    </div>
  </section>

  <div class="album py-5 bg-light"  style="opacity:0.9">
    <div class="container">
        <div class="row openblocklist">
      </div>
    </div>
  </div>
</div>
</main>

<footer class="text-muted" style="margin-top:15px;">
  <div class="container">
    <p class="float-right">
      <!--<a href="https://www.bootcss.com/" target="_blank">本站基于bootstrap设计</a>-->
      本站基于bootstrap设计
    </p>
    <p>网页作者 &copy; 浙江省文成中学程慧敏</p>
    <p>本站素材均来自网络，有版权异议请联系作者删除</p>
  </div>
</footer>


     <script src="static/js/bootstrap.bundle.js"></script>

<div class="position-fixed bottom-0 right-0 p-3 text-center" style="z-index: 5; right: 20px; bottom: 0;cursor:pointer;">
    <div class="scrollTo" style="display:none;">
        <h1 class="bi bi-arrow-up-circle text-info "></h1>
        <p style="text-muted">返回顶部</p>
    </div>

</div>
  </body>
</html>