YzXyh
/
202309U


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							@using CommonTool
@using YZXYH.Repository.Models
@{
    List<MessageWallInfo> msgs = ViewBag.Msgs?? new List<MessageWallInfo>();
    var dataStr = JsonHelper.Instance.Serialize(msgs);
    string isRead = ViewBag.Read ?? "1";
}
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>盐城中学校友会——愿望墙</title>

    <meta name="keywords" content="盐城中学,盐中校友会,校友会,盐中">
    <meta name="description" content="">
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/css/animate.min.css" rel="stylesheet" />
    <script src="~/Content/js/jquery.min.js"></script>
    <script src="~/Content/js/bootstrap.min.js"></script>

    <style>
        body {
            background: linear-gradient(180deg, #3bb3c3, #3bb3c3);
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            color: #000;
            font-family: '微软雅黑', sans-serif;
            font-size: 16px;
            position: relative;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        #msg-box {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left:0;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }
        .item {
            width: 15%;
            min-width: 200px;
            max-width: 400px;
            min-height: 200px;
            max-height: 95vh;
            overflow: hidden;
            border-radius: 10px;
            line-height: 30px;
            padding: 10px;
            box-shadow: 5px 5px 7px #212121;
            box-shadow: 5px 5px 7px rgba(33,33,33,.7);
        }

        .item .title {
            height: 50px;
            padding: 5px 10px;
        }
            .item .avatar {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                display: block;
                float: left;
                background-size: 100%;
            }
        .item .name {
            margin-left: 15px;
            display: block;
            float: left;
            line-height: 35px;
            font-size: 120%;
            font-weight: bold;
        }
        .item .content {
            padding:20px;
            padding-top: 0;
            text-indent: 2em;
            line-height: 25px;
            font-family: "Reenie Beanie",arial,sans-serif;
        }
        .item .image {
            width: 100%;
            height: auto;
            margin: 0 auto;
        }
        /*.item-0 {
            border-top-left-radius: 5px 100px;
            border-top-right-radius: 5px 100px;
            border-bottom-left-radius: 30px 500px;
            border-bottom-right-radius: 500px 20px;
        }
        .item-1 {
            border-bottom-left-radius: 20px 400px;
            border-bottom-right-radius: 500px 30px;
        }
        .item-2 {
            border-bottom-left-radius: 40px 400px;
            border-bottom-right-radius: 500px 30px;
        }
        .item-3 {
            border-bottom-left-radius: 50px 200px;
            border-bottom-right-radius: 500px 30px;
        }
        .item-4 {
            border-bottom-right-radius: 20px 400px;
            border-bottom-left-radius: 500px 30px;
        }*/
        
    </style>
</head>
<body class="">
<canvas id="canvas"></canvas>
    <div id="msg-box" ></div>
    <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script id="msg-push">
      
        var interval = 0, msgData = @(Html.Raw(dataStr)), tPush,$container = $('#msg-box');
        $(function() {
            // 启动全屏!
            draw();
            PushMsg();
            var chat = $.connection.xyhHub;
            chat.client.getMsg = function(msg) {
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data) {
                            //console.log("未推送消息数量：", msgData.length, "新消息：", data);
                            msgData.push(data);
                        } else {
                            console.log("错误消息：",msg);
                        }
                    } catch (e) {
                        console.log("错误消息：",msg);
                        console.log(e);
                    }
                } else {
                    console.log("错误消息：",msg);
                }
            }
        });
   
        function PushMsg() {
            function push() {
                if ($container.children().length>50) {
                    $container.children().first().fadeOut().remove();
                }
                if (msgData && msgData.length > 0) {
                    var msg = msgData.shift();
                    FormatterMsg(msg);
                    if (msgData.length > 30) {
                        clearInterval(tPush);
                        interval = 400;
                        PushMsg();
                    } else if (msgData.length > 20) {
                        clearInterval(tPush);
                        interval = 800;
                        PushMsg();
                    } else if (msgData.length > 5) {
                        clearInterval(tPush);
                        interval = 1200;
                        PushMsg();
                    } else if (msgData.length <= 0) {
                        clearInterval(tPush);
                        interval = 100;
                        PushMsg();
                    } else if (interval !== 2000) {
                        clearInterval(tPush);
                        interval = 2000;
                        PushMsg();
                    }
                    console.log("未显示消息数量：", msgData.length);
                } else {
                    clearInterval(tPush);
                    interval = 100;
                    PushMsg();
                }
            }
            tPush = setInterval(push, interval);
        }
        var colors = ['#ffc', '#cfc', '#ccf'];
        function FormatterMsg(data) {
            if (data) {
                var str = '';
                var img = data.ImagePath ? '<img class="image" src="' + data.ImagePath + '" alt="" />' : '';
                var date = FormatDateTime(parseInt(data.MsgDateTime.replace("/Date(", "").replace(")/", ""), 10));
                str += '<div class="item item-' + parseInt(Math.random() * 5, 10) + '" data-id="' + data.Id + '"  data-type="' + data.MsgType + '" data-date="' + date + '">';
                str += '<div class=title>';
                str += '<span class="avatar" style="background-image:url(\'' + data.Avatar + '\')"></span>';
                //str += '<span class="name">' + date + ' | ' + data.NickName + '</span>';
                str += '<span class="name">'  + data.NickName + '</span>';
                str += '</div>';
                str += '<div class="content">' + data.MsgContent + '</div>';
                str += img;
                str += '</div>';
                var color = colors[parseInt(Math.random() * 3, 10)];
                var deg = parseInt(Math.random() * 10, 10) > 5
                    ? parseInt(Math.random() * 10, 10) + 1
                    : -(parseInt(Math.random() * 10, 10) + 1);
                var item= $(str).css({
                    'background': color,
                    'transform': 'rotate(' + deg + 'deg)'
                }).hide().appendTo($container);
                if (img) {
                    $(item).find('.image').load(function() {
                        item.css({ 'width': '20%'});
                        item.drag();
                    });
                } else {
                    item.drag();
                }
                if ('@(isRead)'==="1") {
                    $.ajax({
                        url: '@Url.Action("Read","MessageWall")',
                        type: 'post',
                        data: { Id: data.Id },
                        success: function(res) {
                            if (!res || !res.Success) {
                                console.log("消息阅读失败：", data.Id);
                            }
                        }     
                    });
                }
            }
        }

        function FormatDateTime(inputTime) {
            var date = new Date(inputTime);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            var second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
        };

        $.connection.hub.start().done(function () {
            console.log("XYH:Signalr已连接服务器！");
        });
       
    </script>

    <script>
        // 定义拖拽函数
        $.fn.drag = function () {

            var $this = $(this);
            var parent = $this.parent();
            var pw = parent.width();
            var ph = parent.height();
            var thisWidth = $this.width() + parseInt($this.css('padding-left'), 10) + parseInt($this.css('padding-right'), 10);
            var thisHeight = $this.height() + parseInt($this.css('padding-top'), 10) + parseInt($this.css('padding-bottom'), 10);
            var x, y, positionX, positionY;
            var isDown = false;
            var borderWidth = 30;
            var randY = parseInt(Math.random() * (ph - thisHeight - borderWidth*2), 10);
            randY = randY > borderWidth ? randY : borderWidth;
            var randX = parseInt(Math.random() * (pw - thisWidth - borderWidth*2), 10);
            randX = randX > borderWidth ? randX : borderWidth;
            //parent.css({
            //    "position": "relative",
            //    "overflow": "hidden"
            //});
            $this.css({
                "cursor": "move",
                "position": "absolute"
            }).css({
                top: randY,
                left: randX
            }).fadeIn(800).mousedown(function (e) {
                parent.children().css({
                    "zIndex": "0"
                });
                $this.css({
                    "zIndex": "1"
                });
                isDown = true;
                x = e.pageX;
                y = e.pageY;
                positionX = $this.position().left;
                positionY = $this.position().top;
                return false;
            });


            $(document).mouseup(function () {
                isDown = false;
            }).mousemove(function (e) {
                var xPage = e.pageX;
                var moveX = positionX + xPage - x;
                var yPage = e.pageY;
                var moveY = positionY + yPage - y;
                if (isDown === true) {
                    $this.css({
                        "left": moveX,
                        "top": moveY
                    });
                } else {
                    return;
                }
                if (moveX < 0) {
                    $this.css({
                        "left": "0"
                    });
                }
                if (moveX > (pw - thisWidth)) {
                    $this.css({
                        "left": pw - thisWidth
                    });
                }
                if (moveY < 0) {
                    $this.css({
                        "top": "0"
                    });
                }
                if (moveY > (ph - thisHeight)) {
                    $this.css({
                        "top": ph - thisHeight
                    });
                }
            });
        };

    </script>
    
