@onthewaytothesun

Снежок для Taplink

2024-11-26T08:40:56.358Z

Первая версия:

Код:

<script>
/** @license
 * DHTML Snowstorm! JavaScript-based snow for web pages
 * Making it snow on the internets since 2003. You're welcome.
 * -----------------------------------------------------------
 * Version 1.44.20131208 (Previous rev: 1.44.20131125)
 * Copyright (c) 2007, Scott Schiller. All rights reserved.
 * Code provided under the BSD License
 * http://schillmania.com/projects/snowstorm/license.txt
 */

/*jslint nomen: true, plusplus: true, sloppy: true, vars: true, white: true */
/*global window, document, navigator, clearInterval, setInterval */

var snowStorm = (function(window, document) {

  // --- common properties ---

  this.autoStart = true;          // Whether the snow should start automatically or not.
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) Enable at your own risk.
  this.flakesMax = 128;           // Limit total amount of snow made (falling + sticking)
  this.flakesMaxActive = 64;      // Limit amount of snow falling at once (less = lower CPU use)
  this.animationInterval = 50;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
  this.useGPU = true;             // Enable transform-based hardware acceleration, reduce CPU load.
  this.className = null;          // CSS class name for further customization on snow elements
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice.
  this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
  this.followMouse = false;        // Snow movement can respond to the user's mouse
  this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
  this.snowCharacter = '&bull;';  // &bull; = bullet, &middot; is square on some systems etc.
  this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
  this.targetElement = null;      // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference
  this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
  this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
  this.usePositionFixed = false;  // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported
  this.usePixelPosition = false;  // Whether to use pixel values for snow top/left vs. percentages. Auto-enabled if body is position:relative or targetElement is specified.

  // --- less-used bits ---

  this.freezeOnBlur = true;       // Only snow when the window is in focus (foreground.) Saves CPU.
  this.flakeLeftOffset = 0;       // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.
  this.flakeRightOffset = 0;      // Right margin/gutter space on edge of container
  this.flakeWidth = 8;            // Max pixel width reserved for snow element
  this.flakeHeight = 8;           // Max pixel height reserved for snow element
  this.vMaxX = 5;                 // Maximum X velocity range for snow
  this.vMaxY = 4;                 // Maximum Y velocity range for snow
  this.zIndex = 0;                // CSS stacking order applied to each snowflake

  // --- "No user-serviceable parts inside" past this point, yadda yadda ---

  var storm = this,
  features,
  // UA sniffing and backCompat rendering mode checks for fixed position, etc.
  isIE = navigator.userAgent.match(/msie/i),
  isIE6 = navigator.userAgent.match(/msie 6/i),
  isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i),
  isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),
  noFixed = (isBackCompatIE || isIE6),
  screenX = null, screenX2 = null, screenY = null, scrollY = null, docHeight = null, vRndX = null, vRndY = null,
  windOffset = 1,
  windMultiplier = 2,
  flakeTypes = 6,
  fixedForEverything = false,
  targetElementIsRelative = false,
  opacitySupported = (function(){
    try {
      document.createElement('div').style.opacity = '0.5';
    } catch(e) {
      return false;
    }
    return true;
  }()),
  didInit = false,
  docFrag = document.createDocumentFragment();

  features = (function() {

    var getAnimationFrame;

    /**
     * hat tip: paul irish
     * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
     * https://gist.github.com/838785
     */

    function timeoutShim(callback) {
      window.setTimeout(callback, 1000/(storm.animationInterval || 20));
    }

    var _animationFrame = (window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        timeoutShim);

    // apply to window, avoid "illegal invocation" errors in Chrome
    getAnimationFrame = _animationFrame ? function() {
      return _animationFrame.apply(window, arguments);
    } : null;

    var testDiv;

    testDiv = document.createElement('div');

    function has(prop) {

      // test for feature support
      var result = testDiv.style[prop];
      return (result !== undefined ? prop : null);

    }

    // note local scope.
    var localFeatures = {

      transform: {
        ie:  has('-ms-transform'),
        moz: has('MozTransform'),
        opera: has('OTransform'),
        webkit: has('webkitTransform'),
        w3: has('transform'),
        prop: null // the normalized property value
      },

      getAnimationFrame: getAnimationFrame

    };

    localFeatures.transform.prop = (
      localFeatures.transform.w3 || 
      localFeatures.transform.moz ||
      localFeatures.transform.webkit ||
      localFeatures.transform.ie ||
      localFeatures.transform.opera
    );

    testDiv = null;

    return localFeatures;

  }());

  this.timer = null;
  this.flakes = [];
  this.disabled = false;
  this.active = false;
  this.meltFrameCount = 20;
  this.meltFrames = [];

  this.setXY = function(o, x, y) {

    if (!o) {
      return false;
    }

    if (storm.usePixelPosition || targetElementIsRelative) {

      o.style.left = (x - storm.flakeWidth) + 'px';
      o.style.top = (y - storm.flakeHeight) + 'px';

    } else if (noFixed) {

      o.style.right = (100-(x/screenX*100)) + '%';
      // avoid creating vertical scrollbars
      o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

    } else {

      if (!storm.flakeBottom) {

        // if not using a fixed bottom coordinate...
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.bottom = (100-(y/screenY*100)) + '%';

      } else {

        // absolute top.
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

      }

    }

  };

  this.events = (function() {

    var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice,
    evt = {
      add: (old?'attachEvent':'addEventListener'),
      remove: (old?'detachEvent':'removeEventListener')
    };

    function getArgs(oArgs) {
      var args = slice.call(oArgs), len = args.length;
      if (old) {
        args[1] = 'on' + args[1]; // prefix
        if (len > 3) {
          args.pop(); // no capture
        }
      } else if (len === 3) {
        args.push(false);
      }
      return args;
    }

    function apply(args, sType) {
      var element = args.shift(),
          method = [evt[sType]];
      if (old) {
        element[method](args[0], args[1]);
      } else {
        element[method].apply(element, args);
      }
    }

    function addEvent() {
      apply(getArgs(arguments), 'add');
    }

    function removeEvent() {
      apply(getArgs(arguments), 'remove');
    }

    return {
      add: addEvent,
      remove: removeEvent
    };

  }());

  function rnd(n,min) {
    if (isNaN(min)) {
      min = 0;
    }
    return (Math.random()*n)+min;
  }

  function plusMinus(n) {
    return (parseInt(rnd(2),10)===1?n*-1:n);
  }

  this.randomizeWind = function() {
    var i;
    vRndX = plusMinus(rnd(storm.vMaxX,0.2));
    vRndY = rnd(storm.vMaxY,0.2);
    if (this.flakes) {
      for (i=0; i<this.flakes.length; i++) {
        if (this.flakes[i].active) {
          this.flakes[i].setVelocities();
        }
      }
    }
  };

  this.scrollHandler = function() {
    var i;
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
    scrollY = (storm.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || (noFixed ? document.body.scrollTop : 0), 10));
    if (isNaN(scrollY)) {
      scrollY = 0; // Netscape 6 scroll fix
    }
    if (!fixedForEverything && !storm.flakeBottom && storm.flakes) {
      for (i=0; i<storm.flakes.length; i++) {
        if (storm.flakes[i].active === 0) {
          storm.flakes[i].stick();
        }
      }
    }
  };

  this.resizeHandler = function() {
    if (window.innerWidth || window.innerHeight) {
      screenX = window.innerWidth - 16 - storm.flakeRightOffset;
      screenY = (storm.flakeBottom || window.innerHeight);
    } else {
      screenX = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!isIE ? 8 : 0) - storm.flakeRightOffset;
      screenY = storm.flakeBottom || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
    }
    docHeight = document.body.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
  };

  this.resizeHandlerAlt = function() {
    screenX = storm.targetElement.offsetWidth - storm.flakeRightOffset;
    screenY = storm.flakeBottom || storm.targetElement.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
    docHeight = document.body.offsetHeight;
  };

  this.freeze = function() {
    // pause animation
    if (!storm.disabled) {
      storm.disabled = 1;
    } else {
      return false;
    }
    storm.timer = null;
  };

  this.resume = function() {
    if (storm.disabled) {
       storm.disabled = 0;
    } else {
      return false;
    }
    storm.timerInit();
  };

  this.toggleSnow = function() {
    if (!storm.flakes.length) {
      // first run
      storm.start();
    } else {
      storm.active = !storm.active;
      if (storm.active) {
        storm.show();
        storm.resume();
      } else {
        storm.stop();
        storm.freeze();
      }
    }
  };

  this.stop = function() {
    var i;
    this.freeze();
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'none';
    }
    storm.events.remove(window,'scroll',storm.scrollHandler);
    storm.events.remove(window,'resize',storm.resizeHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.remove(document,'focusout',storm.freeze);
        storm.events.remove(document,'focusin',storm.resume);
      } else {
        storm.events.remove(window,'blur',storm.freeze);
        storm.events.remove(window,'focus',storm.resume);
      }
    }
  };

  this.show = function() {
    var i;
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'block';
    }
  };

  this.SnowFlake = function(type,x,y) {
    var s = this;
    this.type = type;
    this.x = x||parseInt(rnd(screenX-20),10);
    this.y = (!isNaN(y)?y:-rnd(screenY)-12);
    this.vX = null;
    this.vY = null;
    this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
    this.vAmp = this.vAmpTypes[this.type] || 1;
    this.melting = false;
    this.meltFrameCount = storm.meltFrameCount;
    this.meltFrames = storm.meltFrames;
    this.meltFrame = 0;
    this.twinkleFrame = 0;
    this.active = 1;
    this.fontSize = (10+(this.type/5)*10);
    this.o = document.createElement('div');
    this.o.innerHTML = storm.snowCharacter;
    if (storm.className) {
      this.o.setAttribute('class', storm.className);
    }
    this.o.style.color = storm.snowColor;
    this.o.style.position = (fixedForEverything?'fixed':'absolute');
    if (storm.useGPU && features.transform.prop) {
      // GPU-accelerated snow.
      this.o.style[features.transform.prop] = 'translate3d(0px, 0px, 0px)';
    }
    this.o.style.width = storm.flakeWidth+'px';
    this.o.style.height = storm.flakeHeight+'px';
    this.o.style.fontFamily = 'arial,verdana';
    this.o.style.cursor = 'default';
    this.o.style.overflow = 'hidden';
    this.o.style.fontWeight = 'normal';
    this.o.style.zIndex = storm.zIndex;
    docFrag.appendChild(this.o);

    this.refresh = function() {
      if (isNaN(s.x) || isNaN(s.y)) {
        // safety check
        return false;
      }
      storm.setXY(s.o, s.x, s.y);
    };

    this.stick = function() {
      if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {
        s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
      } else if (storm.flakeBottom) {
        s.o.style.top = storm.flakeBottom+'px';
      } else {
        s.o.style.display = 'none';
        s.o.style.bottom = '0%';
        s.o.style.position = 'fixed';
        s.o.style.display = 'block';
      }
    };

    this.vCheck = function() {
      if (s.vX>=0 && s.vX<0.2) {
        s.vX = 0.2;
      } else if (s.vX<0 && s.vX>-0.2) {
        s.vX = -0.2;
      }
      if (s.vY>=0 && s.vY<0.2) {
        s.vY = 0.2;
      }
    };

    this.move = function() {
      var vX = s.vX*windOffset, yDiff;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
        s.x = 0;
      } else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) {
        s.x = screenX-storm.flakeWidth-1; // flakeWidth;
      }
      s.refresh();
      yDiff = screenY+scrollY-s.y+storm.flakeHeight;
      if (yDiff<storm.flakeHeight) {
        s.active = 0;
        if (storm.snowStick) {
          s.stick();
        } else {
          s.recycle();
        }
      } else {
        if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
          // ~1/1000 chance of melting mid-air, with each frame
          s.melting = true;
          s.melt();
          // only incrementally melt one frame
          // s.melting = false;
        }
        if (storm.useTwinkleEffect) {
          if (s.twinkleFrame < 0) {
            if (Math.random() > 0.97) {
              s.twinkleFrame = parseInt(Math.random() * 8, 10);
            }
          } else {
            s.twinkleFrame--;
            if (!opacitySupported) {
              s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible');
            } else {
              s.o.style.opacity = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 0 : 1);
            }
          }
        }
      }
    };

    this.animate = function() {
      // main animation loop
      // move, check status, die etc.
      s.move();
    };

    this.setVelocities = function() {
      s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
      s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
    };

    this.setOpacity = function(o,opacity) {
      if (!opacitySupported) {
        return false;
      }
      o.style.opacity = opacity;
    };

    this.melt = function() {
      if (!storm.useMeltEffect || !s.melting) {
        s.recycle();
      } else {
        if (s.meltFrame < s.meltFrameCount) {
          s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
          s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
          s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
          s.meltFrame++;
        } else {
          s.recycle();
        }
      }
    };

    this.recycle = function() {
      s.o.style.display = 'none';
      s.o.style.position = (fixedForEverything?'fixed':'absolute');
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
      s.meltFrame = 0;
      s.melting = false;
      s.setOpacity(s.o,1);
      s.o.style.padding = '0px';
      s.o.style.margin = '0px';
      s.o.style.fontSize = s.fontSize+'px';
      s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
      s.o.style.textAlign = 'center';
      s.o.style.verticalAlign = 'baseline';
      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
      s.refresh();
      s.o.style.display = 'block';
      s.active = 1;
    };

    this.recycle(); // set up x/y coords etc.
    this.refresh();

  };

  this.snow = function() {
    var active = 0, flake = null, i, j;
    for (i=0, j=storm.flakes.length; i<j; i++) {
      if (storm.flakes[i].active === 1) {
        storm.flakes[i].move();
        active++;
      }
      if (storm.flakes[i].melting) {
        storm.flakes[i].melt();
      }
    }
    if (active<storm.flakesMaxActive) {
      flake = storm.flakes[parseInt(rnd(storm.flakes.length),10)];
      if (flake.active === 0) {
        flake.melting = true;
      }
    }
    if (storm.timer) {
      features.getAnimationFrame(storm.snow);
    }
  };

  this.mouseMove = function(e) {
    if (!storm.followMouse) {
      return true;
    }
    var x = parseInt(e.clientX,10);
    if (x<screenX2) {
      windOffset = -windMultiplier+(x/screenX2*windMultiplier);
    } else {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
    }
  };

  this.createSnow = function(limit,allowInactive) {
    var i;
    for (i=0; i<limit; i++) {
      storm.flakes[storm.flakes.length] = new storm.SnowFlake(parseInt(rnd(flakeTypes),10));
      if (allowInactive || i>storm.flakesMaxActive) {
        storm.flakes[storm.flakes.length-1].active = -1;
      }
    }
    storm.targetElement.appendChild(docFrag);
  };

  this.timerInit = function() {
    storm.timer = true;
    storm.snow();
  };

  this.init = function() {
    var i;
    for (i=0; i<storm.meltFrameCount; i++) {
      storm.meltFrames.push(1-(i/storm.meltFrameCount));
    }
    storm.randomizeWind();
    storm.createSnow(storm.flakesMax); // create initial batch
    storm.events.add(window,'resize',storm.resizeHandler);
    storm.events.add(window,'scroll',storm.scrollHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.add(document,'focusout',storm.freeze);
        storm.events.add(document,'focusin',storm.resume);
      } else {
        storm.events.add(window,'blur',storm.freeze);
        storm.events.add(window,'focus',storm.resume);
      }
    }
    storm.resizeHandler();
    storm.scrollHandler();
    if (storm.followMouse) {
      storm.events.add(isIE?document:window,'mousemove',storm.mouseMove);
    }
    storm.animationInterval = Math.max(20,storm.animationInterval);
    storm.timerInit();
  };

  this.start = function(bFromOnLoad) {
    if (!didInit) {
      didInit = true;
    } else if (bFromOnLoad) {
      // already loaded and running
      return true;
    }
    if (typeof storm.targetElement === 'string') {
      var targetID = storm.targetElement;
      storm.targetElement = document.getElementById(targetID);
      if (!storm.targetElement) {
        throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
      }
    }
    if (!storm.targetElement) {
      storm.targetElement = (document.body || document.documentElement);
    }
    if (storm.targetElement !== document.documentElement && storm.targetElement !== document.body) {
      // re-map handler to get element instead of screen dimensions
      storm.resizeHandler = storm.resizeHandlerAlt;
      //and force-enable pixel positioning
      storm.usePixelPosition = true;
    }
    storm.resizeHandler(); // get bounding box elements
    storm.usePositionFixed = (storm.usePositionFixed && !noFixed && !storm.flakeBottom); // whether or not position:fixed is to be used
    if (window.getComputedStyle) {
      // attempt to determine if body or user-specified snow parent element is relatlively-positioned.
      try {
        targetElementIsRelative = (window.getComputedStyle(storm.targetElement, null).getPropertyValue('position') === 'relative');
      } catch(e) {
        // oh well
        targetElementIsRelative = false;
      }
    }
    fixedForEverything = storm.usePositionFixed;
    if (screenX && screenY && !storm.disabled) {
      storm.init();
      storm.active = true;
    }
  };

  function doDelayedStart() {
    window.setTimeout(function() {
      storm.start(true);
    }, 20);
    // event cleanup
    storm.events.remove(isIE?document:window,'mousemove',doDelayedStart);
  }

  function doStart() {
    if (!storm.excludeMobile || !isMobile) {
      doDelayedStart();
    }
    // event cleanup
    storm.events.remove(window, 'load', doStart);
  }

  // hooks for starting the snow
  if (storm.autoStart) {
    storm.events.add(window, 'load', doStart, false);
  }

  return this;

}(window, document));

