js css query var ready to work

css/workspace.css

@@ -0,0 +1,18 @@
+<style>
+#username {
+	width:calc(100% - 130px);
+}
+
+#step1{
+	width: 110px; 
+	float:right;
+}
+
+div.verification, div.details, div.success {
+	height:100px; 
+	background:lightgrey; 
+	margin-top:10px; 
+	margin-bottom:10px;
+	color:white;
+}
+</style>

html/workspace.html

@@ -0,0 +1,15 @@
+
+
+<input id="username" type=text name="user" placeholder="input name">
+<button id="step1"> next </button>
+<div class="verification"> 
+verification 
+</div>
+
+<div class="details"> 
+details 
+</div>
+
+<div class="success"> 
+success 
+</div>

js/token.js

@@ -0,0 +1,6 @@
+(function ($) {
+    $(function () {
+    	$('#test').html("def");
+    	console.log("called");
+    });
+})(jQuery);

member.php

@@ -16,9 +16,72 @@ namespace Member;
 require_once (ABSPATH . 'wp-includes/pluggable.php');
 
 class Member{
+    private $token = "";
+    private $nonce = ""; 
+    
     public function __construct() {
+        add_action('wp_enqueue_scripts', array($this, 'register_js_css'), 99);
         
+        add_shortcode( 'mm_workspace', array($this, 'shortcode_workspace'));
+        add_shortcode( 'mm_token', array($this, 'shortcode_token'));
+        
+        // hook add_rewrite_rules function into rewrite_rules_array
+        add_filter('rewrite_rules_array', array($this,'my_add_rewrite_rules'));
+        // hook add_query_vars function into query_vars
+        add_filter('query_vars', array($this,'add_query_vars'));
+    }
+    
+    public function shortcode_workspace($attrs) {
+        if ($this->token != "" )
+            return "";
+        $str = file_get_contents(plugin_dir_path(__FILE__) . "/html/workspace.html");
+        $css = file_get_contents(plugin_dir_path(__FILE__) . "/css/workspace.css");
+        
+        return $css . "\n" . $str;  
+    }
+    
+    public function shortcode_token($attrs) {
+        $login = get_query_var( 'token' );
+        return "<h1 id='test'> $login </h1>";
+    }
+    
+    
+
+    //for customer profile and broker trans
+    public function my_add_rewrite_rules($aRules) {
+        $aNewRules = array(
+            'medal/([^/]+)/?$' => 'index.php?pagename=medal&token=$matches[1]',
+        );
+        $aRules = $aNewRules + $aRules;
+        return $aRules;
+    }
+    
+    //
+    //query var
+    public function add_query_vars($aVars) {
+        $aVars[] = "token"; // represents the receiption of this medal
+        return $aVars;
+    }
+    
+    
+    public function register_js_css() {
+        $this->nonce = wp_create_nonce('medal');
+        $this->token = get_query_var( 'token' );
+        $this->register_medal_js();
+    }
+    
+    private function register_medal_js()
+    {
+        //wp_enqueue_style( 'mm', plugins_url('css/workspace.css', __FILE__));
+        wp_enqueue_script('mm', plugins_url('js/token.js', __FILE__), array('jquery', 'jquery-ui-core'));
+        wp_localize_script( 'mm', 'mm', array(
+            'ajax_url' => admin_url( 'admin-ajax.php' ),
+            'nonce'    => $this->nonce, // It is common practice to comma after
+            'display_name' => wp_get_current_user()->display_name,
+            'anonymous' => !is_user_logged_in(),
+        ) );
     }
+    
 }
 
 $mm = new Member();