<script>

////Based on https://www.youtube.com/watch?v=3CycKKJiwis
var canvas = document.getElementById("canvas");
var mobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight; // Initialize the GL context

var gl = canvas.getContext('webgl');

if (!gl) {
  console.error("Unable to initialize WebGL.");
}

var layers_ = 10;

if (mobile) {
  layers_ = 6;
} //Time step


var dt = 0.015; //Time

var time = 0.0; //************** Shader sources **************

var vertexSource = "\n\nattribute vec2 position;\nvoid main() {\n\tgl_Position = vec4(position, 0.0, 1.0);\n}\n";
var fragmentSource = "\nprecision highp float;\n\nuniform float width;\nuniform float height;\nvec2 resolution = vec2(width, height);\n\nuniform float time;\nfloat random(vec2 par){\n   return fract(sin(dot(par.xy,vec2(12.9898,78.233))) * 43758.5453);\n}\n\nvec2 random2(vec2 par){\n\tfloat rand = random(par);\n\treturn vec2(rand, random(par+rand));\n}\n\n//https://www.shadertoy.com/view/3s3GDn\nfloat getGlow(float dist, float radius, float intensity){\n    return pow(radius/dist, intensity);\n}\n\nvoid main(){\n\t\n\tfloat t = 1.0 + time * 0.05;\n  const float layers = float(" + layers_ + ");\n  float scale = 32.0;\n  float depth;\n  float phase;\n  float rotationAngle = time * -0.1;\n  float size;\n  float glow;\n  //Iteration step size for outermost loop\n  const float del = 1.0/layers;\n    \n  vec2 uv;\n  //Value of floor(uv)\n  vec2 fl;\n  vec2 local_uv;\n  vec2 index;\n  vec2 pos;\n  //Seed for random values\n  vec2 seed;\n  vec2 centre;    \n  //The indices of 3x3 cells surrounding the fragment\n  vec2 cell;\n  //To move the focus of the camera in a circle\n  vec2 rot = vec2(cos(t), sin(t));\n    \n  //To rotate layers\n  mat2 rotation = mat2(cos(rotationAngle), -sin(rotationAngle), \n                         sin(rotationAngle),  cos(rotationAngle));\n \tvec3 col = vec3(0);\n  vec3 tone;\n    \n  //For all layers\n  for(float i = 0.0; i <= 1.0; i+=del){\n  \t//Find depth from layer index and move it in time\n    depth = fract(i + t);\n        \n    //Move centre in a circle depending on the depth of the layer\n    centre = rot * 0.2 * depth + 0.5;\n        \n    //Get uv from the fragment coordinates, rotation and depth\n   \tuv = centre-gl_FragCoord.xy/resolution.x;\n    uv *= rotation;\n   \tuv *= mix(scale, 0.0, depth);\n    fl = floor(uv);\n    //The local cell coordinates. uv-fl == frac(uv)\n    local_uv = uv - fl - 0.5;\n\n        \n    //For a 3x3 group of cells around the fragment, find the \n\t\t//distance from the points of each to the current fragment \n\t\t//and draw an accumulative glow accordingly\n    for(float j = -1.0; j <= 1.0; j++){\n    \tfor(float k = -1.0; k <= 1.0; k++){\n     \t\tcell = vec2(j,k);\n            \n        index = fl + cell;\n        \n        //Cell seed\n       \tseed = 128.0 * i + index;\n                \n        //Get a random position in relation to the considered cell\n        pos = cell + 0.9 * (random2(seed) - 0.5);\n        \n        //Get a random phase\n        phase = 128.0 * random(seed);\n        //Get colour from cell information\n        tone = vec3(random(seed), random(seed + 1.0), random(seed + 2.0));\n        \n        //Get distance to the generated point, fade distant points\n        //and make glow radius pulse in time\n        size = (0.1 + 0.5 + 0.5 * sin(phase * t)) * depth;\n        glow = size * getGlow(length(local_uv-pos), 0.09, 2.0);\n        //Add white core and glow\n        col += 5.0 * vec3(0.02 * glow) + tone * glow;\n    \t}\n  \t}\n\t}\n    \n  //Tone mapping\n  col = 1.0 - exp(-col);\n    \n  //Output to screen\n\tgl_FragColor = vec4(col,1.0);\n}\n"; //************** Utility functions **************

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.uniform1f(widthHandle, window.innerWidth);
  gl.uniform1f(heightHandle, window.innerHeight);
} //Compile shader and combine with source