</script>

Вторая версия:

Демо: https://tap.one-way.dev/p/f0f613/

Код:

<link rel="stylesheet" href="https://school.one-way.dev/chtm/tgproxy/xmas/puresnow.css">
<script src="https://school.one-way.dev/chtm/tgproxy/xmas/puresnow.js?v1" defer></script>
<style>
  #snow {    position: relative;
    z-index: 100;
    pointer-events: none;}
</style>

Если нужно, чтобы во втором коде снежинки не перекрывали собой блоки, нужно вместо 100 в z-index кода сделать цифру меньше

Как сделать страницу с редиректом в taplink

2024-11-24T17:07:36.520Z

Важно: владельцы taplink не одобряют создание JavaScript-редиректов, их использование может привести к проблемам с аккаунтом

Делаем свой код редиректа

Для редиректа необходимо взять за основу подобный код:

document.addEventListener("DOMContentLoaded", function(){
window.location.href="https://google.com"
})

И поменять ссылку вместо google.com на свою

Шифруем код от Taplink

После этого необходимо обфусцировать код, чтобы taplink его не расшифровал и не удалил редирект.

Переходим на сайт обфускатора и вставляем код

Нажимает Obfuscate. В чекбоксе "Compact" нужно не ставить галочку, иначе код некрасиво перестроится в одну строчку

Вставка в Taplink

В Taplink добавляем HTML-блок на странице и вставляем туда обфусцированный код, обособив его тегами <script>

<script>
*тут обфусцированный код*
</script>

Как с помощью бесплатного сервера рассчитать учеников по порядку

2024-09-02T18:36:39.130Z

Поднять сервер -> Использовать код

Этот способ применялся на практике следующим образом: ученикам выдали некие номера от 1 до числа участников, а потом через рандомайзер в прямом эфире выбрали номер победителя. Возможно, вы найдете ему и другое применение, однако как минимум для таких розыгрышей он неплохо подойдет

1. Создайте таблицу и сервер в App Script по инструкции по поднятию сервера. Остановитесь на пункте 3, где мы могли вставить код:

2. Вставьте код:

function doGet(e) {
  // Открываем активную таблицу и выбираем активный лист
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  
  // Получаем количество строк (для определения автоинкремента)
  var lastRow = sheet.getLastRow();
  
  // Определяем новое значение автоинкремента
  var newId = lastRow > 0 ? sheet.getRange(lastRow, 1).getValue() + 1 : 1;
  
  // Получаем текущую дату
  var currentDate = new Date();
  
  // Получаем userID из GET-параметра
  var userID = e.parameter.userID || "No ID provided";
  
  // Добавляем новую строку
  sheet.appendRow([newId, currentDate, userID]);
  
  // Возвращаем значение автоинкремента
  return ContentService.createTextOutput(newId.toString());
}