function compileShader(shaderSource, shaderType) {
  var shader = gl.createShader(shaderType);
  gl.shaderSource(shader, shaderSource);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
  }

  return shader;
} //From https://codepen.io/jlfwong/pen/GqmroZ
//Utility to complain loudly if we fail to find the attribute/uniform


function getAttribLocation(program, name) {
  var attributeLocation = gl.getAttribLocation(program, name);

  if (attributeLocation === -1) {
    throw 'Cannot find attribute ' + name + '.';
  }

  return attributeLocation;
}

function getUniformLocation(program, name) {
  var attributeLocation = gl.getUniformLocation(program, name);

  if (attributeLocation === -1) {
    throw 'Cannot find uniform ' + name + '.';
  }

  return attributeLocation;
} //************** Create shaders **************
//Create vertex and fragment shaders


var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER); //Create shader programs

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program); //Set up rectangle covering entire canvas 

var vertexData = new Float32Array([-1.0, 1.0, // top left
-1.0, -1.0, // bottom left
1.0, 1.0, // top right
1.0, -1.0 // bottom right
]); //Create vertex buffer

var vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW); // Layout of our data in the vertex buffer

var positionHandle = getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionHandle);
gl.vertexAttribPointer(positionHandle, 2, // position is a vec2 (2 values per component)
gl.FLOAT, // each component is a float
false, // don't normalize values
2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes)
0 // how many bytes inside the buffer to start from
); //Set uniform handle

var timeHandle = getUniformLocation(program, 'time');
var widthHandle = getUniformLocation(program, 'width');
var heightHandle = getUniformLocation(program, 'height');
gl.uniform1f(widthHandle, window.innerWidth);
gl.uniform1f(heightHandle, window.innerHeight);

function draw() {
  //Update time
  time += dt; //Send uniforms to program

  gl.uniform1f(timeHandle, time); //Draw a triangle strip connecting vertices 0-4

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  requestAnimationFrame(draw);
}

</script>
</body>
</html>