3. Разверните проект по инструкции с этим кодом. Если у вас уже был развернут проект по инструкции, вы можете переразвернуть его с имеющимся кодом. Для этого нажмите "управление развертываниями"

... затем "редактировать"

и "новая версия". Когда выберите новую

4. Копируйте ссылку под надписью "Веб-приложение"

Теперь допишите к этой ссылке гет-параметр с переменной геткурса, чтобы можно было передавать пользовательский айди. Если процесс по заказу, то выглядеть будет так:

https://script.google.com/macros/s/AKfycbxMfqQPK4dHB0zUOYnHI8Csst29y-ehTyVYID3YIUcnmoB6BT2JUzicQLua_pqxAuG3/exec?userID={object.user.uid}

Если процесс по пользователю, то получится что-то типа такого:

https://script.google.com/macros/s/AKfycbxMfqQPK4dHB0zUOYnHI8Csst29y-ehTyVYID3YIUcnmoB6BT2JUzicQLua_pqxAuG3/exec?userID={object.uid}

5. В процессе не забудьте выбрать опцию "сохранить ответ в допполе"

Протестируйте процесс, поставив галочку "выполнять по-настоящему"

В табличке появится новая запись с датой. После тестирования удалите заполненные строки, и тогда отсчет вновь пойдет с единицы

Кнопка "Поделиться" для месседжеров в Taplink

2024-07-03T10:13:39.807Z

Этот код дает пользователям мобильных телефонов возможность делиться ссылкой на страницу

Функция "поделиться"

Пример работы: https://tap.one-way.dev/p/e5eea1/

Добавьте общий скрипт в блок "HTML-код"

<script>
window.sharePage = async () => {
    if (navigator.share) {
        try {
            const url = window.location.href;
            await navigator.share({
                title: 'Поделиться ссылкой',
                url: url
            });
        } catch (error) {
            alert('Не удалось поделиться страницей: ' + error);
        }
    }
};
document.addEventListener('DOMContentLoaded', () => {
    // Проверяем, поддерживается ли Web Share API
    if (!navigator.share) {
        // Если не поддерживается, получаем все ссылки
        const links = document.querySelectorAll('a[href*="javascript:window.sharePage()"]');

        // Проходим по каждой ссылке и устанавливаем ей display: none
        links.forEach(link => {
            link.closest('.block-item').style.display = 'none';
        });
    }
});

</script>

При желании можете заменить текст "Поделиться ссылкой" на любой свой текст

Добавление ссылки

Теперь вы можете добавить специальный код в кнопку в место ссылки, чтобы клик по ней вызывал функцию "поделиться"

Настройки блока ссылки

Код для ссылки:

javascript:window.sharePage();

На устройствах, которые не поддерживают share (например, персональные компьютеры и ноутбуки), кнопки будут скрываться автоматически

Важно!

Не забудьте настроить SEO-параметры страницы, чтобы ссылки в месседжерах выглядели красиво

SEO-параметры страницы Taplink для месседжеров

2024-07-03T10:13:21.651Z

Если вы присылаете ссылку на свой Taplink в месседжеры, они добавляют в сообщение специальные элементы, такие как заголовок, описание и картинка. По умолчанию это может быть главный заголовок вашей страницы и аватарка, что может не соответствовать потребностям бизнеса.

Вы можете настроить для любой отдельной страницы свои SEO-параметры, чтобы ссылка выглядела так:

Ссылка с настроенным заголовком, описанием и картинкой

Заголовок, описание и картинка для встраивания обычно имеют префикс OG:, поэтому если где-нибудь на других платформах вы видели "OG:description", то речь как раз шла об описании для мессенджеров.

Чтобы настроить эти параметры, нажмите кнопку настроек и откройте настройки SEO

Настройки заголовка и описания

Чтобы настроить OG:image, добавьте блок "аватар"

Блок аватар, который настроит вам og:image

Теперь вставьте ссылку на свою страницу в @WebpageBot и он обновит кэш на страницу в Telegram, после чего она будет встраиваться красиво. После этого можете скрыть блок с аватаром, чтобы он не мешался

Как убирать отступы через CSS в Taplink

2024-04-05T06:53:36.868Z

Видео:

Расширение, в котором я писал код, чтобы он автоматически применился: https://chromewebstore.google.com/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb

После написания кода вы должны вставить его в HTML-блок таплинка, обернув ваш код в теги <style></style>

То есть, если у вас получился код

.b-1488228 {
padding: 0;
}

То в таплинковский блок вы должны вставить

<style>
.b-1488228 {
padding: 0;
}
</style>

Картинки GetCourse на тренингах

2024-04-02T13:39:26.919Z

Если у вас стоял старый код для картинок, вырежьте его и вставьте на его место:

$('.stream-table tr').each(function(){
let image = $(this).attr('data-training-image');
let $tr = $(this);
if (image!==undefined && image !== '') {
$tr.find('a').prepend(`<img src="${image}" />`);
}
})

Этот код установит картинки на тренинги. Если вы вставляете код не внутрь другого готового кода, оберните код в обработчик ожидания загрузки страницы, чтобы получилось

$(()=>{
$('.stream-table tr').each(function(){
let image = $(this).attr('data-training-image');
let $tr = $(this);
if (image!==undefined && image !== '') {
$tr.find('a').prepend(`<img src="${image}" />`);
}
})
})

Также вы можете использовать мою вариацию, которая будет также убирать ограничение на размер картинки

$(()=>{
function removeThumbnail(string) {
  const aPart = string.match(/\/a\/\d+\/sc\/\d+/);
  const hPart = string.substring(string.indexOf('thumbnail') + 10, string.indexOf('/s/'));
  return `/fileservice/file/download${aPart}/${hPart}`;
}
 $('.stream-table tr').each(function(){
        let image = $(this).attr('data-training-image');
        let $tr = $(this)
        if (image!==undefined&&image.includes('thumbnail')) {
            $tr.find('a').prepend(`<img src="${removeThumbnail(image)}" />`)
        }
    })
})

В этом случае от вас потребуется оптимизировать все картинки перед загрузкой, поскольку не оптимизированная картинка может ухудшить скорость загрузки, однако вы сможете получить картинки оригинального качества.

Спасибо за помощь в составлении кода @Alexandr_Nagiyan

Оптимизировать картинки следует, например, в сервисе https://squoosh.app/

Уникальная стилизация секций

2024-03-27T06:22:32.759Z

Видеоинструкция:

Код для накидывания классов (должен быть внизу):

<script>
Array.from(document.querySelectorAll('.add-class')).map((element) => {
  let classToAdd = element.getAttribute('data-class');
  element.closest('.blocks-section').classList.add(classToAdd)
  })
  Array.from(document.querySelectorAll('.collapse-text-inner')).map((element) => {
  element.innerHTML = element.textContent
  })
</script>

Блок, который нужно вставлять в секцию для задания уникального класса:

<div class="add-class" data-class="two-images"></div>

То, что написано в кавычках в data-class — это название вашего будущего уникального идентификатора вашей секции

Перед вставкой кодов стилизации убедитесь, что у вас есть теги <style>

Например, в уроке я показал код стилизации:

.columns-block .section-main>div>div {
  display:grid;
  grid-template-columns:20% 80%;
}


.two-images .section-main>div>div {
  display:grid;
  grid-template-columns:30% 70%;
}

Этот код написан на языке разметки CSS. Чтобы он заработал в таплинке, создайте html-блок и вставьте туда код, обособив тегами <style> (обратите внимание на их точное написание). Пример кода ниже, который должен вставляться в HTML-блок.

Такой принцип работает со всеми стилями. Если вы хотите копировать CSS-код с фигмы, точно также добавьте эти теги <style>, чтобы браузер понимал, что это код стилизации

<style>
.columns-block .section-main>div>div {
  display:grid;
  grid-template-columns:20% 80%;
}


.two-images .section-main>div>div {
  display:grid;
  grid-template-columns:30% 70%;
}
</style>

Бесплатные коды и уроки по Taplink в канале https://t.me/taplinkbest Бесплатная помощь по кодам в чате канала: https://t.me/taplinkbestchat (на YouTube и в Teletype не отвечаю).

Разбор нового дизайна страницы оплаты GetCourse

2024-02-29T08:37:46.269Z

Предисловие

Бывало ли в вашей жизни такое, что вы думаете о работниках какой-то профессии, что они что-то не дорабатывают/недоделывают/некомпетентны, но стоит вам погрузиться в эту сферу, как ваше мнение меняется на «так вот оно как оказывается?»

В моем опыте такое было с модераторами форумов. Я, в виду тогда еще юношеского максимализма, «сопротивлялся цензуре», «боролся за правду», но лишь попробовав для себя стать модератором форума увидел, какие у модераторов были рамки возможностей в виду самоуважения, правил начальства и других деталей, которых я не мог увидеть, и с которыми модераторам нужно было уживаться

Похожая ситуация и с разработками. Мы можем ругать разработчиков за кривой интерфейс, но в реальности они, возможно, работали по четкому тз, проектировщик ui работал по четкому тз, а заказчик, например, тогда имел другое видение платформы и имел ограниченность в средствах, но всячески старался сделать как лучше. Мы можем сетовать на то, что сервера упали, но можем даже не догадываться, что упали они из-за каких-нибудь санкций или пролития уборщицей в серверной супа на компьютеры, а разработчики и владельцы платформы в этом не виноваты. Все выше сказанное не относится конкретно к геткурсу, но суть в том, что ситуации бывают разные и не всегда людям со стороны может быть видна полная картинка для объективной оценки

GetCourse писался довольно давно, писался под конкретные задачи и сменил кучу подрядчиков. Вполне логично, что он написан на старых библиотеках, в некоторых разделах код писался как будто бы с целью потроллить любого, кто его посмотрит, однако это данность, которая присуща любому быстро растущему проекту.

Что куда важнее, так это то, что платформы делают, видя свои слабые стороны. Когда в конструкторе Taplink я пожаловался на обилие ошибок в консоли, разработчики платформы просто сделали правку, которая оборачивает весь пользовательский код в try, чтобы ошибки писались не красным шрифтом в разделе ошибок, а белым нейтральным в логах. У пользователей таплинка, при этом, поломались все скрипты, использующие глобальную область видимости 👍

О новом визуале GC

GetCourse, как уже многим известно, уже множество раз анонсировал визуальную переработку геткурса. Первым разделом, который я смог пощупать, стала страница оплаты.

Важные моменты:

Новое оформление можно будет включать нативно с помощью кнопочек. Никакого кода или конструктора.
Старый код никак не будет задет. Если у вас стояли интеграции, скрипты для отображения уникального диза или скрипты скрытия\показа оплат по предложениям, им ничего не грозит. Так GetCourse решил проблему обратной совместимости
Возможности нативной кастомизации будут добавляться
Геткурс всегда готов идти навстречу адекватным предложениям, сопутствующим интересам платформы. Однако буду откровенен: если ваша идея сможет привести к созданию конкурента геткурсу прямо внутри их продукта, то такое предложение, очевидно, отвергнут.

Страница оплаты с новым видом

Ранее GetCourse уже начал реализовывать предложенную мной идею сделать возможность продавать шаблоны оформления как это сделано в некоторых других площадках: там можно купить оформление от разработчика "Вася Пупкин", установить в школу в один клик и пользоваться новым функционалом и видеть обновленный интерфейс без лишней мороки и связи напрямую со всякими разработчками-фрилансерами\студиями\самоучками-энтузиастами, была введена возможность централизованого включения тем для всего аккаунта или конкретных разделов тренингов.

В дальнейшем помимо вида страницы оплаты на скриншоте появятся новые виды, каждый из которых можно выбрать и донастроить. Возможно, что разработчиками некоторых шаблонов будут люди не из команды GetCourse, что позволит создать конкуренцию и заставит разработчиков лучше стараться, чтобы выделиться на фоне других.

Под капотом

Шаблон в редакторе

Дополнительные настройки

Возможности доработки

Скрипты новой страницы наконец-то написаны в IDE со сборщиком, что не может не радовать. Классы на русском и закомментированные todo тут больше не живут. Таким образом, переопределять виджеты геткурса теперь проблематичнее, однако это и раньше нужно было только для исправления багов в старом коде старой страницы оплаты от прошлого разработчика.

Скриншот js-ки, взятой с обработчика кнопки

Добавочный js, который не вмешивается в работу самой страницы, ставить никто не помешает

По части CSS возможности стилизации стали значительно проще:

HTML-структура новой страницы оплаты

Благодаря унификации платежных блоков стилизовать страницу оплаты будет проще и быстрее. Если в старой платежной странице были моменты, где код стилизации писался в атрибуты элемента и это приводило к досадным визуальным багам типа лишних отступов, уродливых полосок и картинок, то теперь можно будет натянуть общий шаблон внешнего вида и не дорабатывать страницу оплаты каждый раз, когда в платежный модуль добавили новую платежку

Игого

GetCourse, во всяком случае в сфере лично моих интересов, движется по очень правильному пути. Он сможет дать сообществу новый дизайн, не обесценив работу разработчиков и не поломав школы. Если у школы уже был дизайн и структура, на которую школа затратила средства, то с вводом нового вида и функциональности ресурсы этой школы не обесцениваются (они всё также будут иметь свои уникальные функции, просто кто-то среди новых и не оформленных школ бесплатно обновятся).

Движущиеся градиенты за 5 сек в Taplink

2024-02-07T09:00:09.896Z

Все коды | Сотрудничество | Чат поддержки

Пример работы: https://tap.one-way.dev/p/da0c0d/

Видеоинструкция:

Код в примере:

<style>
font[color="#dee2e6"] {
  animation: shine 5s linear infinite;
 background: linear-gradient(270deg, rgba(5, 204, 231, 0.87) 1.5%, rgba(237, 0, 0, 0.45) 24.65%, #19AF00 49.29%, rgba(237, 0, 0, 0.46) 75.86%, rgba(5, 204, 231, 0.87) 100%);
  background-size: 200% auto;
    background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

font[color="#fff4e6"] {
   animation: shine 5s linear infinite;
 background: linear-gradient(270deg, rgba(5, 204, 231, 0.87) 1.5%, rgba(237, 0, 0, 0.45) 24.65%, #19AF00 49.29%, rgba(237, 0, 0, 0.46) 75.86%, rgba(5, 204, 231, 0.87) 100%);
  background-size: 200% auto;
    background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes shine {
    to {
      background-position: 200% center;
    }
  }
</style>